Results 1 to 4 of 4

Thread: Floating menu and doctype

  1. #1
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Floating menu and doctype

    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

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    IT WORKED

    Thank you SOO much, you have saved my day !

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>>
    Last edited by vwphillips; 12-20-2011 at 12:31 PM. Reason: added scroll speed
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •