Hey all. I’m working on a project, and am having a hard time figuring out an issue.
Basically, I’ve got some code that enables me to have a scrolling block of text embedded in the middle of my page, that scrolls on a mouseover of a buton.
It works fine, except when I add a particular <div> elsewhere in the page, at which point, in Firefox, the buttons stop functioning (though they still work in IE7).
First, a summary of the <div> structure of the page, along with javascript:
<body>
<div id="master">
<div id="contactinfo"></div> // THIS IS THE OFFENDING DIV
<div id="header"></div>
<div id="header_menu"></div>
<div id="main">
<script type="text/javascript">
iens6=document.all||document.getElementById
ns4=document.layers
//Handles Internet Explorer 5.5-6 -- doesn't use .PNG for border
version=0
if (navigator.appVersion.indexOf("MSIE")!=-1){
temp=navigator.appVersion.split("MSIE")
version=parseFloat(temp[1])
}
if (version>=5.5 && version<7.0) //NON IE browser will return 0
{
//specify speed of scroll (greater=faster)
var speed=2
if (iens6){
document.write('<div id="container" style="position:relative;top:40px;left:30px;width:445px;height:289px;z-index:-2;border:2px solid #CCC;overflow:hidden">')
document.write('<div id="content" style="position:absolute;width:440px;height:289px;left:0;top:0;padding-top:13px;z-index:-10">')
}
} else {
//specify speed of scroll (greater=faster)
var speed=2
if (iens6){
document.write('<div id="container" style="position:relative;top:40px;left:30px;width:445px;height:289px;z-index:0-2;border:none;overflow:hidden"><img src="images/main_border.png">')
document.write('<div id="content" style="position:absolute;width:440px;height:989px;left:0;top:0;padding-top:13px;z-index:-10">')
}
}
</script>
<ilayer name="nscontainer">
<layer name="nscontent">
<!-- SCROLLABLE CONTENT GOES HERE -->
</layer>
</ilayer>
<script language="JavaScript1.2">
if (iens6)
document.write('</div></div>')
</script>
<div id="buttons">
<a href="#" onMouseover="moveup()" onmouseout="clearTimeout(moveupvar)"><img src="uparrow.jpg"></a>
<a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="downarrow.jpg"></a>
</div>
<script language="JavaScript1.2">
if (iens6){
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
} else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}
function movedown(){
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}
function moveup(){
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)
}
function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>
As you can (hopefully) see, there’s a bunch of javascript that does the following:
[list]
[li]Identifies the browser; if it’s IE 5.5/6, it draws two <div>s to hold the scrolling content, using div borders; if it’s not those browsers, it draws the same <div>s but uses a PNG image for the border[/li][li]Grabs the <div> id’d as “content” (or the layer “nscontent”), gets the height of said container (window.onload), and uses it in the functions used to scroll the text up and down.[/li]
It worked fine, until I added the <div> with the red comment.
I’m really not sure at all what the div is doing to disrupt the code; it’s set pretty much out of the flow of everything else.
If I move the <div> above the <div id=“master”> div, it works as well, but gives me another whole mess of formatting problems.
I’m expecting this to sink like a rock, but if anyone who codes has a bout of insomnia tonight and feels like tackling this, it’d be much appreciated.
Oh, the page I’m working on can be found here.