Coding And Graphic Designing

[Jordan]

i am Really good with both. if you want proof. i made a code myself.
i made this code for proboards.com under the name Jordan (a.k.a triad) so yea take if you want. i have plenty more codes. i will post them in the Graphics/Coding Section

it's called Dynamically Tabbed Table

if you would like the code i will post it

Global Header Or Main Header

<style type="text/css"><!--

.welcometablebg {
background-color: #dadada;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
}

.welcometablehover {
background-color: #efefef;
border-bottom: 1px solid #efefef;
border-right: 1px solid #000000;
}

#pro_tabs td, #pro_sidebar td {
font-size: 10pt;
font-weight: bold;
text-align: center;
}

#pro_tabs td {
width: 50%;
cursor: pointer;
}

#pro_threads a {
font-weight: bold;
line-height: 1.5em;
}

#pro_threads div {
margin-top: 5px;
margin-left: 20px;
}

--></style>

<script type="text/javascript"><!--

/*
Dynamically Tabbed Welcome Table
Created By Triad
support.proboards.com
*/

var proTable = {

previous_tab: {
id: "",
object: null
},

previous_content: {},

g: function(_id){
if(_id)
return document.getElementById(_id);
return false;
},

toggle_data: function(){

var id = "pro_" + this.previous_tab.id;

if(this.previous_tab.id != "" && this.g(id)){

var tab_content = this.g(id);

if(tab_content.style.display == ""){

this.previous_tab.object.className = "welcometablebg";
tab_content.style.display = "none";

document.cookie = "proData=" + encodeURI(id) + ";expires=Sat, 20 Jan 2000 12:12:12 UTC; path=/;";
this.g("pro_default").style.display = "";

} else {

this.previous_tab.object.className = "welcometablehover";
tab_content.style.display = "";

document.cookie = "proData=" + encodeURI(id) + ";expires=Sat, 20 Jan 3000 12:12:12 UTC; path=/;";
this.g("pro_default").style.display = "none";

}
} else {
document.cookie = "proData=" + encodeURI(id) + ";expires=Sat, 20 Jan 2000 12:12:12 UTC; path=/;"; // Is this needed?
this.g("pro_default").style.display = "";
}
},

display_data: function(_id){

if(this.g("pro_default").style.display == "")
this.g("pro_default").style.display = "none";

if(this.previous_tab.id != ""){
this.previous_tab.object.className = "welcometablebg";
this.g("pro_" + this.previous_tab.id).style.display = "none";
}

this.previous_tab.id = _id.substr(4);
this.previous_tab.object = this.g("nav_" + this.previous_tab.id);
this.previous_tab.object.className = "welcometablehover";

this.g("pro_" + this.previous_tab.id).style.display = "";
document.cookie = "proData=" + encodeURI("pro_" + this.previous_tab.id) + ";expires=Sat, 20 Jan 3000 12:12:12 UTC; path=/;";

},

toggle_table: function(){

if(this.g("pro_collapse").style.display == ""){

this.g("pro_collapse").style.display = "none";
document.cookie = "proToggle=0;expires=Sat, 20 Jan 3000 12:12:12 UTC; path=/;";

} else {

this.g("pro_collapse").style.display = "";
document.cookie = "proToggle=0;expires=Sat, 20 Jan 2000 12:12:12 UTC; path=/;";

}

},

display_content: function(_id, _name){

if(this.previous_content[_id]){
if(this.previous_content[_id].name == _name){
if(this.previous_content[_id].object.style.display == ""){
this.previous_content[_id].object.style.display = "none";
this.g("pro_" + _id + "_default").style.display = "";
} else {
this.g("pro_" + _id + "_default").style.display = "none";
this.previous_content[_id].object.style.display = "";
}
return true;
} else
this.previous_content[_id].object.style.display = "none";
}

this.previous_content[_id] = {
name: _name,
object: this.g("pro_" + _id + "_" + _name)
};

this.g("pro_" + _id + "_default").style.display = "none";
this.previous_content[_id].object.style.display = "";

}

};

//--></script>

<table width="92%" align="center" cellspacing="1" cellpadding="0" class="bordercolor">
<tr>
<td class="titlebg" align="center" colspan="2" style="padding: 4px; cursor: pointer;" onclick="proTable.toggle_table();">
<font size="2">
Title
</font>
</td>
</tr>
<tr id="pro_collapse" style="display:;">
<td width="70%" align="center" class="windowbg" valign="top" height="100%">
<table width="100%" cellspacing="0" cellpadding="4">
<tr id="pro_tabs">
<td class="welcometablebg" onmouseover="proTable.display_data(this.id);" onClick="proTable.toggle_data();" id="nav_welcome">Welcome</td>
<td class="welcometablebg" onmouseover="proTable.display_data(this.id);" onClick="proTable.toggle_data();" id="nav_staff" style="border-right: none;">Staff</td>
</tr>
<tr>
<td class="windowbg" colspan="2">

<div id="pro_default" style="text-align: center; font-size: 15pt; margin-top: 45px; display:;">
Welcome to <b><i>Your Site Name</i></b>!
</div>

<div id="pro_welcome" style="display: none;">
<p>Welcome to <b><i>Your Site Name</i></b>, the number one place for everything.</p>
<p>We appreciate your visit to us! Please take the time to browse through and <a href="/index.cgi?action=register">register</a> with us if you're interested in us.</p>
<p>We hope you enjoy your stay,<br />Your Site Name Management and Moderation Team</p>
</div>

<div id="pro_staff" style="display: none;">

<p align="center" style="font-weight: bold;">
<a href="Javascript:void(0);" onclick="proTable.display_content('staff','charlie')"><font size="2">Staff Name</font></a> ::
<a href="Javascript:void(0);" onclick="proTable.display_content('staff','triad')"><font size="2">Triad</font></a>
</p>

<div id="pro_staff_default" style="text-align: center; margin-top: 35px; display:;">
Click on a staff name above to read about them.
</div>

<div id="pro_staff_charlie" style="display: none;">
<p><b>Name:</b> Staff Name</p>
<p><b>Forum Rank:</b> Administrator</p>
<p><b><i>Your Site Name</i> Rank:</b> Forum Founder</p>

<div style="margin-left: 10px;">
<p>Hi, I'm the staff member who founded this forum.</p>
<p>Another paragraph here.</p>
</div>
</div>

<div id="pro_staff_triad" style="display: none;">
<p><b>Name:</b> Triad</p>
<p><b>Forum Rank:</b> Moderator</p>
<p><b><i>Your Site Name</i> Rank:</b> First Assistant</p>

<div style="margin-left: 10px;">
<p>Hello, my name is Triad and I'm the first assistant at this forum.</p>
</div>
</div>
</div>

<!-- Add your tabs here. -->

</td>
</tr>
</table>
</td>
<td width="30%" class="windowbg" valign="top" height="100%">
<table width="100%" cellspacing="0" cellpadding="4">
<tr id="pro_sidebar">
<td align="center" class="welcometablebg" style="border-right: none;">
Important Threads
</td>
</tr>
<tr>
<td class="windowbg" valign="top">
<div id="pro_threads">
<a href="/">Section Header</a>
<div>
- <a href="/">Link One</a><br />
- <a href="/">Link Two</a><br />
- <a href="/">Link Three</a><br />
- <a href="/">Link Four</a><br />
- <a href="/">Link Five</a><br />
- <a href="/">Link Six</a>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>

<script type="text/javascript"><!--

if(document.cookie.match(/protoggle=0($|/gi))
proTable.g("pro_collapse").style.display = "none";

if(document.cookie.match(/prodata=(.+?)($|/gi))
proTable.display_data(decodeURI(RegExp.$1));

//--></script>

Edit[/u]

.welcometablebg {
background-color: #dadada;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
}

.welcometablehover {
background-color: #efefef;
border-bottom: 1px solid #efefef;
border-right: 1px solid #000000;
}

These two classes determine how a tab will appear when it is and isn't selected. The second class which has the word "hover" in it is the class for when the tab is selected. I like to have this class' background and bottom border color the same as your windowbg class so that the tab appears to be "connected" with the content below.

#pro_tabs td, #pro_sidebar td {
font-size: 10pt;
font-weight: bold;
text-align: center;
}

This part is for styling the tabs' text.

#pro_threads a {
font-weight: bold;
line-height: 1.5em;
}

#pro_threads div {
margin-top: 5px;
margin-left: 20px;
}

This part is for the right hand column titled as "Important Threads". You don't have to have this so feel free to remove that column along with the CSS shown above.

If you have more than one skin, I suggest making a separate copy of the CSS for each skin and hosting it on a remote website. If you don't know how to do this, make a thread in code support.

You do not need to edit any of the JavaScript, but I suggest hosting it somewhere so your browser will store it in your cache.

Now to the table itself. If you don't know HTML very well you may need to request some help. To add a tab, just add one of the cells shown below to the table in the above post. For the ID, be sure to place "nav_" in front of it followed by a unique word/number that you will have to use later.

<td class="welcometablebg" onmouseover="proTable.display_data(this.id);" onClick="proTable.toggle_data();" id="nav_welcome">Welcome</td>

Add the bold text for the last tab only.

id="nav_welcome" style="border-right: none;">Welcome</td>

Once you know how many tabs you are going to use you need to edit two things. First, go back up to the CSS we were editing above, and change the width to 100 divided by the total amount of tabs you have. So if you have two tabs, 100 / 2 = 50%.

#pro_tabs td {
width: 50%;
cursor: pointer;
}

Next, find this line a few lines down from where you previously added your tabs above, and set the colspan attribute to the number of tabs you have.

<td class="windowbg" colspan="2">

Directly below this line is where the content goes. The first element contains the default data that shows when no tab has been selected.

<div id="pro_default" style="text-align: center; font-size: 15pt; margin-top: 45px; display:;">
Welcome to <b><i>Your Site Name</i></b>!
</div>

For the individual tabs, all you need to do is add what is below and edit the ID by using the same ID you used for the tab above except that you place "pro_" in front of the ID instead of "nav_".

<div id="pro_welcome" style="display: none;">
<p>Welcome to <b><i>Your Site Name</i></b> – the number one place for forum everything.</p>
<p>We appreciate your visit to us! Please take the time to browse through and <a href="/index.cgi?action=register">register</a> with us if you're interested in <a href="/index.cgi?board=makeovers">doing something</a> for your own whatever.</p>
<p>We hope you enjoy your stay,<br />Your Site Name Management and Moderation Team</p>
</div>

Please note that the number one error when putting this together is invalid nesting. Make sure all of your HTML tags (<td>, <div>, etc.) are correctly lined up. I highly recommend editing this in a text editor such as notepad. If you would like to have a tabbed out version of the code.

More Edit

In my preview in my first post you probably noticed a RPG and staff section which has links that you can click on to display different information. I've put this together so you can notice the important parts that require editing.

The ID that you chose for the section needs to be used where all the bold words are.

<div id="pro_staff" style="display: none;">

<p align="center" style="font-weight: bold;">
<a href="Javascript:void(0);" onclick="proTable.display_content('staff','charlie')"><font size="2">Staff Name</font></a> ::
<a href="Javascript:void(0);" onclick="proTable.display_content('staff','triad')"><font size="2">Triad</font></a>
</p>

<div id="pro_staff_default" style="text-align: center; margin-top: 35px; display:;">
Click on a staff name above to read about them.
</div>

<div id="pro_staff_charlie" style="display: none;">
<p><b>Name:</b> Staff Name</p>
<p><b>Forum Rank:</b> Administrator</p>
<p><b><i>Your Site Name</i> Rank:</b> Forum Founder</p>

<div style="margin-left: 10px;">
<p>Hi, I'm the staff member who founded this forum.</p>
<p>Another paragraph here.</p>
</div>
</div>

<div id="pro_staff_triad" style="display: none;">
<p><b>Name:</b> Triad</p>
<p><b>Forum Rank:</b> Moderator</p>
<p><b><i>Your Site Name</i> Rank:</b> First Assistant</p>

<div style="margin-left: 10px;">
<p>Hello, my name is Triad and I'm the first assistant at this forum.</p>
</div>
</div>
</div>

If this is still confusing to you then feel free to make a thread about it.

[Acer]

STAFF APPLICATION HAS BEEN TAKEN INTO CONSIDERATION AND IT IS UNDER REVIEW!

Your staff application has been taken into consideration and it is now under review. Thank you for applying for a staff position in Acer's Supreme Forum Hits. The staff members and I will review your application carefully. I will also get the chance to approve your application to see if you are accepted or rejected for that matter.

Interesting that you're both a Coder and a GFX'er. We can use someone like you to the team, but you must be active though. Nice that you know about the "Dynamically Tabbed Table" there.