1 / 29

ECA 225

ECA 225. Applied Online Programming. DHTML Example. 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

dorian-phelps
Download Presentation

ECA 225

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ECA 225 AppliedOnline Programming DHTML Example ECA 225 Applied Interactive Programming

  2. 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 Programming

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

  4. 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 Programming

  5. 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 Programming

  6. 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 Programming

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

  8. 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 Programming

  9. 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 Programming

  10. 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 Programming

  11. 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 Programming

  12. 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 Programming

  13. 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 <script type="text/javascript" src="avalon.js"></script> ECA 225 Applied Interactive Programming

  14. 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 Programming

  15. 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 Programming

  16. 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 Programming

  17. 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 Programming

  18. 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 Programming

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

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

  21. 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 Programming

  22. 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 Programming

  23. 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 Programming

  24. 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 Programming

  25. 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 Programming

  26. 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 Programming

  27. 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 Programming

  28. 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 Programming

  29. 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); } ECA 225 Applied Interactive Programming

More Related