Javascript Info Popup on Highlight

Discussion in 'Javascript' started by yes_its_just_me@yahoo.com, Dec 17, 2006.

  1. Guest

    Hi, I've seen this effect on other sites, but I don't know how to do
    it. What I'm trying to do is enable the user to highlight a portion of
    text on a webpage, then click an "edit" button and a little window will
    popup with that highlighted text in an editable mode (or it could be
    the entire paragraph tag that the highlighted text sits in). Then I
    want them to be able to edit the text however they want, click a "save"
    button, and the text updates within the webpage. I know how to do the
    last part of this, but I don't know how to make the popup window work
    and include the highlighted text.

    Just a little background on this project: What I ultimately want to be
    able to do is let the website's owner be able to update the contents of
    her site whenever she wishes. This is what she wants because she
    doesn't know html and doesn't want to learn it. She also doesn't want
    to learn dreamweaver or any other wysiwyg editor. I would almost guess
    that a similar project exists out there already, maybe not using
    javascript, but I haven't been able to find it. If anyone knows of any
    similar projects please let me know.

    Any help would be appreciated, and any links to websites with more info
    would also be welcome.

    Thanks,
    Josh
     
    , Dec 17, 2006
    #1
    1. Advertising

  2. Jim Guest

    Josh,
    This should work cross-browser for you:
    ---------------------------------
    <script type="text/javascript" >
    function popSelected(){
    if (document.getSelection) {
    var str = document.getSelection();
    } else if (document.selection && document.selection.createRange) {
    var range = document.selection.createRange();
    var str = range.text;
    }
    var the_text = str;

    newWin=window.open('',
    'popUp','width=575,height=400,left=100,top=100,directories=no,location=no,menubar=no,scrollbars=yes,status=no,toolbar=no,resizable=yes');

    newWin.focus();
    newWin.document.write(the_text);
    }
    </script>
    </head>
    <body onClick="popSelected()">
    Your text goes here
    </body>
    </html>
     
    Jim, Dec 17, 2006
    #2
    1. Advertising

  3. Guest

    Thanks Jim, that's pretty slick. I wasn't sure it could be done with
    such a small amount of code. I should be able to add code to make the
    text editable.

    As a follow-up question do you have any idea how I would be able to
    make the editor I described earlier out of this? The problem I see is
    that I will have to put code like this on every page, and if I do that
    anyone who visits the site will be able to edit the pages. Any ideas on
    how I should proceed from here?

    Thanks again,
    Josh
     
    , Dec 17, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. dapkniht
    Replies:
    1
    Views:
    1,338
    Eliyahu Goldin
    Mar 8, 2006
  2. Marc Pavo
    Replies:
    1
    Views:
    663
    Marc Pavo
    Nov 17, 2006
  3. Rajesh
    Replies:
    0
    Views:
    560
    Rajesh
    Jul 31, 2007
  4. Jens Peter Hansen
    Replies:
    7
    Views:
    544
    Randy Webb
    Jun 19, 2004
  5. Merx

    Highlight text with Javascript

    Merx, Aug 3, 2004, in forum: Javascript
    Replies:
    5
    Views:
    245
    Mick White
    Aug 3, 2004
Loading...

Share This Page