Log in

View Full Version : Tab Menu II


jeubanks
08-23-2005, 07:39 PM
Can someone please help me with the Tab menu II? For some reason the blue tabs show up as a black rectangle when I preview, but they don't show up at all when I load the page. What is the problem with my script? Thank you!

Also, how do I center the tabs to the center of the page?

http://www.eubankscustombuilders.com/menu3.html

Thanks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script src="text/javascript" src="preloadtabs.js"></script>

<title>menu3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

#ddimagetabs{
}

#ddimagetabs a{
display: block;
text-decoration: none;
font: bold 14px Arial; /*tab font */
color: black; /*font color */
width: 86px; /*width of tab image */
height: 40px; /*height of tab image */
float: center;
display: inline;
margin-left: 4px; /*spacing between tabs */
padding-top: 4px; /*vertical offset of tab text from top of tab*/
background-image: http://www.eubankscustombuilders.com/images/bluetab.jpg ; /*URL to tab image */
background-repeat: no-repeat;
text-align: center;
}

#ddimagetabs a:hover, #ddimagetabs a.current{
background-image:(http://www.eubankscustombuilders.com/images/bluetab.jpg); /*URL to tab image onmouseover */
color: blue;
}

#tabcontentcontainer{
width:480px; /*width of 2nd level content*/
height:40px; /*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=1 //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>

<div id="ddimagetabs">
<p><a href="http://www.eubankscustombuilders.com" onMouseover="expandcontent('sc1', this)">Home
</a><a href="http://www.eubankscustombuilders.com/aboutus.html" onMouseover="expandcontent('sc2', this)">About
Us </a><a href="http://www.eubankscustombuilders.com/photos.html" onMouseover="expandcontent('sc3', this)">Photos
</a><a href="http://www.eubankscustombuilders.com/contactus.html" onMouseover="expandcontent('sc4', this)">Contact
Us </a><a href="http://www.eubankscustombuilders.com/dealerref.html" onMouseover="expandcontent('sc4', this)">Dealer
Referral</a></p>
</div>
<br style="clear:left" />

<DIV id="tabcontentcontainer">

<div id="sc1" class="tabcontent">
Return to the <a href="http://www.dynamicdrive.com">frontpage</a> of Dynamic Drive.
</div>

<div id="sc2" class="tabcontent">
See the new scripts recently added to Dynamic Drive. <a href="http://www.dynamicdrive.com/new.htm">Click here</a>.
</div>

<div id="sc3" class="tabcontent">
A listing of scripts recently changed, plus description of the changes. <a href="http://www.dynamicdrive.com/revised.htm">Revised Section</a>.
</div>

<div id="sc4" class="tabcontent">
Have a great script you wish to submit to Dynamic Drive for possible inclusion? <a href="http://www.dynamicdrive.com/submitscript.htm">Click here</a>.
</div>

</DIV>

</head>

<body>

</body>
</html>
jscheuer1
08-24-2005, 03:54 AM
This:

</head>

<body>belongs here (not near the end of the page):

</script>
</head>

<body>
<div id="ddimagetabs"> This is wrong:

background-image: http://www.eubankscustombuilders.com/images/bluetab.jpg ; /*URL to tab image */It should be:
background-image:url('http://www.eubankscustombuilders.com/images/bluetab.jpg') ; /*URL to tab image */This, is supposed to use the other image:

background-image:http://www.eubankscustombuilders.com/images/bluetab.jpg; /*URL to tab image onmouseover */and needs to use the correct syntax:

background-image:url('http://www.eubankscustombuilders.com/images/bluetabover.jpg'); /*URL to tab image onmouseover */That will solve the problem of the missing images.
jeubanks
08-24-2005, 02:22 PM
Thanks so much! That worked.

Does anyone know how to change the color of the tabs & center them on the page? :confused:
jscheuer1
08-24-2005, 03:08 PM
The color of the tabs is the color of the images, edit or make new ones in your favorite graphics program. Centering this menu is a nightmare because of the fact that it is so dependant upon css, support for which varies widely between the two current dominant browsers (IE and FF). I did mange to come up with one solution that I did not like too much because it required a lot of hacks and customization. You can view it here (http://www.dynamicdrive.com/forums/showpost.php?p=14431&postcount=2).
jscheuer1
08-24-2005, 04:00 PM
Here is another method that uses two tables to center the tab content II. It relies on css for the tables as well as setting their individual align's to "center". And setting the tabcontentcontainer's width (in the style) to that of the tab's table's apparent width. Advantage is that it works cross browser:


<html>
<!-- saved from url=(0014)about:internet -->
<!-- this and above comment should be removed for live, non-demo use -->
<head>
<title>Tab Content II Centered - Demo</title>
<style type="text/css">

.tab {
border-collapse:collapse;
}

#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:350px; /*width of 2nd level content*/
height:40px; /*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=0 //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>
</head>
<body>
<table class="tab" align="center">
<tr>
<td><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>
</div> </td>
</tr>
</table>

<table class="tab" align="center">
<tr>
<td><DIV id="tabcontentcontainer">

<div id="sc1" class="tabcontent">
Return to the <a href="http://www.dynamicdrive.com">frontpage</a> of Dynamic Drive.
</div>

<div id="sc2" class="tabcontent">
See the new scripts recently added to Dynamic Drive. <a href="http://www.dynamicdrive.com/new.htm">Click here</a>.
</div>

<div id="sc3" class="tabcontent">
A listing of scripts recently changed, plus description of the changes. <a href="http://www.dynamicdrive.com/revised.htm">Revised Section</a>.
</div>

<div id="sc4" class="tabcontent">
Have a great script you wish to submit to Dynamic Drive for possible inclusion? <a href="http://www.dynamicdrive.com/submitscript.htm">Click here</a>.
</div>

</DIV></td>
</tr>
</table>

</body>
</html>