]

Dynamic HTML Example : Position Control Panel

The absolute positioning capability provided by use of Dynamic Overlays provides the ability to accurately place objects within the HTML page. No longer do objects 'float' to adjust to screen sizes, therefore different user screen sizes must be addressed. Arranging objects based on the user's screen size, and/or placing them at different points in response to the user's activities, requires a method to handle positioning of each overlay

Because movement of one object, affects others, a means of easily locating each overlay's position in relation to others is needed. The developer must have a way to place objects, and view the result, on the active page.

By employing a Position Control Panel during development to easily access the position of each DIV, we can relocate any object at any time, record its placement, and use the recorded values for TOP and LEFT parameters of the STYLE for each DIV.

Click on an image below to acivate the Position Control Panel. The panel will display the current TOP and LEFT paramenters of the associated DIV. Relocate the image to a desired location, making a note of the values for use in final the design positions. The Postion Control Panel can be dragged to any location on the page.


This is a turkey named Gobbles

This is a shark named Crunch

This is a crab named Claude

This is a spider named Spinner

This is a worm named Inch

This is a ladybug named Lucky
UP
LEFT    RIGHT
DOWN
Increment:
DIV id=:
TOP:
LEFT