PDA

Click to See Complete Forum and Search --> : Stop the Scrolling

Four_of_Five
09-28-2003, 02:41 PM
Ever since I've used this piece of Javascript (see below), my webpage suddenly got the scrollbars syndrome..now, even without anymore content below it, it just keeps on scrolling. I've already tried the overlow: hidden css...but still it doesnt work...any more ideas?

<title>Slide-In Menu</title>
<style type="text/css">
p
{
overflow: hidden
}
</style>
body {background-image:url(back.gif);}
#menu {position:absolute; top:-2000px; border:1px solid #000000; border-collapse:collapse; visibility:hidden;}
td.txt {border:1px solid #FFFF00; text-align:center; font-weight:bold; color:#ffffff;}
td.txt a{font-family:tahoma,arial,helvetica,sans-serif; font-size:12px; font-weight:bold; color:#ffffff; text-decoration:none;}
td.txt a:hover{font-family:tahoma,arial,helvetica,sans-serif; font-size:12px; font-weight:bold; color:#000000; text-decoration:none;}
</style>
<script type="text/javascript">
var ie5= (document.getElementById && document.all);
var ns6= (document.getElementById && !document.all);

var MenuTop = 50; // menu top position
var MenuLeft = 150; // how much your menu slide in and out

var timerID1 = null;
var timerID2 = null;

function statik(){
if(ie5){
document.getElementById('menu').style.top = document.body.scrollTop + MenuTop;
}
if(ns6){
document.getElementById('menu').style.top = window.pageYOffset + MenuTop;
}
}

function changeBG(obj, bgColor) {
if(ie5 || ns6){
obj.style.backgroundColor = bgColor;
}
}

function slideIn(){
if(ie5 || ns6){
if(parseInt(document.getElementById('menu').style.left) < 0){
clearTimeout(timerID2);
document.getElementById('menu').style.left = parseInt(document.getElementById('menu').style.left) + 5 + "px";
timerID1=setTimeout("slideIn()", 10);
}
}
}

function slideOut(){
if(ie5 || ns6){
if(parseInt(document.getElementById('menu').style.left) > -MenuLeft){
clearTimeout(timerID1);
document.getElementById('menu').style.left = parseInt(document.getElementById('menu').style.left) - 5 + "px";
timerID2=setTimeout("slideOut()", 5);
}
}
}

function reDo(){
if(ie5 || ns6){
window.location.reload();
}
}

function slideMenuInit(){
if(ie5 || ns6){
document.getElementById('menu').style.visibility = "visible";
document.getElementById('menu').style.left = -MenuLeft;
document.getElementById('menu').style.top = MenuTop;
}
}


window.onresize = reDo;
setInterval ('statik()', 1);

</script>
</head>
<body onload="slideMenuInit()">

<table id="menu" width="180" border="1" cellpadding="3" cellspacing="0" bgcolor="#0099CC" bordercolor="#FFFF00" onmouseover="slideIn()" onmouseout="slideOut()">
<tr>
<td class="txt" onmouseover="changeBG(this,'#ff0000')" onmouseout="changeBG(this,'#0099CC')"><a href="#">home</a></td>
<td rowspan=6 class="txt">M<br/>E<br/>N<br/>U</td>
</tr>
<tr>
<td class="txt" onmouseover="changeBG(this,'#ff0000')" onmouseout="changeBG(this,'#0099CC')"><a href="#">dhtml scripts</a></td>
</tr>
<tr>
<td class="txt" onmouseover="changeBG(this,'#ff0000')" onmouseout="changeBG(this,'#0099CC')"><a href="#">dhtml tutorials</a></td>
</tr>
<tr>
<td class="txt" onmouseover="changeBG(this,'#ff0000')" onmouseout="changeBG(this,'#0099CC')"><a href="#">promote this site</a></td>
</tr>
<tr>
<td class="txt" onmouseover="changeBG(this,'#ff0000')" onmouseout="changeBG(this,'#0099CC')"><a href="#">help forum</a></td>
</tr>
<tr>
<td class="txt" onmouseover="changeBG(this,'#ff0000')" onmouseout="changeBG(this,'#0099CC')"><a href="#">contact us</a></td>
</tr>
</table>

<script type="text/javascript">
for(i=1;i<101;i++){
document.write("<br/>");
}
</script>

</body>
Jona
09-28-2003, 07:05 PM
Enter Gecko. Absolute positioning gives scrollbars--it probably doesn't show scrollbars in IE.

[J]ona
Four_of_Five
09-29-2003, 02:10 PM
Originally posted by Jona
Enter Gecko. Absolute positioning gives scrollbars--it probably doesn't show scrollbars in IE.

[J]ona

Hmmmm...i'm sorry...the what??:confused: The only Gecko I know of is the one staring at me on the wall....

I guess the problem with my "menu" is that it's the "floating" kind...any way to nail it down into one spot??
Jona
09-29-2003, 02:12 PM
The Gecko engine is the engine that Mozilla and Netscape run off of--basically how it translates HTML, XHTML, CSS and JavaScript code...

When you use absolute positioning, the Moz/NS browser will show scrollbars for stuff that just isn't there. Why? Beats the crud out of me, but have you tried your script in Internet Explorer? If it still shows the scrollbar then, we have a case. :p

[J]ona
Four_of_Five
09-29-2003, 02:47 PM
Originally posted by Jona
The Gecko engine is the engine that Mozilla and Netscape run off of--basically how it translates HTML, XHTML, CSS and JavaScript code...

When you use absolute positioning, the Moz/NS browser will show scrollbars for stuff that just isn't there. Why? Beats the crud out of me, but have you tried your script in Internet Explorer? If it still shows the scrollbar then, we have a case. :p

[J]ona

Huh??? There are other browsers???:p I'm kidding...Actually, I only use IE as my standard browser...well, I tried it on Netscape7.1 and the Sliding Menu didnt work at all :( Not that I was that concerned...

...so I guess, the case is on...Houston, we have a problem ;)
Jona
09-29-2003, 02:50 PM
Indeed! A problem... for Houston... and you. :p

[J]ona
Jona
09-29-2003, 02:52 PM
Wait! Ha ha, I just realized something. Take this part out...


<script type="text/javascript">
for(i=1;i<101;i++){
document.write("<br/>");
}
</script>


(It inserts 100 new lines in the HTML code...)

[J]ona
Four_of_Five
09-29-2003, 03:23 PM
THANKS!!!! :D

I didnt think of looking for it at the end of the script...i know better next time...

Thanks again!
Jona
09-29-2003, 06:16 PM
It's the simple things in life that you cherish...

[J]ona