Anyone familiar with this?

[timmah1]

I have a marquee, and when you roll-over the photo in the marquee, it drops down more information about that photo.

The problem I'm having is the position of the drop down, I need it to show directly below the photo, but it's showing to the right, sometimes off screen.

 

Can anybody help me out with this? I'm not very familiar with javascript

 

<a href="http://www.thehoneypotclub.com/" id="searchlink" rel="subcontent"><img src="escorts/<?php echo $row1['SampleOne']; ?>" height="110"></a>
<DIV id="subcontent" style="position:absolute; visibility: hidden; border: 9px solid orange; background-color: white; width: 150px; padding: 8px; z-index:1;">
<p><b><?php echo $myrow2['EscortName']; ?> Details</b></p>
<ul>
<li><?php echo $myrow2['EscortName']; ?></li>
<li><?php echo $myrow2['Age']; ?></li>
<li>£<?php echo $myrow2['priceperhour']; ?></li>
<li><a href="index.php?cid=profile&EscortID=<?php echo $myrow2['id']; ?>">View Full Profile</a></li>
</ul>
</DIV>
<script type="text/javascript">
//Call dropdowncontent.init(anchorID, positionString, glideduration) at the end of the page:
dropdowncontent.init("searchlink", "left-bottom", 500)
</script>

 

It calls this script in the header

var dropdowncontent={
delaybeforehide: 100, //set delay in milliseconds before content box disappears onMouseout (1000=1 sec)
disableanchorlink: true, //when user clicks on anchor link, should it be disabled?
ajaxloadingmsg: "Loading content. Please wait...", //HTML to show while ajax page is being feched
ajaxbustcache: true, //Bust cache when fetching 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)){
		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")
	}
},

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.delaybeforehide)
	}
},

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){
	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
	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}
	subobj.onmouseout=function(e){dropdowncontent.hide(this, subobj, e)}
}
}

[phpQuestioner]

You don't need to double post in the forum to get help

 

Play around with the margin and left and top positioning.

[phpQuestioner]

 

Also; display it as a block element; that way it should break after the element above it.

[timmah1]

I didn't mean to post this twice, it was a mistake.

 

I don't know how to display it as a block element.

 

If you want to see the problem I'm having, here's a link to the test

 

http://thehoneypotclub.com/honey/test1.php

[phpQuestioner]

you need to have your "subcontent" div in the same container as your image is in. set the css style display to "block". change the margin-top and margin-left as needed. although I did not see it in the code you have posted on this thread (I didn't look at the code on your page) make sure you are not setting the top and left css attributes for your "subcontent" div.

[kratsg]

Using my FireBug and messing around with the marquee, you've got a javascript error with the onmouseover/onmouseout events.

 

<marquee id="scrollingannouncements" onmouseout="this.scrollAmount='10';" onmouseover="this.scrollAmount='0';" scrollamount="10">

 

The marquee should look like this, if you look at it currently in any browser, hovering over it and moving the mouse left or right will let the marquee keep going (it'll jump, but it happens). To fix this, just use javascript to change it's scrollAmount [yes, capital A is required, JS = case-sensitive language] as I did above.

 

As for the positioning, here's where I believe it goes awry:

 

init:function(anchorid, pos, glidetime){
	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
	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}
	subobj.onmouseout=function(e){dropdowncontent.hide(this, subobj, e)}
}

//function show:

show:function(anchorobj, subobj, e){
	if (!this.isContained(anchorobj, 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(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")
	}
}

 

With an example call:

 

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

 

I'm still crunching numbers to figure out what result the function is giving as far as the positions go. I actually like the way this script is set-up, although I'd prefer it in a class format (but that's just me) this is a fun way to go.

 

Can you throw in some alerts and see what offsets and positions it's giving?

[timmah1]

The problem I'm having is this:

<a href="http://www.thehoneypotclub.com/" id="searchlink" rel="subcontent"><img src="escorts/<?php echo $row1['SampleOne']; ?>" height="110"></a>
<DIV id="subcontent" style="position:absolute; visibility: hidden; border: 9px solid orange; background-color: white; width: 150px; padding: 8px; z-index:1;">

The rollover shows up on the far right, sometimes off screen

 

If I do this (change position to relative)

<a href="http://www.thehoneypotclub.com/" id="searchlink" rel="subcontent"><img src="escorts/<?php echo $row1['SampleOne']; ?>" height="110"></a>
<DIV id="subcontent" style="position:relative; visibility: hidden; border: 9px solid orange; background-color: white; width: 150px; padding: 8px; z-index:1;">

It works, but it stretches the box, and don't show up on "top".

 

I need the rollover layer to display on top. How is that achieved?

[kratsg]

That's actually precisely your problem. The absolute positioning does work, but it's got the wrong top/left coordinates. Relative positioning will just show the div literally where it remains in the actual html code.

 

If you coded it below a table, it will show below that.

 

If you coded it inside a marquee, it will show inside that marquee.

 

 

However, absolute positioning physically removes the div from the coding and allows you to place it anywhere on the page, regardless of what's there or not.

[timmah1]

If I put my image inside the DIV tag, the image does not show up.

 

Any guess why?

[timmah1]

I'm assuming this is the problem

var horizontaloffset=(subobj.dropposition[0]=="left")? -(subobj.offsetWidth-anchorobj.offsetWidth) : 0 
var verticaloffset=(subobj.dropposition[1]=="top")? -subobj.offsetHeight : anchorobj.offsetHeight 

 

But, my knowledge of javascript is pretty much nill, I have no idea how to fix this

[kratsg]

Huh, interesting. I just tested this with mouse cursors, the function runs the way it's supposed to... It may be the marquee that's causing all the problems most likely because all the elements for the marqee are on the right side of the page and load through the marquee so you may be getting the coordinates of the marquee element...

 

Which is what your script is doing, however, it should be getting the coordinates of the mouse cursor.