Customization

[Fmdpa]

How do you customize the web page's interface so certain text will turn automatically turn into an image. For example turning

:)

into...:)Another thing I wanted to know is how to create pop-up windows that are not the default Windows interface?

[chibineku]

To turn text into images live as people type, you'd need to run input through a regular expression in javascript and turn any matched combinations into images. For example, say your basic smiley is in images/smiley.gif and you want it to occur wherever a colon comes right before a closing bracket, and your text input is in a div:Message box code:

<div id="text" style="width: 100%; padding=10em; height: 5em;" contentEditable="true" onblur="checkInput(this)"></div>

java script:

function checkInput(element) {var text = element.innerHTML;alert(text);newText = text.replace(":)", "<img src='images/smiley.gif' width='20px' height='20px' alt='happy' />");element.innerHTML = newText;}

I haven't tested that, but it should work I think. You can add as many different styles as you want by just duplicating the newText = line and changing the first "" to whatever characters you want to match.It works best when fired onblur, because if you do it onkeyup, the cursor starts at the begining of the input area again and you type backwards, effectively.To do it with PHP AFTER someone hits submit is the same idea - regex the input and replace reserved keystroke combinations with images.

[Fmdpa]

Thanks Chibineku!

[chibineku]

You're welcome

[Fmdpa]

That wasn't all I wanted to know, though. For example, when I use the <code> tags on regular HTML, the text is just displayed as "computer font". But when you use the <code> tags on here (actually

) is puts the code in a special box that is part of the custom website interface. How is that done?

[Synook]

You could do it using CSS - for example, you could specify a border, background color etc. for the <code> tag:

code {	border:1px dashed #336;	background-color:#FFF;}

However, this website actually parses the BBCode server-side and replaces it with custom markup.

[Fmdpa]

You've gotta love CSS! Sometimes you just have to state the obvious for me to see. Another one I've wanted to know would be the custom pop-up windows. One example that comes to mind is your portfolio website preview: http://aspektas.com/portfolio/?project=roundeddesign_lte4

[Synook]

I just used the (very popular) Lightbox script.

[Fmdpa]

Thanks Synook!