Floating Menu

**northyukon** · 12-27-2008, 03:15 PM

I've used this floating menu on a web page
it works with <html> as the Doc Type, however, when I use the following DOC Type it stops floating.

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">

http://www.dynamicdrive.com/dynamici...staticmenu.htm

Thanks for your help.

**jscheuer1** · 12-27-2008, 04:01 PM

You really should not use that DOCTYPE. But a valid URL DOCTYPE of HTML 4.01 strict (preferred) or transitional (acceptable) would have the same problem.

The script is outdated. Try this version:

Code:

<div id="divStayTopLeft" style="position:absolute">
<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="1" style="width: 130px;" cellspacing="0" cellpadding="0">
  <tr>
    <td style="width: 100%; background-color: #ffc;" align="center">
      <b style="font-size: 112.5%;">Menu</b></td>
  </tr>
  <tr>
    <td style="width: 100%; background-color: #fff;">
       <span>*<a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>
      *<a href="http://www.dynamicdrive.com/new.htm">What's New</a><br>
      *<a href="http://www.dynamicdrive.com/hot.htm">What's Hot</a><br>
      *<a href="http://www.dynamicdrive.com/faqs.htm">FAQs</a><br>
      *<a href="http://www.dynamicdrive.com/morezone/">More Zone</a></span></td>
  </tr>
</table>
<!--END OF EDIT-->
</div>

<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="frombottom"


function JSFX_FloatTopDiv()
{
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}
	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();
</script>

Use as before, as the last thing before your closing </body> tag.

**northyukon** · 12-27-2008, 06:25 PM

I printed the newer version of script, but can't seem to find where the differences to the old version appear.

Also changed the DOC TYPE to <!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.0 //EN">

but still the menu doesn't float.

I must be missing something.

Thanks.

**jscheuer1** · 12-27-2008, 07:09 PM

Well, I'd use a valid URL HTML 4.01 DOCTYPE, but I just tested with the DOCTYPE you have in your post, and it was fine. You do have to have enough other content that is in the normal flow of the page on your page for there to be anywhere to scroll the page and to thus be able to see the floating effect. Try this (copy the whole page into a text only editor like NotePad) and save as test.htm, and view it in the browser:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="divStayTopLeft" style="position:absolute">
<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="1" style="width: 130px;" cellspacing="0" cellpadding="0">
  <tr>
    <td style="width: 100%; background-color: #ffc;" align="center">
      <b style="font-size: 112.5%;">Menu</b></td>
  </tr>
  <tr>
    <td style="width: 100%; background-color: #fff;">
       <span>*<a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>
      *<a href="http://www.dynamicdrive.com/new.htm">What's New</a><br>
      *<a href="http://www.dynamicdrive.com/hot.htm">What's Hot</a><br>
      *<a href="http://www.dynamicdrive.com/faqs.htm">FAQs</a><br>
      *<a href="http://www.dynamicdrive.com/morezone/">More Zone</a></span></td>
  </tr>
</table>
<!--END OF EDIT-->
</div>

<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="frombottom"


function JSFX_FloatTopDiv()
{
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}
	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();
</script>
</body>
</html>

If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

**northyukon** · 12-28-2008, 01:41 AM

Thank you, I substituted your code for my old code at this site.

http://www.thepercy.com/history2-floatmenu.html

It is working just fine now, even with my previous DOC TYPE. Because I have validated all my pages with the XHTML validator I didn't want to change DOC TYPES.

Thanks again. Karen

**jscheuer1** · 12-28-2008, 03:57 AM

I never said it wouldn't work with that DOCTYPE. Whether to use an XHTML DOCTYPE or not is a separate issue. For more info on that, see:

http://www.webdevout.net/articles/beware-of-xhtml

Glad it's working for you.

Thread: Floating Menu

Thread Tools

Search Thread

Floating Menu

The Following User Says Thank You to jscheuer1 For This Useful Post:

Floating menus

floating menu

Bookmarks

Bookmarks

Posting Permissions