JavaScript Floating Objects

JavaScript floating objects. Difficulty: introduction. Nicholas Chase. Author, website developer. December 20, 2001. Have you ever seen floating in the content’….

More PDF Content

JavaScript floating objects
Section 1. Before you start
About this tutorial
System requirements
Section 2. The floater
Types of floaters
The project
The steps ahead
Create the floater
Reference the floater: pre-DOM
Reference the floater: DOM
Determine the browser’s object model
Reference the floater dynamically
Browser compatibility and graceful degradation
Section 3. Positioning content
Positioning schemes
Positioning and flow
Absolute positioning
Determining the reference point
Layering elements
Control the position via scripting
Section 4. Detecting screen position
Types of screen measurements
Determine page size: Netscape
Determine page size: Internet Explorer
Determine the browser type
Adjust for floater size
Place the floater
Initial results
Section 5. Reacting to the user
Create functions
Resize the window
Scrolling: Netscape
Scrolling: Internet Explorer
Auto-update the position
Section 6. Moving the floater
The algorithm
Create the button
The logic behind the movebutton code
Turn on movement
Create the isMoving variable
Register the new location
Create the new offset
The bubble up effect
Turn off movement
Section 7. Summary
Creating content to float
Determining page size
Positioning content
Basic browser detection
Attaching functions to page events
Creating functions that are executed at regular time intervals

Download JavaScript Floating Objects pdf from, 45 pages, 810.71KB.