populating smilies

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • omerbutt
    Contributor
    • Nov 2006
    • 638
    #1

    populating smilies

    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
    [code=javascript]
    <script type="text/javascript" language="javas cript">
    var prev="";
    function emticn(){
    if(document.get ElementById('sc rap').value!="" ){
    var txt=document.ge tElementById('s crap').innerHTM L;
    prev=txt;
    var replaced=prev.r eplace(":)","<i mg src='goggle.gif ' alt=':)' />");
    document.getEle mentById('scrap ').innerHTML=re placed;
    }

    }
    </script>
    [/code]
    [code=html]
    <body onload="documen t.getElementByI d('scrap').focu s();">
    Original:<texta rea rows="7" onkeyup="emticn ();" name="scrap" id="scrap"></textarea>
    <div id="resdiv"></div>
    </body>
    [/code]
    the error code that i am recieving is
    "unknown runtime error on line 13 "
    which is the javascript line [code=javascript]
    document.getEle mentById('scrap ').innerHTML=re placed;
    [/code]
    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
    [code=html]
    <img src='goggle.gif ' alt=':)'>
    [/code]
    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
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      Use execCommand with iframes. See the test page for an example.

        Comment

        • pronerd
          Recognized Expert Contributor
          • Nov 2006
          • 392
          #3
          I am guessing part of the problem is that this line :
          Code:
          .innerHTML=replace  d;
          Should be :
          Code:
          .innerHTML=replaced;

            Comment

            • omerbutt
              Contributor
              • Nov 2006
              • 638
              #4
              Originally posted by pronerd
              I am guessing part of the problem is that this line :
              Code:
              .innerHTML=replace  d;
              Should be :
              Code:
              .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
              [code=html].innerHTML=repl aced[/code] :)

                Comment

                • omerbutt
                  Contributor
                  • Nov 2006
                  • 638
                  #5
                  Originally posted by acoder
                  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

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      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.

                        Comment

                        • omerbutt
                          Contributor
                          • Nov 2006
                          • 638
                          #7
                          Originally posted by acoder
                          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"
                          [code=html]
                          <div id="resdiv"></div>
                          [/code]
                          i just omitted that part of code and changed the line
                          [code=javascript]
                          document.getEle mentById('resdi v').innerHTML=r eplaced;
                          TO
                          document.getEle mentById('scrap ').innerHTML=re place d;
                          [/code]
                          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

                            Comment

                            • acoder
                              Recognized Expert MVP
                              • Nov 2006
                              • 16032
                              #8
                              That's probably because you have ":)" as an alt attribute for the emoticon, so that is what's being replaced!

                                Comment

                                • omerbutt
                                  Contributor
                                  • Nov 2006
                                  • 638
                                  #9
                                  Originally posted by acoder
                                  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

                                    Comment

                                    • acoder
                                      Recognized Expert MVP
                                      • Nov 2006
                                      • 16032
                                      #10
                                      No, I meant the text contains :) when you replace :) with an emoticon. See this code:[code=html]<img src='goggle.gif ' alt=':)'>[/code]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.

                                        Comment

                                        • omerbutt
                                          Contributor
                                          • Nov 2006
                                          • 638
                                          #11
                                          Originally posted by acoder
                                          No, I meant the text contains :) when you replace :) with an emoticon. See this code:[code=html]<img src='goggle.gif ' alt=':)'>[/code]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
                                          [code=javascript]
                                          <script type="text/javascript" language="javas cript">
                                          function stripper(str){
                                          var arraysigns=new Array();
                                          var arrayname=new Array();
                                          arraysigns=["8)","*)",":@", ":#",":o",":e", ":s","*p","-p",":)",":D",": p",":$",":(",": w",":*",":x" ,":-","8x","8|",":6 ",":&","8*","$) ","'(","g("];
                                          arrayname=["goggle.gif","l ove.gif","hot.g if","sad.gif"," shock.gif","wac ked.gif","pisse d.gif","horny.g if","dizzy.gif" ,"smile.gif","h appyteeth.gif", "tounge.gif","s hy.gif","disap. gif","wot.gif", "kiss.gif","shu tup.gif","holid ay.gif","army.g if","nered.gif" ,"devil.gif","s adangle.gif","k issdead.gif","m oney.gif","mone y.gif","swet.gi f"];
                                          var stringlength=st r.length;
                                          for(var j=0;j<arraysign s.length;j++){
                                          for(var k=0;k<stringlen gth;k++){
                                          str=str.replace (arraysigns[j],"<img src='images/"+arrayname[j]+"'>");
                                          }
                                          }
                                          return str;
                                          }
                                          var replaced="";
                                          function emticn(){
                                          if(document.get ElementById('sc rap').value!="" ){
                                          var txt=document.ge tElementById('s crap').innerHTM L;
                                          replaced=stripp er(txt);
                                          document.getEle mentById('resdi v').innerHTML=r eplaced;
                                          }
                                          }
                                          [/code]
                                          [code=html]
                                          <body onload="documen t.getElementByI d('scrap').focu s();">
                                          <form name="emoticon" id="emoticon" method="post">
                                          <tr><td align="center" valign="top">Or iginal:</td><td align="center" valign="top"><t extarea cols="20" rows="7" onkeyup="emticn ();" name="scrap" id="scrap"></textarea></td></tr>
                                          <tr><td><div id="resdiv"></div></td></tr>
                                          </form>
                                          </body>

                                          [/code]

                                            Comment

                                            • acoder
                                              Recognized Expert MVP
                                              • Nov 2006
                                              • 16032
                                              #12
                                              Use value instead of innerHTML and your code should work - I see you've removed the alt.

                                                Comment

                                                Previous template Next
                                                Working...