Scripting for 5th Generation Browsers and Beyond - Part I - (7/7)

[previous]

Scripting for 5th Generation Browsers and Beyond

CSS Dynamic Manipulation

One of the more functional abilities of the new generation browsers is the ability to dynamically manipulate CSS properties by utilizing the DOM. It is just cause to celebrate, because it eases the burden for Web developers in a number of ways. Instead of having to use workarounds like document.write to modify CSS properties, finally we can use a standard way of coding that works in 5th generation browsers and above.

Let's begin by exploring a few text effects. First cab of the rank is the ability to dynamically alter letter spacing.

<script language="JavaScript" type="text/javascript">
function spaceLetter(id, amount) {
   document.getElementById(id).style.letterSpacing = amount;
}
</script>

We begin by creating a function spaceLetter() and use two arguments id and amount, which we can then use to define attributes later at the event handler point. The id argument is used in what should now be the familiar document.getElementById(). Then we script the letterSpacing style and give it the same value as our second argument amount.

document.getElementById(id).style.letterSpacing = amount;

This function is then called from an event handler which allows for the manipulation of any element's letter spacing by identifying what the id is (in this case contentLayer) and the amount that the letters should be spaced to (in this instance 8).

<a href="javascript:" 
   onMouseOver="spaceLetter('contentLayer','8')">Space the 
      Letters </a>

Here is a complete working example: (live example)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Letter Spacing Example</title>
<script language="JavaScript" type="text/javascript">
function spaceLetter(id, amount) {
	document.getElementById(id).style.letterSpacing = amount;
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<a href="javascript:" 
   onMouseOver="spaceLetter('contentLayer','8')" 
   onMouseOut="spaceLetter('contentLayer','1')"> Space the 
      Letters </a>
<div id="contentLayer" 
     style="position:absolute; width:470px; height:39px; z-index:1; 
            left: 33px; top: 57px; visibility: visible">DHTML 
            NIRVANA </div>
</body>
</html>

The same type of scripting method can be applied to many CSS properties. For example, let us suppose we want to dynamically alter the font face. We could use the following script:

<script language="JavaScript" type="text/javascript">
function fontName(id,fontName) {
	document.getElementById(id).style.fontFamily = fontName;
}
</script>

and use the following at the event handler point: (live example)

<a href="javascript:" 
   onMouseOver="fontName('contentLayer','Verdana')" 
   onMouseOut="fontName('contentLayer','Courier')"> Change 
      The Font </a>

Or if we wanted to dynamically alter a font's color we could use: (live example)

<script language="JavaScript" type="text/javascript">
function fontColor(id,color) {
	document.getElementById(id).style.color = color;
}
</script>

I think you get the idea. We can of course do a whole lot more than just play around with fonts and that's what makes coding for the newer generation browsers both intriguing and fun. There are many instances where we do not have to use JavaScript but can just use CSS declarations. Let us imagine we wanted to add OS scroll bars to a <p> element in Internet Explorer 5+ and Netscape 6. All we need to do is redefine the tag via a CSS declaration as shown below and the <p> tag takes on scrollbars:

<style type="text/css">
p {display: block; overflow: scroll; 
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   font-size: 12px; position: absolute; 
   height: 100px; width: 200px; left: 400px; top: 10px}
</style>

Scripting for 5th Generation Browsers and Beyond - Part I - (7/7)

Scripting for 5th Generation Browsers and Beyond

CSS Dynamic Manipulation

Contents:

Find a programming school near you