Please everyone, all I need is a tutorial or a push toward the right direction. Am creating a web app using jsf in java. Thanks.

Ehen?

oga sir, the title of your thread does not flow with the post you have up there. what exactly do you need? a jsf tutorial or how to insert/show smileys in an html document with javascript?

^^^Na why i talk ehen be that, the post never complete.

olucurious: oga sir, the title of your thread does not flow with the post you have up there. what exactly do you need? a jsf tutorial or how to insert/show smileys in an html document with javascript?

No vex abeg.

I need help on how to insert smileys in a html document using javascript. Especially in an outputText element. Like the four smiley's above.

davroca16:

No vex abeg.

I need help on how to insert smileys in a html document using javascript. Especially in an outputText element. Like the four smiley's above.

They'r mostly refered to as bbcodes. And using javascript to implement that kind of thing may be expensive unless your webpage is in pure html format. If its a server script, its much convinient to add the bbcode symbol parser in the server side script. Now u may ask why i said using js is only best on pure html pages?? Here-

the most convinient way to implement bbcodes is the use of symbols. E.g, if a user wants to insert a smiley in his post, he may type '/(/'. Depending on your symbol of choice for a particular smiley. Now the user submits d post. Now when displayin d post to d user, you tell js to find the symbols for smileys and replace them with their coresponding smiley pic locations.
I.e '/(/' = 'http://site.com/smiley_folder/smiley.gif'.
And then wrap the img tag markup appropriately around the image address.

But the de-merit is that this wil cause sily segregated page requests. Why? U rmmba d browser downloaded the smiley symbols and not the actual pics, so when js refines d symbols to img tags, the browser wil nw hav to make seperate requests for all the smileys on the page after d page has bn downloaded causing the page to display first and smileys causing loading delays. Nw imagine a page wif 200 smileys...

^^^ you can have all smiley in one jpeg file, then use css media query to pick the one you want. this will cause the browser to download only one smileys.jpeg file and use css to manipulate the positions

olyboy: ^^^

@olyboy specifically dhtml, thanks but can please give me a tutorial or a link to where I can get a tutorials of it.

cyrielo: ^^^ you can have all smiley in one jpeg file, then use css media query to pick the one you want. this will cause the browser to download only one smileys.jpeg file and use css to manipulate the positions

Are you saying css can be used to insert smiley image in an output text?

davroca16:

Are you saying css can be used to insert smiley image in an output text?

yea

cyrielo: yea

tutorials pls or kindly share me a link to any tutorial on it.

i don't know of any tutorial out there but here is the logic. when a user submits a post replace the smile code with a div that has an id that describe the smiley code, use css to add a background image that describe the smiley code to the div. You can have loads of images but that would be inefficient. u can merge all smiley images into one JPEG file or any other format. you can achieve that with corel draw or photoshop or any other image Software. then while setting background image also set background-position to pick specific icon from the single image file

cyrielo: ^^^ you can have all smiley in one jpeg file, then use css media query to pick the one you want. this will cause the browser to download only one smileys.jpeg file and use css to manipulate the positions

dont u think thats a little too advanced for the guy?

Olyboy16:
dont u think thats a little too advanced for the guy?

Nope it fairly easy and straight forward. visit w3school in the css section look for image sprite. there is a tutorial there

Thanks peeps, for trying to help me. I figured out a way of doing it with java, and its sooo easy.

Its simple:

smile = smile.replace("symbol","<img src=\"resources/images/smiley.png"\ />" ;

The above block of code uses the replace method of the string class to replace the smiley symbol with the smiley. It has two parameters; the first parameter collects the smiley symbol to. Be searched for, and the second one collect the img element of an xhtml document that specifies the directory of the image.