Tabbed navigation / layout

azcn2503 · Thu Nov 17, 2005 1:38 pm

OK, here it is. I will explain it later, as I am busy right now.

[code:1:a15fe0bae3]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="author" content="Aaron Cunnington" />

<title>Tabbing</title>

<script type="text/javascript">

var sections=[
"Hello",
"Cheese",
"Ham",
"Beef",
"Other Stuff"
];

function grab(o){
return document.all?document.all[o]:document.getElementById?document.getElementById(o):"";
}

function parseSectionString(s){
return "__"+s.replace(/ /g,"-").toLowerCase();
}

function clickTab(s){
for(var i=0;i<sections.length;i++){
grab(parseSectionString(sections[i])).className=s==parseSectionString(sections[i])?"tab_active":"tab";
grab(parseSectionString(sections[i])+"_section").className=s==parseSectionString(sections[i])?"section_active":"section";
}
}

</script>

<style type="text/css">

body{
font-family:Verdana;
font-size:8pt;
color:#000;
}

.tab,.tab_active,.tab_over{
background-color:#ccc;
width:150px;
height:30px;
text-align:center;
vertical-align:middle;
border:3px solid #000;
border-width:3px 0px 3px 3px;
cursor:pointer;
font-weight:default;
}
.tab_over{
background-color:#ddd;
}
.tab_active{
background-color:#fff;
border-bottom-color:#fff;
cursor:default;
font-weight:bold;
}
.tab_end{
height:30px;
border:3px solid #000;
border-width:0px 0px 3px 3px;
}

.sectionarea{
border:3px solid #000;
border-width:0px 3px 3px 3px;
}
.section{
display:none;
}
.section_active{
display:block;
}

.content{
padding:10px;
}

</style>

</head>

<body onload="clickTab('__hello');">

<table width="100%" cellspacing="0" cellpadding="0">

<tr>

<script type="text/javascript">

for(var i=0;i<sections.length;i++){

var sectionName=parseSectionString(sections[i]);

document.write("<td id=""+sectionName+"" class="tab" onclick="clickTab(this.id);">"+sections[i]+"</td>");

}

</script>

<td class="tab_end"> </td>

</tr>

<tr>

<script type="text/javascript">

document.write("<td colspan=""+(sections.length+1)+"" class="sectionarea">");

</script>

<div class="content">

<div id="__hello_section" class="section">

Hello! Welcome to a tabbed page

</div>

<div id="__cheese_section" class="section">

Cheese! OMFG!

</div>

<div id="__ham_section" class="section">

Ham is evil, and should be destroyed.

</div>

<div id="__beef_section" class="section">

Beef is delicious, and should be enjoyed.

</div>

<div id="__other-stuff_section" class="section">

Whatever you want, whatever you like.

</div>

</div>

</td>

</tr>

</table>

</body>

</html>[/code:1:a15fe0bae3]

Skillers · Thu Nov 17, 2005 4:00 pm

Oooh, very nice. Is this something I'm likely to see on AaronWeb soon?

azcn2503 · Thu Nov 17, 2005 11:28 pm

Heh, this is something I used quite a bit in the websites before AaronWeb. AaronWeb would use a PHP based tabbing system using GET headers if it did use tabs.

Here is an example of a website where I used 'anti-load' technology to my advantage. Make sure you take a look at the code, also: http://sg3k.netfirms.com/

I didn't design for browsers other than IE6 at the time I made the above website, but had just started to integrate cross-browser functional code, which turned out to be messy and hap-hazard; not like now.

Skillers · Fri Nov 18, 2005 8:10 am

Yeah, OK.

That's an interesting feature. So it loads the entire page before you can see it?

Making stuff cross-browser functional is getting easier, I think.

azcn2503 · Fri Nov 18, 2005 10:54 am

It's definitely getting easier. Plus I am totally elite at coding. I thought I'd post an update on this code to make use of the CSS:

[code:1:aad970b222]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="author" content="Aaron Cunnington" />

<title>Tabbing</title>

<script type="text/javascript">

var sections=[
"Hello",
"Cheese",
"Ham",
"Beef",
"Other Stuff"
];

function grab(o){
return document.all?document.all[o]:document.getElementById?document.getElementById(o):"";
}

function parseSectionString(s){
return "__"+s.replace(/ /g,"-").toLowerCase();
}

function clickTab(s){
for(var i=0;i<sections.length;i++){
grab(parseSectionString(sections[i])).className=s==parseSectionString(sections[i])?"tab_active":"tab";
grab(parseSectionString(sections[i])+"_section").className=s==parseSectionString(sections[i])?"section_active":"section";
}
}

function hoverTab(s,t){
if(t=="over"){
if(grab(s).className=="tab"){ grab(s).className="tab_over"; }
}
else{
if(grab(s).className=="tab_over"){ grab(s).className="tab"; }
}
}

</script>

<style type="text/css">

body{
font-family:Verdana;
font-size:8pt;
color:#000;
}

.tab,.tab_active,.tab_over{
background-color:#ccc;
width:150px;
height:30px;
text-align:center;
vertical-align:middle;
border:3px solid #000;
border-width:3px 0px 3px 3px;
cursor:pointer;
font-weight:default;
}
.tab_over{
background-color:#ddd;
}
.tab_active{
background-color:#fff;
border-bottom-color:#fff;
cursor:default;
font-weight:bold;
}
.tab_end{
height:30px;
border:3px solid #000;
border-width:0px 0px 3px 3px;
}

.sectionarea{
border:3px solid #000;
border-width:0px 3px 3px 3px;
}
.section{
display:none;
}
.section_active{
display:block;
}

.content{
padding:10px;
}

</style>

</head>

<body onload="clickTab('__hello');">

<table width="100%" cellspacing="0" cellpadding="0">

<tr>

<script type="text/javascript">

for(var i=0;i<sections.length;i++){

var sectionName=parseSectionString(sections[i]);

document.write("<td id=""+sectionName+"" class="tab" onmouseover="hoverTab(this.id,'over');" onmouseout="hoverTab(this.id,'out');" onclick="clickTab(this.id);">"+sections[i]+"</td>");

}

</script>

<td class="tab_end"> </td>

</tr>

<tr>

<script type="text/javascript">

document.write("<td colspan=""+(sections.length+1)+"" class="sectionarea">");

</script>

<div class="content">

<div id="__hello_section" class="section">

Hello! Welcome to a tabbed page

</div>

<div id="__cheese_section" class="section">

Cheese! OMFG!

</div>

<div id="__ham_section" class="section">

Ham is evil, and should be destroyed.

</div>

<div id="__beef_section" class="section">

Beef is delicious, and should be enjoyed.

</div>

<div id="__other-stuff_section" class="section">

Whatever you want, whatever you like.

</div>

</div>

</td>

</tr>

</table>

</body>

</html>[/code:1:aad970b222]

Skillers · Fri Nov 18, 2005 4:02 pm

Yeah, OK. So that code basically adds style and stuff to it?

azcn2503 · Fri Nov 18, 2005 7:53 pm

Yeah, it makes the colour change on hover.

The above code is pretty nifty. The section names are based on the section title. There is a long named function in the above code called parseSectionString which basically transforms a word like so:

Hello there = __hello-there
HoWdY MaTeY = __howdy-matey

That way, they can be used as ID's with extremely unlikely chance of being replicated.

For each section named, there must be a corresponding section in the body of the document coded like so:

[code:1:a4e8009ea5]<div id="__section-name_section" class="section">[/code:1:a4e8009ea5]

Basically, add a _section on to the end of it, and make it a class of "section", which has a style of display:none (completely invisible). The function activated when clicking a tab will then change the class name of that section with the corresponding section name to "section_active", which has a style of display:block (visible).

Also, as a follow up to my quick conditionals thread, you can shorten the hoverTab function like so:

[code:1:a4e8009ea5]function hoverTab(s){
grab(s).className=grab(s).className=="tab"?"tab_active":grab(s).className=="tab_active"?"tab":grab(s).className;
}[/code:1:a4e8009ea5]

That way, there's no need to provide another argument to the function ("over" and "out" strings). So the section writing line can be changed to:

[code:1:a4e8009ea5]document.write("<td id=""+sectionName+"" class="tab" onmouseover="hoverTab(this.id);" onmouseout="hoverTab(this.id);" onclick="clickTab(this.id);">"+sections[i]+"</td>");[/code:1:a4e8009ea5]

Well, at least I think so.. I haven't tested it.

Tabbed navigation / layout

Who is online