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>

Whitepapers and eBooks

Symantec Whitepaper: Converging System and Data Protection for Complete Disaster Recovery
Intel Whitepaper: Comparing Two- and Four-Socket Platforms for Server Virtualization
IBM Solutions Brief: Go Green With IBM System xTM And Intel
HP eBook: Simplifying SQL Server Management
IBM Contest: Are You the Next Superstar? Join the "Search for the XML Superstar" Contest to Find Out
Intel PDF: Quad-Core Impacts More Than the Data Center
Intel PDF: Virtualization Delivers Data Center Efficiency
Go Parallel Article: PDC 2008 in Review
Avaya Article: Communication-Enabled Mashups: Empowering Both Business Owners and IT
Intel Whitepaper: Building a Real-World Model to Assess Virtualization Platforms
PDF: Intel Centrino Duo Processor Technology with Intel Core2 Duo Processor
Microsoft Article: Build and Run Virtual Machines with Hyper-V Server 2008

Go Parallel Article: Q&A with a TBB Junkie
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
IBM eBook: The Pros and Cons of Outsourcing
Internet.com eBook: Best Practices for Developing a Web Site
IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Symantec Whitepaper: Comprehensive Backup and Recovery of VMware Virtual Infrastructure
MORE WHITEPAPERS, EBOOKS, AND ARTICLES

CSS Dynamic Manipulation

Contents:

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos