Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > PHP/MySQL/Scripting

  • Print
  • + Share This
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.

  1. Insert an onload event call in the <body> tag that calls the choosebox() function, with 1 passed as the argument.

    <body onload="choosebox(1)">

Figure 12.5Figure 12.5 When the page first loads, the first tab (tab1) is set to "active," and the first content box (box1) is on top.

  1. 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>

Figure 12.6Figure 12.6 The user mouses over another tab, and the text and background colors change.


Figure 12.7Figure 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.8Figure 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!

  • + Share This
  • 🔖 Save To Your Account