PDA

View Full Version : Resolved Dropdown/Overlapping Content script - Open DIV in same position with multiple links



pedrote
02-18-2009, 04:37 PM
1) Script Title: Drop down/ Overlapping Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

3) Describe problem: I have a menu and I want to open the DIV in same position when I click on any link/button of my menu.


<!--Example #2: -->

<a href="http://www.revision.com" id="contentlink" rel="subcontent2" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF;">Link 1</a>
<a href="http://www.revision.com/" id="contentlink2" rel="subcontent2" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF;">Link 2</a>

<DIV id="subcontent2" style="position:absolute; visibility: hidden; border-top: 0px solid #666; background-color:#c6c6c7; width: 900px; height: 100px; padding: 0px; opacity: .7; filter: alpha(opacity=70);">


</DIV>

<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:


dropdowncontent.init("contentlink", "center-bottom", 500, "click")
dropdowncontent.init("contentlink2", "center-bottom", 500, "click")
</script>

Now it works but I want to open DIV regarding the first one (Link1). Doesn't matter if I click Link1 or Link2 I want to open DIV as Link1.

I put link to see what is hapenning now. http://liftingweb.com/lifting/test.php

Thank you.

vwphillips
02-18-2009, 05:34 PM
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>

<script type="text/javascript" src="js/dropdowncontent.js">

/***********************************************
* 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
***********************************************/

</script>
<script type="text/javascript">
/*<![CDATA[*/

//Drop Down/ Overlapping Content: http://www.dynamicdrive.com
//**Updated: Dec 19th, 07': Added ability to dynamically populate a Drop Down content using an external file (Ajax feature)
//**Updated: Feb 29th, 08':
//1) Added ability to reveal drop down content via "click" of anchor link (instead of default "mouseover")
//2) Added ability to disable drop down content from auto hiding when mouse rolls out of it
//3) Added hidediv(id) public function to directly hide drop down div dynamically

//**Updated: Sept 11th, 08': Fixed bug whereby drop down content isn't revealed onClick of anchor in Safari/ Google Chrome

var dropdowncontent={
disableanchorlink: true, //when user clicks on anchor link, should link itself be disabled (always true if "revealbehavior" above set to "click")
hidedivmouseout: [false, 200], //Set hiding behavior within Drop Down DIV itself: [hide_div_onmouseover?, miliseconds_before_hiding]
ajaxloadingmsg: "Cargando el menú. Espere por favor...", //HTML to show while ajax page is being feched, if applicable
ajaxbustcache: true, //Bust cache when fetching Ajax pages?

getposOffset:function(what, offsettype){
return (what.offsetParent)? what[offsettype]+this.getposOffset(what.offsetParent, offsettype) : what[offsettype]
},

isContained:function(m, e){
var e=window.event || e
var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
if (c==m)
return true
else
return false
},

show:function(anchorobj, subobj, e){
if (!this.isContained(anchorobj, e) || (e && e.type=="click")){
var e=window.event || e
if (e.type=="click" && subobj.style.visibility=="visible"){
subobj.style.visibility="hidden"
return
}
var horizontaloffset=(subobj.dropposition[0]=="left")? -(subobj.offsetWidth-anchorobj.offsetWidth) : 0 //calculate user added horizontal offset
var verticaloffset=(subobj.dropposition[1]=="top")? -subobj.offsetHeight : anchorobj.offsetHeight //calculate user added vertical offset
subobj.style.left=this.getposOffset(document.getElementById('contentlink'), "offsetLeft") + horizontaloffset + "px"
subobj.style.top=this.getposOffset(anchorobj, "offsetTop")+verticaloffset+3 +"px"
subobj.style.clip=(subobj.dropposition[1]=="top")? "rect(auto auto auto 0)" : "rect(0 auto 0 0)" //hide drop down box initially via clipping
subobj.style.visibility="visible"
subobj.startTime=new Date().getTime()
subobj.contentheight=parseInt(subobj.offsetHeight)
if (typeof window["hidetimer_"+subobj.id]!="undefined") //clear timer that hides drop down box?
clearTimeout(window["hidetimer_"+subobj.id])
this.slideengine(subobj, (subobj.dropposition[1]=="top")? "up" : "down")
}
},

curveincrement:function(percent){
return (1-Math.cos(percent*Math.PI)) / 2 //return cos curve based value from a percentage input
},

slideengine:function(obj, direction){
var elapsed=new Date().getTime()-obj.startTime //get time animation has run
if (elapsed<obj.glidetime){ //if time run is less than specified length
var distancepercent=(direction=="down")? this.curveincrement(elapsed/obj.glidetime) : 1-this.curveincrement(elapsed/obj.glidetime)
var currentclip=(distancepercent*obj.contentheight)+"px"
obj.style.clip=(direction=="down")? "rect(0 auto "+currentclip+" 0)" : "rect("+currentclip+" auto auto 0)"
window["glidetimer_"+obj.id]=setTimeout(function(){dropdowncontent.slideengine(obj, direction)}, 10)
}
else{ //if animation finished
obj.style.clip="rect(0 auto auto 0)"
}
},

hide:function(activeobj, subobj, e){
if (!dropdowncontent.isContained(activeobj, e)){
window["hidetimer_"+subobj.id]=setTimeout(function(){
subobj.style.visibility="hidden"
subobj.style.left=subobj.style.top=0
clearTimeout(window["glidetimer_"+subobj.id])
}, dropdowncontent.hidedivmouseout[1])
}
},

hidediv:function(subobjid){
document.getElementById(subobjid).style.visibility="hidden"
},

ajaxconnect:function(pageurl, divId){
var page_request = false
var bustcacheparameter=""
if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE6 or below
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
document.getElementById(divId).innerHTML=this.ajaxloadingmsg //Display "fetching page message"
page_request.onreadystatechange=function(){dropdowncontent.loadpage(page_request, divId)}
if (this.ajaxbustcache) //if bust caching of external page
bustcacheparameter=(pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', pageurl+bustcacheparameter, true)
page_request.send(null)
},

loadpage:function(page_request, divId){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(divId).innerHTML=page_request.responseText
}
},

init:function(anchorid, pos, glidetime, revealbehavior){
var anchorobj=document.getElementById(anchorid)
var subobj=document.getElementById(anchorobj.getAttribute("rel"))
var subobjsource=anchorobj.getAttribute("rev")
if (subobjsource!=null && subobjsource!="")
this.ajaxconnect(subobjsource, anchorobj.getAttribute("rel"))
subobj.dropposition=pos.split("-")
subobj.glidetime=glidetime || 1000
subobj.style.left=subobj.style.top=0
if (typeof revealbehavior=="undefined" || revealbehavior=="mouseover"){
anchorobj.onmouseover=function(e){dropdowncontent.show(this, subobj, e)}
anchorobj.onmouseout=function(e){dropdowncontent.hide(subobj, subobj, e)}
if (this.disableanchorlink) anchorobj.onclick=function(){return false}
}
else
anchorobj.onclick=function(e){dropdowncontent.show(this, subobj, e); return false}
if (this.hidedivmouseout[0]==true) //hide drop down DIV when mouse rolls out of it?
subobj.onmouseout=function(e){dropdowncontent.hide(this, subobj, e)}
}
}/*]]>*/
</script>
</head>
<body topmargin="0" bottommargin="0" rightmargin="0" leftmargin="0">


<table border="0" cellspacing="0" cellpadding="0" style="width:100%; height:100%">

</tr>
<td style="height:300px;background-color:#000000;" valign="top">

<table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<tr>
<td style="background-color:#000000;">&nbsp;</td>
<td style="width:1030px;">



</td>
<td style="background-color:#000000;">&nbsp;</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" style="width:100%; height:20px; margin-top:5px; background-color:#666666;">

<tr>
<td style="background-color:#666666;">&nbsp;</td>
<td style="width:900px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF;">

</DIV>






<!--Example #2: -->

<a href="http://www.revision.com" id="contentlink" rel="subcontent2" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF;">Link 1</a>

<a href="http://www.revision.com/" id="contentlink2" rel="subcontent2" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF;">Link 2</a>

<DIV id="subcontent2" style="position:absolute; visibility: hidden; border-top: 0px solid #666; background-color:#c6c6c7; width: 900px; height: 100px; padding: 0px; opacity: .7; filter: alpha(opacity=70);">


</DIV>

<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:


dropdowncontent.init("contentlink", "center-bottom", 500, "click")
dropdowncontent.init("contentlink2", "center-bottom", 500, "click")
</script>
</td>
<td style="background-color:#666666;">&nbsp;</td>
</tr>
</table>



</td>
</tr>


</table>

</body>
</html>

pedrote
02-18-2009, 06:46 PM
Thanks vwphillips!

You're great!

kovali
06-08-2009, 12:09 PM
Hi,

I have the same problem, i would like the div's to show up in the same area instead of next to each other, see my problem now with the 3 links:

http://www.cockaert.be/new/2/origineel.html

Please can you help ?

Thx alot,
Koen

hozefa
03-10-2012, 07:57 AM
Hi,

Thanks for this useful script!
I have an issue with this script. Using css we can adjust the position of the popup box appearing on mouseover, but it changes with the change in resolution of the screen.

Is it possible to make it stay at constant position at any resolution?
I have also tried to make changes in the script file like changing

subobj.style.left=this.getposOffset(anchorobj, "offsetLeft") + horizontaloffset + "px"

to


subobj.style.left=this.getposOffset(anchorobj, "offsetLeft") + horizontaloffset-271 + "px"
to adjust it position horizontally, but whenever I change resolution or see at different pc at different resolution like 1024x768 or 1280x800 or 1382X744, it get displaced from its position and get something more left or right from its position.
Vertically its remain at the right place of placed at 61px from top but why the value of left get changed as the resolution changes?

Do you have any idea? Please help me

Thanks

vwphillips
03-10-2012, 12:07 PM
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>

<script type="text/javascript" src="js/dropdowncontent.js">

/***********************************************
* 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
***********************************************/

</script>
<script type="text/javascript">
/*<![CDATA[*/

//Drop Down/ Overlapping Content: http://www.dynamicdrive.com
//**Updated: Dec 19th, 07': Added ability to dynamically populate a Drop Down content using an external file (Ajax feature)
//**Updated: Feb 29th, 08':
//1) Added ability to reveal drop down content via "click" of anchor link (instead of default "mouseover")
//2) Added ability to disable drop down content from auto hiding when mouse rolls out of it
//3) Added hidediv(id) public function to directly hide drop down div dynamically

//**Updated: Sept 11th, 08': Fixed bug whereby drop down content isn't revealed onClick of anchor in Safari/ Google Chrome

var dropdowncontent={
disableanchorlink: true, //when user clicks on anchor link, should link itself be disabled (always true if "revealbehavior" above set to "click")
hidedivmouseout: [false, 200], //Set hiding behavior within Drop Down DIV itself: [hide_div_onmouseover?, miliseconds_before_hiding]
ajaxloadingmsg: "Cargando el menú. Espere por favor...", //HTML to show while ajax page is being feched, if applicable
ajaxbustcache: true, //Bust cache when fetching Ajax pages?

getposOffset:function(what, offsettype){
return (what.offsetParent)? what[offsettype]+this.getposOffset(what.offsetParent, offsettype) : what[offsettype]
},

isContained:function(m, e){
var e=window.event || e
var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
if (c==m)
return true
else
return false
},

show:function(anchorobj, subobj, e){
if (!this.isContained(anchorobj, e) || (e && e.type=="click")){
var e=window.event || e
if (e.type=="click" && subobj.style.visibility=="visible"){
subobj.style.visibility="hidden"
return
}
var horizontaloffset=(subobj.dropposition[0]=="left")? -(subobj.offsetWidth-anchorobj.offsetWidth) : 0 //calculate user added horizontal offset
var verticaloffset=(subobj.dropposition[1]=="top")? -subobj.offsetHeight : anchorobj.offsetHeight //calculate user added vertical offset
subobj.style.left=this.getposOffset(document.getElementById('contentlink'), "offsetLeft") + horizontaloffset + "px"
subobj.style.top=this.getposOffset(anchorobj, "offsetTop")+verticaloffset+3 +"px"
subobj.style.clip=(subobj.dropposition[1]=="top")? "rect(auto auto auto 0)" : "rect(0 auto 0 0)" //hide drop down box initially via clipping
subobj.style.visibility="visible"
subobj.startTime=new Date().getTime()
subobj.contentheight=parseInt(subobj.offsetHeight)
if (typeof window["hidetimer_"+subobj.id]!="undefined") //clear timer that hides drop down box?
clearTimeout(window["hidetimer_"+subobj.id])
this.slideengine(subobj, (subobj.dropposition[1]=="top")? "up" : "down")
}
},

curveincrement:function(percent){
return (1-Math.cos(percent*Math.PI)) / 2 //return cos curve based value from a percentage input
},

slideengine:function(obj, direction){
var elapsed=new Date().getTime()-obj.startTime //get time animation has run
if (elapsed<obj.glidetime){ //if time run is less than specified length
var distancepercent=(direction=="down")? this.curveincrement(elapsed/obj.glidetime) : 1-this.curveincrement(elapsed/obj.glidetime)
var currentclip=(distancepercent*obj.contentheight)+"px"
obj.style.clip=(direction=="down")? "rect(0 auto "+currentclip+" 0)" : "rect("+currentclip+" auto auto 0)"
window["glidetimer_"+obj.id]=setTimeout(function(){dropdowncontent.slideengine(obj, direction)}, 10)
}
else{ //if animation finished
obj.style.clip="rect(0 auto auto 0)"
}
},

hide:function(activeobj, subobj, e){
if (!dropdowncontent.isContained(activeobj, e)){
window["hidetimer_"+subobj.id]=setTimeout(function(){
subobj.style.visibility="hidden"
subobj.style.left=subobj.style.top=0
clearTimeout(window["glidetimer_"+subobj.id])
}, dropdowncontent.hidedivmouseout[1])
}
},

hidediv:function(subobjid){
document.getElementById(subobjid).style.visibility="hidden"
},

ajaxconnect:function(pageurl, divId){
var page_request = false
var bustcacheparameter=""
if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE6 or below
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
document.getElementById(divId).innerHTML=this.ajaxloadingmsg //Display "fetching page message"
page_request.onreadystatechange=function(){dropdowncontent.loadpage(page_request, divId)}
if (this.ajaxbustcache) //if bust caching of external page
bustcacheparameter=(pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', pageurl+bustcacheparameter, true)
page_request.send(null)
},

loadpage:function(page_request, divId){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(divId).innerHTML=page_request.responseText
}
},

resize:function(anchorobj, subobj, e){
var horizontaloffset=(subobj.dropposition[0]=="left")? -(subobj.offsetWidth-anchorobj.offsetWidth) : 0 //calculate user added horizontal offset
var verticaloffset=(subobj.dropposition[1]=="top")? -subobj.offsetHeight : anchorobj.offsetHeight //calculate user added vertical offset
subobj.style.left=this.getposOffset(document.getElementById('contentlink'), "offsetLeft") + horizontaloffset + "px"
subobj.style.top=this.getposOffset(anchorobj, "offsetTop")+verticaloffset+3 +"px"
},

addevt:function(o,t,f,p1,p2){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p1,p2);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p1,p2); });
},

init:function(anchorid, pos, glidetime, revealbehavior){
var anchorobj=document.getElementById(anchorid)
var subobj=document.getElementById(anchorobj.getAttribute("rel"))
var subobjsource=anchorobj.getAttribute("rev")
if (subobjsource!=null && subobjsource!="")
this.ajaxconnect(subobjsource, anchorobj.getAttribute("rel"))
subobj.dropposition=pos.split("-")
subobj.glidetime=glidetime || 1000
subobj.style.left=subobj.style.top=0
if (typeof revealbehavior=="undefined" || revealbehavior=="mouseover"){
anchorobj.onmouseover=function(e){dropdowncontent.show(this, subobj, e)}
anchorobj.onmouseout=function(e){dropdowncontent.hide(subobj, subobj, e)}
if (this.disableanchorlink) anchorobj.onclick=function(){return false}
}
else
anchorobj.onclick=function(e){dropdowncontent.show(this, subobj, e); return false}
this.addevt(window,'resize','resize',anchorobj,subobj);
if (this.hidedivmouseout[0]==true) //hide drop down DIV when mouse rolls out of it?
subobj.onmouseout=function(e){dropdowncontent.hide(this, subobj, e)}
}
}/*]]>*/
</script>
</head>
<body topmargin="0" bottommargin="0" rightmargin="0" leftmargin="0">


<table border="0" cellspacing="0" cellpadding="0" style="width:100%; height:100%">

</tr>
<td style="height:300px;background-color:#000000;" valign="top">

<table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<tr>
<td style="background-color:#000000;">&nbsp;</td>
<td style="width:1030px;">



</td>
<td style="background-color:#000000;">&nbsp;</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" style="width:100%; height:20px; margin-top:5px; background-color:#666666;">

<tr>
<td style="background-color:#666666;">&nbsp;</td>
<td style="width:900px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF;">

</DIV>






<!--Example #2: -->

<a href="http://www.revision.com" id="contentlink" rel="subcontent2" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF;">Link 1</a>

<a href="http://www.revision.com/" id="contentlink2" rel="subcontent2" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF;">Link 2</a>

<DIV id="subcontent2" style="position:absolute; visibility: hidden; border-top: 0px solid #666; background-color:#c6c6c7; width: 900px; height: 100px; padding: 0px; opacity: .7; filter: alpha(opacity=70);">


</DIV>

<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:


dropdowncontent.init("contentlink", "center-bottom", 500, "click")
dropdowncontent.init("contentlink2", "center-bottom", 500, "click")
</script>
</td>
<td style="background-color:#666666;">&nbsp;</td>
</tr>
</table>



</td>
</tr>


</table>

</body>
</html>

Reply With Quote