|Lesson 22: Visibilty (DHTML)|
WARNING---DHTML SCRIPTS CAN CRASH BROWSERS THAT DO NOT SUPPORT DHTML INCLUDING SOME WEBTVS!!!
[Note-the original WebTv Classic has different support for DHTML and many of these scripting techniques will crash or freeze them, and various levels of upgrades on other WebTv models may utilize some DHTML in non-standard ways]
1) Division Positioning Through Definitions
You can also define the starting top and left positions in several measurement units (we will use pixels here), the visibility, and any non CSS-P style attributes desired such as colors and dimensions.
Each style attribute is a name:value pair seperated by a semicolon just as script statements are on a single line. These HTML tags alone allow you to create content positioned precisely about the page without the use of tables or other formatting tricks (this is often used in WebTv email).
[Note-The style attributes may be set in a style sheet elswhere on the page, but for examples like we will use here, it is easier to see them defined inline as an attribute. Review the CSS spec for info on defining CSS as a style sheet.]
To move a CSS-P defined division, we reference the document, and then a special array that lists all the identified objects on the page, then the style, then the actual style attribte. So to move a division to 50 pixels left and 70 pixels down (both measurments are from the top/left of the page):
[Notice that we use a number, and not a string with the measurement indicator such as px when programactically positioning, unlike we we position by defintion which requires the measurement indicator.]
To move a division incrementally, you could create a function using a setInterval or setTimeout method. Remember to give the interval or timeout method a variable name so you can clear it when you want the movement to cease, Example: (using the above division)
First we check to see that the division is still on the screen, if it is we move it over 5 pixels, if not we move it back to the left side to start over. Such a function might be called by a body onload call. Here is the same type of function moving the image down the page:
Moving the image diagonally, in curves, or in any other non multiple of 90 degree movement requires scriping the math to determine the coordinates for each step in the movement proces. For instance, to move the division from it's starting point as defined as 100y200x to a final point of 200y300x, we could simple add to the values of each top and left style attribute till we reach the desired point, example:
3) Visibility of Divisions
One great advantage to the CSS-P spec is it allows you to create content that is hidden from the user when not needed. Combining positioning with hidding/showing a division, one can create a page that requires no scrolling, make menus with much greater functionality, anything your imagination can come up with! To make the above division disappear and reappear, we can check for the current visibility and change it accordingly with a simple if else statement in any event handler or function call. We set the visibility to visible to show it and to hidden to hide it, simple! Example:
By combining various CSS-P techniques, you can create webpages with more functionality and easier use, as well as opening up the webpage to your imagination! Here are a couple of WebTv compatible DHTML samples: