Javascript Info Popup on Highlight

12-17-2006

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

12-17-2006

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>

12-17-2006

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Watir Javascript popup handler: How to handle the popup dialog?	Rajesh	Ruby	0	07-31-2007 04:36 AM
Highlight GridView row clientside with javascript?	Marc Pavo	ASP .Net	1	11-17-2006 04:41 AM
ASP.NET JavaScript Popup, No Popup Using Back Button	dapkniht	ASP .Net	1	03-08-2006 08:49 AM
Highlight text with Javascript	Merx	Javascript	5	08-03-2004 05:56 PM
Main > Popup > Popup > Close popup AND new URL in main?	Jens Peter Hansen	Javascript	7	06-19-2004 08:56 PM