Floating Menu Doesn't Float

[BorderTerroir]

1) Script Title: Floating Menu Script

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

3) Describe problem: It doesn't float

Also just to be a nuisance how do I get it to float at the top?

http://www.hillamhotdogs.co.uk/TestPage.htm

Thanks

John

[jscheuer1]

Replace all of this:

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

<layer id="divStayTopLeft">

<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="1" width="130" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" bgcolor="#FFFFCC">
      <p align="center"><b><font size="4">Menu</font></b></td>
  </tr>
  <tr>
    <td width="100%" bgcolor="#FFFFFF">
      <p align="left"> <a href="http://www.hillamhotdogs.co.uk">Home</a><br>
       <a href="http://www.hillamhotdogs.co.uk/AboutUs.htm">About Us</a><br>
       <a href="http://www.hillamhotdogs.co.uk/MeetTheTeam.htm">The Team</a><br>
       <a href="http://www.hillamhotdogs.co.uk/WhatIsFlyball.htm">Flyball?</a><br>
       <a href="http://www.hillamhotdogs.co.uk/Results.htm">Results</a><br>
       <a href="http://www.hillamhotdogs.co.uk/Diary.htm">Diary</a><br>
       <a href="http://www.hillamhotdogs.co.uk/Links&Blogs.htm">Links & Blogs</a></td>
  </tr>
</table>
<!--END OF EDIT-->

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

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):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();
</script>

With this:

<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;">
       <p> <a href="http://www.hillamhotdogs.co.uk">Home</a><br>
       <a href="http://www.hillamhotdogs.co.uk/AboutUs.htm">About Us</a><br>
       <a href="http://www.hillamhotdogs.co.uk/MeetTheTeam.htm">The Team</a><br>
       <a href="http://www.hillamhotdogs.co.uk/WhatIsFlyball.htm">Flyball?</a><br>
       <a href="http://www.hillamhotdogs.co.uk/Results.htm">Results</a><br>
       <a href="http://www.hillamhotdogs.co.uk/Diary.htm">Diary</a><br>
       <a href="http://www.hillamhotdogs.co.uk/Links&Blogs.htm">Links & Blogs</a></p></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="fromtop"

function JSFX_FloatTopDiv()
{
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}
	var startX = 3,
	startY = 20;
	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>

[BorderTerroir]

Excellent Stuff. Many thanks

http://www.hillamhotdogs.co.uk/TestPage.htm

Next two (sorry) questions;

1. Why doesn't this work for the main text?
<p class="MsoNormal" style="text-indent: 0; margin-left: 200" align="left"><font face="Comic Sans MS">Daisy 05/09/2008<br>

2. Ditto for the menu font;
<td style="width: 100%; background-color: #ffc;" align="center"; font = "Comic Sans MS">

Thanks in advance

John

[jscheuer1]

You are using invalid syntax, an undeclared class (as far as I can see), and deprecated elements. But that's probably not really the problem, as these can often still work out in many browsers. What cannot work is this:

margin-left: 200

It needs to be:

margin-left: 200px

There could also be other problems. But I would suggest:

<p style="margin-left: 200px; text-align: left; font-family: 'comic sans ms';">

And then where you have:

</font></p>

Since we are no longer opening up a deprecated font tag, make it simply:

</p>

[BorderTerroir]

Thanks again, I'm learning tons.

Just one more thing, I would like the font to be Comic Sans MS.

My two attempts have failed miserably.

<td style="width: 100%; background-color: #fff;" align="center"; font="Comic Sans MS">

<td style="width: 100%; background-color: #fff; font=Comic Sans MS">

http://www.hillamhotdogs.co.uk/TestPage.htm

Please help me out.

Thanks

John

[jscheuer1]

<p style="margin-left: 130px; text-align: left; font-family: 'comic sans ms';">Daisy 05/09/2008<br>
We've been on holiday, it's been great!  We w . . . 

 . . .  as I know I won't be able to sleep.</p>
           
<div id="divStayTopLeft" style="position: absolute; font-family: 'comic sans ms';">
<!--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; text-align: center;">
      <b style="font-size: 112.5%;">Menu</b></td>
  </tr>
  <tr>
    <td style="width: 100%; background-color: #fff;">
       <p> <a href="http://www.hillamhotdogs.co.uk">Home</a><br>
       <a href="http://www.hillamhotdogs.co.uk/AboutUs.htm">About Us</a><br>
       <a href="http://www.hillamhotdogs.co.uk/MeetTheTeam.htm">The Team</a><br>
       <a href="http://www.hillamhotdogs.co.uk/WhatIsFlyball.htm">Flyball?</a><br>
       <a href="http://www.hillamhotdogs.co.uk/Results.htm">Results</a><br>
       <a href="http://www.hillamhotdogs.co.uk/Diary.htm">Diary</a><br>
       <a href="http://www.hillamhotdogs.co.uk/Links&Blogs.htm">Links & Blogs</a></p></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 . . .

[BorderTerroir]

Hi John

You have done it again, many thanks.

Please mark this resolved.