ECA 225 Applied Online Programming DHTML Example ECA

ECA 225 Applied Online Programming DHTML Example ECA 225 Applied Interactive Programming 1

DHTML Example: Avalon v hypothetical web page – Avalon Books v the word “Avalon” appears at the top of the page v “Avalon” descends to a certain point then stops v the word “Books” slides out from behind “Avalon”, moves a certain distance, then stops v 3 images appear at certain points on the page, one after another ECA 225 Applied Interactive Programming 2

DHTML Example: Avalon cont … v page will contain 5 objects, each inside a <div> tag, each with a unique id v the word “Avalon” v the word “Books” v first image v second image v third image <div id="avalon" style="background-color: black; font-size: 24 pt; position: absolute; z-index: 2; "> AVALON </div> ECA 225 Applied Interactive Programming 3

DHTML Example: Avalon v using cont … DHTML we will: v place each object at specific coordinates on the page v set the stacking order of some of the objects v control visibility v move the objects a designated distance v page should be Cross Browser Compatible for NS 4, NS 6, NS 7, IE 4, IE 5, IE 6, Firefox ECA 225 Applied Interactive Programming 4

CSS Review v absolute positioning v positioned in relation to the parent element #elem 1{ position: absolute; left: 200 px; top: 25 px; } v stacking v the order with z-index higher the number, the higher on the stack #elem 1{ z-index: 3; ECA 225 Applied Interactive Programming } 5

CSS Review v cont … visibility v an object can be hidden, but still take up space on a page #elem 1{ visibility: hidden v } display v an object can be hidden and take up no space on the page #elem 1{ display: none; ECA 225 Applied Interactive Programming } 6

DOM Review v 3 major DOM’s are often incompatible v NS 4 v uses a property called layers document. layers. avalon v IE v uses a property called all document. all. avalon v W 3 C v uses a method named get. Element. By. Id( ) document. get. Element. By. Id( ‘avalon’ ) ECA 225 Applied Interactive Programming 7

Cross Browser Compatibility v DHTML code must v determine which DOM the browser supports v run the correct code supported by that browser, without generating errors v 2 approaches v browser detection v object detection ECA 225 Applied Interactive Programming 8

Browser detection v navigator. app. Name v returns the name of the browser alert( navigator. app. Name) // returns “Microsoft Internet Explorer” v navigator. app. Version v returns additional information about the browser alert( navigator. app. Version) // returns “ 4. 0(compatible; MSIE 6. 0; Windows XP)” ECA 225 Applied Interactive Programming 9

Object detection v code to determine which DOM is supported v test which reference name is recognized var NS 4 DOM = document. layers ? true : false; var IEDOM = document. all ? true : false; var W 3 CDOM = document. get. Element. By. Id ? true : false; v variables will contain true or false, which will be used in subsequent functions ECA 225 Applied Interactive Programming 10

Object detection strategies v page branching v create separate pages for each browser v location. href loads a new URL into the browser if( NS 4 DOM ) location. href = “ns 4_index. htm”; else if( IEDOM ) location. href = “ie_index. htm”; else if( W 3 CDOM ) location. href = “w 3_index. htm”; ECA 225 Applied Interactive Programming 11

Object detection strategies v internal cont … branching v each piece of DHTML code is enclosed in if statements if( NS 4 DOM ) var elem 1 = document. layers. element 1. left; if( IEM ) var elem 1 = document. all. element 1. style. left; if( W 3 CDOM ) var elem 1 = document. get. Element. By. Id(‘element 1’). style. left; ECA 225 Applied Interactive Programming 12

Object detection strategies cont … v API v Application Programming Interface v external file ( *. js ) that contains functions to resolve compatibility issues v link from web page to external file <script type="text/javascript" src="avalon. js"></script> v do not place directly in root directory ECA 225 Applied Interactive Programming 13

API for Avalon v API will contain the following: commands to determine which DOM is supported by the browser v a function to resolve the differences among each DOM and it’s way of referencing objects v a function to place objects at specific locations v a function to move an object v a function that returns the left value of an object v a function that returns the top value of an object v a function to hide an object v a function to make an object visible v ECA 225 Applied Interactive Programming 14

API for Avalon v function cont … to resolve references to objects var NS 4 DOM = document. layers ? true : false; var IEDOM = document. all ? true : false; var W 3 CDOM = document. get. Element. By. Id ? true : false; function get. Object(id){ if(NS 4 DOM) ref = "document. layers. " + id; else if(IEDOM) ref = "document. all. " + id; else if(W 3 CDOM) ref = "document. get. Element. By. Id('" + id + "')"; var object = eval(ref); return object; } ECA 225 Applied Interactive Programming 15

API for Avalon cont … v get. Object( ) takes one parameter, the id of the object we want to reference v eval( ) method takes a string as an argument and creates a reference to the actual object v get. Object( ) returns the reference to the object v eg, if we pass get. Object the ‘avalon’ id W 3 CDOM returns document. layers. avalon IEDOM returns document. all. avalon W 3 CDOM returns document. get. Element. By. Id(‘avalon’) ECA 225 Applied Interactive Programming 16

Accessing CSS properties v different DOM’s reference properties in different ways NS 4 DOM object. left // returns 300 IEDOM object. style. left // returns 300 px object. style. pixelleft // returns 300 W 3 CDOM object. style. left // returns 300 px ECA 225 Applied Interactive Programming 17

Accessing CSS properties v to cont … drop the ‘px’ use parse. Int( ) NS 4 DOM object. left // returns 300 IEDOM parse. Int(object. style. left) // returns 300 object. style. pixel. Left // returns 300 W 3 CDOM parse. Int(object. style. left) // returns 300 ECA 225 Applied Interactive Programming 18

Accessing CSS properties v layering cont … using z-index NS 4 DOM object. z. Index IEDOM and W 3 CDOM object. style. z. Index ECA 225 Applied Interactive Programming 19

Accessing CSS properties cont … v visibility NS 4 DOM object. visibility = ‘show’ IEDOM and W 3 CDOM object. style. visibility = “visible” v display NS 4 DOM object. display = ‘hide’ IEDOM and W 3 CDOM object. style. display = “hidden” ECA 225 Applied Interactive Programming 20

API functions v Placing objects v function to position each object on the page using left and top properties function place. It(id, x, y){ var object = get. Object(id); if(NS 4 DOM) object. move. To(x, y); else if( IEDOM || W 3 CDOM ){ object. style. left = x; object. style. top = y; } } ECA 225 Applied Interactive Programming 21

Web page functions v function named place. Objects( ) called from an on. Load event handler function place. Objects(){ place. It("avalon", 175, 10); place. It("books", 175, 10); place. It("AB", 230, 40); place. It("Fiction", 5, 5); place. It("NFiction", 475, 5); move. Avalon( ); } ECA 225 Applied Interactive Programming 22

API functions v Animating objects – uses 3 functions v function to move an object from its current position a specified distance function shift. It(id, dx, dy){ var object = get. Object(id); if(NS 4 DOM){ object. move. By(dx, dy); } else if( IEDOM ){ object. style. pixel. Left = object. style. pixel. Left + dx; object. style. pixel. Top = object. style. pixel. Top + dy; } else if( W 3 CDOM ){ object. style. left = parse. Int(object. style. left) + dx; object. style. top = parse. Int(object. style. top) + dy; } } ECA 225 Applied Interactive Programming 23

API functions v Animating objects – uses 3 functions v a function to find the value of the object’s left property function x. Coord(id){ var object = get. Object(id); if( NS 4 DOM ) xc = object. left; else if( IEDOM ) xc = object. style. pixel. Left; else if( W 3 CDOM ) xc = parse. Int(object. style. left); return xc; } ECA 225 Applied Interactive Programming 24

API functions v Animating objects – uses 3 functions v a function to find the value of the object’s top property function y. Coord(id){ var object = get. Object(id); if( NS 4 DOM ) yc = object. top; else if( IEDOM ) yc = object. style. pixel. Top; else if( W 3 CDOM ) yc = parse. Int(object. style. top); return yc; } ECA 225 Applied Interactive Programming 25

Web page functions v function named move. Avalon( ) to move the object down the page a specified distance function move. Avalon(){ var y = y. Coord("avalon"); if( y <= 275 ){ shift. It("avalon", 0, 4); shift. It("books", 0, 4); set. Timeout("move. Avalon( )", 20); } else{ move. Books( ); } } ECA 225 Applied Interactive Programming 26

Web page functions v function named move. Books( ) to move the object to the right a specified distance function move. Books(){ var x = x. Coord("books"); if( x <= 320 ){ shift. It("books", 4, 0); set. Timeout("move. Books( )", 20); } else{ show. Objects( ); } } ECA 225 Applied Interactive Programming 27

API functions v Showing objects v 2 functions to change the visibility of an object function hide. It(id){ var object = get. Object(id); if( NS 4 DOM ) object. visibility="hide"; else if( IEDOM || W 3 CDOM ) object. style. visibility="hidden"; } function show. It(id){ var object = get. Object(id); if( NS 4 DOM ) object. visibility="show"; else if( IEDOM || W 3 CDOM ) object. style. visibility="visible"; } ECA 225 Applied Interactive Programming 28

Web page functions v function named show. Objects( ) to change the visibility property function show. Objects(){ set. Timeout("show. It('AB')", 500); set. Timeout("show. It('Fiction')", 1000); set. Timeout("show. It('NFiction')", 1500); } ECA 225 Applied Interactive Programming 29