ECA 225 Applied Online Programming DHTML ECA 225

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

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

resolution independence cont … v think of objects on a canvas or stage with limited width and height v 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 v 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 3

Display Window Offset 760 620 ( H – 300 ) / 2 80 300 460 Avalon Books 70 ECA 225 Applied Interactive Programming ( W – 620 ) / 2 4

resolution independence cont … v 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 v after determining these values we can add them to the appropriate coordinates for each object on our page ECA 225 Applied Interactive Programming 5

calculating size of display window v NS 4 & W 3 C v width & height of display window, including menu, toolbars, status bar v window. outer. Width v window. outer. Height v width & height of available window only ( minus menu, toolbars, etc ) v window. inner. Width v window. inner. Height ECA 225 Applied Interactive Programming 6

calculating size of display window v Internet Explorer headaches v no version of IE supports the W 3 C properties v IE 4 & IE 5 v size of web page body v document. body. client. Width v document. body. client. Height v IE 6 v no longer supports document. body property v use document. Element property v document. Element. offset. Width v document. Element. offset. Height ECA 225 Applied Interactive Programming 7

modify the API v add the following functions to the API to return size of document window v win. Width( ) v win. Height( ) v algorithm v v v if window. inner. Width and window. inner. Height are supported, return those values ( NS 4 & W 3 C ) otherwise, if the browser supports the document. Element object, return document. Element. offset. Width and document. Element. offset. Height ( IE 6 ) otherwise, if document. body. client. Width and document. body. client. Height are supported, return those values ( IE 4 & IE 5 ) ECA 225 Applied Interactive Programming 8

win. Width( ) function win. Width( ){ if(window. inner. Width) return window. inner. Width; else if(document. Element) return document. Element. offset. Width; else if(document. body. client. Width) return document. body. client. Width; } W = ( win. Width( ) – 620 ) / 2 ECA 225 Applied Interactive Programming 9

win. Height( ) function win. Height( ){ if(window. inner. Height) return window. inner. Height; else if(document. Element) return document. Element. offset. Height; else if(document. body. client. Height) return document. body. client. Height; } H = ( win. Height( ) – 300 ) / 2 ECA 225 Applied Interactive Programming 10

modify the Web Page vadd W and H to values passed in the place. Objects( ) function place. Objects(){ place. It("avalon", W+175, H+10); place. It("books", W+175, H+10); place. It("AB", W+230, H+40); place. It("Fiction", W+5, H+5); place. It("NFiction", W+475, H+5); move. Avalon(); // } ECA 225 Applied Interactive Programming 11

modify the Web Page v add W and H to coordinates used to stop animation in move functions function move. Avalon(){ var y = y. Coord("avalon"); if( y <= H+275 ){ shift. It("avalon", 0, 4); shift. It("books", 0, 4); set. Timeout("move. Avalon()", 20); } } function move. Books(){ var x = x. Coord("books"); if( x <= W+320 ){ shift. It("books", 4, 0); set. Timeout("move. Books()", 20); } } ECA 225 Applied Interactive Programming 12

path animation is not limited to straight line v sets of ( x, y ) coordinates stored in 2 arrays v v v 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, 6, 6, 6, 7, 7, 7, 8, 8, 8, 9, 9, 9, 10, 10); y = new Array(0, 0, 0, 1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4, 5, 6, 7); ECA 225 Applied Interactive Programming 13

path animation v “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, 6, 6, 6, 7, 7, 7, 8, 8, 8, 9, 9, 9, 10, 10); y = new Array(0, 0, 0, 1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4, 5, 6, 7); index = 0; function move. Object( ){ if( index <= x. length – 1 ){ shift. It(“object_name”, x[index], y[index]; index++; } } ECA 225 Applied Interactive Programming 14