Tab Content Problem

**mrhoops515** · 12-10-2006, 07:32 PM

1) Script Title: Tab Content Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tabcontent.htm

3) Describe problem:
Go to http://kevinsite.freehostia.com/musi...r/ocarina.html to see the page.

The first tab displays all of the content until you click another tab, then the first tab changes to display only it's content. This happens in IE and Firefox.

Also, the whole page should be centered but in IE 6 it isn't.

Code:

HTML Code:

<html>
<head>
<title>The Legend of Zelda: Ocarina of Time</title>
<link rel="stylesheet" type="text/css" href="../player.css">
<script type="text/javascript" src="../tabcontent.js">

/***********************************************
* Tab Content 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
***********************************************/

</script>
</head>
<body>
<div id="maincontainer">

<div id="topsection"><h1>The Legend of Zelda: Ocarina of Time</h1></div>

<div id="playerwrapper">
<div id="player">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"  width="100%" height="100%" id="mp3player"
		codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" >
	<param name="movie" value="mp3player.swf?config=config.xml&file=ocarina.xml" />
	<param nam="allowScriptAccess" value="always">
	<embed src="mp3player.swf?config=config.xml&file=ocarina.xml" allowScriptAccess="always" width="100%" height="100%" name="mp3player"
		type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</div>

<div id="rightcolumn">
<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="text">Description</a></li>
<li><a href="#" rel="pics">Pics</a></li>
<li><a href="#" rel="download">Download</a></li>
</ul>
<div class="tabcontentstyle">
<div id="text">
Article source: <a href="http://www.nintendo.com/gamemini?gameid=m-Game-0000-147">Nintendo</a>
<p>Text</p>
</div>
<div id="pics">
<img src="http://image.com.com/gamespot/images/2003/screen2/197771_20030620_screen001.jpg">
<img src="http://image.com.com/gamespot/images/2003/screen2/197771_20030620_screen002.jpg">
<img src="http://image.com.com/gamespot/images/2003/screen2/197771_20030620_screen003.jpg">
<img src="http://image.com.com/gamespot/images/2003/screen2/197771_20030620_screen004.jpg">
<img src="http://image.com.com/gamespot/images/2003/screen2/197771_20030620_screen005.jpg">
<img src="http://image.com.com/gamespot/images/2003/screen2/197771_20030620_screen006.jpg">
<img src="http://image.com.com/gamespot/images/2003/screen2/197771_20030620_screen007.jpg">
<img src="http://image.com.com/gamespot/images/2003/screen2/197771_20030620_screen008.jpg">
<img src="http://image.com.com/gamespot/images/2003/screen2/197771_20030620_screen009.jpg">
<img src="http://image.com.com/gamespot/images/2003/screen2/197771_20030620_screen010.jpg">
<a href="http://www.gamespot.com/pages/image_viewer/frame_lead.php?pid=197771&img=11&sid=undefined" target="_new">View Rest of Pics At Gamespot.com</a>
</div>
<div id="download">
<img src="../images/albums/ocarina.jpg">
<a href="http://www.zeldadungeon.net/Soundtracks-Ocarina%20of%20Time%20Original%20Soundtrack.php">ZeldaDungeon.net</a><br>
Composed by: Koji Kondo<br>
Publisher: Pony Canyon<br>
Catalog Number: PCCG-00475<br>
CD Info: 1 CD - 82 Tracks<br>
Released: December 18, 1998<br>
Disc One: 78:01
</div>
</div>
</div>
<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")
</script>
<div id="footer">
<script type="text/javascript"><!--
google_ad_client = "pub-2603064108102699";
google_ad_width = 468;
google_ad_height = 15;
google_ad_format = "468x15_0ads_al_s";
//2006-12-07: musicfromgames
google_ad_channel = "6823960102";
google_color_border = "000000";
google_color_bg = "000000";
google_color_link = "ffcc00";
google_color_text = "CCCCCC";
google_color_url = "99AADD";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

</div>



</body>
</html>

CSS

HTML Code:

html{
height: 100%;
}

body{
margin:0;
padding:0;
color: #fff;
background: #000;
height: 100%;
}

a:link, a:visited{
color: #fc0;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

#maincontainer{
width: 812px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #2d2b2b;
border: 1px solid #fc0;
margin-top:10px;
padding:5px;
 /*Height of top section*/
text-align:center;
}

#topsection h1{
margin: 0;
}

#playerwrapper{
float: left;
width: 100%;
}

#player{
margin-top:10px;
margin-right: 562px; /*Set right margin to RightColumnWidth*/
height:320px;
border: 1px solid #fc0;
}

#rightcolumn{
float: left;
width: 550px; /*Width of right column*/
margin-left: -552px; /*Set left margin to -(RightColumnWidth) */

}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.tabcontentstyle div{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
}

.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid #ffcc00;
width: 100%px;
padding: 0px;
background-color:#2d2b2b;
height: 300px;
overflow: auto;
}

.tabcontent{
display:none;
}

@media print 
.tabcontent {
display:block!important;
}

.shadetabs{
padding: 3px 0;
margin-left: 6px;
margin-top: 10px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #FFCC00;
color: #2d2b2b;
background-color: #999999;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
}

.shadetabs li.selected{
position: relative;
top: 1px;
}

.shadetabs li.selected a, .shadetabs li.selected a:visited{ /*selected main tab style */
background-color:#2d2b2b;
border-bottom-color: #2d2b2b;
color:#ffffff;
}

.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

#pics img{
width: 360px;
height: 240px;
display: block;
margin-bottom: 10px;
}

#download img{
margin-right: 10px;
margin-bottom: 10px;
float: left;}

**mrhoops515** · 12-10-2006, 09:34 PM

I fixed the centering problem in IE by applying this doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">,
but can anyone help with the tab problem?

**jscheuer1** · 12-10-2006, 10:07 PM

You are supposed to have several sections on your page with the class of 'tabcontent'. It is this designation that hides them to begin with. Excerpt from the demo page (Step 2):

Code:

. . . iv class="tabcontentstyle">

<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
<p><b><a href="javascript: expandtab('maintab', 3)">Click here to select 4th tab</a></b></p>
</div>

<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab cont . . .

You have none of these. There could be other problems.

**mrhoops515** · 12-10-2006, 11:10 PM

Wow I feel stupid.

The fix worked well.

Thanks a lot for your help.

**shaatdynamicdrive** · 12-15-2006, 07:12 AM

Hi,

Tab content is working well when it is used as an "html" page.

when am trying to use it as a "jsp" page i am able to view the tabs but not the pages that within the tab.

plz help out..

Rgds,
Sha

Thread: Tab Content Problem

Thread Tools

Search Thread

Tab Content Problem

Bookmarks

Bookmarks

Posting Permissions