Module 15 - "Combining Javascript and CSS to Create DHTML"

by Paul Smith 05-15-07

DHTML or "Dynamic HTML" is a general term that refers to the application of javascript to make client-side, instantaneous changes in the web page based on user input, or "events". DHTML manipulates the DOM Document Object Model, basically changing css values with javascript and the browser's event handlers, and thereby changes the browser display immediately without reloading the html page. This "instant updating", without the constant interruption of page loads generally results in a greatly enhanced user experience.

DHTML Error Messages
A typical example of DHTML is seen commonly in form "validation" javascripting. When a user misses or incorrectly fills a field, instead of an alert pop-up (which interrupts the user by changing the page focus with the pop-up alert box), you may see an error message instantly appear on the page.

Try this example which gives an error message if nothing is input, or gives feedback on the user name length, also showing the number of alphabetic characters:

Here's how it works:

In the form HTML, this is a 3-cell table, and these code snippets are in each cell respectively:

<input type="submit" value="What's Your Name?" />	<input type="text" name="userName" />	<div id="tmess"> </div>
		"invisible" div where Message goes.

a "What's Your Name?" Submit button
a text field with name/id = "userName"
an "invisible" div (no content) with name/id = "tmess"

The <form> tag contains an event handler, onSubmit="return formValid();" which activates the DHTML scripting when the submit button is pushed.

Here are the "formValid()" scripting details for the red error message when the user clicks submit without entering any data:

var theMessage = document.getElementById('tmess'); theMessage is the div with name = 'tmess'

if ( document.getElementById('testForm').userName.value == "" ) If userName has no value

Then...
theMessage.style.color = 'red'; turn any text content within the div 'theMessage' to the color RED
theMessage.innerHTML = 'Please Input Your Name'; Put this text (which will be red) into the div 'theMessage'

Also within this javascript DHTML is an evaluation of the length of the user-entered data and another "innerHTML" message that tells the user "Your name is (x) letters long".
Here is the entire script. Note that the user-input name has its letters counted and the "length" number is stored in the "longness" variable, which is then included in the hidden div's innerHTML text:

function formValid ( )
{
var longness = document.getElementById('testForm').userName.value.length;
var theMessage = document.getElementById('tmess');

   if ( document.getElementById('testForm').userName.value == "" )
      {
         theMessage.style.color = 'red';
         theMessage.innerHTML = 'Please Input Your Name';
         return false;
      }

   theMessage.style.color = 'green';
   theMessage.innerHTML = 'Your name is <b>' + longness + '</b> letters long';
   return false;
}
</script>

DHTML Hide / Show
A very popular DHTML magic trick is to "hide and show" pieces of content within the page and without reloading the page.

Click this link to reveal a "hidden" div, and then click the "Hide It" link to return it to a hidden state.

Reveal It

Here's how it works:

The "hidden" div with id="hidingText" has an attribute style="display:none;" so the div is not visible, normally.
However, the "Reveal It" link has a javascript event handler that can change all that:

onclick="javascript:document.getElementById('hidingText').style.display='block';"
Changing the display style of the hidden div with id='hidingText' from 'none' to 'block'

DHTML Changing Stylesheets
Google and Yahoo mail offer you color schemes to customize your personal mailbox.
You can allow your users to pick the look and feel of your site, too.

Here is an example of a page with a variety of stylesheets that can be called by clicking a "scripted" button:

Switchable CSS Page

Here's how it works:

This is very similar in practice to javascript rollovers and the previous hide / show example. Each button uses the "onclick" javascript event handler to trigger a change to the html of the <link> tag in the head section of the html, which brings in the desired external stylesheet:

DHTML Resources
HTML and web languages like javascript are constantly evolving. With a little persistence, you can find interesting code snippets and "cutting edge" solutions in forums and by "googling" DHTML or javascript. If you are interested in learning more in general about DOM manipulation and dynamic control over your web pages, you might consider taking a class in javascripting, ajax, and web 2.0 technologies.

For a free start on the web, I can recommend: w3schools.com, Tizag.com, About.com's web design.