reptile7's JavaScript blog
Wednesday, June 29, 2011
 
Magic Div Ride
Blog Entry #219

In today's post we will discuss HTML Goodies' "Hovering HTML Windows and Animated Hovering Using JavaScript" tutorial, which is authored by Jonathan Campbell. "Animated" is the operative word in the title of the tutorial (so we'll call it "Animated Hovering" going forward): à la the "How to Create a JavaScript Animation" tutorial (hereafter "JavaScript Animation") we covered not so long ago, "Animated Hovering" presents code for moving an HTML element across the viewport by iteratively incrementing its style.left and style.top properties. "Animated Hovering" is another Beyond HTML : JavaScript sector tutorial for which a separate entry is a bit of a judgment call; however, the tutorial's demo is missing, and when I encounter a missing demo, man, that's like waving a red cape in front of me, if you get my drift, so here we go.

The "window" and its contents

You may recall that the "JavaScript Animation" tutorial works with a ball.gif image; for its part the "Animated Hovering" tutorial works with an id="winbox1" span element. The author terms the winbox1 span a window, presumably because of its rectangular shape (and perhaps because of the partial border 'chrome' provided by its table element child), but this use of the term "window" rubs me the wrong way - "window" should be reserved for an actual browser window, IMO. As a positionable block of content, the winbox1 span is what Netscape would have called a layer back in the day, but given that Netscape itself abandoned the layer element/object in going from Netscape 4 to Netscape 6 (and that was over ten years ago, folks), maybe we should just call it a span, huh?

Now then, what do we have in that span? There is no limit with what you can actually put within the <SPAN [sic] window element, for the most part, the author alleges. In the tutorial, the author charges the span with a two-row table: the table's first row holds an img placeholder (whose src image is AWOL - see the winbox1 span image in the next section) and its second row contains a standard text string.

<table border="1" cellspacing="0" cellpadding="0">
<tr><td><img width="109" height="123" src="http://www.jdcampbell.com/demo2/anim2.gif" alt=""></td></tr>
<tr><td><font size="3" color="yellow"> This is some standard text, how do you like the dynamic <SPAN animation? </font></td></tr>
</table>

Are you ready to throw that red flag in your hands? The span element is an inline element - more precisely, it's one of the %inline; group of elements - and has an (%inline;)* content model, and therefore it shouldn't contain a block-level element such as a table element. If we're going to put the table in a container (and it really doesn't need one), then we should use a div element for that purpose.

Span style

The winbox1 span element markup is given below:

<span id="winbox1" style="position:absolute; top:50; left:50; height:190px; width:150px; background=blue;"> ... </span>

The start-tag is equipped with a style attribute that sets - well, should set - six CSS styles for the span. The first thing you'll notice is that the syntax for setting the background(-color) property is incorrect: it should be background:blue;. (In the tutorial comment thread, CodeMonkey pointed out this error almost two years ago - why hasn't it been fixed?) Second, the top and left values don't have unit identifiers, which is "illegal" (unless the values were 0); those top/left declarations should be ignored, although in practice the browsers on my computer interpret the 50s as 50pxs, which is almost certainly what the author intended (other units could be used here - e.g., mm or pt - but clearly px makes the most sense in this context). So I'm good to go and I would guess that most other users are also OK top/left-wise, but the safe thing to do is to specify top:50px; left:50px; to accommodate user agents that might be less forgiving in this regard.

The width and height declarations initially set off warning bells in my mind but are in fact legit. The width and height properties duly apply to block-level elements and also apply to what are called "replaced" elements - specifically, the object, img, iframe, and applet elements, which are all inline elements unless you set them otherwise - but do not normally apply to other inline elements such as the span element. (Ever the iconoclast, IE will let you apply width and height to non-replaced inline elements, but other browsers won't.) However, when a non-replaced %inline; element is absolutely positioned and thus completely removed from the normal flow of its document, it is no longer "inline" and can be given a width and height:

[The winbox1 span]
(The table height (201 pixels) exceeds the span height (190 pixels) per the original code.)

That said, a table-containing span element, positioned or not, will not pass through a validator without throwing an error, so if validation is an issue for you, then you should either exchange the span for a div or ditch it altogether.

Span movement

So, the winbox1 span's starting coordinates are (50px,50px), that is, its upper-left-hand corner is 50 pixels to the right of the document content area's left edge and 50 pixels below the document content area's top edge. The span is then sent on a checkmark-like trajectory (we'll roll out a demo in a little bit) via the following script:

var posx = 50; var posy = 350;
setInterval("MoveOver( );", 500);

function MoveOver( ) {
    posx += 50; posy -= 20;
    document.getElementById("winbox1").style.left = posx;
    document.getElementById("winbox1").style.top = posy; }

As for the "JavaScript Animation" ball.gif image, the winbox1 span motion is animated via a setInterval( ) command. The author doesn't mention that setInterval( ) is a method of the window object, nor that the first setInterval( ) argument can/should be specified in the form of a function pointer, i.e., window.setInterval(MoveOver, 500);, not that those are original sins on his part.

The first MoveOver( ) iteration chutes the span to (100px,330px); with each subsequent iteration the span shifts rightward by 50 pixels and upward by 20 pixels. No window.clearInterval( ) command stops the span when it hits or moves beyond the top/right edges of the viewport. Some browsers (IE, Safari, Chrome) seem to stop tracking the span once it's out of sight, but an added if (posy <= 0) window.alert(posx); conditional confirms that MoveOver( ) execution goes on and on and on.

Once again units are omitted for the left and top assignments. The code samples in "JavaScript Animation" get it right; in MoveOver( ) we should see:

document.getElementById("winbox1").style.left = posx + "px";
document.getElementById("winbox1").style.top = posy + "px";
/* In JavaScript, all CSS 2.1 property values have a string data type. */

At no point does the script actually read the span's left and top values; consequently, the span's initial position/left/top settings (plus its other styles) can alternatively be specified in an external or internal style sheet, which was off-limits for the left/top-reading code in "JavaScript Animation".

Demo
You can see the above code in action by clicking on this link.
After presenting its code the tutorial offers a link to a demo. Clicking the link leads to a http://ewisefirm.com/cmsfiles/jons-span1.html page that contains no trace of a demo or anything else related to the author. In addition, the http://www.jdcampbell.com/demo2/anim2.gif URL of the image that is supposed to be in the first row of the winbox1 span's table leads to a "404 Not Found" page.

I go to the Internet Archive in hopes of finding a past version of the tutorial with a functioning demo. "Animated Hovering" was first "crawled" by the Internet Archive on 5 December 2008; this tutorial crawl's this link goes to a page with a demo that is flawed - the anim2.gif image is missing and, less importantly, there's no blue background - but does basically work. The Internet Archive has no record of the anim2.gif image or of the demo2/ directory that ostensibly held it.

My own demo appears in the div below.

 
Demo notes • I have no idea what anim2.gif was an image of. The animated div in my demo alternatively sports an at_sign_rotating.gif image that I picked out at Webdeveloper.com's "Animated GIFs for Free Download" resource. • The author places the winbox1 span in a document whose body is delimited with a <page> ... </page> element, which is neither a standard element nor a proprietary Microsoft element nor a proprietary Netscape element - a sure sign that the code was written with an HTML editor. I've exchanged the page element for a relatively positioned div frame. • The original span document body begins with a series of This is a <SPAN dynamic HTML animation window-in-window example... headings, which are centered with center elements; moreover, the text in the span table's second row is marked up with a font element. (It's one thing to encounter the center and font elements in a circa-2000 script, but in a 2008 script? Oh dear.) I've thrown out the headings as they don't seem appropriate at this point. As for the font element, I've traded in its color="yellow" and size="3" attributes for color:yellow; and font-size:medium; style declarations, respectively. • An if (posy <= -190) window.clearInterval(timerID); conditional stops the animation when the bottom edge of the animated div reaches the top of the outer frame.
We won't discuss the next Beyond HTML : JavaScript sector tutorial, "So You Want To Open A Window, Huh?"; we've dealt with the window.open( ) topic ad nauseam and there's no need to revisit it. The following sector tutorial, "A Quick Tutorial on JavaScript Variable Passing", was covered in Blog Entries #193 and #194. The subsequent sector tutorial, "What's The Time? Using JavaScript to Localize Time Displays", is actually the first part of a four-part "JavaScript Date/Time Methods" series that is strangely no longer listed in the sector and that we went over in Blog Entry #171. After that is a "JavaScript for Programmers - Events" book excerpt - we'll do this one next time as it will give us the opportunity to nail down some 'event history' and look at an interesting drawing program example. reptile7
- posted by A. Peak @ 3:06 PM
Comments: Post a Comment

<< Home

Powered by Blogger

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)