ECA 225

ECA 225 Applied Interactive Programming

1

ECA 225

AppliedOnline

ProgrammingDHTML Example


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 stops3 images appear at certain points on the page, one

after another


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>


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 objectscontrol visibilitymove the objects a designated distance

page should be Cross Browser Compatible for NS4, NS6, NS7, IE4, IE5, IE6, Firefox


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; }


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; }


7

DOM Review 3 major DOM’s are often incompatible

NS4uses a property called layers

document.layers.avalon

IEuses a property called all

document.all.avalon

W3Cuses a method named getElementById( )

document.getElementById( ‘avalon’ )


8

Cross Browser Compatibility

DHTML code mustdetermine which DOM the browser supports run the correct code supported by that browser,

without generating errors

2 approachesbrowser detectionobject detection


9

Browser detection

navigator.appName returns the name of the browser

navigator.appVersionreturns additional information about the browser

alert( navigator.appName) // returns “Microsoft Internet Explorer”

alert( navigator.appVersion) // returns “4.0(compatible; MSIE 6.0; Windows XP)”


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;


11

Object detection strategies

page branchingcreate 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”;


12

Object detection strategies cont …

internal branchingeach 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;


13

Object detection strategies cont …

APIApplication 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>


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


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;

}


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 objecteg, if we pass getObject the ‘avalon’ id

W3CDOM returns document.layers.avalonIEDOM returns document.all.avalonW3CDOM returns document.getElementById(‘avalon’)


17

Accessing CSS properties

different DOM’s reference properties in different ways

NS4DOMobject.left // returns 300IEDOMobject.style.left // returns 300pxobject.style.pixelleft // returns 300W3CDOMobject.style.left // returns 300px


18

Accessing CSS properties cont …

to drop the ‘px’ use parseInt( )

NS4DOMobject.left // returns 300IEDOMparseInt(object.style.left) // returns 300object.style.pixelLeft // returns 300W3CDOMparseInt(object.style.left) // returns 300


19


layering using z-index

NS4DOMobject.zIndexIEDOM and W3CDOMobject.style.zIndex


20


visibility

display

NS4DOMobject.visibility = ‘show’IEDOM and W3CDOMobject.style.visibility = “visible”

NS4DOMobject.display = ‘hide’IEDOM and W3CDOMobject.style.display = “hidden”


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;

}}


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( ); }


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;

}}


24


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;}


25


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;}


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( ); }}


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( ); }}


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";}


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);}

Documents

ECA 225