Results 1 to 7 of 7

Thread: Floating Menu Doesn't Float

  1. #1
    Join Date
    Dec 2008
    Location
    Selby, North Yorkshire
    Posts
    90
    Thanks
    28
    Thanked 2 Times in 2 Posts

    Default Floating Menu Doesn't Float

    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

  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

    Replace all of this:

    Code:
    <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:

    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;">
           <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>
    - 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:

    BorderTerroir (12-28-2008)

  4. #3
    Join Date
    Dec 2008
    Location
    Selby, North Yorkshire
    Posts
    90
    Thanks
    28
    Thanked 2 Times in 2 Posts

    Default

    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

  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

    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:

    Code:
    margin-left: 200
    It needs to be:

    Code:
    margin-left: 200px
    There could also be other problems. But I would suggest:

    Code:
    <p style="margin-left: 200px; text-align: left; font-family: 'comic sans ms';">
    And then where you have:

    Code:
    </font></p>
    Since we are no longer opening up a deprecated font tag, make it simply:

    Code:
    </p>
    - John
    ________________________

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

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

    BorderTerroir (12-29-2008)

  7. #5
    Join Date
    Dec 2008
    Location
    Selby, North Yorkshire
    Posts
    90
    Thanks
    28
    Thanked 2 Times in 2 Posts

    Default

    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

  8. #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

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

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

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

    BorderTerroir (12-29-2008)

  10. #7
    Join Date
    Dec 2008
    Location
    Selby, North Yorkshire
    Posts
    90
    Thanks
    28
    Thanked 2 Times in 2 Posts

    Default

    Hi John

    You have done it again, many thanks.

    Please mark this resolved.
    Last edited by BorderTerroir; 12-30-2008 at 02:37 PM. Reason: Typo

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
  •