- A Tabbed Interface
- Project 12: Transitional CSS and Javascript Strategies
- Creating the Base Graphics for the Tabs and Assembling the Tab Table
- Planning the Project and Dividing It into Logical Modules
- Creating the XHTML Base
- Creating the Main CSS Stylesheet (common.css)
- Creating the Supplemental CSS Style Rules (advanced.css)
- Creating the Basic Document Object Creation Script (docobj.js)
- Creating the Tab Navigation Script (tabs.js)
- Modifying the XHTML Markup to Call the Functions
This chapter is from the book
This chapter is from the book
This chapter is from the book
Modifying the XHTML Markup to Call the Functions
To activate the JavaScript, we will adjust the XHTML markup to call the various functions we've defined.
Insert an onload event call in the <body> tag that calls the choosebox() function, with 1 passed as the argument.
<body onload="choosebox(1)">
){kind=small}
Figure
12.5 When the page first loads, the first tab (tab1) is set to "active,"
and the first content box (box1) is on top.
Insert the onmouseover, onmouseout, and onclick event calls from the div elements tab1, tab2, tab3, tab4, and tab5. The tabover() function is called onmouseover; the tabout() function is called onmouseout; and the choosebox() function is called onclick. The appropriate value for the tabnum argument is passed to the functions: for tab1 it's 1, for tab2 it's 2, and so on. The added event calls are highlighted in the code.
<div id="tab1" onmouseover="tabover(1)" onmouseout="tabout(1)" onclick="choosebox(1)"> <table summary="" cellpadding="0"cellspacing="0" border="0"> <tr> <td width="8" height="24" class="tableft"> <img src="images/dot.gif" alt=""width="8" height="24" border="0" /></td> <td id="tabmiddle1">overview</td> <td class="tabright"> <imgsrc="images/dot.gif" alt="" width="7"height="24" border="0" /></td> </tr> </table> </div> <div id="tab2" onmouseover="tabover(2)" onmouseout="tabout(2)" onclick="choosebox(2)"> <table summary="" cellpadding="0"cellspacing="0" border="0"> <tr> <td width="8" height="24" class="tableft"> <img src="images/dot.gif" alt=""width="8" height="24" border="0" /></td> <td id="tabmiddle1">overview</td> <td class="tabright"> <imgsrc="images/dot.gif" alt="" width="7"height="24" border="0" /></td> </tr> </table> </div> <div id="tab3" onmouseover="tabover(3)" onmouseout="tabout(3)" onclick="choosebox(3)"> <table summary="" cellpadding="0" cellspacing="0"border="0"> <tr> <td width="8" height="24" class="tableft"> <imgsrc="images/dot.gif" alt="" width="8" height="24"border="0" /></td> <td id="tabmiddle1">overview</td> <td class="tabright"> <img src="images/dot.gif" alt=""width="7" height="24" border="0" /></td> </tr> </table> </div> <div id="tab1" onmouseover="tabover(1)" onmouseout="tabout(1)" onclick="choosebox(1)"> <table summary="" cellpadding="0" cellspacing="0"border="0"> <tr> <td width="8" height="24" class="tableft"> <img src="images/dot.gif" alt="" width="8" height="24"border="0" /></td> <td id="tabmiddle1">overview</td> <td class="tabright"> <img src="images/dot.gif" alt=""width="7" height="24" border="0" /></td> </tr> </table> </div> <div id="tab5" onmouseover="tabover(5)" onmouseout="tabout(5)" onclick="choosebox(5)"> <table summary="" cellpadding="0" cellspacing="0"border="0"> <tr> <td width="8" height="24" class="tableft"> <img src="images/dot.gif" alt="" width="8" height="24"border="0" /></td> <td id="tabmiddle1">overview</td> <td class="tabright"> <img src="images/dot.gif" alt=""width="7" height="24" border="0" /></td> </tr> </table> </div>
){kind=small}
Figure
12.6 The user mouses over another tab, and the text and background colors
change.
){kind=small}
Figure
12.7 The user clicks the tab, and the new content box appears. Because the
whole page is already loaded, the change occurs right away. The tab's appearance
changes to the "active" state. Note how the tab is stacked on top
of the content box.
How It Works: Gracefully Degrading Pages with CSS
In this project, we have dealt with the issue of creating a page that degrades gracefully in older browsers in two ways. The first is with a planned use of the varying support for CSS rules.
To review, our main goal for this project was to create a page that is readable to all and reasonably attractive to users of browsers with partial CSS support—while still avoiding the use of styling tags such as <font> within the markup itself.
The CSS for this page has been separated into two documents. The first one contains the rules that will be recognized by Netscape 4.x. This is so that the page looks reasonably attractive in that browser. Generally speaking, these are the style rules for font appearance as well as background and foreground colors. Some basic margin property values are also included.
The second stylesheet, advanced.css, contains the rules that are not well supported by Netscape 4.x or any other browser with only rudimentary support for CSS. Because advanced.css is associated with the base XHTML document using the @import property, the whole stylesheet will be ignored by those browsers that don't support @import. Some of the rules in advanced.css override the ones in common.css by declaring them to be !important. It's always important to remember to arrange the markup content in a way that is logical for people who are using non-CSS enabled browsers.
)
Figure
12.8 How the page looks in Netscape 4.x, which only recognizes the style
rules included in common.css. Note how the "header" text for each
section is actually the text contained in the tab tables. Here this text is
set to a large size (font-size: 18px); this is overridden in the advanced.css
stylesheet with !important (font-size: 12px !important).
How It Works: Gracefully Degrading Pages and JavaScript
In the previous projects, most of the functions we created had a number of if...else statements that specified different code for different browsers. In this project however, there are only two browser-specific if...else statements in the whole tabs.js script. The first one, in the tabcolor() function, deals with the fact that the syntax for cursor styles for Internet Explorer and Netscape 6 differ. The second one, at the beginning of the choosebox() function, specifies that the function will only execute if the browser in use recognizes document.all or document.getElementById.
The tabover() and tabout() functions, on the other hand, don't have any if...else statements that "sniff" the browser out. Instead, the functions are called from within div elements rather than from a (link) elements. Modern browsers allow for JavaScript events to be called from any element, while it's only possible to call JavaScript events from a limited set of elements in older browsers. Netscape 4.x, for example, will simply ignore the onmouseover, onmouseout, and onclick event calls in the div elements.
When creating a "gracefully degrading" site, the visitor should never get the impression that they are somehow getting a lesser version. Ideally, he should never know what he is missing—unless, of course, he revisits the site with another browser!