Electric Type

Multimedia

About Us

News

Help

Dynamic HTML: Making Stuff Zoom Around

Page 2 — Netscape Communicator - Another Story Altogether

So far, Anna's mandate doesn't seem too bad, but she hadn't figured on Netscape's (in this respect) inferior architecture. Where IE 4.0 has its well-conceived DOM, Communicator has layers. I don't much care for layers after working with IE 4.0, and the reason will be clear enough when we look at the equivalent zooming code using layers.

Since there's no way to change the style information of an image in Netscape, we have to jump through hoops to achieve (approximately) the same zooming effect. Even in a layer, the image cannot be directly resized. So we resort to a rather ugly hack. Each time through the loop, we'll write a new, larger, image for the layer. Here's the full Navigator 4.0 code:


<layer name="zoomazoomzoom" style="position: absolute; left: 0; top: 0;
z-index: 10"><img src="pike.gif"></layer>
<script language="javascript">
zoomer = document.layers['zoomazoomzoom'];
var daScale = 1;
var startWidth = 10;
var startHeight = startWidth * daScale;
var endWidth = Math.round(Math.random() * 800 + 200);
var numSteps = Math.round(Math.random() * 10) + 3;
var widthIncrement = (endWidth - startWidth) / numSteps;
var inc = 1;


function zoom() {
  newWidth = Math.round(startWidth + (widthIncrement * inc));
  newHeight = newWidth * daScale;
  zoomer.document.write('<img src="pike.gif" width="' + newWidth  +
   '"height="' + newHeight  + '" onload="if(inc <= numSteps) { inc++;
setTimeout(\'zoom();\', 10); }">');
  zoomer.document.close();

}

If you have Navigator 4.0 and look at the example, you'll see that it's quite choppy. For each step in the zoom, a new server connection has to be established and the same image loaded again. That's why I've used setTimeout(); to force the browser to wait 10 milliseconds after each step. Otherwise, you never see the image until the final step.

The result is so disappointing and performance so poor, in fact, that after trying various progressively less elegant solutions (such as rotating through three separate layers), we "solved" the problem by discarding the zoom behavior for Netscape browsers entirely on our new front door.

Before you spam me with irate accusations that I must be sleeping with Bill Gates, let me assure you that I don't find Bill Gates at all attractive. Also, Navigator 4.0 has its pluses. For example, its error handling is much more useful than IE's. Quite simply, however, IE's DOM makes Netscape's <layer> tag seem little better than a Magic Slate.

Actually, Thau thinks both 4.0 browsers are like gilded birds with broken wings: They're plenty shiny, but neither one flies too well. He sees no reason the Web should become more television-like, especially to the detriment of plain old text-and-image Web surfing. I agree that the 4.0 browsers are way too big and clunky, cluttered with unnecessary features, but I think he's missing the point that, unlike television, anyone can author a Web page. Any tools that give Web authors more power (and dynamic HTML is a significant advance) are welcome.




previous page»

Dynamic HTML  

Frames  

HTML Basics  

Stylesheets  

Tables  

XML  

Javascript  

Database Connections  

Intro To Perl  

HTML 4.0  

User Blogs

Screen Shots

Latest Updates

Contact Us

Valid HTML 4.01!
Valid CSS!

Breadcrumb

© ElectricType
Maintained by My-Hosts.com
Site map | Copyright | Disclaimer
Privacy policy | Acceptable Use Policy
Legal information.