By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,453 Members | 961 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,453 IT Pros & Developers. It's quick & easy.

populating smilies

omerbutt
100+
P: 638
hi there i am making a scrap book application in which i have to populate the smilies as soon as they are written now i am using the textarea to write the input text for the scrap currently i am trying to just achieve it so i am using only 2 smilies but i am not getting it right here is my code
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" language="javascript">
  2.     var prev="";
  3.     function emticn(){
  4.         if(document.getElementById('scrap').value!=""){
  5.         var txt=document.getElementById('scrap').innerHTML;
  6.         prev=txt;
  7.         var replaced=prev.replace(":)","<img src='goggle.gif' alt=':)' />");
  8.         document.getElementById('scrap').innerHTML=replaced;
  9.         }
  10.  
  11.     }
  12. </script>
  13.  
Expand|Select|Wrap|Line Numbers
  1. <body onload="document.getElementById('scrap').focus();">
  2.     Original:<textarea rows="7" onkeyup="emticn();" name="scrap" id="scrap"></textarea>
  3.     <div id="resdiv"></div>
  4. </body>
  5.  
the error code that i am recieving is
"unknown runtime error on line 13 "
which is the javascript line
Expand|Select|Wrap|Line Numbers
  1. document.getElementById('scrap').innerHTML=replaced;
  2.  
which i think is because i am using innerHTML to populate the image tag inside the textarea and if i use the property
.value instead of ".innerHTML"
then it does not give me error but infact it does not show me the image but he source code of that image that is
Expand|Select|Wrap|Line Numbers
  1. <img src='goggle.gif' alt=':)'>
  2.  
can somebody help me in this regard that what approach should i use and if ia m going he right way to accomplish this thing
regards,
omer
Apr 22 '08 #1
Share this Question
Share on Google+
11 Replies


acoder
Expert Mod 15k+
P: 16,027
Use execCommand with iframes. See the test page for an example.
Apr 22 '08 #2

Expert 100+
P: 392
I am guessing part of the problem is that this line :
Expand|Select|Wrap|Line Numbers
  1. .innerHTML=replace  d;
Should be :
Expand|Select|Wrap|Line Numbers
  1. .innerHTML=replaced;
Apr 22 '08 #3

omerbutt
100+
P: 638
I am guessing part of the problem is that this line :
Expand|Select|Wrap|Line Numbers
  1. .innerHTML=replace  d;
Should be :
Expand|Select|Wrap|Line Numbers
  1. .innerHTML=replaced;
it is not an error it is just a typo mistake here on the forum , whereas in my code it is written like
Expand|Select|Wrap|Line Numbers
  1. .innerHTML=replaced
:)
Apr 22 '08 #4

omerbutt
100+
P: 638
Use execCommand with iframes. See the test page for an example.
:( aint getting any thing from here its too messy :( can anyone guide me according to the code i have written
regards,
omer
Apr 22 '08 #5

acoder
Expert Mod 15k+
P: 16,027
Well, it's not going to work with the code you've got.

You could, however, create a preview pane (e.g. a div) which could display the smilies that you type in the textarea.
Apr 22 '08 #6

omerbutt
100+
P: 638
Well, it's not going to work with the code you've got.

You could, however, create a preview pane (e.g. a div) which could display the smilies that you type in the textarea.
yeah ihave done that already and for that same purpose i have made that "resdiv"
Expand|Select|Wrap|Line Numbers
  1. <div id="resdiv"></div>
  2.  
i just omitted that part of code and changed the line
Expand|Select|Wrap|Line Numbers
  1. document.getElementById('resdiv').innerHTML=replaced; 
  2.       TO 
  3. document.getElementById('scrap').innerHTML=replace  d;
  4.  
because i wanted to populate the emoticons in the text field but it doesnot seem to be possible, but on the other hand if you see my javascript code there is still a problem in it even if i use the div for the preview,it just makes each emoticon work once means,
if i enter :) for the first time then it is ok,it populates the icon for this smiley but if i again write :) it shows it as is does not populate it again same is the case for all other smilies i hope i amnot confusing you,
thanks for any help in advance,
regards,
omer
Apr 23 '08 #7

acoder
Expert Mod 15k+
P: 16,027
That's probably because you have ":)" as an alt attribute for the emoticon, so that is what's being replaced!
Apr 23 '08 #8

omerbutt
100+
P: 638
That's probably because you have ":)" as an alt attribute for the emoticon, so that is what's being replaced!
nah em sorry that isnt it i have tried it too it will go to the alt=':)' only if the image is not found or loaded,that didnt solved the problem
Apr 23 '08 #9

acoder
Expert Mod 15k+
P: 16,027
No, I meant the text contains :) when you replace :) with an emoticon. See this code:
Expand|Select|Wrap|Line Numbers
  1. <img src='goggle.gif' alt=':)'>
The alt attribute has the :) contained within it. When you replace ":)", it may be replacing the alt text rather than the second ":)".

Can you show some demonstrable code which can be tested.
Apr 23 '08 #10

omerbutt
100+
P: 638
No, I meant the text contains :) when you replace :) with an emoticon. See this code:
Expand|Select|Wrap|Line Numbers
  1. <img src='goggle.gif' alt=':)'>
The alt attribute has the :) contained within it. When you replace ":)", it may be replacing the alt text rather than the second ":)".

Can you show some demonstrable code which can be tested.
no it wasnt doing anything like that i was doing it the wrong way , idid it today write as i desired here watch this code
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" language="javascript">
  2.     function stripper(str){
  3.         var arraysigns=new Array();
  4.         var arrayname=new Array();
  5.         arraysigns=["8)","*)",":@",":#",":o",":e",":s","*p","-p",":)",":D",":p",":$",":(",":w",":*",":x",":-","8x","8|",":6",":&","8*","$)","'(","g("];
  6.         arrayname=["goggle.gif","love.gif","hot.gif","sad.gif","shock.gif","wacked.gif","pissed.gif","horny.gif","dizzy.gif","smile.gif","happyteeth.gif","tounge.gif","shy.gif","disap.gif","wot.gif","kiss.gif","shutup.gif","holiday.gif","army.gif","nered.gif","devil.gif","sadangle.gif","kissdead.gif","money.gif","money.gif","swet.gif"];
  7.         var stringlength=str.length;
  8.         for(var j=0;j<arraysigns.length;j++){
  9.             for(var k=0;k<stringlength;k++){
  10.                 str=str.replace(arraysigns[j],"<img src='images/"+arrayname[j]+"'>");
  11.                             }
  12.         }
  13.         return str;
  14.     }
  15.     var replaced="";
  16.     function emticn(){
  17.         if(document.getElementById('scrap').value!=""){
  18.             var txt=document.getElementById('scrap').innerHTML;
  19.             replaced=stripper(txt);
  20.             document.getElementById('resdiv').innerHTML=replaced;
  21.         }
  22.     }
  23.  
Expand|Select|Wrap|Line Numbers
  1. <body onload="document.getElementById('scrap').focus();">
  2.     <form name="emoticon" id="emoticon" method="post">
  3.         <tr><td align="center" valign="top">Original:</td><td align="center" valign="top"><textarea cols="20" rows="7" onkeyup="emticn();" name="scrap" id="scrap"></textarea></td></tr>
  4.         <tr><td><div id="resdiv"></div></td></tr>
  5.     </form>
  6. </body>
  7.  
  8.  
Apr 23 '08 #11

acoder
Expert Mod 15k+
P: 16,027
Use value instead of innerHTML and your code should work - I see you've removed the alt.
Apr 23 '08 #12

Post your reply

Sign in to post your reply or Sign up for a free account.