↑
Main Page

divError

<div id=”divLogin” style=”position: absolute; left: 20px; top:

100px; visibility: hidden”>

<table border=”0” width=”100%” height=”100%”><tr><td

align=”center”>

<tr>

<td>Username:</td><td><input type=”text”

name=”txtUsername” /></td>

</tr>

<tr>

<td>Password:</td><td><input type=”password”

name=”txtPassword” /></td>

</tr>

<tr>

<td> </td><td><input type=”Submit” value=”Login”

/></td>

</tr>

</table>

</td></tr></table>

</div>

</form>

</body>

</html>

Now that the pieces are in place, you can use the detection script to check for the appropriate browsers

and operating systems. The code should show the login form and hide the error message if the user has

fulfilled the requirements:

if ((isMinIE5_5 && isWin) || (isMinMoz1 && isUnix) || (isMinSafari1 && isMac)) {

document.getElementById(“divLogin”).style.visibility = “visible”;

document.getElementById(“divError”).style.visibility = “hidden”

}

This code snippet uses the style extensions of the DOM to set the CSS visibility property of each

<div/>

Accessing the CSS style of elements using script is covered fully in Chapter 10, “Advanced DOM

Techniques.”

This code should be executed when the document is loaded, so it should be assigned to the

window.onload

event handler. (Don’t worry too much about this now; events and event handlers are

discussed in the next chapter.)

<html>

<head>

<title>Login</title>

window.onload = function () {

if ((isMinIE5_5 && isWin) || (isMinMoz1 && isUnix)

|| (isMinSafari1 && isMac)) {

document.getElementById(“divLogin”).style.visibility = “visible”;

document.getElementById(“divError”).style.visibility = “hidden”

254

Chapter 8

11_579088 ch08.qxd 3/28/05 11:38 AM Page 254