Eca 225
This presentation is the property of its rightful owner.
Sponsored Links
1 / 14

ECA 225 PowerPoint PPT Presentation


  • 56 Views
  • Uploaded on
  • Presentation posted in: General

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

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


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 …

  • 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

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 contentW = ( window_width – 620 ) / 2H = ( 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

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

  • 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( )

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

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

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

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


  • Login