/*
Mastering JavaScript, Premium Edition
by James Jaworski
ISBN:078212819X
Publisher Sybex CopyRight 2001
*/
Tabbed Panel
.tab {font-family: sans-serif; line-height:150%;
font-weight: bold; position:absolute;
text-align: center; border: 2px; border-color:#999999;
border-style: outset; border-bottom-style: none;
height: 54px; width: 90px; margin:0px}
.panel {font-family: sans-serif; font-size: smaller;
position:absolute; border: 2px; border-color:#999999;
border-style:outset; width: 400px; height: 200px;
left:0px; top:54px; margin:0px; padding:6px}
h1 {text-align: center}
var panelID = "p1"
var numDiv = 8
var numRows = 2
var tabsPerRow = 4
var numLocations = numRows * tabsPerRow
var tabWidth = 90
var tabHeight = 30
var vOffset = 6
var hOffset = 10
var divLocation = new Array(numLocations)
var newLocation = new Array(numLocations)
for(var i=0; i
newLocation[i] = i
}
function getDiv(s,i) {
var div
if(navigator.appName == "Microsoft Internet Explorer"
&& navigator.appVersion.charAt(0) < 5)
div = document.all.item(panelID+s+i)
else div = document.getElementById(panelID+s+i)
return div
}
function setZIndex(div, zIndex) {
div.style.zIndex = zIndex
}
function getLocation(i) {
return divLocation[i]
}
function setLocation(i, j) {
divLocation[i] = j
}
function getNewLocation(i) {
return newLocation[i]
}
function setNewLocation(i, j) {
newLocation[i] = j
}
function updatePosition(div, newPos) {
div.style.top = (numRows-(Math.floor(newPos/tabsPerRow) + 1)) * (tabHeight-
vOffset)
div.style.left = (newPos % tabsPerRow) * tabWidth +
(hOffset * (Math.floor(newPos / tabsPerRow)))
}
function selectTab(n) {
// n is the ID of the division that was clicked
// firstTab is the location of the first tab in the selected row
var firstTab = Math.floor(getLocation(n) / tabsPerRow) * tabsPerRow
// newLoc is its new location
for(var i=0; i
var loc = getLocation(i)
// If in the selected row
if(loc >= firstTab && loc < (firstTab + tabsPerRow)) setNewLocation(i, loc -
firstTab)
else if(loc < tabsPerRow) setNewLocation(i,firstTab+(loc % tabsPerRow))
else setNewLocation(i, loc)
}
// Set tab positions & zIndex
// Update location
for(var i=0; i
var loc = getNewLocation(i)
updatePosition(div, loc)
if(i == n) setZIndex(div, numLocations +1)
else setZIndex(div,numLocations - loc)
div = getDiv("panel",i)
if(i == n) setZIndex(div, numLocations +1)
else setZIndex(div, numLocations - loc)
setLocation(i, loc)
}
}
Tabbed Panel
height: 200px">
onclick="selectTab(0)">HTML
language in which Web pages are written. HTML uses tags like <p> and
</p> to identify how text is to be structured and formatted within a
document.
redevelopment and extension of HTML that makes HTML compatible with XML.
XHTML specifies a family of markup languages that are based on HTML but take
advantage of the simplicity, extensibility, and powerful toolset of XML.
CSS is a style sheet language that enables Web page writers to specify
presentation, sizing, and positioning properties of HTML and XML documents.
CSS is used to describe the appearance of a document in a manner that is
independent of its content. There are currently two versions of CSS (referred
to as
extends CSS1.
The
that describes the objects that are available within HTML and XML documents.
It describes these objects in a programming language-independent manner as a
system of interfaces. It defines the properties of these objects and methods
for accessing these objects. The objects can be accessed via programming
languages, such as JavaScript and Java.
pages that was developed by Netscape. It has been standardized by the ECMA
and is referred to as ECMAScript. JavaScript has evolved into a general-
purpose scripting language - it is no longer limited to Web pages. Microsoft
has also developed a version of JavaScript that is named JScript.
a combination of HTML, CSS, and JavaScript that enables Web page content to
exhibit dynamic behavior. This is accomplished by dynamically changing the
properties of document objects in response to user actions and other
events.