Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Need popup window to add text to parent window text field

    Hey there everybody!

    I'm learning javascript, and I am having trouble figuring out how to do this. Maybe you guys can help me out.

    What I need is for my main page to have a text field. Above the text field there should be a set of images for bold, italics, underline, etc; when you click on them it inserts the html code <b></b> at the cursor point.

    Next I want there to be a link, that when clicked will open a popup box with smileys. When you click on one of the smiley images it should insert the smiley code (example :smile: ) into the parent window text field. And would it be possible to make that work with pages of emotes? Or perhaps a second popup window?

    I hope I explained that without it sounding confusing. I would really appreciate any help.

    Here is my basic code, it does not include a popup code however.
    Code:
    <html>
    <script type="text/javascript">
    function insert(el,ins) {
    window.lstText={};
        if (el.setSelectionRange){
            el.value = el.value.substring(0,el.selectionStart) + ins + el.value.substring(el.selectionStart,el.selectionEnd) + el.value.substring(el.selectionEnd,el.value.length);
        }
        else if (document.selection && document.selection.createRange) {
            el.focus();
            var range = document.selection.createRange();
            range.text = ins + range.text;
        }
    }
    </script>
    <body>
    <form>
    
    
    <textarea rows="20" cols="100" name="txt1" onfocus="window.lstText=this;">
    This is sample text, click anywhere in here then
    choose on of the buttons above to see text inserted.
    </textarea><br /><br />
    <img src="http://i570.photobucket.com/albums/ss141/vwcorrado/Docs_smiley.jpg" onclick="insert(window.lstText,'hello')">
    
    <input type="button" value="hi" onclick="insert(window.lstText,'hi')">
    <br />
    </form>
    </body>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Maybe you should not re-invent the wheel?

    http://ckeditor.com/

    (Yes, if you read the docs, you can easily add your own smileys to the set that comes with it.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question

    Quote Originally Posted by Old Pedant View Post
    Maybe you should not re-invent the wheel?

    http://ckeditor.com/

    (Yes, if you read the docs, you can easily add your own smileys to the set that comes with it.)
    Thanks for the link, but I would like to write the code myself, not with an editor.
    Any other way I can learn how to code this?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Well, if you can insert text at the desired spot, you can insert a smiley.

    It's just a matter of getting the right HTML *for* the smiley and inserting that. Whether that "right HTML" is just text as in :) or it's an <img> tag.

    The easiest way to do this from a popup is to have the code still on your original page do the actual insert. Just have a function that the popup calls do the work.

    That is, from the popup, you would do something like
    Code:
         opener.insertSmiley('<img src="smiley1.jpg">');
    or
         opener.insertSmiley(":)");
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question

    Quote Originally Posted by Old Pedant View Post
    Well, if you can insert text at the desired spot, you can insert a smiley.

    It's just a matter of getting the right HTML *for* the smiley and inserting that. Whether that "right HTML" is just text as in or it's an <img> tag.

    The easiest way to do this from a popup is to have the code still on your original page do the actual insert. Just have a function that the popup calls do the work.

    That is, from the popup, you would do something like
    Code:
         opener.insertSmiley('<img src="smiley1.jpg">');
    or
         opener.insertSmiley(":)");
    Thanks for that, I thought it would use opener. But I'm still having some trouble and not sure what I'm doing wrong. I'm not sure if there is something wrong with my original code or if I am doing the coding for the popup window wrong.

    So here is what I have:
    Code:
    <html>
    <script type="text/javascript">
    function insert(el,ins) {
    window.lstText={};
        if (el.setSelectionRange){
            el.value = el.value.substring(0,el.selectionStart) + ins + el.value.substring(el.selectionStart,el.selectionEnd) + 
    
    el.value.substring(el.selectionEnd,el.value.length);
        }
        else if (document.selection && document.selection.createRange) {
            el.focus();
            var range = document.selection.createRange();
            range.text = ins + range.text;
        }
    }
    </script>
    <body>
    <form>
    
    
    <textarea rows="20" cols="100" name="txt1" onfocus="window.lstText=this;">
    This is sample text, click anywhere in here then
    choose on of the buttons above to see text inserted.
    </textarea><br /><br />
    <img src="http://i130.photobucket.com/albums/p252/TheForsakenPrayer/Graphics/ADA/smile.png" onclick="insert(window.lstText,':)')">
    
    <img src="http://i130.photobucket.com/albums/p252/TheForsakenPrayer/Graphics/ADA/sad.png" onclick="insert(window.lstText,':(')">
    <br />
    </form>
    
    <script type="text/javascript">
    // Popup window code
    function newPopup(url) {
    	popupWindow = window.open(
    		
    
    url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
    }
    </script>
    <a href="JavaScript:newPopup('http://datools.t35.com/deviantarttool/Smiley%20Insert%20Popup.html');">Open a popup window</a>
    </body>
    </html>
    That is the parent window coding.

    And this is the pop up window code:
    Code:
    <html>
    <body>
    
    <script type="javascript">
    opener.insert(el,ins);
    </script>
    
    <form>
    <img src="http://i130.photobucket.com/albums/p252/TheForsakenPrayer/Graphics/ADA/smile.png" onclick="insert(window.lstText,':)')">
    
    <img src="http://i130.photobucket.com/albums/p252/TheForsakenPrayer/Graphics/ADA/sad.png" onclick="insert(window.lstText,':(')">
    </form>
    </body>
    </html>
    So my cursor disappears once I click on the pop up window, I don't know if that is a problem. Or maybe my javascript is all wrong. Any way you could take a look at it and see?

    Yes, I was just going to have clicking on a smiley insert ": )" <-that in html. I can get this to work on one window but not in a popup. Hope to get this working. I really appreciate your help.

  • #6
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post
    I suggest using a hidden div to contain all the smileys and then be shown when the user clicks the link to insert a smiley. In this way, the pop ups can be avoided and it is easier to code when everything runs in the same web window. Following is a simplest and straight forward approach to your question. You can play with it and create one in your own way. You will get a basic idea from this. Copy the code and save it as a web page and play with it.
    Code:
    <SCRIPT LANGUAGE="JavaScript">
    
    // This will add emoticon and whatever needed to be added to the box 
    function pop(emoticon){
    var textcontent=document.getElementById("blogbox").value;
    document.getElementById("blogbox").value = textcontent + " " + emoticon;
    document.getElementById("blogbox").focus();
    }
    
    </SCRIPT>
    
    <html>
    
    <textarea id="blogbox" cols="40" rows="5">Write Something..</textarea>
    <br/><br/>
    <!-- You can have this hidden and when user clicks the link, these can be displayed. You can have images or anything instead of buttons--!>
    <input type="button" value = ":)" onClick="pop(':)')" />
    
    <input type="button" value = ":(" onClick="pop(':(')" />
    
    <input type="button" value = ":D" onClick="pop(':D')" />
    
    <input type="button" value = ":0" onClick="pop(':0')" />
    
    <input type="button" value = "<b></b>" onClick="pop('<b></b>')" />
    
    </html>
    Last edited by yeiya; 12-29-2010 at 11:25 PM.

  • #7
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question

    Quote Originally Posted by yeiya View Post
    I suggest using a hidden div to contain all the smileys and then be shown when the user clicks the link to insert a smiley. In this way, the pop ups can be avoided and it is easier to code when everything runs in the same web window. Following is a simplest and straight forward approach to your question. You can play with it and create one in your own way. You will get a basic idea from this. Copy the code and save it as a web page and play with it.
    Code:
    <SCRIPT LANGUAGE="JavaScript">
    
    // This will add emoticon and whatever needed to be added to the box 
    function pop(emoticon){
    var textcontent=document.getElementById("blogbox").value;
    document.getElementById("blogbox").value = document.getElementById("blogbox").value + " " + emoticon;
    document.getElementById("blogbox").focus();
    }
    
    </SCRIPT>
    
    <html>
    
    <textarea id="blogbox" cols="40" rows="5">Write Something..</textarea>
    <br/><br/>
    <!-- You can have this hidden and when user clicks the link, these can be displayed. You can have images or anything instead of buttons--!>
    <input type="button" value = ":)" onClick="pop(':)')" />
    
    <input type="button" value = ":(" onClick="pop(':(')" />
    
    <input type="button" value = ":D" onClick="pop(':D')" />
    
    <input type="button" value = ":0" onClick="pop(':0')" />
    
    <input type="button" value = "<b></b>" onClick="pop('<b></b>')" />
    
    </html>
    Thanks for the reply. I was considering this, and may use it if I just can't find any other way. But my problem isn't hiding the smileys and having them appear. The reason I want to use a popup window is because there are over 200+ smileys, and having those all on one page would be unorganized and slow down connections. So using this method I would only display maybe ten smileys and still have a link to more smileys in which you could copy the codes.

    I was hoping I could figure out how to make the smileys in the popup menu click able and insert them into the main window. Like this on W3Schools: http://w3schools.invisionzone.com/in...editor_id=ed-0 But I may not be able to figure out.

    I really appreciate your help though, and I may use that method. Any other suggestions, you guys? Or am I plumb outta luck on this one? Sure wish I could understand Javascript better.

    Thanks everybody!
    Last edited by Zinnia-Aster; 12-29-2010 at 11:33 PM.

  • #8
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post
    Perhaps, this might help You.

    Main Window Code:

    Code:
    <SCRIPT LANGUAGE="JavaScript">
    
    function open_pop(){
    window.open('emot_box.htm','mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
    }
    
    </SCRIPT>
    
    <html>
    
    <textarea id="blogbox" cols="40" rows="5">Write Something..</textarea>
    <br/><br/>
    
    <input type="button" value = "OPEN" onClick="open_pop()" />
    
    </html>
    PopUp Window Named "emot_box.htm" in this case

    Code:
    <SCRIPT LANGUAGE="JavaScript">
    
    function pops(emoticon){
    textcontent=opener.document.getElementById("blogbox").value;
    opener.document.getElementById("blogbox").value = textcontent + " " + emoticon;
    
    }
    
    </SCRIPT>
    
    <html>
    
    <input type="button" value = ":(" onClick="pops(':(')" />
    
    <input type="button" value = ":D" onClick="pops(':D')" />
    
    <input type="button" value = ":0" onClick="pops(':0')" />
    
    <input type="button" value = "<b></b>" onClick="pops('<b></b>')" />
    
    <input type="button" value = "Close" onClick="window.close()" />
    
    </html>

  • Users who have thanked yeiya for this post:

    Zinnia-Aster (12-30-2010)

  • #9
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by yeiya View Post
    Perhaps, this might help You.

    Main Window Code:

    Code:
    <SCRIPT LANGUAGE="JavaScript">
    
    function open_pop(){
    window.open('emot_box.htm','mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
    }
    
    </SCRIPT>
    
    <html>
    
    <textarea id="blogbox" cols="40" rows="5">Write Something..</textarea>
    <br/><br/>
    
    <input type="button" value = "OPEN" onClick="open_pop()" />
    
    </html>
    PopUp Window Named "emot_box.htm" in this case

    Code:
    <SCRIPT LANGUAGE="JavaScript">
    
    function pops(emoticon){
    textcontent=opener.document.getElementById("blogbox").value;
    opener.document.getElementById("blogbox").value = textcontent + " " + emoticon;
    
    }
    
    </SCRIPT>
    
    <html>
    
    <input type="button" value = ":(" onClick="pops(':(')" />
    
    <input type="button" value = ":D" onClick="pops(':D')" />
    
    <input type="button" value = ":0" onClick="pops(':0')" />
    
    <input type="button" value = "<b></b>" onClick="pops('<b></b>')" />
    
    <input type="button" value = "Close" onClick="window.close()" />
    
    </html>
    THANK YOU! This is EXACTLY what I need. I tried it out and it works perfectly, it's so simple and easy to use too! I put in some images and created pages of emotes and it all works just the way I wanted it to. Wow!
    You have no idea how much I appreciate this. This code is going to help me out so much!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •