Javascript Info Popup on Highlight

Y

yes_its_just_me

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
 
J

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,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>
 
Y

yes_its_just_me

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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top