Welcome to the Geeks & God Static Archive. Read more »

JavaScript - Scrolling menu

Joined: 11/28/2008

My problem is that I have a menu that won´t follow when you scroll the page. I just can´t understand what the problem is. I´ve included the code for the HTML-file and the CSS-file.

Thank you very much for any help!!

/baaasmiley.gif" style="vertical-align:middle" emoid=":baa:" border="0" alt="baaasmiley.gif" /> /baaasmiley.gif" style="vertical-align:middle" emoid=":baa:" border="0" alt="baaasmiley.gif" /> /baaasmiley.gif" style="vertical-align:middle" emoid=":baa:" border="0" alt="baaasmiley.gif" /> /guitar.gif" style="vertical-align:middle" emoid=":guitar:" border="0" alt="guitar.gif" /> /guitar.gif" style="vertical-align:middle" emoid=":guitar:" border="0" alt="guitar.gif" /> /whistle.gif" style="vertical-align:middle" emoid=":whist:" border="0" alt="whistle.gif" /> /whistle.gif" style="vertical-align:middle" emoid=":whist:" border="0" alt="whistle.gif" />

=============================
CODE FOR THE HTML-FILE
=============================
<HTML>
<HEAD>
<LINK HREF="appearance.css" REL=stylesheet TYPE="text/css">
<!-- MENU SCROLLING BEGINS HERE -->
<!-- =================== -->
<script type="text/javascript">
var v, dS, sD, y, yy, object, x = 0;
function setVariables() {
if (navigator.appName == "Netscape") {
v=".top=";
dS="document.";
sD="";
y="window.pageYOffset+x";
}
else {
v=".pixelTop=";
dS="document.all.";
sD=".style";
y="document.body.scrollTop+x";
}
}
function checkLocation() {
object="iemenu";
yy=eval(y);
eval(dS+object+sD+v+y);
if(x!=320){x+=10;}
setTimeout("checkLocation()",50);
}
</script>
<!-- MENU SCROLLING ENDS HERE -->
<!-- =================== -->
</HEAD>
<BODY onLoad="setVariables();checkLocation();">

<!-- THE IMPORTANT MENU CODE BEGINS HERE -->
<!-- ============================= -->
<script LANGUAGE="JavaScript" TYPE="text/javascript">
var IE = (document.all);
var NS = (document.layers);
var N6 = (document.getElementById) && (!document.all);
if (NS)
{document.write('<LAYER ID="nsmenu" onMouseOver="pullout()" onMouseOut="pushin()">');}
else
{document.write('<DIV ID="iemenu" onMouseOver="pullout()" onMouseOut="pushin()">');}
</SCRIPT>
<!-- THE IMPORTANT MENU CODE ENDS HERE -->
<!-- ============================= -->

<!-- THIS PART SHOULDN´T BE A PROBLEM... -->
<!-- ============================= -->
<script LANGUAGE="JavaScript" TYPE="text/javascript">
var menit=new Array(); var menitlnk=new Array()

menit[1] = "En enkel hemsida"
menit[2] = "Struktur"
menit[3] = "Länkar"
menit[4] = "Bilder"
menit[5] = "Textformatering"
menit[6] = "Bakgrund m.m."
menit[7] = "Tabeller"
menit[8] = "Ramar"
menit[9] = "Besöksräknare"
menit[10] = "Ljud"
menit[11] = "Tagg-index"
menit[12] = "Frågeforumet"
menit[13] = "Andra sidor"
menitlnk[1] = "intro.html"
menitlnk[2] = "grunden.html"
menitlnk[3] = "lankar.html"
menitlnk[4] = "bilder.html"
menitlnk[5] = "textformat.html"
menitlnk[6] = "sidegensk.html"
menitlnk[7] = "tabeller.html"
menitlnk[8] = "ramar.html"
menitlnk[9] = "counter.html"
menitlnk[10] = "ljud.html"
menitlnk[11] = "taggindex.html"
menitlnk[12] = "http://pub.alxnet.com/forum?id=1031321"
menitlnk[13] = "resources.html"

document.write('<TABLE CELLPADDING="0" CELLSPACING="0" width="100%"><TR><TD><A HREF="index.html"><div class="menulnk"> - Välkommen!</div></A></TD><TD BORDERCOLOR=BLACK ROWSPAN='+menit.length+'><IMG SRC="images/meny.gif" style="border-right: 1px solid white;"></TD></TR>')

for (i=1;i<=menit.length-1;i++)
if (document.URL.indexOf(menitlnk[i]) > -1) {
document.write('<TR><TD height="15"><DIV ID="welcome"> - '+menit[i]+'</DIV></TD></TR>')
} else { document.write('<TR><TD height="15"><A HREF=\"'+menitlnk[i]+'\"><div class="menulnk"> - '+menit[i]+'</div></A></TD></TR>')}
document.write('</TABLE>');
</SCRIPT>

<script LANGUAGE="JavaScript" TYPE="text/javascript">
function regenerate() {
window.location.reload();
}

function regenerate2() {
if (NS) setTimeout("window.onresize=regenerate()",400);
}

window.onload=regenerate2;

if (IE)
{document.write('</DIV>');
slidemenu=IE.iemenu.style;
rightpos = 0;
leftpos = -120;}
else
{if (NS)
{document.write('</layer>');
slidemenu=NS.nsmenu;
rightpos = 110;
leftpos = 10;}
else
{document.write('</DIV>');
slidemenu = document.getElementById("iemenu");
rightpos = 0;
leftpos = -110;}
}

function pullout(){
if (window.push) clearInterval(push);
pullit=setInterval("startpull()",50);
}

function pushin(){
clearInterval(pullit);
push=setInterval("startpush()",50);
}

function startpull(){
if ((IE) && slidemenu.pixelLeft<rightpos)
slidemenu.pixelLeft=0;
else
if ((NS) && (slidemenu.left<rightpos))
slidemenu.left+=10;
else
if ((N6) && (slidemenu.offsetLeft<rightpos))
slidemenu.style.left=(slidemenu.offsetLeft + 10) + 'px';
else
if (window.pullit)
clearInterval(pullit);
}

function startpush(){
if ((IE) && slidemenu.pixelLeft>leftpos)
slidemenu.pixelLeft-=10;
else
if ((NS) && (slidemenu.left>leftpos))
slidemenu.left-=10;
else
if ((N6) && (slidemenu.offsetLeft>leftpos))
slidemenu.style.left=(slidemenu.offsetLeft - 10) + 'px';
else
if (window.push)
clearInterval(push);
}
</SCRIPT>

</BODY>
</HTML>

=============================
CODE FROM APPEARANCE.CSS
=============================
#welcome {
FONT-FAMILY: Verdana; FONT-SIZE:10px; FONT-WEIGHT:bold; COLOR=#9EC8E2; }
#nsmenu{
position:absolute; left: -130px; width:140px; top:10px; border:2px solid black;
background-color:WHITE; layer-background-color:white; font:bold 10px Verdana; }
#iemenu{
position:absolute; left: -119px; width:140px; top:10px; border:2px solid black;
background-color:WHITE; layer-background-color:white; font:bold 10px Verdana;
z-index: 2; }

Joined: 11/28/2008
Is this similar to the effect

Is this similar to the effect you are trying to create?

http://www.milonic.co.uk/menusample.php?sampleid=10

Joined: 11/28/2008
Yup! I found another script

Yup! I found another script to do it though, but thanx for your help anyway. At least I know a great site to learn PHP thanx to your answer!

Joined: 11/28/2008
uhh, maybe it wasn´t PHP...

uhh, maybe it wasn´t PHP... well, it least it was a good site that probably will be handy some day...

/whistle.gif" style="vertical-align:middle" emoid=":whist:" border="0" alt="whistle.gif" /> /whistle.gif" style="vertical-align:middle" emoid=":whist:" border="0" alt="whistle.gif" /> /whistle.gif" style="vertical-align:middle" emoid=":whist:" border="0" alt="whistle.gif" />