Results 1 to 2 of 2

Thread: Please Help --- Floating Menu

  1. #1
    Join Date
    Nov 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Please Help --- Floating Menu

    Can anyone help me with my Floating Menu Script (http://www.dynamicdrive.com/dynamici...staticmenu.htm)

    Here is my codes:

    HTML 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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title><style type="text/css">
    
    #ddimagetabs{
    }
    
    #ddimagetabs a{
    display: block;
    text-decoration: none;
    font: bold 12px Arial; /*tab font */
    color: black; /*font color */
    width: 86px; /*width of tab image */
    height: 22px; /*height of tab image */
    float: left;
    display: inline;
    margin-left: 4px; /*spacing between tabs */
    padding-top: 4px; /*vertical offset of tab text from top of tab*/
    background-image:url(bluetab.jpg); /*URL to tab image */
    background-repeat: no-repeat;
    text-align: center;
    }
    
    #ddimagetabs a:hover, #ddimagetabs a.current{
    background-image:url(bluetabover.jpg); /*URL to tab image onmouseover */
    color: black;
    }
    
    #tabcontentcontainer{
    width:0px; /*width of 2nd level content*/
    height: 0px; /*height of 2nd level content. Set to largest's content height to avoid jittering.*/
    }
    
    .tabcontent{
    display:none;
    }
    
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * DD Tab Menu II script-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    //Set tab to intially be selected when page loads:
    //[which tab (1=first tab), ID of tab content to display]:
    var initialtab=[1, "sc1"]
    
    //Turn menu into single level image tabs (completely hides 2nd level)?
    var turntosingle=1 //0 for no (default), 1 for yes
    
    //Disable hyperlinks in 1st level tab images?
    var disabletablinks=0 //0 for no (default), 1 for yes
    
    
    ////////Stop editting////////////////
    
    var previoustab=""
    
    if (turntosingle==1)
    document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')
    
    function expandcontent(cid, aobject){
    if (disabletablinks==1)
    aobject.onclick=new Function("return false")
    if (document.getElementById && turntosingle==0){
    highlighttab(aobject)
    if (previoustab!="")
    document.getElementById(previoustab).style.display="none"
    document.getElementById(cid).style.display="block"
    previoustab=cid
    }
    }
    
    function highlighttab(aobject){
    if (typeof tabobjlinks=="undefined")
    collectddimagetabs()
    for (i=0; i<tabobjlinks.length; i++)
    tabobjlinks[i].className=""
    aobject.className="current"
    }
    
    function collectddimagetabs(){
    var tabobj=document.getElementById("ddimagetabs")
    tabobjlinks=tabobj.getElementsByTagName("A")
    }
    
    function do_onload(){
    collectddimagetabs()
    expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
    }
    
    if (window.addEventListener)
    window.addEventListener("load", do_onload, false)
    else if (window.attachEvent)
    window.attachEvent("onload", do_onload)
    else if (document.getElementById)
    window.onload=do_onload
    
    </script>
    <style type="text/css">
    <!--
    .style1 {font-size: x-large}
    -->
    </style>
    </head>
    
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />HELLO!<br />
    <script>
    if (!document.layers)
    document.write('<div id="divStayTopLeft" style="position:absolute">')
    </script>
    
    <layer left="0" top="0" id="divStayTopLeft">
      <table width="100%" border="0">
      <tr>
        <td width="10%" bgcolor="#CCFFCC"><div align="center" class="style1">MVL</div></td>
        <td width="90%"><div id="ddimagetabs">
    <a href="http://url/" onMouseover="expandcontent('sc1', this)">Home</a> <a href="http://url/" onMouseover="expandcontent('sc2', this)">New</a> <a href="http://url/" onMouseover="expandcontent('sc3', this)">Revised</a><a href="http://url/" onMouseover="expandcontent('sc4', this)">Submit</a><br style="clear:left" />
    
    </div> 
          <DIV id="tabcontentcontainer">
    	 		  <div id="sc1" class="tabcontent">
    		</div>
    			  <div id="sc2" class="tabcontent">
    		</div>
    			  <div id="sc3" class="tabcontent">
    		</div>
    			  <div id="sc4" class="tabcontent">
    		</div>
    			  <div id="sc5" class="tabcontent">
    		</div>
    			  <div id="sc6" class="tabcontent">
    		</div>
    			  <div id="sc7" class="tabcontent">
    		</div>
    </DIV></td>
      </tr>
      <tr>
        <td><div id="ddimagetabs"><a href="http://url/" onMouseover="expandcontent('sc5', this)">Home</a> <br /><a href="http://url/" onMouseover="expandcontent('sc6', this)">New</a><br /> <a href="http://url/" onMouseover="expandcontent('sc7', this)">Revised</a><br style="clear:left" />&nbsp;</div></td>
        <td>&nbsp;</td>
      </tr>
    </table>
    
    <!--EDIT BELOW CODE TO YOUR OWN MENU-->
    <!--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="fromtop"
    
    if (!document.layers)
    document.write('</div>')
    
    function JSFX_FloatTopDiv()
    {
    	var startX = 3,
    	startY = 15;
    	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>
    </body>
    </html>

  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

    Script needed a bit of updating to work with a DTD (DOCTYPE):

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title><style type="text/css">
    
    #ddimagetabs{
    }
    
    #ddimagetabs a{
    display: block;
    text-decoration: none;
    font: bold 12px Arial; /*tab font */
    color: black; /*font color */
    width: 86px; /*width of tab image */
    height: 22px; /*height of tab image */
    float: left;
    display: inline;
    margin-left: 4px; /*spacing between tabs */
    padding-top: 4px; /*vertical offset of tab text from top of tab*/
    background-image:url(bluetab.jpg); /*URL to tab image */
    background-repeat: no-repeat;
    text-align: center;
    }
    
    #ddimagetabs a:hover, #ddimagetabs a.current{
    background-image:url(bluetabover.jpg); /*URL to tab image onmouseover */
    color: black;
    }
    
    #tabcontentcontainer{
    width:0px; /*width of 2nd level content*/
    height: 0px; /*height of 2nd level content. Set to largest's content height to avoid jittering.*/
    }
    
    .tabcontent{
    display:none;
    }
    
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * DD Tab Menu II script-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    * Modified in http://www.dynamicdrive.com/forums by jscheuer1
    * To work with DTD's (DOCTYPEs)
    ***********************************************/
    
    //Set tab to intially be selected when page loads:
    //[which tab (1=first tab), ID of tab content to display]:
    var initialtab=[1, "sc1"]
    
    //Turn menu into single level image tabs (completely hides 2nd level)?
    var turntosingle=1 //0 for no (default), 1 for yes
    
    //Disable hyperlinks in 1st level tab images?
    var disabletablinks=0 //0 for no (default), 1 for yes
    
    
    ////////Stop editting////////////////
    
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    var previoustab=""
    
    if (turntosingle==1)
    document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')
    
    function expandcontent(cid, aobject){
    if (disabletablinks==1)
    aobject.onclick=new Function("return false")
    if (document.getElementById && turntosingle==0){
    highlighttab(aobject)
    if (previoustab!="")
    document.getElementById(previoustab).style.display="none"
    document.getElementById(cid).style.display="block"
    previoustab=cid
    }
    }
    
    function highlighttab(aobject){
    if (typeof tabobjlinks=="undefined")
    collectddimagetabs()
    for (i=0; i<tabobjlinks.length; i++)
    tabobjlinks[i].className=""
    aobject.className="current"
    }
    
    function collectddimagetabs(){
    var tabobj=document.getElementById("ddimagetabs")
    tabobjlinks=tabobj.getElementsByTagName("A")
    }
    
    function do_onload(){
    collectddimagetabs()
    expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
    }
    
    if (window.addEventListener)
    window.addEventListener("load", do_onload, false)
    else if (window.attachEvent)
    window.attachEvent("onload", do_onload)
    else if (document.getElementById)
    window.onload=do_onload
    
    </script>
    <style type="text/css">
    <!--
    .style1 {font-size: x-large}
    -->
    </style>
    </head>
    
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />HELLO!<br />
    <script>
    if (!document.layers)
    document.write('<div id="divStayTopLeft" style="position:absolute">')
    </script>
    
    <layer left="0" top="0" id="divStayTopLeft">
      <table width="100%" border="0">
      <tr>
        <td width="10%" bgcolor="#CCFFCC"><div align="center" class="style1">MVL</div></td>
        <td width="90%"><div id="ddimagetabs">
    <a href="http://url/" onMouseover="expandcontent('sc1', this)">Home</a> <a href="http://url/" onMouseover="expandcontent('sc2', this)">New</a> <a href="http://url/" onMouseover="expandcontent('sc3', this)">Revised</a><a href="http://url/" onMouseover="expandcontent('sc4', this)">Submit</a><br style="clear:left" />
    
    </div> 
          <DIV id="tabcontentcontainer">
    	 		  <div id="sc1" class="tabcontent">
    		</div>
    			  <div id="sc2" class="tabcontent">
    		</div>
    			  <div id="sc3" class="tabcontent">
    		</div>
    			  <div id="sc4" class="tabcontent">
    		</div>
    			  <div id="sc5" class="tabcontent">
    		</div>
    			  <div id="sc6" class="tabcontent">
    		</div>
    			  <div id="sc7" class="tabcontent">
    		</div>
    </DIV></td>
      </tr>
      <tr>
        <td><div id="ddimagetabs"><a href="http://url/" onMouseover="expandcontent('sc5', this)">Home</a> <br /><a href="http://url/" onMouseover="expandcontent('sc6', this)">New</a><br /> <a href="http://url/" onMouseover="expandcontent('sc7', this)">Revised</a><br style="clear:left" />&nbsp;</div></td>
        <td>&nbsp;</td>
      </tr>
    </table>
    
    <!--EDIT BELOW CODE TO YOUR OWN MENU-->
    <!--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="fromtop"
    
    if (!document.layers)
    document.write('</div>')
    
    function JSFX_FloatTopDiv()
    {
    	var startX = 3,
    	startY = 15;
    	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+'px';this.style.top=y+'px';};
    		el.x = startX;
    		if (verticalpos=="fromtop")
    		el.y = startY;
    		else{
    		el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
    		el.y -= startY;
    		}
    		return el;
    	}
    	window.stayTopLeft=function()
    	{
    		if (verticalpos=="fromtop"){
    		var pY = ns ? pageYOffset : iecompattest().scrollTop;
    		ftlObj.y += (pY + startY - ftlObj.y)/8;
    		}
    		else{
    		var pY = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().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>
    - 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
  •