Tab Contents, How To Make Them - need assistance on how to make and modify tab contents

sonesay

Jan 4 2008, 04:09 AM

I found this cool script on dynamic drive that lets you create tab contents, The only problem I have is it dosent give enough discriptive details on
how it acutally works it just does.

http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

It uses a cobination of javascript, html, and css, while you can look at the source code of each language and try and figure out how it all relates to one another I think it would be much easier if someone who knows tells the rest of us how its built and be modified. This is personally my first time working with one so I dont know alot of what bare minimals required at all.

I've notice the tab menus are <a> links using a 'rel' attribute, I've seen and used this before on some CSS menus but I still dont understand why 'rel' is used. Also does this relate to any javascript code when clicked on in anyway? I know its voking a javascript code when clicked but I'm not 100% sure how its doing it.

The reason why I want to figure this out is I need to be able to build multiple tab contents and there is no examples out there, just single tab content sections. I cant just build a fix number of character tab contents because this number can change depending on each user.

Heres a screenshot of what I'm building in the attached file, There are two character sections but the code they provided in Dynamic drive only works for one. Only the top one seems to work.

truefusion

Jan 4 2008, 07:29 AM

I've done a tabbed interface before. It was for static tabs, but it shouldn't be hard to make one with dynamically generated "tabs." Actually, i need to make a better one anyways. The interface i made needed work for compatibility across browsers. The one i made didn't make use of the rel attribute. If you want, i could post the code here when i make it.

sonesay

Jan 4 2008, 07:33 AM

Yeah that would be awsome, I'm still gonna go ahead and try figure out their script while I wait for your code.

truefusion

Jan 4 2008, 02:04 PM

Here, i managed to make it within one function and without much referencing:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript">
function doTabClass(tab){
x = tab.parentNode.parentNode;
y = x.parentNode;
x = x.getElementsByTagName('a');
y = y.getElementsByTagName('div');
for (var i = 0; i < x.length; i++){
x[i].className = "";
	if (x[i] == tab){
	var z = i;
	}
}
for (var i = 0; i < y.length; i++){
y[i].style.display = "none";
}
tab.className = "selected";
y[z].style.display = "block";
}
</script>
<style type="text/css">
body {
font-family: San, Arial;
font-size: 11px;
}

div.container div + div {
display: none;
}

div.container div {
border: 1px solid black;
padding: 3px;
background: white;
}

ul.tabs {
list-style: none;
margin: 0;
padding: 0;
border-spacing: 3px;
//height: 15px;
}

ul.tabs li {
display: table-cell;
}

ul.tabs a {
border: 1px solid black;
border-bottom: 0;
padding: 3px;
padding-left: 7px;
padding-right: 7px;
background: #DDD;
cursor: pointer;
}

a.selected {
padding-bottom: 4px !important;
background: white !important;
}
</style>
</head>
<body>

<div class="container">
<ul class="tabs">
<li><a class="selected" onclick="doTabClass(this);">Tab 1</a></li>
<li><a onclick="doTabClass(this);">Tab 2</a></li>
<li><a onclick="doTabClass(this);">Tab 3</a></li>
</ul>
<div>Tab 1</div>
<div>Tab 2</div>
<div>Tab 3</div>
</div>

</body>
</html>

Just keep with the format, and things should work out fine.

sonesay

Jan 4 2008, 08:05 PM

Thanks for sharing such an awsome code with us Truefusion, You really are a pro at this. I just tested it out with 2 tab collections and it works fine.
The structure is abit different but atleast it works, I'll try using it on my project as soon as I get back later today.

Have you thought about adding a persistent state effect for what tabs been selected? I'm not sure how easy it would be for multi tab collections but on the example from dynamic drive they use cookies so when you reload the page the selected tabs stay open. But yeah that was for only 1 tab collection.

cheers

truefusion

Jan 4 2008, 08:14 PM

QUOTE(sonesay @ Jan 4 2008, 03:05 PM)

Have you thought about adding a persistent state effect for what tabs been selected? I'm not sure how easy it would be for multi tab collections but on the example from dynamic drive they use cookies so when you reload the page the selected tabs stay open. But yeah that was for only 1 tab collection.

I thought about it for my old tab script interface, but i figured it was too much for such a simple thing. It could be done, i suppose, with one cookie and perhaps hidden fields, but i'm not going to get into coding that.

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE