Drop Down Script problem.

[Hyperactive]

1) Script Title: Drop down/ Overlapping Content script

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

3) Describe problem: Script works perfectly, but how i can change
position of the drop down contens to drop top, not bottom ?

[ddadmin]

Try finding the line:

var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? +curobj.offsetHeight : 0)

and replace that with:

var ypos=getposOffset(curobj, "top")-((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? subobj.offsetHeight : subobj.offsetHeight-curobj.offsetHeight)

[Digi]

Hi i'm using the same script and it works fine but i am using it in a few links so it opens more than one boxes. But is there a way when i click to open another link the previous boxes to close?

here is my attempt but it doesn't work

<a href="#" onClick="return overlay(this, 'subcontent', 'bottom'); overlayclose('subcontent2'); return false">Transportation</a>

please help

[fdkss03]

ddadmin.....

I am still having the problem after I added the script.
I have updated the page. You can check it out.

Thanks

[ddadmin]

Hi i'm using the same script and it works fine but i am using it in a few links so it opens more than one boxes. But is there a way when i click to open another link the previous boxes to close?

here is my attempt but it doesn't work

<a href="#" onClick="return overlay(this, 'subcontent', 'bottom'); overlayclose('subcontent2'); return false">Transportation</a>

please help

To get the script to both drop up all the time plus close the last overlap content (if any) when the current one is clicked on, use the below modified script over the default:

<script type="text/javascript">

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

var lastoverlayobj=""

function getposOffset(overlay, offsettype){
var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
var parentEl=overlay.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function overlay(curobj, subobjstr, opt_position){
if (document.getElementById){
if (lastoverlayobj!="" && lastoverlayobj!=subobjstr)
document.getElementById(lastoverlayobj).style.display="none"
var subobj=document.getElementById(subobjstr)
lastoverlayobj=subobjstr
subobj.style.display=(subobj.style.display!="block")? "block" : "none"
var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0) 
var ypos=getposOffset(curobj, "top")-((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? subobj.offsetHeight : subobj.offsetHeight-curobj.offsetHeight)
subobj.style.left=xpos+"px"
subobj.style.top=ypos+"px"
return false
}
else
return true
}

function overlayclose(subobj){
document.getElementById(subobj).style.display="none"
}

</script>

[Digi]

That's fantastic thank you very much!!! There was just a tiny problem which i miraculously corrected, well i only mixed and matched to be honest. The script you send me before was opening the box a bit random, like on the far top of the link. so i had a close look to spot the differences and here you go!

thanks again very much!!!!



<script type="text/javascript">

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

var lastoverlayobj=""

function getposOffset(overlay, offsettype){
var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
var parentEl=overlay.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function overlay(curobj, subobjstr, opt_position){
if (document.getElementById){
if (lastoverlayobj!="" && lastoverlayobj!=subobjstr)
document.getElementById(lastoverlayobj).style.display="none"
var subobj=document.getElementById(subobjstr)
lastoverlayobj=subobjstr
subobj.style.display=(subobj.style.display!="block")? "block" : "none"
var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0)
var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=+1)? curobj.offsetHeight : 0)
subobj.style.left=xpos+"px"
subobj.style.top=ypos+"px"
return false
}
else
return true
}

function overlayclose(subobj){
document.getElementById(subobj).style.display="none"
}


</script>