Floating menu and doctype

**chrisboots** · 12-20-2011, 08:13 AM

1) Script Title:
Floating Menu Script
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...staticmenu.htm
3) Describe problem:

I am using this script on my website. I copy and pasted it right about the </body> and it worked fine, untill i had to but the DOCTYPE at the top, using any doctype breaks the code in chrome, but without a doctype, IE messes up. please can you help ?

(thread title should say doctype not dostype)

thanks

**vwphillips** · 12-20-2011, 10:41 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<div style="height:2000px;" ></div>
<div id="divStayTopLeft" style="position:absolute">

<!--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.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></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(){
	var startX = 3,startY = 150,d = document;
	function ml(id)	{
		var el=d.getElementById(id);
		el.sP=function(x,y){
         this.style.left=x+'px';
         this.style.top=y+'px';
         };
		el.x = startX;
		if (verticalpos=="fromtop")
	     el.y = startY;
		else{
		 el.y =  document.body.scrollTop + document.body.clientHeight;
		 el.y -= startY;
		}
		return el;
	}
	window.stayTopLeft=function(){
		if (verticalpos=="fromtop"){
		 ftlObj.y += (wwhs()[3] + startY - ftlObj.y)/8;
		}
		else{
 	     ftlObj.y += (wwhs()[3] + wwhs()[1] - startY - ftlObj.y)/8;
		}
		ftlObj.sP(ftlObj.x, ftlObj.y);
		setTimeout(function(){ stayTopLeft(); }, 10);
	}
	ftlObj = ml("divStayTopLeft");
	stayTopLeft();
}

function wwhs(){
 if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
 else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
 return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}



JSFX_FloatTopDiv();
</script>

</body>

</html>

**chrisboots** · 12-20-2011, 11:01 AM

IT WORKED

Thank you SOO much, you have saved my day !

**vwphillips** · 12-20-2011, 12:13 PM

further rationalisation

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<div style="height:2000px;" ></div>
<div id="divStayTopLeft" style="position:absolute;left:200px;">

<!--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.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></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
*/



function JSFX_FloatTopDiv(verticalpos,startY,inc){
 var d=document,ftlObj=d.getElementById('divStayTopLeft'),ud=verticalpos=='fromtop',y,inc=typeof(inc)=='number'&&inc>-1?inc:8;
 function wwhs(){
   if (window.innerHeight){
    return [window.innerHeight-10,window.pageYOffset];
   }
   else if (d.documentElement.clientHeight){
    return [d.documentElement.clientHeight-10,d.documentElement.scrollTop];
   }
   return [d.body.clientHeight,d.body.scrollTop];
  }
 y=ud?startY:wwhs()[1]+wwhs()[0]-startY;
 function stayTopLeft(){
  y+=ud?(wwhs()[1]+startY-y)/inc:(wwhs()[1]+wwhs()[0]-startY-y)/inc;
  ftlObj.style.top=y+'px';
  setTimeout(function(){ stayTopLeft(); }, 10);
 }
 stayTopLeft();
}




//parameter 0 = 'frombottom' or 'fromtop'
//parameter 1 = the Y position
//parameter 2 = (optional) the scroll speed. (number, 1 to 100, default = 8)
JSFX_FloatTopDiv('frombottom',200,30);
</script>

</body>

</html>>

Thread: Floating menu and doctype

Thread Tools

Search Thread

Floating menu and doctype

Bookmarks

Bookmarks

Posting Permissions