Jump to content
xisto Community
Sign in to follow this  
Followers 0
sonesay

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

By sonesay, in Programming

Recommended Posts

sonesay    7

sonesay
Posted

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.

post-45102-1199419721_thumb.jpg

Share this post

Link to post
Share on other sites

truefusion    3

truefusion
Posted

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.

Share this post

Link to post
Share on other sites

truefusion    3

truefusion
Posted

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "https://w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd/ <html xmlns="https://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.


Share this post

Link to post
Share on other sites

sonesay    7

sonesay
Posted

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

Share this post

Link to post
Share on other sites

truefusion    3

truefusion
Posted

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.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept