Static menu scripts not working Options

[David_Hayden]

I'm trying to have the navigation buttons that are on the top of my page (http://www.cjlms.com/bug101/bug101_1.htm) scroll with the page. I've found a couple of different JavaScripts that supposedly do this, but none of them seem to be working on my site. The scripts seem to work on the pages that host the examples, so I'm guessing it's something about my page that's causing the problem? Any insight?

Below is one of the scripts I've tried. There's a second that's up on the site currently too, I didn't want to post 300 lines of code though. Thanks!

<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

<layer id="divStayTopLeft">


<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="50%">
<a href="../../LMS_Template_files_and_graphics/bug101_intro.htm" target="_self"><img src="http://www.cjlms.com/images/intro_page.gif" border="0" alt="Introduction"></a><a href="../../LMS_Template_files_and_graphics/bug101_intro.htm" target="_self"><img src="http://www.cjlms.com/images/previous_page.gif" border="0" alt="Previous"></a></td>
<td width="50%" bg color="#FFFFFF">
<div align="right">
<a href="../../LMS_Template_files_and_graphics/bug101_2.htm" target="_self"><img src="http://www.cjlms.com/images/next_page.gif" border="0" alt="Next"></a><a href="../../LMS_Template_files_and_graphics/bug101_intro.htm" target="_self"><img src="http://www.cjlms.com/images/summary_page.gif" border="0" alt="Summary"></a></div>
</td>
</tr>
</table>

</layer>


<script type="text/javascript">

/*
Floating Menu script- Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="fromtop"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
var startX = 3,
startY = 150;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id).all?d.all[id].layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>

[David_Hayden]

I found a different script that worked. Not enitrely sure why, and I'd love to know, but I can try and figure that out on my own I guess.

<!-- *********************************************************
* You may use this code for free on any web page provided that
* these comment lines and the following credit remain in the code.
* Floating Div from http://www.javascript-fx.com
******************************************************** -->
<div id="divTopLeft" style="position:absolute">
<!-- Start - put your content here --->
<b>Your Content Here</b>
<!-- End - put your content here --->
</div>

<script type="text/javascript">
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy)
{
var el=d.getElementById?d.getElementById(id).all?d.all[id].layers[id];
var px = document.layers ? "" : "px";
window[id + "_obj"] = el;
if(d.layers)el.style=el;
el.cx = el.sx = sx;el.cy = el.sy = sy;
el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};

el.floatIt=function()
{
var pX, pY;
pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
document.documentElement && document.documentElement.clientWidth ?
document.documentElement.clientWidth : document.body.clientWidth;
pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop;
if(this.sy<0)
pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight;
this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
this.sP(this.cx, this.cy);
setTimeout(this.id + "_obj.floatIt()", 40);
}
return el;
}
JSFX_FloatDiv("divTopLeft", 10,30).floatIt();
</script>
<!-- ********************************************************* -->

[Frederiek]

I think you should look into the "fixed" property of background-attachment in CSS for browsers that support the property, instead of entirely relying on javascript, which can be disabled/unavailable. (See http://www.w3.org/Style/Examples/007/menus as an exemple). There are javascript solutions for browsers that don't support the property (eg. IE6), though I can't find the url at this moment.

[Christian J]

I think you should look into the "fixed" property of background-attachment in CSS

Did you mean "position: fixed"? "Background-attachment: fixed" is just for backgrounds.

[pandy]

There are scripts that add js based positioning for IE and let better browsers use CSS, for example this one.
http://www.doxdesk.com/software/js/position.html
(I don't know if it's IE7 safe.)
Not forcing JS on everyone is a good thing because those "floating boxes" tend to be jumpy and IMO they are worse than 10 animated GIFs together. I'm not showing off a PC opinion here. I have an actual problem with those things. They make me ill.

[Frederiek]

Did you mean "position: fixed"? "Background-attachment: fixed" is just for backgrounds.

Oops, sorry!

Anyway, go see Westciv's The Rising Tide, Making IE 5.5+ use position: fixed; and especially CSSplay's Position fixed for Internet Explorer.