dropdown.js:
function clientSize() {
var myWidth = 0, myHeight = 0;
var arr;
if (typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement &&
( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
arr = new Array(myWidth, myHeight);
return arr;
}
function showDropdown(menu, act)
{
if (document.getElementById(menu).style.visibility == 'hidden')
{
if (act)
{
size = clientSize();
x = findPosX(act);
y = findPosY(act)+act.offsetHeight;
menuw = document.getElementById(menu).offsetWidth;
if (x+menuw+20 > size[0])
x = size[0]-menuw-20;
document.getElementById(menu).style.visibility='visible';
document.getElementById(menu).style.top=y+'px';
document.getElementById(menu).style.left=x+'px';
return true;
}
else return false;
}
else
{
document.getElementById(menu).style.visibility='hidden';
document.getElementById(menu).style.top='0px';
document.getElementById(menu).style.left='0px';
return true;
}
}
// Below functions are copy/paste
function findPosX(obj)
{
var curleft = 0;
if (document.getElementById || document.all)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (document.layers)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if (document.getElementById || document.all)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (document.layers)
curtop += obj.y;
return curtop;
}Din dropdown:
<div id="dd1" style="visibility: hidden; position: absolute;">dropdown<br>dropdown<br>dropdown</div>
<div id="dd2" style="visibility: hidden; position: absolute;">dropdown2<br>dropdown2<br>dropdown2</div>
<a href="#" onclick="showDropdown('dd1', this);">Dropdown</a> <a href="#" onclick="showDropdown('dd2', this);">Dropdown2</a>Hvis det kræver en forklaring, så skriv endelig
--
Ronni Egeriis