PDA

View Full Version : Javascript Anylink Drop Down Menu



Hokie19
05-28-2009, 06:12 PM
1) Script Title: Any Link Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

3) Describe problem:

So I am using an image mapping for the drop downs. I created the image map through visio 2007. If you save it as a web page and publish it you can pull out the image map for the file. I used the any link drop down menu and have it working for most of the hot spots but the hot spots close to the bottom edge of the browser do not show up. Guessing because they are running off the page. If I take out elements from the respective menu contents it starts to show up because it is not running off the page anymore. Is there a way to make the drop down drop up instead of down when they would inevitably go over the edge?


function getposOffset(what, offsettype){
if (what.parentNode&&typeof what.parentNode.tagName!=='undefined'&&what.parentNode.tagName.toLowerCase()=='map'){
mapflag=1;
var ocoords=what.coords.split(',')
var totaloffset=(offsettype=="left")? ocoords[0]*1 : ocoords[3]*1;
var mapIm=what.parentNode.parentNode.getElementsByTagName('img')
for (var i_tem = 0; i_tem < mapIm.length; i_tem++)
if (mapIm[i_tem].getAttribute('usemap', 0)&&mapIm[i_tem].getAttribute('usemap', 0).replace(/^.*(#.*)/g,'$1')=='#'+what.parentNode.name)
var parentEl=mapIm[i_tem];
}
else {
mapflag=0;
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
}
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

This is essentially finding the positions of the area tags. With a global variable of mapflag.


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")-1+"px"

var oHeight=mapflag? 0 : obj.offsetHeight+46 //change the value of the 0 to increase or decrease the height of the menu
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+oHeight+"px"
}

This uses the global variable to help adjust the menus height and right edge.

Any help would be appreciated.