DHTML and CSS Properties - HTML

What you’ve been seeing so far is that any object can be accessed using the Document Object Model, and one of those objects is the style object (in Internet Explorer). Unfortunately, as easy as the scripts you’ve seen so far seem to be, the real world makes things a little harder, because different browsers use different nomenclatures for their objects. For example, Gecko (the engine running current versions of Netscape) calls its stylesheet object sheet. On the other hand, older versions of Netscape, such as 4.0, use this kind of document traversal to access style sheet properties:

document.tags.p.fontSize

In order to account for all the differences in syntax between browsers, you need to set up browser sniffing routines which, as mentioned in the previous chapter, are chunks of code that check to see what kind of browser is accessing a Web page and executes the appropriate code. You’ll see how this works in the next section.

Setting CSS properties using JavaScript
Navigator 4.x, Netscape 6, Mozilla, and Internet Explorer make CSS1 properties of elements accessible from JavaScript through their Document Object Model. However, the Navigator 4.x DOM and Internet Explorer DOM are different. They both implement parts of the W3C CSS1 standards, but they cover different areas, so JavaScript code that defines CSS1 rules on one browser won’t work on other browsers. The Gecko layout engine covers all of the properties in W3C CSS1 standards.

To define CSS1 rules from JavaScript and have them work in Navigator 4.x, Netscape 6, Mozilla, and Internet Explorer, you need to do the following things:

  1. Insert an empty style element into the document’s head and give it a unique ID through the use of the id attribute. Then, later, you’ll be able to change the properties of the style element.
  2. In the head element, place the JavaScript for defining your CSS1 rules in a script element so it executes before the body element is loaded into the browser window. This is to make Navigator 4.x play nice, because in Navigator 4.z no “Dynamic CSS” will be rendered until you reload the page.
  3. Use a browser sniffing routine as shown in bold in Listing 27-2. Note that the key aspect of this routine is a series of “if” statements. If the browser is Netscape 4, do one thing, and if the browser is IE, do another. Notice also the use again of dot syntax to access the browser name through the use of the userAgent property of the navigator object to determine the browser name.

On Navigator 4.x, the JavaScript is as follows:

document.tags.P.fontSize=“25pt”;

On Internet Explorer, the following is executed:

document.styleSheets[“MyID”].addRule (“P”, “fontSize:25pt”);

On user agents implementing Gecko, the following statement is executed:

document.getElementById(‘tssxyz’).sheet.insertRule(‘P @@ta { fontSize: 25pt }’,
document.getElementById(‘tssxyz’).sheet.cssRules.length )
@@ta is evaluated.

The final code should look something.

Setting CSS Properties Using a Cross-Browser Script

<<html>
<head>
<title>Setting CSS Properties Using Cross-Browser Scripting
Routines</title>
<STYLE ID=“MyID” TYPE=“text/css”>
.MyClass {}
</STYLE>
<SCRIPT LANGUAGE=“JavaScript1.2”><!--
function changeIt() {
NewSize = 20;
var agt=navigator.userAgent.toLowerCase();
if ( (parseInt(navigator.appVersion)==4) &&
(agt.indexOf(‘mozilla’)!=-1) &&
(agt.indexOf(‘spoofer’)==-1)
&& (agt.indexOf(‘compatible’) == -1) ) {
document.tags.H1.color=“red”;
document.tags.p.fontSize=NewSize;
document.classes.MyClass.all.color=“green”;
document.classes.MyClass.p.color=“blue”;
}
else if (agt.indexOf(‘gecko’) != -1) {
document.getElementById(‘MyID’).sheet.insertRule(‘p
@@ta { font-size: ’ + NewSize + ‘ }’,
document.getElementById(‘MyID’).sheet.cssRules.length )
document.getElementById(‘MyID’).sheet.insertRule(‘.MyClass
@@ta { color: purple }’,
document.getElementById(‘MyID’).sheet.cssRules.length )
document.getElementById(‘MyID’).sheet.insertRule(‘p.MyClass
@@ta { color: blue }’,
document.getElementById(‘MyID’).sheet.cssRules.length )
}
else if ( (parseInt(navigator.appVersion)>=4) &&
(agt.indexOf(‘msie’) != -1) ) {
document.styleSheets[“MyID”].addRule (“p”, “font-size:”
@@ta + NewSize);
document.styleSheets[“MyID”].addRule (“.MyClass”,
@@ta “color:purple”);
document.styleSheets[“MyID”].addRule (“p.MyClass”,
@@ta “color:blue”);
}
}
//--></SCRIPT>
</head>
<body>
<div style=“width: 100px; padding: 4px; background-color:
#cccccc; border: blue outset 1px; cursor:hand”>
<div align=“center”><a href=“#” style=“text-decoration:
none” title=“Click to change font styles!”
onClick=“changeIt();”>Click
here</a> </div>
</div>
<p class=“MyClass”>
Here is some test script in a P element
</p>
<div class=“MyClass”>
Here is some test script in a P element
</div>
</body>
</html>

Listing is a boilerplate of sorts. You could do a lot of different things that are relevant to specific browsers with it by replacing the code that gets executed between the braces in an if statement, as shown in bold in the following example:

if ( (parseInt(navigator.appVersion)==4) &&
(agt.indexOf(‘mozilla’)!=-1) &&
(agt.indexOf(‘spoofer’)==-1)
&& (agt.indexOf(‘compatible’) == -1) ) {
//do something here
}

You can see in Figures that clicking the Click Me button achieves the same kind of effects obtained through Listing, but this time the changes will work in most other browsers.

A cross-browser script lets the user change the text by clicking a button.

A cross-browser script lets the user change the text by clicking a button.
Generally, CSS properties are all accessed the same way as shown in the two preceding examples. CSS properties in script tend to map out in such a way that if there is a hyphen in the property name, to access the property in script you delete the hyphen and upper case the next letter, like this:

font-size

becomes

fontSize

Therefore, you can perform tasks such as change visibility and create dynamic menus quite easily by manipulating CSS scripting properties.

Using behaviors to create DHTML effects
Internet Explorer Behaviors, because they are accessed through style sheets, create the potential to completely avoid serious cross-browser incompatibility issues. When calling even highly complicated scripting routines, if you bind your routines to behavior selectors in style sheets, you might never need to worry about the ubiquitous JavaScript error codes that occur so often when users access your site with non-IE browsers.

Behaviors can expose the XML object model as well as a number of other models and controls, including COM and ActiveX. Yet, because they’re designed to be exposed through style sheets, browsers and operating systems that don’t support COM won’t throw a fit when you use them, because they’ll be accessed only by browsers that support the controls you are calling. This is all possible without any direct referencing to the navigator object, the tried and true method of redirecting those you didn’t want accessing certain pages.

The syntax for a behavior looks like this:

.myBehavior {behavior: url(value)}

You may remember the syntax for other style sheet selectors that call on URLs to do their work, such as the background selector. The behavior selector operates on the same principle by binding a URL to the Web page, exposing the Web page to whatever methods and properties are residing in the URL source being referred to. Specifically, the bound source is a scriptlet (thus, the .sct extension):

.myBehavior {behavior: url(myScriptlet.sct)}

Note A scriptlet is different than an imported JavaScript because it is specific to Microsoft browsers and is designed specifically to work with behaviors. If you are using an Active X or COM control, you would specify it as such:

.myBehavior { behavior:url(#myObject)}

In this case, myObject must be accessed in the HTML file by an <OBJECT> tag:

<OBJECT ID=myObject ... ></OBJECT><UL>
<DIV CLASS=“myBehavior”>my text, your text</DIV>

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics