Question for ddadmin: Menu bar alignment

[anandmm]

Script: Menu Bar
http://dynamicdrive.com/dynamicindex1/dropmenuindex.htm


Hello DD Admin,

First of all thanks for your great code . I have incorporated the menu bar and it works perfectly in a maximized browser window. I have also incorporated the VERY USEFUL code for a vertical scrollbar that you suggested in this link:
http://www.dynamicdrive.com/forums/s...ad.php?p=10064

But when the browser window is not maximized (its "restored down" to a smaller window), since there is not sufficient space below to show the menu bar, the menu bar goes up. I have observed in several other websites that have menubar, the menu options align in the center vertically in smaller windows. That way you can still look at most menu-options. But I don't know how to do that with DD code.

I am not sure how to implement that and if that would require a change in this function:
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;
//alert("totaloffset = " + totaloffset + ", parentEl = " + parentEl);
}
//alert("RETURN totaloffset = " + totaloffset);
return totaloffset;
}

Any inputs/advice that you have to implement this will be greatly appreciated!

Thanks again !!!

Regards,
Anand

[ddadmin]

Hi:
Do you mean when the menu is too tall to display either downwards or upwards, you need a solution around this?

[anandmm]

Yes. If the menu is too tall to display in a small window (if the user has NOT maximized the window), then the menu just goes towards the top and hides behind the address bar. Instead can it be center aligned vertically?

I am not sure if I am explaining this clearly. May be a visual example will help.
(1) Please open a small browser window (e.g. 8" x 6" but not maximized).
(2) Please go to http://webfx.eae.net and click on "Articles" menu from the menubar. Further select "IE Specific". If your browser window is not maximized then you will see that all options are not visible from this sub-menubar. But they have selected the sub-menubar to be center aligned vertically as compared to our menu which just goes upwards and hence hides.
(3) Now go to http://www.aiia.com.au/i-cms.isp and mouse-over on "Our Groups". You will see that their menu goes upwards instead of center aligned vertically.

Hope I explained a bit better this time. Thanks for your time and effort. Any inputs to solve this will be appreciated.

Regards,
Anand

[anandmm]

ddadmin: I will appreciate if you can give me any advice / inputs on this one.

[ddadmin]

Ok, try this. Replace the script of Code 1 (leave the style sheet as is) with the following instead. It modifies the drop down behavior so if the menu has no room either downwards or upwards, it will position itself at the top of the window viewport, similar to the example URL you cited:

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
menu1[2]='<a href="http://codingforums.com">Coding Forums</a>'
menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'
menu1[4]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
menu1[5]='<a href="http://codingforums.com">Coding Forums</a>'
menu1[6]='<a href="http://www.cssdrive.com">CSS Drive</a>'
menu1[7]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
menu1[8]='<a href="http://codingforums.com">Coding Forums</a>'
menu1[9]='<a href="http://www.cssdrive.com">CSS Drive</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://cnn.com">CNN</a>'
menu2[1]='<a href="http://msnbc.com">MSNBC</a>'
menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a>'
		
var menuwidth='165px' //default menu width
var menubgcolor='lightyellow'  //menu bgcolor
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

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=-500
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
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? topedge+iecompattest().clientHeight-15 : topedge+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight
}
}
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)
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

</script>