Results 1 to 6 of 6

Thread: Floating Menu

  1. #1
    Join Date
    Dec 2008
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Floating Menu

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    northyukon (12-27-2008)

  4. #3
    Join Date
    Dec 2008
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Floating menus

    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.

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #5
    Join Date
    Dec 2008
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default floating menu

    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

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •