highlighting and right click menu, similar to copy cut and past

[kuruption20877]

hello, i'm trying to make a text box where a person can highlight the word and when they right click on the word they choose from a 2 item menu containing "special" and "exciting" menu options...

1. it can be either a "special" word turning the word blue 2. it can be an "exciting" word turning the word red.

The concept is similar to copy, cut and paste, if a word is highlighted and right-clicked on the user can either cut or copy and in some cases paste (if another word has been cut or copied already).


If anyone can share some insight it will be really appreciated.

Thanks.

[clairec666]

I can't work out a full code for you yet, but here's a starter...........

The right-click menu in a web browser can't be changed by javascript. You would have to put in a function to disable right click in your text box (easy enough - it's a question that is reguarly asked on here so somebody should be able to help wou with that) and instead of the normal cut/copy/paste menu (context menu) make your own menu appear. I would suggest using a <div> and making visibility="visible" when the user right-clicks, then from the options on this menu, clicking on one would call the function to change the colour, and then make the menu disappear again.

If you're totally lost or new to javascript, just reply and I'll help you out some more.

[kuruption20877]

thank you for your reply clairec666, i think i understand conceptually but i'm a lil lost. i'm going to continue to work on your suggestions. If you have time and are able to help it will be greatly appreciated

[clairec666]

What are you stuck on? Do you understand the ideas behind it, and just need help putting it all together? I've got to look up some stuff on the 'right clim disabling' thing, then I'll put something together.

[kuruption20877]

i can actually right-click and disable the text area like you said, i'm having problems with the div tag menu part... this is what i did to disable the right-click...

<script language=javascript>
function Disable() {
if (event.button == 2)
{
alert("This action is not possible")
}
}
</script>

<form id="Form1" method="post" runat="server">
<textarea runat="server" id="txtContent" style="WIDTH: 365px; HEIGHT: 122px" rows="7" cols="43" onmousedown="javascript: Disable();">
</textarea>
</form>

[Breeze]

What if users have their mouse buttons swapped?

[clairec666]

Sorry I've taken some time to reply....................

<script language=javascript>
function Disable() {
if (event.button == 2)
{
show_new_menu()
}
}

function show_new_menu() {
document.all.new_menu.style.visibility="visible";
// sorry - i.e. only at the moment
}

function option1() {
// insert code here to change text colour in the textarea
document.all.new_menu.style.visibility="hidden";
}

// repeat similar for option2()
</script>

<form id="Form1" method="post" runat="server">
<textarea runat="server" id="txtContent" style="WIDTH: 365px; HEIGHT: 122px" rows="7" cols="43" onmousedown="javascript: Disable();">
</textarea>
</form>

<div id="new_menu" style="visibility:hidden">
<!-- I'm not sure what to do with the positioning of the div at the moment, you would have to base it on mouse positioning -->
<a href="javascript: option1()">Option 1</a>
<a href="javascript: option2()">Option 2</a>
</div>

[kuruption20877]

thank you so much for this i'm going to try it out right away!!!!