- Internet Explorer 5 and Up
- Netscape and Mozilla
- Opera 5 and Up on Windows and MacOS
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Netscape and Mozilla
Netscape Navigator 6 and Mozilla are both based on the same internal rendering engine. This means that the code you write for one of them should work flawlessly in the other. (See Figure 8.) Only a few small adjustments need to be made to the code for it to work in Navigator and Mozilla, so let's get started!
)
Figure 8 Netscape Navigator and Mozilla will both display the page, but
the sizing does not yet work.
If you test the current sizeGetter.html page in either Netscape Navigator or Mozilla, you should see the same output as you did in Internet Explorer. However, changing the text size (View, Text Zoom) won't yet affect the size of the Flash movie.
Let's start by adding the appropriate JavaScript to the getTextSize() function. Change the if statement that checks for Internet Explorer to this:
if (is_ie5up) {
returnSize = document.all["textSizer"].offsetHeight;
} else if (is_nav6up || is_moz) {
var divObj = document.getElementById("textSizer");
returnSize = parseInt(document.defaultView.getComputedStyle(divObj,
"").getPropertyValue("height"));
}
Here, you extend the existing if statement to determine whether the user's browser is a Navigator 6 or better browser or a Mozilla browser. You then create the divObj variable and make it a reference to the textSizer DIV object on the page. Finally, you use the getComputedStyle() function to get the height of the DIV and assign it to the returnSize variable. The parseInt() function ensures that the value of returnSize is indeed an integer value, not a string such as "19px" that can get returned by the browser when dealing with CSS elements on the page.
Now you need to change the initSizer() function to handle the Navigator and Mozilla browsers. Change the existing if statement in that function to the following code:
if (is_ie5up || is_nav6up || is_moz) {
window.setInterval("checkTextSize()", 300);
}
All you have done here is add other conditions to determine that the user is viewing the page using Navigator or Mozilla.
Next, change the if statement that adjusts the sizes of the movieHeight and startHeight variables to also check for the Navigator or Mozilla browsers. Adjust the if statement that checks for the Mac version of Internet Explorer to read as follows:
if (is_ie5up && is_mac) {
movieHeight = 17;
startHeight = 17;
objectName = "unused";
} else if ((is_nav6up || is_moz) && is_mac) {
movieHeight = 16;
startHeight = 16;
}
Here you simply determine whether the browser viewing the page is either Navigator or Mozilla and verify that the platform is a Mac. You then set the movieHeight and startHeight variables to 16 because of the Mac's smaller default font sizes.
That's it! Now Netscape Navigator and Mozilla should work. Save your work and test the page. (See Figure 9.)
)
Figure 9 Test the changes you made by adjusting the Text Zoom.
If you change the Text Zoom now, you should see the Flash movie resize and the values in the field change accordingly. (See Figure 10.)
)
Figure 10 The sizeGetter movie should now update properly.
Take the time to test the page on the Mac versions of Navigator and Mozilla as well, to ensure that everything is working cross-platform.
)
Figure 11 The Mac versions of Navigator and Mozilla should display the
sizeGetter.html page as expected.
Be sure to try the different text zoom levels in Navigator and Mozilla to be sure that the page reacts as it did in the Windows versions of the browsers. (See Figure 12.)
)
Figure 12 Change the text size in each of the browsers to ensure the page
functions as it did on Windows.
Great work so far! Now we have one browser left to cover, Opera.