1 / 14

ECA 225

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 ….

michael-stokes
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 ECA 225 Applied Interactive Programming

  2. 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 ECA 225 Applied Interactive Programming

  3. 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

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

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

  6. calculating size of display window • 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

  7. calculating size of display window • Internet Explorer headaches • 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

  8. modify the API • 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

  9. winWidth( ) 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

  10. winHeight( ) 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

  11. modify the Web Page • 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

  12. modify the Web Page • 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

  13. path animation • 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

  14. path animation • “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

More Related