PDA

View Full Version : DHTML Menu direction (Up/down)



alex_blue
November 23rd, 2005, 06:04
This is the code I extracted from functions.js file of a SMF theme. However the problem is that I couldn't really control the direction of the DHTML dropdown menu despite the code as written below.

0 - Downwards and 1 - Upwards

When I set the DHTML menu that is on the top of my page as "0", the submenu will open Upwards (because there is enough space ontop of it) instead of downwards.

As for the DHTML menu on the bottm of my page, it's default to "1", the submenu opens Upwards as it should but if there is enough space at its bottom, it'll sometimes open downwards.

May I know how to enforce the DHTML submenu to always open in the desired direction (up/down)?

Thanks for your help!!


/*
* show a menu (id) at the given anchor element (where)
* direction: 0 > show downwards
* 1 > show upwards
*/

function showDMenu(id, where, direction) {

var x;
var y;
var m_clientWidth;
if(active_menu != id)
hideActiveMenu(true);

anchor = getObject(where);
x = anchor.offsetLeft;
if(direction == 0)
y = getTopOffset(anchor) + anchor.offsetHeight;
else
y = getTopOffset(anchor);
x = getLeftOffset(anchor);
obj = getObject(id);

if(obj.style.display == "none") {
m_clientWidth = document.body.clientWidth;
obj.style.top = y + "px";
obj.style.left = x + "px";
obj.style.display = "";
if((x + obj.offsetWidth) >= m_clientWidth)
obj.style.left = (m_clientWidth - obj.offsetWidth) + "px";
if(direction == 1)
obj.style.top = y - obj.offsetHeight + "px";
else {
if(document.all && navigator.userAgent.toLowerCase().indexOf("opera") == -1)
winHeight = document.documentElement.offsetHeight;
else
winHeight = window.innerHeight;
//alert("y = " + y + "height = " + obj.offsetHeight + " clientH = " + winHeight + " top = " + document.documentElement.scrollTop);
if((y + obj.offsetHeight) >= (document.documentElement.scrollTop + winHeight)) {
y = y - obj.offsetHeight - anchor.offsetHeight;
obj.style.top = y + 'px';
}
}
active_menu = id;
mouse_over_menu = id;
}
else {
obj.style.display = "none";
active_menu = "";
mouse_over_menu = "";
}

return false;
}