Level: Intermediate Hong Guang (hongg@cn.ibm.com), Software Engineer, IBM, Intel, Microsoft,HP
21 Nov 2006 Web pages perform differently on different browsers or on browsers with different settings. Learn some useful tips to help you make your Web applications more adaptable to all environments.
The features of different Web browsers, such as language settings and JavaScript support, can cause Web applications to work differently from one browser to another. This lack of continuity among browsers not only causes an application to look bad, but it often causes it to break. This article presents a number of tips you can follow to solve some of these problems.
Handle different kinds of browsers
The main reason that Web pages cannot work everywhere is that different kinds of browsers support different standards. The best way to overcome this is to use only common attributes and methods. Sometimes, however, you must write special code.
Implement the innerText attribute
You use the innerText attribute to set or retrieve the text between the start and end tags of an object, which is only defined in Microsoft® Windows® Internet Explorer®. Although this attribute is used widely, it is not a standard attribute. You could use innerHTML instead, but they are not the same. The innerText attribute offers special features, such as the ability to get the text of the child node directly, which can help you write cleaner code. You also might have legacy pages that use innerText. By implementing the innerText attribute yourself, you allow these pages to support more browsers. For example, you might need to implement the attribute in a Mozilla-based browser; Listing 1 shows you how.
Listing 1. Implement innerText for Mozilla-based browsers
HTMLElement.prototype.__defineGetter__
(
"innerText",function()
//define a getter method to get the value of innerText,
//so you can read it now!
{
var textRange = this.ownerDocument.createRange();
//Using range to retrieve the content of the object
textRange.selectNodeContents(this);
//only get the content of the object node
return textRange.toString();
// give innerText the value of the node content
}
);
|
Get the scroll value and the window size
Most Web applications require geometry values, such as the window size and the scroll values. However, browsers can store these values in different attributes; some attributes even have the same name but different meaning. You're better off creating your own unique variables to stand for the attribute values. Listing 2 shows you how to create unique attributes in most mainstream browsers.
Listing 2. Define some universal variables as unique attributes that can stand by geometry values
var scrollLeft,scrollTop;
// scrollLeft: The distance between the horizontal scrollbar
// with the left edge of the frame.
// scrollTop: The distance between the vertical scrollbar
// with the top edge of the frame.
// Get the scroll value from different browsers.
// Determine the browser type first.
// And then get the value from the particular property.
if (window.pageYOffset){
scrollTop = window.pageYOffset
} else if(document.documentElement && document.documentElement.scrollTop){
scrollTop = document.documentElement.scrollTop;
} else if(document.body){
scrollTop = document.body.scrollTop;
}
if(window.pageXOffset){
scrollLeft=window.pageXOffset
} else if(document.documentElement && document.documentElement.scrollLeft){
scrollLeft=document.documentElement.scrollLeft;
} else if(document.body){
scrollLeft=document.body.scrollLeft;
}
var windowWidth,windowHeight; // frame width & height
if(window.innerWidth){
windowWidth=window.innerWidth;
} else if(document.documentElement && document.documentElement.clientWidth){
windowWidth=document.documentElement.clientWidth;
} else if(document.body){
windowWidth=document.body.offsetWidth;
}
if(window.innerHeight){
windowHeight=window.innerHeight;
} else if(document.documentElement && document.documentElement.clientHeight){
windowHeight=document.documentElement.clientHeight;
} else if(document.body){
windowHeight=document.body.clientHeight;
}
|
Window origin in bidirectional languages
Some languages, such as Arabic and Hebrew, are known as bidirectional languages, which means they're read from right to left. Current browsers support the ability to show content from right to left. However, when a page is shown from right to left, Internet Explorer defines a different origin of the window. The origin isn't in the left corner of the canvas; instead, it is in the left corner of the visible part. This means that some part of the page will have a negative x value, making some element of your page appear in the wrong position. Figure 1 shows where the origin is in Internet Explorer when a page is shown from left to right.
Figure 1. The origin in Internet Explorer when a page is shown from left to right
Remember that you must change your arithmetic when the page is shown in Internet Explorer from right to left, such as by adjusting the position of the element by the offset of the origin.
Get a multiline tree view list
You use <ul> and <li> tags to show a tree view list. However, Mozilla-based browsers don't allow you to embed other elements in <li> tags, so you can only have simple list items. To solve this problem, you can use tables to create a tree view list. By using TABLE instead of LI to implement an item, you can have complex items.
However, you run into problems again when the TABLE has multiple columns. Resizing the window with your mouse generates a page that looks like Figure 2.
Figure 2. Before resizing the window, the columns are snapped to the grid
Figure 3 demonstrates what the page looks like when you resize the frame; the columns are not snapped to the grid anymore.
Figure 3. After resizing the window, the columns are no longer snapped to the grid
You can assign a width to TD in the table of the tree view, but that doesn't work well, because the width of TD only means its maximum size, so browsers might resize TD to show more content when you resize the window. To achieve an organized appearance, you need something else -- DIV. (In this article, DIV, TABLE, and TD represent the nodes in the DOM tree; of course, you can also treat them as HTML tags.)
Unfortunately, you'll soon realize that DIV causes similar problems. The width of DIV is not the absolute value, but rather the minimum width. If you change the size of the window, some browsers will also change the width of DIV. How about combining TD and DIV? If you use DIV nested in TD, then the maximum and minimum sizes of the cell are both defined. You now have a fixed size, as Figure 4 shows.
Figure 4. With the help of DIV, the page looks good
Handle multiple languages
When your apps support multiple languages, keep in mind that the same text in different languages will probably be different lengths, possibly causing your page to look bad. Adjusting your DIV that contains the text can help the situation.
Define a proper size to the DIV
Suppose you want to use DIV to draw a popup menu. However, if you don't give your menu a fixed size, you'll encounter a problem when you scroll the page, as Figure 5 shows.
Figure 5. Scrolling down the page causes text to overflow
As you can see, the text is overflowing. Internet Explorer automatically gives DIV the size of its visible part when DIV doesn't have a fixed size. So when you scroll the page to show the invisible part, the DIV is not big enough, causing the text to overflow. To solve this problem, you must give DIV a fixed size.
Now you need to figure out how to handle the size. You cannot hard-code the size, because the length of the text in DIV is not fixed if you support multiple languages. You need to get the length of the text dynamically and then set the size of DIV. A table can help you this time. The size of the table is independent of its visibility. Listing 3 shows you how to give DIV a proper width.
Listing 3. Set the width of DIV by the width of the text in it
var leftmenu = document.getElementById("leftmenu");
var divWidth = parseInt(document.getElementById("divtable").offsetWidth);
leftmenu.style.width = divWidth +"px";
|
Handle different browser settings
Trouble can come not only from different browsers and languages, but sometimes from users. Users can often cause problems when they set special settings in their browsers. For example, disabling JavaScript functionality can cause challenges for your app.
Support browsers that don't support JavaScript
Some users still use old browser versions, and some disable JavaScript in their browsers, causing your Web pages to display incorrectly. To handle this, you can use the <noscript> tag. Simply add some text in the tag to tell users that their browsers don't support JavaScript and that they cannot view the page correctly. Listing 4 demonstrates code that you might use.
Listing 4. Inform users why they cannot see the page displayed as intended
<html>
<head>
<noscript>
Your browser does not support JavaScript,
or you've disabled the JavaScript in your browser,
so you cannot view this page correctly.
</noscript>
</head>
</html>
|
However, a better solution to this problem is to provide another version of your Web application that doesn't depend on JavaScript. Whether users have enabled JavaScript support or not, they can still use your application. Use the code shown in Listing 5 to direct users to your non-script version.
Listing 5. Divert the application to a non-script version
<noscript>
<meta HTTP-EQUIV="REFRESH" CONTENT="0;URL=noscriptversion.jsp?">
</noscript>
|
Summary
In this article, I offered a number of tips, such as how to implement the innerText attribute in Mozilla-based browsers, how to use variables to represent geometry values to make them available for all browsers, and how to adjust the position of an element by the offset of the origin when the page is shown in Internet Explorer from right to left. I also showed you how to get a multilane tree view list, how to set the proper size for DIV elements, and how to support browsers that don't support JavaScript. I hope these tips can help you in your daily work.
Resources Learn
Get products and technologies
Discuss
About the author  | | | Guang Hong is a software engineer who works at the IBM China Development Lab. He is working on an Eclipse-based Web application and has rich experience in adopting Web applications across browsers. |
Rate this page
| 
