DHTML Utopia: Modern Web Design Using JavaScript & DOM by Stuart contributes to Stylish Scripting: SitePoint’s DHTML and CSS Blog. About The. Modern Web Design Using JavaScript & DOM. HTML Source Review. Now that using nice, valid HTML and CSS for layout have been well and truly cracked. I remember the first time I saw an image rollover on a web site, and being blown away by the sheer coolness of such a thing. Of course I.

Author: Dakinos Malarisar
Country: Liberia
Language: English (Spanish)
Genre: Travel
Published (Last): 9 May 2013
Pages: 464
PDF File Size: 2.29 Mb
ePub File Size: 2.81 Mb
ISBN: 488-6-29004-362-1
Downloads: 69713
Price: Free* [*Free Regsitration Required]
Uploader: Arashiramar

The mouseover and mouseout functions do little other than the actual image swapping work.

DHTML Utopia; modern web design using JavaScript & DOM.

Every property of an element, and every CSS style that can be applied to it, can uropia set from JavaScript. This tutorial provides an introduction to the basics of JavaScript for the total non-programmer.

It also avoids a problem with a similar technique, which uses className. Some users find this useful; others find it heartily annoying.

Failing thatwe attach the event listener directly to the element, as an event handler; this is required for IE5 on Macintosh. As we move, we want new areas of the big image to come into view. So, to hide an element from display, we can set its display property to none:. Some of the following script may seem a little opaque: An element is a piece of HTML utopoa represents one thing: The removal is done with the following lines:. Using the old-fashioned method above, only one piece of code morern be run in response to any event.

It describes the document content as a set of objects that a JavaScript program can see.


DHTML Utopia; modern web design using JavaScript & DOM. – Free Online Library

Events have two further important properties: Browser sniffing is flaky and prone to error, and should be avoided like the black plague.

Almost everything you do in DHTML will involve attaching code to events, as described in this chapter. Alternatively, you could string Moddern statements together, using semicolons in the attribute, but this makes the HTML code even more cluttered.

That information can be typed on a single line, or with a line break after EN”. As such, the code above becomes:. You can find them in the code archive for this book. The core of DHTML — the D-for-dynamic bit — lies in our ability to change those elements, to remove them, and to add new ones. If elements are improperly nested, problems arise.

The event handler is the location at which an event handler mocern placed. The first approach is to work out which browser is we used, then have a list within your code that states which browser supports which features. There is another useful feature; getElementsByTagName is defined on any node at all, not just the document.

If not, the event object passed to the function as uwingwhich also has a keyCode property, is used. We add our mouseover and mouseout event listeners using the standard approach.

DHTML Utopia: Modern Web Design Using JavaScript & DOM — SitePoint

Netscape also provides pageX and pageY, which are mouse coordinates relative to the xesign. Halting bubbling can be done in two ways, as is the case with much event handling: The childNodes array may contain nothing if the node has no children such nodes are called leaf nodes. Take some example figures: We pass the text for the text node as a parameter:. We might use the following code:.


DHTML Utopia: Modern Web Design Using JavaScript and DOM

We also check for bodyto prevent an infinite loop; if we get as far up the tree as the document bodywe give up. This is where things get a little complicated. For example, an element could have only one onclick attribute.

But what if you want to add a lot of dynamic content to a page? In addition to appendChildeach node has an insertBefore method, which is called with two arguments: Internet Explorer returns them relative to the window, as does Mozilla, but all of Opera, Konqueror, and iCab return them relative to the document.

In such cases, the browser gets it wrong. The document can be further processed and the results of that processing can be incorporated back into the presented page.

Deprecated practices like adding inline event handlers to HTML are completely left out of this book, teaching you the best way to do it from the outset — this is all state-of-the-art stuff. Image rollover scripts, in which an image is used as a link, and that image changes when the user mouses over it, are a mainstay of JavaScript programming on the Web. The users add their own names, then the names of all of the friends they wish to invite. In CSS, the display property is used for this: You may recall from the previous chapter the technique of referring to a Function object without calling it.