PDA

View Full Version : Please Help --- Floating Menu



CMMVideos
06-25-2006, 04:04 AM
Can anyone help me with my Floating Menu Script (http://www.dynamicdrive.com/dynamicindex1/staticmenu.htm)

Here is my codes:


<!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>

jscheuer1
06-27-2006, 07:18 AM
Script needed a bit of updating to work with a DTD (DOCTYPE):


<!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>