Live DHTML Content: JavaScript+CSS

Click for

Home Tutorials JavaScript Links DHTML Hover DHTML Tabs DHTML Accordion

In our CSS exercises and tips so far almost all of the styling is static. In this tutorial the advantages of dynamic styling is explored. With CSS one can only do some simple dynamic stylings as our first two examples show. However, JavaScript is really essential to get real dynamic changes to pages. The emergence in the past 2 years of DHTML-Dynamic HTML which combines JavaScript with CSS and DOM has brought desktop GUI ease of use and added speed to web page operations thanks to AJAX data connections.The resulting flower ing of rich Internet apps has been dubbed Web 2.0.

It is a new level of Web because whole new approaches to application delivery and development have emerged using DHTML. A good example is SaaS-Software as a Service where vendors like Salesforce.com offer their service exclusively online - there is no desktop or server based software that the user has to install.

SaaS has an advantage for start ups and temporary projects like the Olympics or emergency response services. In effect, SaaS provides instant enterprise caliber programs for a fixed cost per user per month. SaaS vendors provide the full slate of security, access, and desktop equivalent features and functionality. All the user has to have is a network of computer workstations connected to the Internet. The SaaS vendor will keep the user backed up and provided with the latest software. And its all done with DHTML.

Now DHTML uses uses not just CSS for styling, but also Javascript as its scripting/programming language and DOM-Document Object Model as the integrating API between JavaScript and HTML+CSS. The problem with CSS alone is that once a style is applied to a paragraph, list or table it does not change. Yes, by using class and id styles users can apply different styling for any table or any other HTML tag/object. But there are situations when we would like the styling to change depending on what the user is doing. For example, when a form field gains focus it is helpful to indicate that with a slight change in color in the field. Likewise when hovering over a link, we can signal to the user that it is active by changing the font-color or changing the text-decoration to underline or bold.

This is what this and the succeeding DHTML tutorials are all about. How to add dynamic, GUI desktop features to your otherwise static web pages. Now the first set of exercises will be classic DHTML - doable for at least 10 years with the proper browser. As the DHTML coding advances and integration to server side messaging and databases are explored, the tutorials will start to look at AJAX-Asynchronous JavaScript And XML. But first we start simple with CSS=only dynamics.

DHTML Hover

With the :hover CSS element it is easy to add highlights to tables using CSS alone. Here are the CSS Commands:

Table for Hover Effects
Each row should change in background color as the mouse hovers over it.
See how this works with only 2 CSS statements:
tr,td { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px;}
td:hover { background-color:#CCCCCC; }

Now any time you create a table, a row will be emphasized whenever users hover a mouse over that particular row. This can be very useful in large tables with database results, etc. The same :hover pseudo class can also be used to create quick menus as shown below.

DHTML Hover Menus

thePhotofinishes theOpenSourcery Bookraft Takethe5th
In this example, 2 different menus have been created simply from the <a> link tag along with the :hover pseudo class. Again its fairly simple HTML code combined with the following 2 CSS styles:
The corresponding HTML for the horizontal menu shown above is:
<a class="menued" href="http://thePhotofinishes.com" target="_blank">thePhotofinishes</a>
<a class="menued" href="http://theOpenSourcery.com" target="_blank">theOpenSourcery</a>
<a class="menued" href="http://Bookraft.com" target="_blank">Bookraft</a>
<a class="menued" href="http://Takethe5th.com" target="_blank">Takethe5th</a>
The CSS style menued is for horizontal menus as above. We put a box around each link and when users place the mouse over a menu link it turn all black indicating its ready to be clicked on.
The CSS style menuvert is used for the vertical menus as seen in the sidebar

DHTML Tabs using Spry

DHTML Accordion Widget using Spry

Summary

This look at DHTML as CSS+JavaScript shows the range of things that can be done with to extend CSS stylings. It also shows the important role of CSS in making DHTML work. As you can see in the HTML source code, CSS class= and id= selectors are vital in allowing the DHTML components to function. Also I have given only a glimpse so far of the richness of the components available from the like of JSON, Google, and Yahoo Yui.

Because CSS has been deliberately kept almost completely programming free, users will have to use DHTML in the form of JavaScript+DOM extensions to make HTML+CSS pages really dance with dynamic features. But as we have seen here, that is not hard to do. As noted, there are now several very good and free JavaScript+DOM libraries for developing Web 2.0 applications. And in fact, that proliferation of lib aries may become a weakness for DHTML as there are so many competing frameworks. Finally take a look at the upcoming transition from DHTML+AJAX dominated Web 2.0 to the new RAIA Web 3.0 technologies.

(c)Imagenation 2004-2008