Web Developer’s Cookbook

Web Developer’s Cookbook

English | 2012 | ISBN: 978-0-07-179431-2 | 992 Pages | EPUB | 53 MB

The Web Developers Cookbook offers a comprehensive suite of over 300 ready-to-use solutions for PHP, JavaScript, and CSS – the most commonly used and most versatile open-source languages currently used for Web development.
This easy-to-use hands-on guide assumes only a basic acquaintance with each of the technologies covered, with all examples in the book being extensively documented and explained, so that even novice developers will be able to understand, use, and learn from them.
This practical resource contains more than 300 recipe-like examples, each with accompanying screenshots, tables of the variables, functions, arrays and classes used, and extensive explanations of how they work, and implementing them in your own web pages is simplicity itself.


How the DOM Works

The Document Object Model separates the different parts of an HTML document into a hierarchy of objects, each one having its own properties. The term property is used to refer to an attribute of an object such as the HTML it contains, its width and height, and so on.
The outermost object possible is the window object, which is the current browser window, tab, iframe, or popped-up window. Underneath this is the document object, of which there can be more than one (such as several documents loaded into different iframes within a page). And inside a document there are other objects such as the head and body of a page.

Within the head, there can be other objects such as the title and meta objects, while the body object can contain numerous other objects, including HTML tags containing headings, anchors, forms, and so forth.

Figure 2-1 shows a representation of the DOM of an example document, with the title “Hello” and a meta tag in the head section, and three HTML elements (a link, a form, and an image) in the body section. Of course, even the simplest of web pages has more structure than is shown here, but it serves to illustrate how the DOM works—starting from the very outside is the window, inside which there’s a single document, and within the document are the various elements or objects, which connect to each other.

As well as the shorthand versions of these class names, there is another group of classes that have the suffix _h appended to their names. This is one of the more powerful features of the recipes in this book in that (where it makes logical sense) each class also has an accompanying hover class denoted by the _h suffix. When these hover classes are used, their styles will be applied only when the mouse is over the object to which they refer. This makes it easy for you to apply rollover and other dynamic effects without writing a single line of either CSS or JavaScript.

As mentioned in the previous recipe group, the start and end portions of the HTML file are not shown here since they will usually all be exactly the same as each other. Therefore, only the main HTML is shown in this and all future examples.

Unfortunately, Microsoft Internet Explorer has a bug—one of many, in fact—such that the second set of three objects (in which links within an object are addressed) will not show as gradients. For some reason, Internet Explorer balks at CSS rules like . classname a { filter:…; }, and refuses to apply the filter (although it will apply other styles), so only the background solid color will be applied for these objects. Curiously, IE works fine with rules such as .classname { filter:…; }. Anyway, until it is corrected, this is one example of how the classes sometimes have to gracefully degrade in certain situations.