468,760 Members | 1,831 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,760 developers. It's quick & easy.

Javascript Info Popup on Highlight

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 '06 #1
2 1999
Jim
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,dir ectories=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>

Dec 17 '06 #2
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 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

By using this site, you agree to our Privacy Policy and Terms of Use.