Home/ Questions/Q 9195095
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T21:33:29+00:00

My page has a <div> that echos a book script fed from database. The

  • 0

My page has a <div> that echos a book script fed from database.

The user is supposed to find some text, highlight it with their cursor, then right-click to expose a custom context menu I got from Andrew Whitaker, Stack/4495626.

The user should then click one of the options in the context menu
<Idiom>Idiom</Idiom>, <Proverb>Proverb</Proverb>, etc, to insert the cursor-highlighted text into the text field id="element".

User704808: I tried jsfiddle but it wouldn’t let the context menu work in that pane, so I’ve updated with an entire page of code below. The first three test correctly as they are static; it is the dynamic getSelected() that I can’t make work. Thanks again.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).bind("contextmenu", function(event) {
event.preventDefault();
$("div.custom-menu").show();
$(".custom-menu").appendTo("body").css({
top: event.pageY + "px",
left: event.pageX + "px",
visibility: "visible"
});
}).bind("click", function(event) {
if (!$(event.target).is(".custom-menu")) {
    $("div.custom-menu").hide();
}
});
</script>
<script type="text/javascript">
var getSelected = function(){
var t = '';
if(window.getSelection) {
  t = window.getSelection();
} else if(document.getSelection) {
t = document.getSelection();
} else if(document.selection) {
t = document.selection.createRange().text;
}
return t;
}   </script>
<style>
body {font-family:Verdana, Arial, Helvetica, sans-serif; margin-top:14%;}
.custom-menu { z-index:1000; height:85px; position: absolute; background-color:#F0F0F0;       border-right: 1px solid black;border-bottom: 1px solid black;border-top: 1px solid     white;border-top: 1px solid white; padding: 2px; left: 1103px; top: 12px;visibility:hidden;     }
</style>
</head>
<body>
<div class='custom-menu'>
<table width="426" cellpadding="6">
<tr>
<td nowrap="nowrap"><Idioms>Idioms</Idioms></td>
<td nowrap="nowrap"><IdiomsSentence>Idioms Sentence</IdiomsSentence></td>
</tr>
<tr>
<td nowrap="nowrap"><Proverb>Proverbs</Proverb></td>
<td nowrap="nowrap"><ProverbSentence>Proverbs Sentence</ProverbSentence></td>
</tr>
</table></div>
<form name="form13" method="post">
<input type="text" class="cleanup" name="element" id="element" value="" size="70" />
element:<br />
<input class="cleanup" name="elementSentence" type="text" id="elementSentence" value=""      size="70" /></td></tr>
elementSentence :</form>
<script type="text/javascript">
$(document).ready(function() {
$("Idioms").click(function(){
$("#element").val("Idioms Test");});

$("IdiomsSentence").click(function(){
$("#elementSentence").val("IdiomsSentence Test");});

$("Proverb").click(function(){
$("#element").val("Proverb Test");});

$("ProverbSentence").click(function(){
$("#elementSentence").val(getSelected());});}); </script>
<div id="dialogue">
<ul>
  <li>I have left in place three 'static' test examples that work. Please right-click,   select either 'Idioms', 'Proverbs', or 'IdiomsSentence', and you'll see they insert,   singly, into the form correctly.<br />
<br />
</li>
<li>The one that isn't working is the one that has the getSelected() wherein someone   should drag their cursor over some text like 'There is more than one way to skin a   politician.', then right click, select 'Proverbs Sentence', and it should auto-enter the  second field.</li>
</ul>
<p>Proverb: There is more than one way to skin a politician.</p>
<p>Idiom: Actions speak louder than words, but I'm pretty loud anyway.</p>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    EDIT: Replaced entire answer for brevity and clarity.

    Make these changes to the HTML document in your question:

    Replace the two script blocks in the head with one containing this:

    dialogApp = {};

dialogApp.getSelectedHtml = function () {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
}

$(document).bind("contextmenu", function (event) {
    dialogApp.selection = dialogApp.getSelectedHtml();
    event.preventDefault();
    $("div.custom-menu").show();
    $(".custom-menu").appendTo("body").css({
        top: event.pageY + "px",
        left: event.pageX + "px",
        visibility: "visible"
    });
}).bind("click", function (event) {
    if (!$(event.target).is(".custom-menu")) {
        $("div.custom-menu").hide();
    }
});

    Change this line in your other script block:

    $("#elementSentence").val(getSelected());});}); </script>

    to

    $("#elementSentence").val(dialogApp.selection);

    Tested successfully in Chrome and IE9. The fixes I applied are:

    I replaced the getSelected function I had originally suggested with a much more effective function from this answer.

    I used a namespacing technique to mitigate the global variables being put into in use on this page.

    I cached the selected text immediately before displaying your context menu, in case displaying the menu were to change the browser’s evaluation of what is currently selected.

    • 0