Article
Create Pop-Up Notes with DHTML
Working with Other Browsers
Let's expand our script to work for more browsers. Start by adding three lines of code at the beginning of the script. The new lines are shown in bold below.
<html>
<head>
<script language="JavaScript">
<!--
ns4 = document.layers;
ie4 = document.all;
nn6 = document.getElementById && !document.all;
function hideObject() {
...
This very useful block of code lets us sense the capabilities of the browser and tells us which version of the Document Object Model (DOM) to use. That helps us figure out how to find the n1 JavaScript object for this particular browser.
If the page is being viewed in Netscape 4, a browser that supports document layers, then this code will set the ns4 variable. Only Internet Explorer supports the document.all array we used earlier, so if the browser supports this the ie4 variable will be set. Likewise the code applies a separate test to determine if the browser is really Netscape 6, and sets the nn6 variable if so.
Next rewrite the hideObject() function as shown below.
function hideObject() {
if (ns4) {
document.n1.visibility = "hide";
}
else if (ie4) {
document.all['n1'].style.visibility = "hidden";
}
else if (nn6) {
document.getElementById('n1').style.visibility = "hidden";
}
}
This divides the function into three distinct sections: one used when Netscape 4 is the browser, another used when Internet Explorer Version 4 or higher is the browser, and still another used when Netscape 6 is the browser.
Each section uses the appropriate method of accessing the n1 object for that particular browser. Notice that these methods are all different. In fact, for Netscape 4 even the value used to set the visibility property is different ("hide" instead of "hidden").
These differences are a big part of the reason why DHTML can cause lots of browser compatibility problems.
Finally, let's change the showObject() function to likewise work for all the major browsers.
function showObject(id) {
if (ns4) {
document.n1.visibility = "show";
}
else if (ie4) {
document.all['n1'].style.visibility = "visible";
}
else if (nn6) {
document.getElementById('n1').style.visibility = "visible";
}
}
Again, this uses a different block of code for each browser's implementation of the DOM.
Positioning By Mouse Click
In its current form this script is a bit brittle. That's because we're using absolute coordinates to position our pop-up note over the word "NASA." If visitors have changed their browser settings to use a larger or small font, the word NASA will appear in a different spot on the page, and our pop-up won't appear in the right spot.
The cure for this is to detect the mouse coordinates when visitors click the NASA link, and then position the pop-up note at those coordinates.
To do this, first modify the NASA link as shown below.
<A href="javascript:;" onClick="showObject(event);">NASA.</A>
Notice that the call to showObject( ) is now tied to an onClick event, and the function now receives an event object as an argument. This allows us to access data about the mouse click event.
Next we need to update showObject() to change the coordinates of the pop-up note. The code below shows our updated function.
function showObject(e) {
if (ns4) {
document.n1.visibility = "show";
document.n1.left = e.pageX;
document.n1.top = e.pageY;
}
else if (ie4) {
document.all['n1'].style.visibility = "visible";
document.all['n1'].style.left = e.clientX;
document.all['n1'].style.top = e.clientY;
}
else if (nn6) {
document.getElementById('n1').style.visibility = "visible";
document.getElementById('n1').style.left = e.clientX;
docume.getElementById('n1').style.top = e.clientY;
}
}
Here we've declared a local variable "e" which is passed the event object. We then use the object properties clientX and clientY to get the top and left coordinates of the mouse click (notice that these are called pageX and pageY in Netscape 4 -- yet another compatibility issue).
We use these coordinates to set the top and left properties of our n1 object, and our pop-up note will appear in the right place.
And that's it. We now have a DHTML script that works the way we want.
Don't Forget Compatibility
We've gone to great lengths to make sure our DHTML script works with the last two versions of the major browsers. But what about older browsers? What about Opera or WebTV? What about people with disabilities who use a screen reader?
The number of people falling into any of these categories is small. In fact, they probably represent less than 2% of your total audience. But that's still a lot of people, and in today's environment most companies would love a 2% boost in revenue.
While I like DHTML, I always warn about its potential compatibility issues. Like any thing on your Web page, you should make sure it degrades gracefully if someone uses a browser that doesn't understand your script.
That means it's a good idea to use pop-up notes only to provide supplemental information. Never put critical info inside one of these notes.
And any time you use DHTML, it's a good idea to test your pages by viewing in as many browsers and browser versions as possible. If you can't do that, then at least view them with JavaScript turned off, just to make sure the page still works.
Extending Our Script
Note that in its current form this script doesn't scale very well. Since we've hardwired our JavaScript code to reference the n1 object, our pop-up will only work if you name the DIV element on your page named 'n1.' If you name it something else, the script won't work.
More importantly, what you want to have more than one pop-up note on your page? The current form of the script only works for a single pop-up.
I did this to simplify the script, just so it's easier to understand how our JavaScript code is manipulating style sheets. Next month we'll extend this script to work for any number of pop-up notes. Along the way, we'll learn how to store JavaScript objects in variables, and how to reference them throughout our code.