Drop down/ Overlapping Content script and image rollovers..

[Luterin]

1) Script Title:
Drop down/ Overlapping Content script

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

3) Describe problem:
I am using the above script to achieve alot of things on my page, but one thing seems to work differently in IE and FF.

I am using CSS to achieve a rollover on an image within an anchor, and it works as I want it to with IE, but with FF the image of the anchor changes when I move the pointer to the DIV. On IE it stays on the rollover image until I move it out of the DIV aswell, and that is the way I want it ofcourse.

Basically, this is what I do...

The CSS:

a#meny1_link img {height:35; width:170; border-width: 0; background: url(pictures/menu2/meny1.gif) top left no-repeat;}
a#meny1_link:hover img {height:35; width:170; border-width: 0; background: url(pictures/menu2/meny1_2.gif) top left no-repeat;}

The Button:

<a id="meny1_link" rel="meny1_subcontent" href="."><img src="pictures/blank.gif" alt="meny1"></a>

The Div:

<DIV id="meny1_subcontent" style="position:absolute; visibility:hidden; border: 0px; background: url(pictures/menu2/meny1_back2.gif) 0% 0%; width: 170px; height: 200px; padding: 0px; z-index: 4;">
<center>
test menu1!<br>
</center>
</DIV>

The Script:

<script type="text/javascript">
dropdowncontent.init("meny1_link", "right-bottom", 200, 'mouseover')
</script>

I wonder if it's possible to solve this in an "easy" way, or the best way would be to modify the javascript and add rollover features along where it shows/hides the DIV?

Thanks in advance,
Christian

[ddadmin]

The first behavior (as seen in FF) is actually the correct/ expected one. The anchor link and drop down DIV are two separate elements on the page, so your CSS should only affect the state of the link when the mouse is over/out of the link itself. I understand what you're saying with what you want to happen, but off the top of my head I don't see how you would do this using a pure CSS rollover image (versus JavaScript).

[Luterin]

Ok, kinda thought that it was FF that was doing it right and IE doing it wrong, based on the actual CSS and what it logically should do.

Thanks for the reply. I'll just hack the code some and add some parameters to the init function to add 2 pictures there, then add the needed rows at the places where the div is actually shown/hidden, and I guess it should work out fine.

[ddadmin]

If you run into any problems, just post an update here.

[Luterin]

I finally had some time today to sit down and play with this, and I managed to solve it, but by some strange reason, I did not manage to change the background of the anchor object, so I reverted back to using a <IMG> tag and suppling that ID along with the 2 pictures that I wanted it to toggle with, then change the src to that <IMG> instead. And this worked fine.

I'll list the changed functions here, just for future use if anyone else gets the same problem and wants to do a similar thing, they they wont have to do the code themselves.

The added code is highlighted in Red.

Init:

 init:function(anchorid, pos, glidetime, revealbehavior, imgid, pic1, pic2){
		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 imgid != "undefined") {
			subobj.imgid=imgid
			subobj.pic1=pic1
			subobj.pic2=pic2
			var imgobj=document.getElementById(imgid)
			imgobj.src=pic1
		}
		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)}
	}

Show:

	show:function(anchorobj, subobj, e){
		if (!this.isContained(anchorobj, e)){
			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(anchorobj, "offsetLeft") + horizontaloffset + "px"
			subobj.style.top=this.getposOffset(anchorobj, "offsetTop")+verticaloffset+"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")
			if (typeof subobj.imgid != "undefined") {
				var imgobj=document.getElementById(subobj.imgid)
				imgobj.src=subobj.pic2
			}
		}
	},

Hide:

	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])
				if (typeof subobj.imgid != "undefined") {
					var imgobj=document.getElementById(subobj.imgid)
					imgobj.src=subobj.pic1
				}
			}, dropdowncontent.hidedivmouseout[1])
		}
	},

Then the actual Javascript Code from within the page will look like:

dropdowncontent.init("meny1_link", "right-bottom", 200, 'mouseover', 'meny1_pic', 'pictures/menu2/meny1.gif', 'pictures/menu2/meny1_2.gif')

Where the last 3 parameters is the ID of the <IMG> tag, the 1st picture (standard) and the 2nd picture (rollover).

It's 100% compatible with earlier versions, so old code which doesnt include the last 3 parameters will still work fine.

Feel free to do what you want with this, but I just wanted to share it, cause this allows you to do very cool menus without having to care about limitations other menu systems have, since the actual menu that shows aint a prederemined list, its plain HTML code that can contain anything.

[ddadmin]

Thanks for sharing