book

AdvancED DOM Scripting: Dynamic Web Design Techniques

Name: AdvancED DOM Scripting: Dynamic Web Design Techniques
ISBN: 9781590598566

by Jeffrey Sambells, Aaron Gustafson

August 2007

Intermediate to advanced

594 pages

13h 30m

English

Apress

Read now

Unlock full access

Copyright
About the Authors
About the Technical Reviewers
About the Cover Image Designer
Acknowledgments
Introduction
Who this book is forHow this book is structuredConventionsPrerequisitesDownloading the codeContacting the authors
1. DOM Scripting in Detail
1. Do It Right With Best Practices
1.1. Unobtrusive and progressive enhancement1.2. Putting JavaScript to work1.2.1. Separating your behavior from your structure1.2.1.1. How to include JavaScript the right way1.2.1.2. That javascript: prefix1.2.2. Don't version check!1.2.2.1. Use capability detection1.2.2.2. When browser version sniffing is OK1.2.3. Degrade gracefully for guaranteed accessibility1.2.3.1. Don't require JavaScript for content—period.1.2.4. Plan for reuse with namespaces1.2.5. Simplify things with reusable objects1.2.5.1. Beginning the ADS library1.2.5.2. The ADS.isCompatible() method1.2.5.3. The ADS.$() method1.2.5.4. The ADS.addEvent() and ADS.removeEvent() methods1.2.5.5. The ADS.getElementsByClassName() method1.2.5.6. The ADS.toggleDisplay() method1.2.5.7. The ADS.insertAfter() method1.2.5.8. The ADS.removeChildren() and ADS.prependChild() methods1.2.6. Get your hands dirty1.3. Common gotchas in the JavaScript syntax1.3.1. Case sensitivity1.3.2. Single vs. double quotes1.3.3. Breaking lines1.3.4. Optional semicolons and parentheses1.3.5. Overloading (not really)1.3.6. Anonymous functions1.3.7. Scope resolution and closures1.3.8. Iterating over objects1.3.9. Referencing vs. calling a function (missing parentheses)1.4. A practical example: WYSIWYG JavaScript rollover redux1.5. Summary
2. Creating Your Own Reusable Objects
2.1. What's in an object?2.1.1. Inheritance2.1.2. Understanding object members2.1.3. Everything's in the window object2.1.4. Making it all possible with scope and closure2.2. Creating your own objects2.2.1. One becomes many: creating the constructor2.2.2. Adding static methods2.2.3. Adding public methods to the prototype2.2.3.1. Controlling access with private and privileged members2.2.4. Do public, private, privileged, and static really matter?2.2.5. The object literal2.3. What is this?2.3.1. Redefining your context with call() and apply()2.4. try { }, catch { }, and exceptions2.5. A practical example: your own debugging log2.5.1. Why use a JavaScript logging object?2.5.2. The myLogger() object2.5.2.1. The myLogger.createWindow() method2.5.2.2. The myLogger.writeRaw() method2.5.2.3. The myLogger.write() and myLogger.header() methods2.6. Summary
3. Understanding the DOM2 Core and DOM2 HTML
3.1. The DOM, not JavaScript, is your document3.1.1. Objects and interfaces3.2. Levels of the DOM3.2.1. DOM Level 03.2.2. DOM Level 13.2.3. Level 23.2.4. Level 33.2.5. Which level is correct for you?3.3. Creating a sample document3.3.1. Creating the DOM file3.3.2. Choosing a browser3.4. The DOM Core3.4.1. The importance of inheritance in the DOM3.4.2. The Core Node object3.4.2.1. Node names, values, and types3.4.2.2. Node parents, children, and siblings3.4.2.3. Node attributes3.4.2.4. The node ownerDocument property3.4.2.5. Checking for children and attributes3.4.2.6. Manipulating your DOM node tree3.4.2.7. Duplicating and moving a node3.4.3. The Core Element object3.4.3.1. Manipulating Element attributes3.4.3.2. Locating Element objects within Element objects3.4.4. The Core Document object3.4.4.1. The document.documentElement property3.4.4.2. Creating nodes with document methods3.4.4.3. Locating Elements with Document methods3.4.5. Traversing and iterating the DOM tree3.5. DOM HTML3.5.1. The DOM2 HTML HTMLDocument object3.5.2. The HTML HTMLElement object3.6. A practical example: converting hand-coded HTML to DOM code3.6.1. The DOM generation tool HTML file3.6.2. Testing with an example HTML fragment3.6.3. Adding to the ADS library3.6.4. The generateDOM object framework3.6.4.1. The encode() method3.6.4.2. The checkForVariable() method3.6.4.3. The generate() method3.6.4.4. The processNode() and processAttribute() methods3.7. Summary

4. Responding to User Actions and Events
4.1. DOM2 Events4.2. Types of events4.2.1. Object events4.2.1.1. The load and unload events4.2.1.2. The abort and error events4.2.1.3. The resize event4.2.1.4. The scroll event4.2.2. Mouse movement events4.2.3. Mouse click events4.2.4. Keyboard events4.2.5. Form-related events4.2.5.1. Form submit and reset events4.2.5.2. Blur and focus events4.2.5.3. The change event4.2.6. W3C DOM-specific events4.2.7. Custom events4.3. Controlling event flow and registering event listeners4.3.1. Event flow4.3.1.1. Order of events4.3.1.2. Two phases and three models4.3.1.3. Popping the bubble4.3.1.4. Cancelling the default action4.3.2. Registering events4.3.2.1. Inline registration model4.3.2.2. The ADS.addEvent() method revisited4.3.2.3. The traditional event model4.3.2.4. Microsoft-specific event model4.3.2.5. W3C DOM2 Events model4.3.2.6. The problem with the load event4.3.3. Accessing the event object from the event listener4.3.3.1. Syntactical shortcuts4.3.3.2. The ADS.getEventObject() method4.3.4. Cross-browser event properties and methods4.3.4.1. The DOM2 Events object4.3.4.2. The DOM2 MouseEvent object4.3.4.2.1. altKey, ctrlKey, and shiftKey4.3.4.2.2. button4.3.4.2.3. clientX and clientY4.3.4.2.4. screenX and screenY4.3.4.2.5. MouseEvent4.3.4.3. Browser incompatibilities galore4.3.4.3.1. Accessing the event's target element4.3.4.3.2. Determining which mouse button was clicked4.3.4.3.3. Dealing with the mouse position4.3.4.4. Accessing keyboard commands4.4. Summary
5. Dynamically Modifying Style and Cascading Style Sheets
5.1. The W3C DOM2 Style specification5.1.1. CSSStyleSheet objects5.1.2. CSSStyleRule objects5.1.3. CSSStyleDeclaration5.1.4. A lack of support5.2. When DOM scripting and style collide5.2.1. Modifying markup for style5.2.1.1. Removing the extra markup5.3. Keeping style out of your DOM script5.3.1. The style property5.3.2. Switching styles based on a className5.3.2.1. Using common classes with className switching5.3.2.2. Drawbacks of using className switching5.3.2.3. Why not use setAttribute for class names?5.3.3. Switching the style sheet5.3.3.1. Using alternative style sheets5.3.3.2. Switching the body className5.3.3.3. Dynamically loading and removing style sheets5.3.4. Modifying CSS rules5.3.4.1. AdvancED image replacement revisited5.4. Accessing the computed style5.5. The Microsoft filter property5.6. Practical example: a simple transition effect5.7. Summary
6. Case Study: A Photo Cropping and Resizing Tool
6.1. The test files6.2. The editor objects6.2.1. Invoking the imageEditor tool6.2.2. The imageEditor load event6.2.3. Creating the editor markup and objects6.2.4. Adding the event listeners to the editor objects6.2.5. Resizing the image6.2.6. Cropping the Image6.2.7. The incomplete image editor6.3. Summary
2. Communicating Outside the Browser
7. Adding Ajax to the Mix
7.1. Merging technology7.1.1. Semantic XHTML and the DOM7.1.2. JavaScript and the XMLHttpRequest object7.1.2.1. Making a new request7.1.2.2. Acting on the response7.1.2.3. Identifying Ajax requests on the server7.1.2.4. Beyond GET and POST7.1.3. XML7.1.3.1. Plain text7.1.3.2. HTML7.1.3.3. JavaScript code7.1.3.4. JSON7.1.4. A reusable object7.1.5. Is Ajax right for you?7.2. Why Ajax may break your site and how to fix it7.2.1. JavaScript required for content7.2.2. Bypassing cross-site restrictions with <script> tags7.2.3. Back buttons and bookmarks7.2.3.1. A not so simple fix7.2.3.2. Browser sniffing for product features7.2.3.3. Tracking location changes7.2.4. A race to finish the request7.2.4.1. Latency picks the winner7.2.4.2. Dealing with asynchronous requests7.2.4.2.1. Ignoring the problem7.2.4.2.2. Turning off asynchronous behavior7.2.4.2.3. Queuing the requests client side7.2.4.2.4. Making the request asynchronous but disabling conflicting features7.2.4.2.5. Rolling your own solution7.2.5. Increased resources7.2.6. Problems solved?7.3. Practical example: an Ajax-enhanced photo album7.3.1.7.3.1.1. Ajaxify the photo browser7.4. Summary
8. Case Study: Enabling Asynchronous File Uploads with Progress Indicators
8.1. A little life in the loading message8.1.1. Processing uploads on the server8.1.1.1. The magic word8.2. The starting point8.3. Putting it all together: an upload progress indicator8.3.1. The addProgressBar() framework8.3.2. The load event8.3.3. The addProgressBar() object8.3.3.1. Modifying the file inputs8.3.3.2. Redirecting the form8.3.3.3. And the magic word is . . .8.3.3.4. The progress bar8.3.3.5. Tracking progress8.4. Summary
3. Some Great Source
9. Using Libraries to Increase Productivity
9.1. Choosing the library that's right for you9.1.1. The libraries9.1.1.1. DOMAssistant9.1.1.2. jQuery9.1.1.3. Mochikit9.1.1.4. Prototype9.1.1.5. Yahoo User Interface library9.2. Enhancing the DOM9.2.1. Chaining syntax9.2.1.1. Advanced selection with expressions9.2.1.2. jQuery with XPath9.2.2. Filtering with a callback9.2.3. Manipulating the DOM document9.2.3.1. Using DOMAssistant to create elements9.2.3.2. Using jQuery to move nodes9.2.3.3. Using MochiKit to create elements9.2.3.4. Using Prototype to clean up your document9.2.3.5. Using YUI to check for intersecting elements9.2.3.6. Iterating over results9.3. Handling events9.3.1. Registering events9.3.1.1. The DOMAssistant way9.3.1.2. The jQuery way9.3.2. Custom events9.4. Accessing and manipulating style9.5. Communication9.5.1.9.5.1.1. Prototype Ajax object9.5.1.2. jQuery keeps Ajax simple9.6. Summary
10. Adding Effects to Enhance User Experience
10.1. Do it yourself10.1.1. Show me the content!10.1.2. Providing feedback10.1.2.1. The Yellow Fade Technique10.1.2.2. Avoiding shifting content10.2. A few visual effects libraries10.2.1.10.2.1.1. Moo.fx10.2.1.2. Script.aculo.us10.3. Some visual bling10.3.1. Mootastic CSS property modification10.3.1.1. One property at a time10.3.1.2. A mix of properties all at once10.3.1.3. Reusing the effect10.3.1.4. Multiple effects on multiple objects10.3.1.5. Sliding with Moo.fx10.3.1.6. Form feedback made pretty10.3.2. Visual effects with Script.aculo.us10.3.2.1. Parallel effects10.3.3. Realistic motion using Moo.fx10.3.3.1. Customer form revisited10.3.4. Rounding corners10.3.5. The rest of the libraries10.4. Behavioral enhancements10.4.1. Drag and drop with Script.aculo.us10.4.1.1. Drag anywhere10.4.1.2. Dropping on a target: the droppable10.4.1.3. Building a drag-and-drop shopping cart with Script.aculo.us10.4.1.4. Interacting with draggables through an observer10.4.1.5. More drag and drop fun10.5. Summary
11. Mashups Galore! Using APIs to Add Maps, Searching, and Much More
11.1. API keys11.2. Client-side APIs: some JavaScript required11.2.1. Maps put mashups on the map11.2.1.1. Retrieving latitude and longitude11.2.1.2. Maintaining accessibility using microformats11.2.2. Ajax search requests11.2.2.1. Search results for your site only11.2.2.2. Related links11.2.3. Mashing Search with Maps11.3. Server-side APIs: some proxy required11.3.1. An integrated to-do list with Basecamp11.3.1.1. Your Basecamp account information11.3.1.2. Building the Basecamp proxy11.3.1.3. The Basecamp DOM script11.3.2. Buddy icons with Flickr11.3.2.1. The Flickr API key11.3.2.2. Building the Flickr proxy11.3.2.3. The DOM script11.4. Summary
12. Case Study: Style Your select with the DOM
12.1. That classic feeling12.2. Building a better select12.3. Strategy? We don't need no stinkin' strategy . . .12.3.1. The files12.3.2. The FauxSelect objects12.3.3. Getting the faux select going12.3.4. Locating the select elements12.3.4.1. A little housekeeping12.3.5. Building the DOM elements12.3.5.1. Creating a faux value12.3.5.2. Creating faux options12.4. Generating life and other memorable events12.4.1. Opening, closing, and clicking the select12.4.1.1. Selecting a faux option12.5. Bling-bling for da form t'ing12.6. Behavioral modifications12.6.1.12.6.1.1. Closing the faux select12.6.2. Z index to the rescue!12.6.3. Keyboard controls and other niceties12.6.3.1. Selecting options12.6.3.2. Maintaining focus12.6.3.3. Closing the faux select12.6.4. Is select too big for its britches?12.7. Knock, knock . . . housekeeping!12.8. Further adventures in select replacement12.9. Summary

Content preview from AdvancED DOM Scripting: Dynamic Web Design Techniques

Chapter 12. Case Study: Style Your select with the DOM

by Aaron Gustafson

For the last few years, I've had somewhat of an unhealthy obsession with the select element. Perhaps "unhealthy" is a bit too strong (or gives you the wrong idea), but let's just say that I've done a lot of thinking about select elements and what I would do differently if I were in charge.

I'm not sure when it all started. Perhaps it was when I first discovered the truly elegant way Internet Explorer 5 on Mac (IE5/Mac) handles select elements containing organizational optgroup elements (see Figure 12-1, left). Or maybe it was when I really started to dive into CSS and realized that I couldn't so much as change the border-style from the ugly default (it's inset in most browsers ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Single Page Web Applications

Josh Powell, Michael Mikowski

Accelerated DOM Scripting with Ajax, APIs, and Libraries

Jonathan Snook, Aaron Gustafson, Stuart Langridge, Dan Webb

HTML5 and JavaScript Projects: Build on your Basic Knowledge of HTML5 and JavaScript to Create Substantial HTML5 Applications

Jeanine Meyer

Beginning JavaScript with DOM Scripting and Ajax, Second Edition

Russ Ferguson, Christian Heilmann

Publisher Resources

ISBN: 9781590598566Purchase book

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

AdvancED DOM Scripting: Dynamic Web Design Techniques

by Jeffrey Sambells, Aaron Gustafson

Chapter 12. Case Study: Style Your select with the DOM

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.