DHTML Utopia Modern Web Design Using JavaScript & DOM- P6

DHTML Utopia Modern Web Design Using JavaScript & DOM- P6:In a single decade, the Web has evolved from a simple method of deliveringtechnical documents to an essential part of daily life, making and breaking relationshipsand fortunes along the way. “Looking something up on the Internet,”by which is almost always meant the Web, is now within reach of almost anyoneliving in a first-world country, and the idea of conducting conversations andbusiness (and probably orchestras) in your Web browser is no longer foreign, butpart of life....
Nội dung trích xuất từ tài liệu:
DHTML Utopia Modern Web Design Using JavaScript & DOM- P6 Chapter 4: Detecting Browser Features foo.offsetHeight does exist, but is equal to 0 (zero). This is possible because JavaScript treats zero as meaning false. Testing whether a given item is defined just got a little more complex (but only a little!). If you are testing for the existence of function functionName, or method methodName (on an object obj), use the function/method name without the brackets to do so: if (functionName) { ... } if (obj.methodName) { ... } Likewise, if you’re testing for a variable v, or for a DOM property prop of an object, you can often use the variable or the DOM attribute’s property name directly: if (v) { ... } if (obj.prop) { ... } But, watch out! If the variable or property contains numbers or strings (as does offsetHeight, for example) then use typeof, because a number might be 0 (zero), and a string might be the empty string , both which also evaluate to false: if (typeof v != undefined) { ... } if (typeof obj.prop != undefined) { ... } Sniffing at Work: scrollImage Lots of Websites contain photo galleries: pages listing thumbnails of photographs that, when clicked on, display the photos at full size. An interesting enhancement to such a site might be to let the user see the full-size photo without having to click to load it. When the user mouses over the thumbnail, that thumbnail could become a “viewing area” in which a snippet of the full-sized image is shown. This technique is useful if your thumbnails aren’t detailed enough to enable users to tell the difference between superficially similar images. It’s especially handy if your thumbnails display something like a document, rather than a photo. Fig- ure 4.1 shows the final effect: 80Licensed to siowchen@darke.biz Setting Up the Page Figure 4.1. The thumbnail display implemented by the scrollImage example. We’ll describe what’s going on here in a moment. We’ll review the code first, then see a demonstration before we get to the explanation. Setting Up the Page The HTML file for this technique is straightforward: File: scrollImage.html ScrollImage demonstration .scrollimage { display: block; float: left; border: 1px solid black; margin: 1em; padding: 0; } 81Licensed to siowchen@darke.biz Chapter 4: Detecting Browser Features .scrollimage:hover { position: relative; } .scrollimage img { border: none; } .scrollimage:hover img { display: none; } Scanned documents Setting Up the Page > The content of this page is fairly obvious. Notice how the image elements are hidden by CSS styles when the mouse moves over them. This page also in- cludes—with the line—this JavaScript file: File: scrollImage.js // Based on findPos*, by ppk // (http://www.quirksmode.org/js/findpos.html) function findPosX(obj) { var curLeft = 0; if (obj.offsetParent) { do { curLeft += obj.offsetLeft; } while (obj = obj.offsetParent); } else if (obj.x) { curLeft += obj.x; } return curLeft; } function findPosY(obj) { var curTop = 0; if (obj.offsetParent) { do { curTop += obj.offsetTop; } while (obj = obj.offsetParent); } ...