Eca 225
Download
1 / 14

ECA 225 - PowerPoint PPT Presentation


  • 69 Views
  • Uploaded on

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

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

PowerPoint Slideshow about ' ECA 225' - michael-stokes


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

ECA 225

AppliedOnline Programming

DHTML

ECA 225 Applied Interactive Programming


Resolution independence
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


Resolution independence cont
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


Display window offset
Display Window Offset

760

620

80

460

( H – 300 ) / 2

300

Avalon Books

( W – 620 ) / 2

70

ECA 225 Applied Interactive Programming


Resolution independence cont1
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


Calculating size of display window
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


Calculating size of display window1
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


Modify the api
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


Winwidth
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


Winheight
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


Modify the web page
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


Modify the web page1
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


Path animation
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


Path animation1
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


ad