AnyLink Vertical Menu shifts up on low resolutions or small browser windows

[eTard]

1) Script Title: AnyLink Vertical Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nkvertical.htm

3) Describe problem:

I use this version of AnyLink Vertical Menu very successfully on several sites and I recently was informed that if the resolution is low (say 800) and/or the browser window is closed down small enough than the height/length of the drop down menu, the drop down menu will move up to the top of the browser window to try to show it's full length, effectively covering the navi button that triggers it from being utilized. Higher resolution or expand your browser window and viola.. perfect and right below the navi button trigger as designed.

Any thoughts on how to remedy this and make sure it sticks and stays below the navi button it is tied to and that triggers it in cases where people run low resolutions or reduce the size of their browser window to be smaller then the length of the drop down?

[ddadmin]

This is by design actually, as when there's neither enough space downwards or upwards (relative to the anchor link) to show the drop down menu, the only alternative is to position the menu at the very top of the browser's viewport. This shouldn't obstruct the anchor link, however, as Anylink vertical menu shows the drop down menu to the right of the anchor link in all instances. If you have a different set up than the aforementioned, please post a link to your site for illustration.

[eTard]

It does not function as you explain.

Here is correct, drops down right below the anchor link of EVENTS when in a browser window of sufficient size to display the entire height of the drop down contents



Here is it busted when the browser window is to small, notice is is NOT off to the right keeping the EVENTS anchor link exposed, it covers the anchor link



The anchor link of EVENTS has plenty of space to the right in the navi bar to shift it over and up as you state it should, but you can clearly see, it shifts it up and NOT over right as you state it should.

[ddadmin]

Are you actually referring to Anylink Menu (versus the Vertical version)? The later always displays the drop down menu to the right of the anchor link, regardless of where it's vertically positioned.

[eTard]

Okay, I admit now I am a bit confused. I gave a link to the "AnyLink Vertical Menu" and you can see the below script is similar and matches.

However, you link to "AnyLink JS Drop Down Menu v2.3" and in fact, my script runs more like this.

IIRC now, my script is in fact "AnyLink JS Drop Down Menu" BUT it is the pre v2.3 version.

Either way, here is the actual js script below with the array of drop down items edited for brevity.

The script works great until you shrink the window smaller than the length of the drop down as then you can see, it shifts up and covers the anchor link plus it never ever is off to the right and never moves off to the right if needed. In testing the link you link to, it works like that and even that script does not shift to the right and in fact, covers it's anchor link if the browser window is set to small. So the script you link to is similarly flawed in that respect as you cant even keep access to the Get The News anchor link once you resize the browser small enough to not allow the menu to fully expands, it stays dropping down vertically BUT it moves the whole menu up and covers the anchor link blocking your access to click it.. eek

/***********************************************
* Visit http://www.dynamicdrive.com/ for full source code
*http://www.dynamicdrive.com/dynamicindex1/anylinkvertical.htm
***********************************************/

//July 14th, 08": Custom mod. Adds fade in/out effect using jQuery 1.2.x which is also called as a script in the page
var fadespeed=500 //fade speed in milliseconds 300 was default

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="#" class="menuevent">FULL EVENTS PAGE ►</a>'
menu1[1]='<a href="#">Texas 12/3</a>'
menu1[2]='<a href="#">Socal 1/28</a>'
menu1[3]='<a href="#">Arizona 2/11</a>'
menu1[4]='<a href="#">Florida 2/25</a>'
menu1[5]='<a href="#">Georgia 3/10</a>'
menu1[6]='<a href="#">Carolinas 3/24 &amp; 25</a>'
menu1[7]='<a href="#">Colorado 5/5 &amp; 6</a>'
		
var menuwidth='195px' //150 default menu width UNLESS a size is specified in the actual link of the href of the drop down
var menubgcolor=''  //menu bgcolor which will be overidden by the background-image in the css under #dropmenudiv OR leave empty to make sure png is used
var disappeardelay=300  //menu disappear speed onMouseout (in miliseconds) 250 was default
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
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;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
//dropmenuobj.widthobj.width="195px" removed since code in href IN page is removed also
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
obj.visibility=visible
jQuery(dropmenuobj).hide().fadeIn(fadespeed)
}
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


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")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6){
jQuery(dropmenuobj).fadeOut(fadespeed)
//dropmenuobj.style.visibility="hidden"
}
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

[ddadmin]

Ok, based on the code you posted above, it's actually Anylink Menu (versus Anylink Vertical Menu). The difference is that the former drops down following the anchor link, while the later drops to the right plus down of the anchor instead, similar to a side bar pullout menu. Furthermore, the script you're using is an outdated version of the current Anylink Menu on DD, though regardless, both versions exhibit the behavior you mentioned.

Before I can suggest a remedy, please answer the following first:

1) Do you wish to continue using the outdated version of Anylink menu that you posted above?

2) So when the browser is resized vertically sufficient enough that there's no place to drop down nor up from the anchor link without obscuring the drop down menu, what behavior do you wish the script to carry out? I guess one option is just to get the script to still drop down from the anchor link, which means the anchor will no longer be obscured, though parts of the drop down menu will (unless the user scrolls the page down using the mousewheel).

[eTard]

1) yes, just because the time and effort to recode, test, update - swap old version for new version - is not available and may have ripple effects that open a secondary can of worms. As well, just because it is an "older" version, it still works perfect except for this - so I would suspect it is salvageable. It just takes a more savvy js person to tweak it.

2) it would seem logical to me to begin with really, that if the browser is shrunk the vertical menu would STAY anchored just below it's anchor link (no shifting up) and the menu would just be hidden below the fold and the user would have to scroll down to see it's full contents. In essence, that does happen now BUT that happens after it shifts up. It needs to stop shifting up all together. I would take the full drop down menu being obscured - forcing the user to scroll his browser window down to see it all - than obscuring the anchor link any day of the week as it makes no logical sense to block the anchor link from being accessed, but it makes total logical sense to have the full menu contents be partially out of view where you would have to scroll to see it in complete.

this being said, IF the only way to make this older code work would be to have the menu shift up and right, I would take if that is all that can be done just as long as it shifts right and makes the anchor link still accessible. This way, the anchor link is accessible and the next navi term to it's right is accessible once they stop musing over the anchor link. However, I still prefer the above end result of no shift up and no shift right, but I am flexible to a degree.

[ddadmin]

Ok, to get the menu to continue to drop down when there isn't enough space either downwards or upwards to fully display the drop down menu, try finding the below chunk of code inside the script:

if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge

and replace that with:

if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=0

[eTard]

Thanks, awesome!

First round of testing seems to show this tweak works perfect. I will do full round - Mac & PC and top 5-7 browsers on each to just be safe - but I suspect you nailed it.

EDIT: tested well. for anyone that finds this, this should be a tweak you make to your code - logically this is how it should have been from day 1.