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

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

ECA 225 Applied Interactive Programming3 DHTML Example: Avalon cont …  page will contain 5 objects, each inside a tag, each with a unique id  the word “Avalon”  the word “Books”  first image  second image  third image AVALON

ECA 225 Applied Interactive Programming4 DHTML Example: Avalon cont …  using DHTML we will:  place each object at specific coordinates on the page  set the stacking order of some of the objects  control visibility  move the objects a designated distance  page should be Cross Browser Compatible for NS4, NS6, NS7, IE4, IE5, IE6, Firefox

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

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

ECA 225 Applied Interactive Programming7 DOM Review  3 major DOM’s are often incompatible  NS4  uses a property called layers document.layers.avalon  IE  uses a property called all document.all.avalon  W3C  uses a method named getElementById( ) document.getElementById( ‘avalon’ )

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

ECA 225 Applied Interactive Programming9 Browser detection  navigator.appName  returns the name of the browser  navigator.appVersion  returns additional information about the browser alert( navigator.appName) // returns “Microsoft Internet Explorer” alert( navigator.appVersion) // returns “4.0(compatible; MSIE 6.0; Windows XP)”

ECA 225 Applied Interactive Programming10 Object detection  code to determine which DOM is supported  test which reference name is recognized  variables will contain true or false, which will be used in subsequent functions var NS4DOM = document.layers ? true : false; var IEDOM = document.all ? true : false; var W3CDOM = document.getElementById ? true : false;

ECA 225 Applied Interactive Programming11 Object detection strategies  page branching  create separate pages for each browser  location.href loads a new URL into the browser if( NS4DOM ) location.href = “ns4_index.htm”; else if( IEDOM ) location.href = “ie_index.htm”; else if( W3CDOM ) location.href = “w3_index.htm”;

ECA 225 Applied Interactive Programming12 Object detection strategies cont …  internal branching  each piece of DHTML code is enclosed in if statements if( NS4DOM ) var elem1 = document.layers.element1.left; if( IEM ) var elem1 = document.all.element1.style.left; if( W3CDOM ) var elem1 = document.getElementById(‘element1’).style.left;

ECA 225 Applied Interactive Programming13 Object detection strategies cont …  API  Application Programming Interface  external file ( *.js ) that contains functions to resolve compatibility issues  link from web page to external file  do not place directly in root directory

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

ECA 225 Applied Interactive Programming15 API for Avalon cont …  function to resolve references to objects var NS4DOM = document.layers ? true : false; var IEDOM = document.all ? true : false; var W3CDOM = document.getElementById ? true : false; function getObject(id){ if(NS4DOM) ref = "document.layers." + id; else if(IEDOM) ref = "document.all." + id; else if(W3CDOM) ref = "document.getElementById('" + id + "')"; var object = eval(ref); return object; }

ECA 225 Applied Interactive Programming16 API for Avalon cont …  getObject( ) takes one parameter, the id of the object we want to reference  eval( ) method takes a string as an argument and creates a reference to the actual object  getObject( ) returns the reference to the object  eg, if we pass getObject the ‘avalon’ id W3CDOM returns document.layers.avalon IEDOM returns document.all.avalon W3CDOM returns document.getElementById(‘avalon’)

ECA 225 Applied Interactive Programming17 Accessing CSS properties  different DOM’s reference properties in different ways NS4DOM object.left // returns 300 IEDOM object.style.left // returns 300px object.style.pixelleft // returns 300 W3CDOM object.style.left // returns 300px

ECA 225 Applied Interactive Programming18 Accessing CSS properties cont …  to drop the ‘px’ use parseInt( ) NS4DOM object.left // returns 300 IEDOM parseInt(object.style.left) // returns 300 object.style.pixelLeft // returns 300 W3CDOM parseInt(object.style.left) // returns 300

ECA 225 Applied Interactive Programming19 Accessing CSS properties cont …  layering using z-index NS4DOM object.zIndex IEDOM and W3CDOM object.style.zIndex

ECA 225 Applied Interactive Programming20 Accessing CSS properties cont …  visibility  display NS4DOM object.visibility = ‘show’ IEDOM and W3CDOM object.style.visibility = “visible” NS4DOM object.display = ‘hide’ IEDOM and W3CDOM object.style.display = “hidden”

ECA 225 Applied Interactive Programming21 API functions  Placing objects  function to position each object on the page using left and top properties function placeIt(id, x, y){ var object = getObject(id); if(NS4DOM) object.moveTo(x, y); else if( IEDOM || W3CDOM ){ object.style.left = x; object.style.top = y; }

ECA 225 Applied Interactive Programming22 Web page functions  function named placeObjects( ) called from an onLoad event handler function placeObjects(){ placeIt("avalon",175,10); placeIt("books",175,10); placeIt("AB",230,40); placeIt("Fiction",5,5); placeIt("NFiction",475,5); moveAvalon( ); }

ECA 225 Applied Interactive Programming23 API functions  Animating objects – uses 3 functions  function to move an object from its current position a specified distance function shiftIt(id, dx, dy){ var object = getObject(id); if(NS4DOM){ object.moveBy(dx, dy); } else if( IEDOM ){ object.style.pixelLeft = object.style.pixelLeft + dx; object.style.pixelTop = object.style.pixelTop + dy; } else if( W3CDOM ){ object.style.left = parseInt(object.style.left) + dx; object.style.top = parseInt(object.style.top) + dy; }

ECA 225 Applied Interactive Programming24 API functions  Animating objects – uses 3 functions  a function to find the value of the object’s left property function xCoord(id){ var object = getObject(id); if( NS4DOM ) xc = object.left; else if( IEDOM ) xc = object.style.pixelLeft; else if( W3CDOM ) xc = parseInt(object.style.left); return xc; }

ECA 225 Applied Interactive Programming25 API functions  Animating objects – uses 3 functions  a function to find the value of the object’s top property function yCoord(id){ var object = getObject(id); if( NS4DOM ) yc = object.top; else if( IEDOM ) yc = object.style.pixelTop; else if( W3CDOM ) yc = parseInt(object.style.top); return yc; }

ECA 225 Applied Interactive Programming26 Web page functions  function named moveAvalon( ) to move the object down the page a specified distance function moveAvalon(){ var y = yCoord("avalon"); if( y <= 275 ){ shiftIt("avalon",0,4); shiftIt("books",0,4); setTimeout("moveAvalon( )", 20); } else{ moveBooks( ); }

ECA 225 Applied Interactive Programming27 Web page functions  function named moveBooks( ) to move the object to the right a specified distance function moveBooks(){ var x = xCoord("books"); if( x <= 320 ){ shiftIt("books",4,0); setTimeout("moveBooks( )", 20); } else{ showObjects( ); }

ECA 225 Applied Interactive Programming28 API functions  Showing objects  2 functions to change the visibility of an object function hideIt(id){ var object = getObject(id); if( NS4DOM ) object.visibility="hide"; else if( IEDOM || W3CDOM ) object.style.visibility="hidden"; } function showIt(id){ var object = getObject(id); if( NS4DOM ) object.visibility="show"; else if( IEDOM || W3CDOM ) object.style.visibility="visible"; }

ECA 225 Applied Interactive Programming29 Web page functions  function named showObjects( ) to change the visibility property function showObjects(){ setTimeout("showIt('AB')",500); setTimeout("showIt('Fiction')",1000); setTimeout("showIt('NFiction')",1500); }