I have several widgets. These can be dragged accross the screen.

Each widget has a small arrow on it. When clicked I want to display a small menu with items for that widget, such as 'share', 'move left' and 'move right'
All I need is a little bit of javascript that makes sure this menu is displayed with the clickable arrow and disappears when user clicks elsewhere on the screen.

All menu's I've found so far have things I DONT want:
- display menu on arrow hover
- incompatible with IE6+ and/or FF1.5+
- menu is not displayed hovering over all other items on screen but rather it pushes other content aside when displayed
- I have to pay for it (not desirable since this is such simple functionality)

So: All I need is a javascript popup menu that can be called in an onclick and hovers over other content. This menu disappears when user clicks anywhere else on the screen. The menu is always displayed under the arrow which was clicked to call the menu and thus does not move as the user scrolls his screen.

I've searched and searched but was unable to find such a menu...any suggestions?

 Hi,

You might find your request at www.dynamicdrive.com

Check www.obout.com, they are providing FREE controls as well.

Regards 

Hmm...I've viewed several files on dynamic drive but none that match my requirements...could you be a bit more specific?
obout I've seen as well, but nothing free...

I'm right that this should be pretty basic functionality right? :)

Is the arrow an individual element that you can apply an onclick event to? I would create the menu in html and give it a class of invisible - .invisible {display:none} for example. Then add an onclick event to the arrow to clear this class document.getElementById("mymenu").className = "". Now it will be visible but you want it to appear below the arrow so you need to get the arrows position:-

function findPos(obj) {
 var curleft = curtop = 0;
 if (obj.offsetParent) {
  curleft = obj.offsetLeft;
  curtop = obj.offsetTop;
  while (obj == obj.offsetParent) {
   curleft += obj.offsetLeft;
   curtop += obj.offsetTop;
  }
 }
 return [curleft,curtop];
}

The above function is taken from quirksmode and calculates the position of an element so the onclick function for the arrow could be something like this:-

var arrow = document.getElementById("arrow1");
var arrowmenu = document.getElementById("arrow1menu");
var arrowpos = findPos(arrow);
arrowmenu.className = "";
arrowmenu.left = arrowpos[0] + "px";
arrowmenu.top = (arrowpos[1] + 20) + "px";

Something along those lines. You wold also need an onclick function on the document to hide the menu when a user click outside of it.

var arrowmenu = document.getElementById("arrow1menu");
arrowmenu.className = "invisible";

You should be able to build something from there. I highly recommend you take a look at www.quirksmode.org to get a feel for scripting events and elements.

 Great, I will do that, but what im also wondering about is how I can display a div which hovers over all other elements (IE6+, FF1.5+).
In the past I had difficulties because IE6 wont display adiv OVER other items but rather MOVES other items aside to display the div...
What would be the class definition for a hovering div that works in IE6+ and FF1.5+?
Thanks!

Well instead of setting the div's class to "" to make it visibel we could define a class that makes its' position absolute and it's z-index 999 or something. That should mean it won't interfere with other elements. There are issues in IE with hovering over select elements and the general hack these days is to create an iframe and place it behind the element you want to appear over a select element.