Wrox Home  
Search P2P Archive for: Go

  Return to Index  

javascript thread: right click?


Message #1 by "Cointot Jérôme" <cpernelle@i...> on Fri, 16 Mar 2001 10:25:28
Hello Jerome (and other readers),

I shall give you the skeleton of a sample solution. You need to
consult the documentation and to adapt it to your needs.

The html page contains for instance:

    <div id="PopupLine" class="Popup" onclick="PopupClick();">
      Line menu<br><br>
      <div id="LinePaste">Paste</div>
      <div id="LineDel">Delete</div>
      <div id="MenuClose">Close</div>
    </div>

The associated css file specifies the initial style properties. Something
like this:

*.Popup    {align: center; background-color: yellow; border-style: outset;
left: 300; top: 50; padding : 5; position: absolute; visibility: hidden;
zIndex: 100}

You may also use the style attribute in the div.

After loading you have specified
document.oncontextmenu = PopupOpen;

So when right-clicking:

function PopupOpen()
{  var oSel = window.event.srcElement;

//  etcetera. You might want to determine some screen context.

  oMenuActive = document.all["PopupLine"];

// The following code is tricky because you must consider scrolling.
// Many examples on internet do not consider scrolling.

  oMenuActive.style.posLeft = event.clientX + document.body.scrollLeft;
  oMenuActive.style.posTop = event.clientY + document.body.scrollTop;

// The upperleft corner is the clicking point, unless you
// approach the border then it selects another corner!

  if (oMenuActive.style.posLeft + oMenuActive.offsetWidth >
document.body.clientWidth)
  { oMenuActive.style.posLeft = oMenuActive.style.posLeft -
oMenuActive.offsetWidth;
  }
  if (oMenuActive.style.posTop + oMenuActive.offsetHeight >
document.body.clientHeight)
  { oMenuActive.style.posTop = oMenuActive.style.posTop -
oMenuActive.offsetHeight;
  }
  oMenuActive.style.visibility = "visible";
  oMenuActive.setCapture();
  return false;
}

When you click on the menu:

function PopupClick()
{ var oMenuSel = window.event.srcElement;

// Test here the value of oMenuSel.id (e.g. id=="LinePaste")

oMenuActive.style.visibility = "hidden";
document.releaseCapture();

// Do the selected action

}

This should give you sufficient clues.
Actually I use several different popup's dependent on the clicking-context.
This makes the code more complicated, although not essentially more
difficult.

And remember: C'est en forgeant qu'on devient forgeron.

Salutations,
Kees




  Return to Index