This tutorial will explain to you how to add an extra button to the Navigation(nav) Bar.

Repostable, NOT EDITABLE

Creator: Krayzie10291

Level:
Novice

Requirements:

• A basic understanding of HTML
  
• A basic understanding of JavaScript(basics)
  
• A basic understanding of innerHTML
  

Table of Contents:

• Description
  
• The Code
  
• First
  
• Second
  
• Explained
  
• Third
  
• Explained
  
• Cleaning Up:(optional)
  

Description:

This is a relatively short and easy to follow tutorial. I will go over all the steps on adding a new button/link to the nav bar.

The Code:

This is the basic code:

<script>

var N_td = document.getElementsByTagName("td")[5];
N_td.innerHTML += '<a href="LINK">DISPLAY NAME</a>';

</script>

There will be more added to it at the end of this tutorial.

First:

<script>

This tells the browser you are starting a script.

Second:

var N_td = document.getElementsByTagName("td")[5];

Explained:

var N_td

You can re-name N_td and make it anything, b_td, td, anything.

document.getElementsByTagName("td")[5];

This string of code searches through the document, and looks for the 5th td(cell) tag and grabs it. The N_td is the variable that it is assigned to, once again N_td can be anything, you name it.

Third:

N_td.innerHTML += '<a href="LINK">DISPLAY NAME</a>';

Explained:

Again, N_td can be anything! .innerHTML += is an innerHTML statement.

+= means you're adding something, if you used = instead of that, it would replace the nav bar with the link. Using this will add that link right after the nav bar(same cell).

'<a href="LINK">DISPLAY NAME</a>';

Or

'<a href="LINK"><img src="URL TO BUTTON" /></a>';

To add a button^

That is a basic HTML link. you can also use:

"<a href='LINK'>DISPLAY NAME</a>";

If you read that closely, you'll see I replaced " and ' with the opposite. You can't have:

"<a href="LINK">DISPLAY NAME</a>";

or the opposite, or you will get an ERROR!.

Finally:

</script>

That tells the browser you're ending the script. That is important!

Cleaning Up:(optional)

Now you can clean up the script so it looks like this:

<script type="text/javascript">
<!--
/* Add a button/link to navigation bar */

var N_td = document.getElementsByTagName("td")[5];
N_td.innerHTML += '<a href="LINK">DISPLAY NAME</a>';

// -->
</script>

~ THE END


Last Edit: Oct 31, 2005 14:15:02 GMT by /^(Krayzie)?$/i