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

ECA 225 PowerPoint PPT Presentation


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

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

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


  • Login