Need help with Floating Menu

[ladyhauwke]

1) Script Title: Floating Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...staticmenu.htm

3) Describe problem:
Hi there. I am very new to javascript and wanted to get a webpage up quickly that used a floating menu so I am asking for help here.

The script above has no problems when I view the URL in firefox, I see the menu and it floats perfectly.

So, I followed the instructions and copied and pasted the code into my own page thinking it would be easy. But for some reason it does not work on my own page using the exact same browser (firefox).

I am using dreamweaver to edit the page and was wondering if any could think of why this wouldn't work for me? Does the server the page resides on need something special? Do I need to identify the page as containing javascript in some way?

Thanks for your help.
-Julie

[ladyhauwke]

I keep thinking my problem might be something to do with layers.

If I attempt to add a layer in Dreamweaver I notice it used "<div>" tags not "<layer>" tags.

It also appears that the javascript itself seems to depend on layers. Is it possible there is some thing I need to do to enable layers using the "<layer>" tag on my webpage?

[Veronica]

Could you provide the URL of the page that you've done?

Also, editors like Dreamweaver often make changes that mess up scripts. If you're copying and pasting a script/code, there should be some way in dreamweaver to do it using "html view." Sorry, I don't use Dreamweaver to know exactly where that is. But what you need to do is get into html view, and then paste the code and save it, all in html view.

Finally, make sure you paste the code at the END of the document, right before the </body> tag

[jscheuer1]

Most likely it is because you have a DOCTYPE on your page and the demo page on DD does not.

Try replacing this:

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):d.all?d.all[id]:d.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();

with this:

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

function JSFX_FloatTopDiv()
{
	var startX = 3,
	startY = 150;
	var PX='px', d = document;
	function ml(id)
	{
		var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
		if(d.layers){el.style=el,PX='';}
		el.sP=function(x,y){el.style.left=x+PX;el.style.top=y+PX;};
		el.x = startX;
		if (verticalpos=="fromtop")
		el.y = startY;
		else{
		el.y = window.innerHeight ? pageYOffset + window.innerHeight : ietruebody().scrollTop + ietruebody().clientHeight;
		el.y -= startY;
		}
		return el;
	}
	window.stayTopLeft=function()
	{
		if (verticalpos=="fromtop"){
		var pY = window.innerHeight ? pageYOffset : ietruebody().scrollTop;
		ftlObj.y += (pY + startY - ftlObj.y)/8;
		}
		else{
		var pY = window.innerHeight ? pageYOffset + window.innerHeight : ietruebody().scrollTop + ietruebody().clientHeight;
		ftlObj.y += (pY - startY - ftlObj.y)/8;
		}
		ftlObj.sP(ftlObj.x, ftlObj.y);
		setTimeout("stayTopLeft()", 10);
	}
	ftlObj = ml("divStayTopLeft");
	stayTopLeft();
}
JSFX_FloatTopDiv();

[ladyhauwke]

Thanks so much for the replies!

I was using html view but I did have a doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

However, I managed to find another website that had a floating menu that specified I create a <div> section instead of a <layer> section and this one worked even with the doctype.

Now that I've got it working I don't want to mess with it! But I'll definitely keep these thoughts in mind for next time.

Thanks again! I was really starting to panic there for a bit.