1 / 14

# ECA 225 - PowerPoint PPT Presentation

ECA 225. Applied Online Programming. DHTML. resolution independence. commonly used resolutions 640 X 480 800 X 600 1024 X 768 to center content independent of resolution calculate dimensions of display window. ( window_width – stage_width ) / 2. resolution independence cont ….

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.

## PowerPoint Slideshow about ' ECA 225' - michael-stokes

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

### ECA 225

AppliedOnline Programming

DHTML

ECA 225 Applied Interactive Programming

• commonly used resolutions

• 640 X 480

• 800 X 600

• 1024 X 768

• to center content independent of resolution

• calculate dimensions of display window

( window_width – stage_width ) / 2

ECA 225 Applied Interactive Programming

resolution independence cont …

• think of objects on a canvas or stage with limited width and height

• every object on the page will be offset from the L and T edges by a distance equal to the size of the margin around this imaginary stage

• EG, if a display window is 760 X 560 and the stage is 620 X 300

border_width = ( 760 – 620 ) / 2

ECA 225 Applied Interactive Programming

760

620

80

460

( H – 300 ) / 2

300

Avalon Books

( W – 620 ) / 2

70

ECA 225 Applied Interactive Programming

resolution independence cont …

• once we find the available width and height of the browser window we can determine the amount of margin needed to center the content W = ( window_width – 620 ) / 2 H = ( window_height – 300 ) / 2

• after determining these values we can add them to the appropriate coordinates for each object on our page

ECA 225 Applied Interactive Programming

• NS4 & W3C

• width & height of display window, including menu, toolbars, status bar

• window.outerWidth

• window.outerHeight

• width & height of available window only ( minus menu, toolbars, etc )

• window.innerWidth

• window.innerHeight

ECA 225 Applied Interactive Programming

• no version of IE supports the W3C properties

• IE4 & IE5

• size of web page body

• document.body.clientWidth

• document.body.clientHeight

• IE6

• no longer supports document.body property

• use document.documentElement property

• document.documentElement.offsetWidth

• document.documentElement.offsetHeight

ECA 225 Applied Interactive Programming

• add the following functions to the API to return size of document window

• winWidth( )

• winHeight( )

• algorithm

• if window.innerWidth and window.innerHeight are supported, return those values ( NS4 & W3C )

• otherwise, if the browser supports the document.documentElement object, return document.documentElement.offsetWidth and document.documentElement.offsetHeight ( IE6 )

• otherwise, if document.body.clientWidth and document.body.clientHeight are supported, return those values ( IE4 & IE5 )

ECA 225 Applied Interactive Programming

function winWidth( ){

if(window.innerWidth) return window.innerWidth;

else if(document.documentElement) return document.documentElement.offsetWidth;

else if(document.body.clientWidth) return document.body.clientWidth;

}

W = ( winWidth( ) – 620 ) / 2

ECA 225 Applied Interactive Programming

function winHeight( ){

if(window.innerHeight) return window.innerHeight;

else if(document.documentElement) return document.documentElement.offsetHeight;

else if(document.body.clientHeight) return document.body.clientHeight;

}

H = ( winHeight( ) – 300 ) / 2

ECA 225 Applied Interactive Programming

• add W and H to values passed in the placeObjects( ) function

function placeObjects(){

placeIt("avalon",W+175,H+10);

placeIt("books",W+175,H+10);

placeIt("AB",W+230,H+40);

placeIt("Fiction",W+5,H+5);

placeIt("NFiction",W+475,H+5);

moveAvalon(); //

}

ECA 225 Applied Interactive Programming

• add W and H to coordinates used to stop animation in move functions

function moveAvalon(){

var y = yCoord("avalon");

if( y <= H+275 ){

shiftIt("avalon",0,4);

shiftIt("books",0,4);

setTimeout("moveAvalon()",20);

}

}

function moveBooks(){

var x = xCoord("books");

if( x <= W+320 ){

shiftIt("books",4,0);

setTimeout("moveBooks()",20);

}

}

ECA 225 Applied Interactive Programming

• animation is not limited to straight line

• sets of ( x, y ) coordinates stored in 2 arrays

• calculate the number of pixels the object moves each time the move function is called

• read the 2 arrays, one index at a time

x = new Array(5,5,5,5,5,6,6,6,7,7,7,8,8,8,9,9,9,10,10,10);y = new Array(0,0,0,0,0,1,1,1,2,2,2,3,3,3,4,4,4,5,6,7);

ECA 225 Applied Interactive Programming

• “object_name” is moved from point to point by the corresponding number of pixels stored in the two arrays

x = new Array(5,5,5,5,5,6,6,6,7,7,7,8,8,8,9,9,9,10,10,10);y = new Array(0,0,0,0,0,1,1,1,2,2,2,3,3,3,4,4,4,5,6,7);index = 0;

function moveObject( ){if( index <= x.length – 1 ){ shiftIt(“object_name”, x[index], y[index]; index++;} }

ECA 225 Applied Interactive Programming