Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> Tab Contents, How To Make Them, need assistance on how to make and modify tab contents
sonesay
post Jan 4 2008, 04:09 AM
Post #1


|||[ n00b King ]|||
*********

Group: [HOSTED]
Posts: 642
Joined: 20-June 07
From: Auckland
Member No.: 45,102
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.

Attached File(s)
Attached File  char_nodes.jpg ( 150.95k ) Number of downloads: 9
 

(list)

Go to the top of the page
 
+Quote Post
truefusion
post Jan 4 2008, 07:29 AM
Post #2


Ephesians 6:10-17
Group Icon

Group: [MODERATOR]
Posts: 1,861
Joined: 22-June 05
From: The World of Gentoo
Member No.: 8,528
T17 GFX Crew
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.

(list)

Go to the top of the page
 
+Quote Post
sonesay
post Jan 4 2008, 07:33 AM
Post #3


|||[ n00b King ]|||
*********

Group: [HOSTED]
Posts: 642
Joined: 20-June 07
From: Auckland
Member No.: 45,102
Yeah that would be awsome, I'm still gonna go ahead and try figure out their script while I wait for your code.

(list)

Go to the top of the page
 
+Quote Post
truefusion
post Jan 4 2008, 02:04 PM
Post #4


Ephesians 6:10-17
Group Icon

Group: [MODERATOR]
Posts: 1,861
Joined: 22-June 05
From: The World of Gentoo
Member No.: 8,528
T17 GFX Crew
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.

(list)

Go to the top of the page
 
+Quote Post
sonesay
post Jan 4 2008, 08:05 PM
Post #5


|||[ n00b King ]|||
*********

Group: [HOSTED]
Posts: 642
Joined: 20-June 07
From: Auckland
Member No.: 45,102
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

(list)

Go to the top of the page
 
+Quote Post
truefusion
post Jan 4 2008, 08:14 PM
Post #6


Ephesians 6:10-17
Group Icon

Group: [MODERATOR]
Posts: 1,861
Joined: 22-June 05
From: The World of Gentoo
Member No.: 8,528
T17 GFX Crew
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.

(list)

Go to the top of the page
 
+Quote Post
« Next Oldest · HTML, XML etc.. · Next Newest »
 

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Key Logger.(34)
  2. Make Yourself Admin On A Computer(28)
  3. Could Someone Make A Php Script For Me?(3)
  4. Name 3 Things That Make You Real Mad(78)
  5. Here's Some Jokes To Make You Laugh A Little.(5)
  6. Why Dont Have Burnout Games For Pc?(11)
  7. Make Your Own Mmorpg(39)
  8. How To Make Your Pc Work Faster(16)
  9. How Do I Make A Live Chat Using Php?(15)
  10. How Do I Make Gold Fast In Runescape/(116)
  11. Make Your Own Mmog(6)
  12. Scrolling Images?(5)
  13. How Do I Make My Own Private Online Server Please Help Me Out.thank You For Your Time.(22)
  14. Can I Make Dynamic Menu In Php(7)
  15. Runescape Private Server(51)
  1. Post Your Favorite Easy To Make Meal.(16)
  2. Make A Flat Based Shoutbox, With Auto Refresh.(6)
  3. Is It Really Possible To Make Any Money Online?(12)
  4. How To Make Your Own Counter Strike Source Dedicated Server!(4)
  5. Make Money Using Youtube And Adsense(10)
  6. Make Money Online Blog(1)
  7. Selling My Mccodes License(3)
  8. How To Make A View New Post Script?(5)
  9. Some Of The Biggest Questions In Life.(2)
  10. Best Way To Make Money From Your Website?(5)
  11. Timer(5)
  12. Make An Online Game To Earn Money(2)
  13. Lazy People Can Make Money Too(6)


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th July 2008 - 01:05 PM
Powered By IP.Board © 2008  IPS, Inc.
Licensed to: Xisto Corporation