DHTML Tabbed Notes

DHTML Dress-up Dog | Insert FLASH (.swf) file | Slideshow Script | DHTML Tabbed Notes

DHTML Tabbed Notes

Description:	Here is an interesting DHTML script from SimplyTheBest web site. It's a little more complicated than most, as it provides 4 separate scripts to be used. However, I show you how you can combine all 4 scripts into one, and then insert it onto your page using Insert > HTML Code. Also, the DHTML script makes heavy use of Cascading Style Sheets (css), which may make it hard to understand where to modify things like fonts, colors, and location of the window it displays. Only thing I can suggest is to get one or more good books on how to code CSS, HTML and DHTML. Or go online to Google, and do a search for: css html tutorial
How to use:	1. Copy & paste code (as provided below) onto your page with Insert > HTML Code 2. Modify the text information as required & publish!
Example:	Two examples: Example 1 - this uses the code as displayed below Example 2 - this is one that I have modified
Download the code right click on link, then click on 'Save target (or frame) as'	tabbednotes.txt
Other information:

Source code: (text in RED is what I added)

<HEAD>

<STYLE>

<!--

.conts {

VISIBILITY: hidden

}

.tab {

BORDER-LEFT: #e0e0e0 thin solid; BORDER-RIGHT: gray thin solid; BORDER-TOP: #e0e0e0 thin solid; FONT-FAMILY: Verdana; FONT-SIZE: 8pt; FONT-WEIGHT: normal; TEXT-ALIGN: center

}

.selTab {

BORDER-LEFT: #000080 thin solid; BORDER-RIGHT: #000080 thin solid; BORDER-TOP: #000080 thin solid; FONT-FAMILY: Verdana; FONT-SIZE: 8pt; FONT-WEIGHT: bold; TEXT-ALIGN: center

}

-->

</style>

// Courtesy of SimplytheBest.net (http://simplythebest.net/info/dhtml_scripts.html)

//a public function that the container uses to pass in values for the labels

function public_Labels(label1, label2, label3, label4, label5, label6, label7){

t1.innerText = label1;

t2.innerText = label2;

t3.innerText = label3;

t4.innerText = label4;

t5.innerText = label5;

t6.innerText = label6;

t7.innerText = label7;

}

//a public function that the container uses to pass in values for the card containers

function public_Contents(contents1, contents2, contents3, contents4, contents5, contents6, contents7){

t1Contents.innerHTML = contents1;

t2Contents.innerHTML = contents2;

t3Contents.innerHTML = contents3;

t4Contents.innerHTML = contents4;

t5Contents.innerHTML = contents5;

t6Contents.innerHTML = contents6;

t7Contents.innerHTML = contents7;

init();

}

//sets the default display to tab 1

function init(){

tabContents.innerHTML = t1Contents.innerHTML;

}

//this is the tab switching function

var currentTab;

var tabBase;

var firstFlag = true;

function changeTabs(){

if(firstFlag == true){

currentTab = t1;

tabBase = t1base;

firstFlag = false;

}

if(window.event.srcElement.className == "tab"){

currentTab.className = "tab";

tabBase.style.backgroundColor = "white";

currentTab = window.event.srcElement;

tabBaseID = currentTab.id + "base";

tabContentID = currentTab.id + "Contents";

tabBase = document.all(tabBaseID);

tabContent = document.all(tabContentID);

currentTab.className = "selTab";

tabBase.style.backgroundColor = "";

tabContents.innerHTML = tabContent.innerHTML;

}

</SCRIPT>

</HEAD>

<BODY onclick=changeTabs() onload=init()>

</BODY>

<DIV

style="BORDER-BOTTOM: gray thin; BORDER-LEFT: gray thin; BORDER-RIGHT: gray thin; BORDER-TOP: gray thin; HEIGHT: 350px; LEFT: 65px; POSITION: absolute; TOP: 120px; WIDTH: 500px">

<TABLE bgColor=#ffccff cellPadding=0 cellSpacing=0

style="HEIGHT: 350px; WIDTH: 600px">

<TBODY>

<TR>

<TR>

<TD id=t7base

style="BACKGROUND-COLOR: white; BORDER-RIGHT: white thin solid; HEIGHT: 2px"></TD></TR>

<TR>

<TD colSpan=7 height=* id=tabContents

style="BORDER-BOTTOM: white thin solid; BORDER-LEFT: white thin solid; BORDER-RIGHT: white thin solid">sample

contents</TD></TR></TBODY></TABLE></DIV>

<H1>For Advanced DHTML fans</H1>

<P>

<CENTER>This is nice, right? Click on Tab 2 to go to next screen.</CENTER></DIV>

<DIV class=conts id=t2Contents> This is the power of DHTML.

<P>This is a great way to navigate. In addition, the text on the tags work just like any other

HTML text. You can put in images, links, or just about anything you could put in

a traditional HTML document.

<center><P>Go to Tab 3 to continue... </P></center></DIV>

<H2>DHTML Script</H2> Get this DHTML script.

<center><H2><br>Putting Information On The Tabs</H2></center><br>You can change any text, add tabs and much more.

<center><P>Continue to Tab 5... </P></center></DIV>