| 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] Today we will begin the first in several discussions on DHTML, Dynamic Hypertext Markup Language. DHMTL is not a single language, but rather DHTML offers means to allow various formatting and scripting languages to interact, giving programmers the ability to create dynamic content in the web browser without plugins or compiled languages. While many scripting and formatting languages can be used together to implement DHTML characteristics, WebTv primarily relies on HTML for formatting and JavaScript (Jelly) for the dynamic scripting, and CGI (perl, php3, ect) allows this to all be tied together to the power of a server. The WebTv browser recognizes limited amounts of IE based CSS (Cascading Style Sheets) and CSS-P (CSS-Positioning), and manipulates them with IE's division and span containers. [Note-For those interested in creating cross-browser compatible DHTML scripts, please go to www.netscape.com and review materials on the Layer, which is the Netscape Navigator version of the Division in Internet Explorer, and on creating dynamic-objects for cross browser scripting, and Good Luck! 1) Division Positioning Through Definitions WebTv supports the division tag as a container for content which can be positioned dynamically. The id and style attributes must be set in the HTML code before JavaScript can reference the division and it's contents (on WebTv, on IE, the entire DOM is accessible). The id attribute is much like the name attribute, giving the div tag an identifier. The style attribute is an inline style sheet, and on WebTv, it must be set to position:absolute to allow for dynamic positioning. 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.] 2) Repositioning Through JavaScript 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: http://www.webwizardsways.com/scripts/dhtmlmenu.html http://www.webwizardsways.com/experiment/dhtmlmouseovers.html http://www.webwizardsways.com/games/skate.html" |