working with dynamic page layout

Working with Dynamic Page Layout

Maureen Smith

Professor, Saddleback College

CIM 271B - Tutorial 1

Objectives

• In this tutorial you will:– Arrange objects using CSS positioning attributes– Learn about the history and theory of DHTML– Learn how DHTML is implemented on different

browsers– Work with cross-browser DHTML pages– Create and link to an API of customized

JavaScript functions

– Arrange objects using JavaScript– Create an animation using JavaScript

Session 1.1

• In this session you’ll be introduced to the theory and history of DHTML– Will learn how to control the placement of

objects on your Web page with CSS– Will learn about style sheet attributes that

control the appearance of your objects– Finally, will apply your knowledge to design

layout of an opening page for Avalon books

Introduction to DHTML

• Early in HTML development, were limited to static Web pages– Authors/browser developers began to look for

ways to create more dynamic presentations whose content and design could be changed after page had been loaded

– Early attempts involved applets (small programs browser would retrieve and install along with Web page)

• Starting with 4.0 versions of Netscape and IE, a new approach was offered– HTML code itself supported dynamic elements– Unlike applets, no additional software was

needed to create and display dynamic pages– These enhancements are known as dynamic

HTML or DHTML

• DHTML involves interaction of 3 elements:

– The HTML code of the page– Cascading style sheets to define appearance– A scripting language, usually JavaScript or

VBScript, to control behavior of elements

• By working with these elements, author can create documents that dynamically interact with the user– Some uses for DHTML include:

– Animated text that moves and changes in response to user action

– Pop-up menus that provide users with quick access to other pages in site without devoting valuable screen space to a long, complicated list of links

– Web pages that retrieve their content from external data sources, giving authors more freedom in type of material they can display

• Terry wants you to create an opening page for Avalon Books that contains animated text and graphics– Figure 1-1 shows general appearance and content

she wants– Image of Avalon Books’ best-selling fiction book– Image of Avalon Books’ best-selling nonfiction

book

– Image of a person reading a book, which contains a link to rest of the site

– Text string “Avalon”– Text string “Books”

• Terry wants single word “Avalon” to appear near top of page and drop vertically down– At a certain point, it should stop dropping and the

word “Books” should appear, moving to right from behind “Avalon”

– After that, three other images should appear on screen in sequence (see Figure 1-2)

• To create this page, need to know how to place objects at specific coordinates– Then need to know how to move those objects– Placing objects on page can be done by using

style attributes of the CSS language

Positioning Objects with CSS

• Cascading style sheets were originally used to control appearance of content– An extension called CSS-Positioning, or CSS-P,

added ability to control layout of the page– Eventually became part of CSS2 specs, though will

still occasionally see term “CSS-P” used to refer specifically to those style attributes

• With CSS, can define position of any element enclosed in a two-sided HTML tag

– Style attributes for positioning an object are:

position:position_type; left:value; top:value;– where position_type indicates type of

positioning used with the object, left indicates location of left edge of the object, and top indicates location of object’s top edge

– Left and top values can be defined in absolute coordinates or as a percentage of width of parent object

– Default unit is pixels

• There are four possible values for position attribute: absolute, relative, fixed, static

• An absolute position places object at a defined coordinate in the document, regardless of the object’s initial location or the location of other objects on the page

– Figure 1-3 shows object that has been placed at the (30, 100) coordinate on the page, that is, 30 pixels to the right and 100 pixels down from upper-left corner of display window

• Absolute position is always determined relative to upper-left corner of parent object– A positive top value places object down from

top edge; a negative value places object above top edge

– Similarly, a positive left value places object to right of left edge and a negative value places object to left of the left edge

• In most cases, the parent object will be browser’s display window, but as shown in Figure 1-4, object can also be positioned within another element on the page– 30 pixels to right and 100 down from upper-left

corner of its parent element

• A relative position places object a a point relative to its location in the natural flow of the document– Object shown in Figure 1-5 is moved 30 pixels

to left and 100 down from where browser would have originally placed the object

• Placing an object by using relative positioning can be an exercise in frustration

– How will you know default location of object unless you first render page in your browser?

– Even then, default location may change from one browser to another as well as under different monitor resolutions

– General rule is to use absolute positioning whenever you have objects that are seemingly independent of each other and use relative positioning for objects that appear related

– Figure 1-6 shows how relative positioning can be used to achieve interesting visual effect with words within a sentence

• Fixed position value places object at a fixed location in window– Object will remain at that fixed position and will

not scroll with other elements– Currently major browsers do not support fixed

attribute value

• The static position value places object in its natural position in the flow of the document as determined by the browser– You are letting the browser handle layout of the

object for you– If you use static positioning, you cannot define

values for the top and left attributes

Layering Objects

• Frequently, positioned objects overlap– When this happens you need to specify which

object is placed on top– By default, objects that appear later in HTML

file are placed on top of earlier elements– To specify your own stacking order, use the z-

index style attribute:

z-index: value;

– where value is a positive or negative integer, or the value “auto”

• Objects with a higher z-index value are placed on top of objects with lower z-indexes– Figure 1-7 shows effect of z-index

• If two objects have same z-index value, object defined later will be shown on top

– A z-index value of 0, or “auto” causes object to be placed in its default layer, just as if no z-index value was defined in the first place

– Note that the z-index attribute has no effect for objects from within different parent elements

– Z-index value can only be used to layer objects within same parent element

Controlling Object Visibility

• Usually the only reason for hiding an object is that you’re going to “unhide it” later using a script– Can do this by using visibility attribute:

visibility: visibility_type;– where visibility_type is visible, inherit, or

hidden– The visible makes the object visible on page

– Setting visibility attribute to inherit (default) causes object to inherit the visibility property of its parent element

– Setting it to hidden causes browser to hide object, but the object still takes up space on page and browser will have to flow other document objects around it

– If you want to hide object and have it take up no space, use display attribute with value “none”

display: none;– Figure 1-8 shows difference between visibility:

hidden and display:none attribute

• Only IE allows you to change display attribute after the browser has loaded page

Working with Overflow and Clipping

• Other attributes to consider when using CSS for layout are the dimensions of your object– Can define width and height of each object by

using width/height attributes

width: value; height: value;– where value is the width and height values as

measured in absolute or relative units, or as a percentage of width or height of parent element

– If you do not define height/width values, browser will choose one based on content of the object

• If content of object is greater than dimensions you’ve allowed, can control how browser handles extra content

overflow: overflow_type;– where overflow_type is visible, hidden, scroll, or

auto

– Setting it to visible causes browser to increase size to fit the extra content (default)

– In case of text, browser will usually only increase object’s height, leaving width at the specified value

– Using an overflow value of hidden keeps object at the specified size and hides extra content

– If set to scroll, browser keeps object at specified size and adds scroll bars to view extra content

– Setting it to auto will display scroll bars only as needed

– See Figure 1-9

• Netscape through 4.7 supports only hidden and visible values; IE supports all four

• Closely related to overflow attribute is the clip attribute– Allows you to define a rectangular region through

which object’s content can be viewed

– Anything that lies outside boundary of the rectangle is hidden

– Clipping can be used to hide certain portions of the page’s content until needed

clip: rect(top, right, bottom, left);– where top, right, bottom, left define coordinates

of the rectangle– The coordinates are all relative to top and left

edges of the object

– A clip value of rect(10, 175, 125, 75) defines a rectangle whose top and bottom edges lie 10 and 125 pixels from top edge of object and whose right and left edges lie 175 and 75 pixels from object’s left edge

– See Figure 1-10

• The top, right, bottom, left values can also be set to “auto,” which moves clipping region to top, right, bottom, left edges of the object

– A clip value of rect(10, auto, 125, 75) creates a clipping rectangle whose right edge matches the right edge of the object, while the rest of the edges are clipped

• Clip attribute can be used only with absolute positioning

Creating an Opening Screen for Avalon Books

• Ready to create an opening screen for Avalon Books– First task will be to position items on page

using various CSS positioning attributes– See Avalon.html

• Each object (including words “Avalon” and “Books”) has been placed in a separate <DIV> container tag

– Not necessary at this point to put the two words in separate containers, will prove useful later on when you apply animation to page

• Also note that each object has a different ID value– The script you’ll write will use these ID values as a

reference for each object

• To position these objects, will use absolute positioning

– By trial and error, you arrive at following coordinates for each object:

– Place word “Avalon” at (175,260)--175 pixels from left edge of window and 260 down from top edge

– Place word “Books” at (320,260)– Place AB.jpg at (230,40)– Place Fiction.jpg at (5,5)– Place NFiction.jpg at (475,5)

• When you use absolute positioning, important to make sure that coordinates work for different monitor resolutions– If you place object at (750,500), will be off the

screen for users with 640 x 480 monitors!

• Now can modify each object’s style to include this info– See Avalon_13.html

• Terry gives you go ahead to add animation to page– Will start by learning how to use style attributes

in JavaScript program

Session 1.2

• In this session you will learn how DHTML is implemented in Netscape and IE– Will see how to detect the type of browser your

user is running and how to create code that works for both

– Will learn how to create an API, an external file of customized commands and functions

– Will see how to write JavaScript to modify style attributes of your objects

The Document Object Model

• Writing DHTML code requires an understanding of the document object model, or DOM, which (in theory) makes every element available to the scripting language– In actual practice most browsers do not offer a

complete DOM, though versions 4.0/5.0 of IE come close

– By accessing the document object model through DHTML, author can write scripts that control almost every element

– Document is not longer static, but becomes an app that can be manipulated in response to actions by user or programs written by page developer

– Document model can be thought of as a hierarchy of elements, with window object at top of the tree

– See Figure 1-13

Element Collections

• In JavaScript you translate this hierarchy into reference names, which indicate location of element in DOM hierarchy– Elements can be grouped into element

collections, which are arrays of all the elements of a particular type

document.collection[i].property;– where collection is name of the collection,

– i is either an index number or ID name of the collection object

– property is a JavaScript property of the object– First object in collection has an index number

of 0– Can also use ID names of individual elements

in place of index number– Syntax of this type of reference name is either:

document.collection[“id”]

or

document.collection.id– where id is the ID name of the element

• Figure 1-14 describes different element collections and browser support– Not all element collections are supported by

both Netscape and IE

• For example, the object reference to first linked item named Home can be expressed using any of the following reference names:

document.links[0]

document.links[“Home”]

document.links.Home

Referencing <DIV> Containers

• For Avalon Books, will need to create reference names for various <DIV> elements located on opening page– Netscape and IE use different references for

<DIV> tags– Netscape refers to objects formatted with

<DIV> tag as layers and places them in the layers collection

document.layers[‘id”]

document.layers.id

document.id– where id is ID name given to <DIV> tag– Reason that Netscape uses layers collection is that

there is a Netscape-supported tag called <LAYER> tag which is similar to <DIV> tag

• In IE, reference syntax for same object can be any of the following:

– document.all[“id”]– document.all.id– id

• For example, if in your document you have created following tag:

<DIV ID=“Greetings”>Welcome to Avalon Books</DIV>

• Can refer to this object in Netscape by using any of the following reference names:

document.layers.Greetings

document.layers[“Greetings”]

document.Greetings– while in IE, would probably use:

document.all.Greetings

document.all[“Greetings”]

Greetings

Referencing Styles

• Syntax rules for changing one of the style attributes of an element also differ between two browsers– In Netscape, syntax for referencing a style is:

object.attribute– where object is the reference name of the

element and attribute is the name of the style attribute

– In IE this same reference would be:

object.style.attribute

• Not only do the browsers differ in how they reference style attributes, but the names and values of the style attributes can also vary greatly

Referencing Nested Objects

• Netscape and IE also differ in how they handle nested objects– In Netscape use reference syntax:

document.id1.document.id2.document.id3– where id1 is an object at top of hierarchy, id2 is

nested inside id1, id3 is nested inside id2, etc.– If you have lots of nested objects, this reference

name can become quite long and complicated

• With IE don’t have to worry about various levels of nested objects– As long as you’ve given a unique ID name to

the object, can reference it directly, regardless of its location in hierarchy

– So to reference id3, would simply use:

id3

• For example, to reference Title object:

<DIV ID=“Greetings”>Welcome to <SPAN ID=“Title”>Avalon Books</SPAN></DIV>

• Netscape uses reference name:document.Greetings.document.Title

– because Title object is nested inside Greetings object– However, in IE would just use ID name:– Title– because don’t need to worry about where it is in the

object hierarchy

• Any HTML code you write needs to take into account all these differences in reference name syntax

Implementing the DOM

• The two browsers also have some major differences in how they implement the document object model– In Netscape’s version of DOM, can’t make

fundamental changes to structure of the page after page has been loaded by browser

– Are also limited in how you can change the form and content of the document

• Starting with version 4.0, IE’s implementation of DOM is much more flexible and robust– Scripts can dynamically alter property of any

object even after page has been loaded– IE DOM even allows author to change tag

associations– For example, text formatted with H1 header can

be turned into H3 header “on the fly”

– IE also provides additional features such as filters that allow you to change appearance of document content by adding drop shadows or other special effects

– IE DOM also provides ability to retrieve info from databases

– As useful as these features are, must always be implemented with knowledge that all browsers support them and workarounds must be provided

• Why do IE and Netscape express DOM so differently?– They developed DHTML separately– Only in recent years that attempts have been

made to create a standard DOM with standard object references

– In most cases, IE has been adopted as accepted standard

Creating a Cross-Browser Web Site

• Clearly, the animation you develop for Avalon Books needs to accommodate both browsers– So you need to have some way of determining

what type of browser user is running– Then have the browser run correct set of

commands for that browser– Two ways of detecting this info: browser

detection and object detection

Using Browser Detection

• With browser detection you determine type of browser and version user is running and then apply a script designed for that version– Assumes that you’ve done homework and have

mapped out capabilities of each browser: no easy task!

• Browser type can be retrieved from appName property of the navigator object

– To store name of browser in a variable named “bName” would use:

var bName=navigator.appName;– For Netscape, bName will have value

“Netscape”– Value of bName for IE would be “Microsoft

Internet Explorer– Easy enough, but detecting version is more

complicated

• To determine version, use appVersion property of navigator object– Unfortunately, this property includes both

version number and additional text that describes features of the version

– Usually you won’t need this extra info– Can extract version number from a ppVersion

property by using either the parseInt() or parseFloat() methods

– ParseInt() method extracts an integer value from a text string, while parseFloat() method extracts a whole number (integer plus decimal)

– For example, value of navigator.appVersion property for Netscape 4.7 is:

– 4.7[en]C-CCK-MCD NSCPCDD47 (Win98;I)

• To extract major version number use:var bVer=parseInt(navigator.appVersion);

– and the value of bVer will be 4– If you want to store the full version number in

the bVer variable, use:

var bVer=parseFloat(navigator.appVersion);– which stores value 4.7 in bVer– Most of the time you will need only major

version number since that is used to signify big changes in the software

• These commands also work for all versions of IE, except for IE 5.0, which stores a value of 4.0 in bVer variable!– As long as your page doesn’t contain features

unique to IE 5.0, should not be a problem– Will have to write a more complicated script if

it is important

• Once you know browser type/version, can combine these values in a new variable which you could name “browser” and save them in one compact text string

var browser;

var bName = navigator.appName;

var bVer = parseInt(navigator.appVersion);

if (bName == “Netscape” && bVer == 4) browser=“ns4”;



if (bName == Microsoft Internet Explorer” && bVer == 4) browser=“ie4”;



• For example, if user is running Netscape version 3.0, value of browser variable will be ns3– If user is running IE 4.0 or 5.0, browser

variable will have a value of ie4

Using Object Detection

• Many authors recommend bypassing browser detection entirely and rely on object detection– With object detection, you check which types

of DOM reference names are supported by the browser (if any) and write code to fit the reference name syntax rather than browser type

– Can use fact that Netscape supports document.layers reference name for <DIV> elements, and IE uses document.all to distinguish between the two reference syntaxes

– JavaScript code to do this:

var isNS = false;

var isIE = false;

if (document.layers) isNS=true;

if (document.all) isIE=true;

– The variables isNS and isIE are Boolean variables that indicate whether the object reference syntax follows Netscape or IE convention

– If browser recognizes term “document.layers,” will change value of the isNS variable to true, indicating that browser is using Netscape

– If it recognizes term “document.all,” will change value of isIE to true for IE approach

• This method has advantage that if, at future date, Netscape begins supporting IE reference syntax, authors won’t have to revise code– Other advantage is that it works for browsers

such as Opera which also supports DHTML– Only problem with object detection is that you

can’t distinguish between versions

– If a feature on your site is supported by one version but not another, will still have to test for version number

Employing Cross-Browser Strategies

• Once you know capabilities of browser, will choose a cross-browser strategy– One, called page branching, creates separate

pages for each browser (and could create one for each version) along with an initial page

– When user opens initial page, a script determines capability of browser and automatically loads appropriate page

– See Figure 1-15

– Initial page itself can be used for browsers that don’t support a scripting language

• To automatically load a page into browser based on type of browser detected, use:

location=URL;– where URL is the URL of new page to be loaded– Page branching commands should be placed in

header section to ensure script is run before initial page is loaded

• Following is code for a page that will load AvalonNS.htm page if user’s browser recognizes Netscape reference name– Failing that, will load AvalonIE.htm if it

encounters a browser that supports IE– Presumably you will insert into those two pages

DHTML code that is appropriate for browser detected

– If browser does not support either (or scripting language at all), will finish loading page, displaying H1 header

<HTML>

<HEAD>

<TITLE>Avalon Books</TITLE>

<SCRIPT>

<!--- Hide from non-JavaScript browsers

if (document.layers) {

location.href=“AvalonNS.htm”;}

else if (document.all) {

location.href=“AvalonIE.htm”;}

// Stop hiding --->

</SCRIPT>

</HEAD>

<BODY>

<H1 ALIGN=“CENTER”>Welcome to Avalon Books!</H1>

</BODY>– Page branching requires you to maintain two

versions of same page– In a site with several pages that may have to be

updated daily, lots of extra work

• Second cross-browser strategy is to use internal branching

– Each piece of DHTML code is enclosed in an If…Else statement


JavaScript commands for Netscape;}


JavaScript commands for Internet Explorer;}– This would have to repeated every time you run

a set of DHTML commands

– Internal branching works well for pages without much DHTML code

– Those with a lot will quickly become unwieldy and prone to errors

• Many developers apply third cross-browser strategy: they create an application programming interface

– An application programming interface or API is an external text file that contains custom JavaScript commands and functions

– These customized functions are written to resolve any cross-browser differences

– When you create a page, you link it to the API and use commands from API file in your page rather than placing code with HTML file

– See Figure 1-16

• Will soon learn that Netscape and IE have different commands to hide objects on page– Rather than creating two separate pages or

using internal branching every time you want to run a command to hide an object, a custom function called “hideIt(object)” can be added to API

– General form of the function would be:

function hideIt(object) {


Commands to hide the object in Netscape;}


Commands to hide the object in IE;}}– Once you link to the API file, the hideIt()

command can then be accessed and run from within the page

– If developer wants to hide a particular object when page is loaded, can add following command to <BODY> tag:

<BODY onLoad=“hideIt(object)”>– where object is reference to the object that

needs to be hidden– Since the API is in an external file, the

functions it contains can be used over and over again from different pages in the site

– Author does not have to go through process of reentering code, nor does the developer have to create a browser test for each page since this can be accomplished from within the API

– Speeds up development time and greatly simplifies structure of the document

• If you do create an API file, cannot place it in root directory of your hard drive

– Causes IE to report a security error when accessing the file

• You discuss the various approaches to creating a cross-browser site– Since Avalon Books contains many pages,

agree that creating a custom API is best solution

Creating an API for Avalon Books

• You and Terry decide that the API should contain following types of commands and functions:– Commands to determine reference syntax

supported by browser– Function that resolves syntactical differences in

reference names between the two browsers– Function to place an object at a specific

coordinate on the page

– Function to move an object a certain distance from its current location

– Function that returns left value of object’s position

– Function that returns top value of object’s position

– Function to hide an object– Function to unhide an object

• Most JavaScript APIs have file extension .js, so will name this API “Avalon.js”– First commands will detect type of browser

being used

– See Avalon.js

• This set of commands created two variables, isNS and isIE, that determine reference syntax supported by browser

– By placing these outside a function command block, both isNS and isIE will be global variables and their values will be accessible from any function in the API or in the page

– Will not have to perform browser test more than once

• Next need a function that resolves differences in how objects are referenced by the two browsers

– For this case, will work only with the style attributes of <DIV> objects

– Netscape syntax:

document.id.attribute– and IE syntax:

id.style.attribute– where id is ID name of <DIV> tag and attribute

is the style attribute

– If you know object’s ID name, can create reference name for Netscape by inserting text string “document.” before ID name

– IE reference name can be created by appending text string “.style” to object’s ID name

– Could then apply style attribute to tail end of both reference names

• If the ID of the object is stored in the variable “id,” following commands will store correct object reference for both browsers in a variable named obj:

if (isNS) obj=“document.”+id;

if (isIE) obj=id+”.style”;– Note that obj variable is a text string; not an

object on the page

– To create an object from this text string, would use eval() function

– Eval() funtion will evaluate the text string and create an object based on the reference name

– Entire function would look like:

function getObject(id) {

if (isNS) obj=“document.”+id;

if (isIE) obj=id+”.style”;

var object=eval(obj);

return object;

}

• What the getObject() function will then do is take the object’s ID name and return a variable that points to the object itself--and it will do this correctly for both browsers– To reference the following element:

<DIV ID=“avalon”>Avalon Books</DIV>

– would use the command:

getObject(“avalon”);

• Note that getObject() function works only for objects at top of hierarchy– Would need more complicated function for nested

objects, since Netscape refers to them differently from IE

– Not a problem here--no nested objects– See Avalon_27.js

Positioning Objects with JavaScript

• Have entered building blocks for API file by resolving browser question and reference name issue– Now will create JavaScript functions that will

position and move object correctly– JavaScript’s positioning properties work much

the same as CSS with differences in how Netscape and IE express those properties

• First property to consider is positioning type– Netscape:

id.position=value;– while in IE:

id.style.position=value;– where id is ID name of object to be positioned

and value is type of position• Absolute, relative, or static

– Rare that you would change position type in a script

– In most cases, will set position type in HTML file via style sheet

– Also note that you cannot change position type after page is loaded with Netscape, but you can with IE

• Both provide several different properties for defining coordinate of the object

– See Figure 1-18

• In Netscape, can define object position relative to object’s parent element using left and top properties– Or relative to page using pageX and pageY

properties– In IE, location of object is always relative to

parent element (usually page)

– IE’s top and left properties return a text string indicating both position and the measuring unit

– If you need actual values, should use the pixelTop/pixelLeft or posTop/posLeft properties

– Only difference is first one returns coordinates in pixels; second in whatever unit is indicated in style sheet

• As long as you use pixels as the unit, following are equivalent in Netscape and IE:– In Netscape:

document.id.left=100;

document.id.top=50;

– In IE:

id.style.pixelLeft=100;

id.style.pixelTop=50;

Layering Objects

• Can also use JavaScript to control overlapping objects– Uses zIndex property, which works same way

as z-index style attribute– For Netscape, the following shows the zIndex

values for Avalon and Books objects switched– Will display object listed later in front of upper

object

var Za=document.Avalon.zIndex;

var Zb=document.Books.zIndex;

document.Avalon.zIndex=Zb;

document.Books.zIndex=Za;– Equivalent code for IE:

var Za=Avalon.style.zIndex;

var Zb=Books.style.zIndex;

Avalon.style.zIndex=Zb;

Books.style.zIndex=Za;

• In addition to zIndex property, Netscape supports two additional properties, above and below, which indicate object placed above and below current object– If Avalon object is stacked on top of Books

object, then

document.Avalon.below– refers to Books object, and

document.Books.above– refers to Avalon object– No similar property is available with IE

Controlling Object Visibility

• Both browsers use visibility property to show or hide objects– Unfortunately, while they use same property

name, use different property values– Netscape uses values “show” and “hide”:

document.id.visibility=“show”;

document.id.visibility=“hide”;– while in IE the values are:

id.style.visibility=“visible”;

id.style.visibility=“hidden”;

Working with Overflow and Clipping

• Can control height/width of an object by using JavaScript’s height/width properties– Operate same for Netscape and IE

• If document content is greater than object’s dimensions, IE supports use of overflow property, which works like overflow style attribute– To change overflow of an object in IE:

id.style.overflow=overflow_type;– where overflow_type can be visible, hidden,

scroll, or auto– Netscape doesn’t currently support overflow

property

• Two browsers differ in how they handle the clipping rectangle– See Figure 1-19 for various Netscape properties

for controlling clipping region of an object

• To change clipping region for an object using Netscape:

document.id.clip.top=top;

document.id.clip.right=right;

document.id.clip.bottom=bottom;

document.id.clip.left=left;– where top, right, bottom, and left are coordinates of

top, right, bottom, left edges of the clipping rectangle

– Can also use clip.width and clip.height properties to set width/height of clipping rectangle without specifying exact coordinates

• IE does not support separate properties for each edge– Instead you set value of clip property to a text

string:

id.style.clip=”rect(10, 150, 100, 20)”;

Netscape Layer Methods

• In addition to properties, Netscape also supports methods to give you greater control over position and size of objects– See Figure 1-20

Adding Positioning Functions to the API

• Ready to add some new functions to API– First function will place an object at a specified

(x, y) coordinate– Will use this function later to place objects

function placeIt(id, x, y) {

var object=getObject(id);

if (isNS) {

object.moveTo(x, y);

} else if (isIE) {

object.pixelLeft=x;

object.pixelTop=y;}}– The placeIt() function first takes ID name of an

object and uses getObject() function to create a variable that refers to the object

– If browser is Netscape, object is moved to (x, y) coordiante use MoveTo() method

– If browser is IE, object is moved by modifying values of pixelLeft and pixelTop coordinates

– See Avalon_33.js

• Next function to add shifts an object dx pixels to the right and dy pixels down from current location– Will use this function later to move objects– The function, shiftIt(), is:

function shiftIt(id, dx, dy) {


if (isNS) {

object.moveBy(dx, dy);

} else if (isIE) {

object.pixelLeft=object.pixelLeft+dx;

object.pixelTop=object.pixelTop+dy;}}

• Here we use moveBy() method for Netscape, and for IE add value of dx and dy to object’s current coordinates and then store new coordinate values– All coordinates are expressed in pixels by default– See Avalon_33a.js

• Next two functions will return values of left/top attributes of object’s position

– Will use these two functions later to determine current location of objects

function xCoord(id) {


if (isNS) xc=object.left;

if (isIE) xc=object.pixelLeft;

return xc; }

function yCoord(id) {


if (isNS) yc=object.top;

if (isIE) yc=object.pixelTop;

return yc; }– The xCoord() function calculates value of left

or pixelLeft property for object and stores value in xc variable

– That value is then returned by the function

– The yCoord() functions does same thing with top or pixelTop property

– See Avalon_34.js

• Last two functions will be used to hide and unhide an object

function hideIt(id) {


if (isNS) object.visibility=“hide”;

if (isIE) object.visibility=“hidden”;

}

function showIt(id) {


if (isNS) object.visibility=“show”;

if (isIE) object.visibility=“visible”;

}– See Avalon_35.js

• Should study these custom functions, comparing them to syntax that each browser requires– Nice thing about an API file is that once the

custom function works, won’t worry about cross-browser differences again

• Have completed API– Now will create a link to this file and use the

custom functions to animate your page

Session 1.3

• In this session you’ll link your page to the API file you created and use the API to control placement and movement of objects in the Avalon Books page– Will learn how to create an animated sequence,

and how to control timing of that sequence– Will also learn how to adapt your page for

different monitor resolutions

Linking to an API File

• Have put a lot of work into creating the API file– But the purpose is to remove from the Web

page much of the complexity involved with designing a page for two types of browsers

– Now that the API is written, can use the placeIt(), shiftIt(), and other functions as if they were native to HTML, without worrying about cross-browser problems

• Before you can use commands from API file, have to link the file– Linking to an external file of JavaScript

commands (such as Avalon.js file) involves simply placing a SRC property in a <SCRIPT> tag, located in head section of HTML file

– Need both an opening and closing <SCRIPT> tag

– When browser encounters SRC property, will run any commands from Avalon.js file

– Thereafter, if your code calls any of the functions from the API, browser will be able to retrieve the functions and return the results

• Because of how Netscape handles JavaScript, need to place link to API file after any <SCRIPT> tags– See Avalon_37.html

Designing the Opening Screen

• Terry wants to have single word “Avalon” appear near top and dorp vertically– At a certain point, it should stop dropping and

word “Books” should appear moving to right from behind word Avalon

– After that, the three other images should appear in sequence

• To make this animation work, will place words near top of page

– With Avalon stacked on top of Books to hide it– Will also place three images in current locations

on page, but hidden– While some of these tasks can be performed with

CSS style attributes, will use this opportunity to test the API file you created

– First should remove some of the old style attributes, replacing them with new ones

– See Avalon_38.html

• Now will set initial places for the five objects– Coordinates for AB, Fiction, NFiction objects

should remain unchanged, but avalon and books objects should be at new coordinates

• “avalon”: (175,10)

• “books”: (175,10)

• “AB”: (230,40)--as before

• “Fiction”: (5, 5)--as before

• “NFiction”: (475,5)--as before

• Because these are the coordinates you want when page is loaded, but not necessarily at other times, will set these coordinates within a function called placeObjects– Will run when page is loaded– PlaceObjects() function appears as follows:

function placeObjects() {

placeIt(“avalon”, 175, 10);

placeIt(“books”, 175, 10);

placeIt(“AB”, 230, 40);

placeIt(“Fiction”, 5, 5);

placeIt(“NFiction”, 475, 5); }

• Note that since we’re using placeIt() function from API for this task,

– need to specify only ID name of objects (as a text string)

– API will handle whole cross-browser issue behind the scenes


• The placeObjects() function should be run when page loads, so add this function to the onLoad event handler for <BODY> tag

– See Avalon_40a.html

Animating an Object

• Moving an object in small increments over specified interval creates illusion of animation– First piece of animation will be word “Avalon”

dropping down– Initial position is at coordinate (175,10)– Terry suggests dropping it down to (175,260),

which is same coordinate used earlier when placing objects using style attributes

• Means that as you move object, will need to retrieve y-coordinate, and stop moving word when value exceeds 260– When y-coordinate value exceeds 260, will

then run a function that moves word “Books” to right from behind word “Avalon”

– The moveAvalon() function will appear as:

function moveAvalon() {

var y=yCoord(“avalon”);

if (y <= 260) {

shiftIt(“avalon”, 0, 10);

shiftIt(“books”, 0, 10);

moveAvalon();

} else {

// run moveBooks function; }}

• Couple important things to notice:– First, function retrieves current y-coordinate

from yCoord() function you entered into API– Second, uses shiftIt() function to move both

words down 10 pixels at a time– Remember, you want Books to remain behind

Avalon as it moves down page– Once it has moved these two words, function

calls itself to start moving process over again

– Finally, if y-coordinate exceeds 260, will then run moveBooks function--not written yet--to begin moving word “Books” out from behind “Avalon”

– For now will mark that spot with a comment

• Only other thing missing is some way to control the timing– Browser will process these commands in

milliseconds

– Word “Avalon” will jump down page in blink of an eye

– Need some way to slow down process

Creating a Time-Delayed Command

• JavaScript does not provide a pause command to temporarily halt execution of program code– Can have JavaScript execute a command after a

specified time delay

– Uses the setTimeout command:

setTimeout(“command”, delay);

– where command is a JavaScript command or expression and delay is time in milliseconds

– Command must be placed in quotes– To set a 5 millisecond delay before the

moveAvalon() function is run:

setTimeout(“moveAvalon()”, 5);– Can have several time-delayed commands

running simultaneously– If that’s the case, need to have a way of

separating one time-delayed command from another

– Done by assigning each command an id variable

id_variable = setTimeout(“command”, delay);– To assign the moveAvalon() command its own

ID, could enter:

MAdelay = setTimeout(“moveAvalon()”, 5);

Clearing a Time-Delayed Command

• Id variable becomes important when your script needs to control behavior of a time-delayed command– If you had several time-delayed commands

running, and you wanted to cancel one, would need an ID to indicate which one to cancel

– Canceling a time-delayed command is done by using clearTimeout() method:

clearTimeout(id_variable);

– where id_variable is the ID of the time-delayed command

– To cancel MAdelay command before it’s run:

clearTimeout(MAdelay);– If you have a single time-delayed command,

don’t need the ID; can cancel it with:

clearTimeout();

Running Commands at Specified Intervals

• In some scripts, will want to repeat same command at specified intervals– May write a script displaying current time

which needs to be run every second– To run a command at specified intervals, rather

than after a specified time delay, JavaScript provides setInterval() method

id_variable=setInterval(“command”, interval);

– where id_variable is an ID for the command, command is the JavaScript command that will be run repeatedly, and interval is interval, in milliseconds, between each running

– The id variable is not necessary unless you need to cancel the command at some point

– If you don’t need an ID, or have one time-interval command running, use simpler form:

setInterval(“command”, interval);

• To cancel the command, use clearInterval() method:

clearInterval(id_variable);– or, if you have only a single time-interval, with

no id variable needed:

clearInterval();

• Important point about setTimeout() and setInterval() methods:

– After browser processes command, it proceeds to next command in script and does not wait for delay or interval time to pass

– If you try to use following structure to run three functions at 50 millisecond intervals:

setTimeout(“function1()”, 50);



– browser will run all three almost simultaneously after a single 50 millisecond delay

– To run them with a separation of about 50 milliseconds between them, need to use three different delay times:




Animating the Avalon Books Text

• Now that you know how to control the timing, can add this feature to the moveAvalon() function

function moveAvalon() {

var y=yCoord(“avalon”);

if (y <= 260) {

shiftIt(“avalon”, 0, 10);


setTimeout(“moveAvalon()”, 5);

} else {

// run movebooks function; }}

• Now the function will move the words down 10 pixels, then wait 5 milliseconds before moving them down another 10 pixels– Generally will experiment with several

different movement and time delay values


• Next, script needs to move books out from behind avalon– MoveBooks() function will resemble

moveAvalon() except that it moves only books object and it moves it from left to right

– By trial and error, determine that you should move “books” from (175,260) to (320,260)

– Once text is in location, script should unhide remaining figures

function movebooks() {

var x=xCoord(“avalon”);

if (x <= 320) {


setTimeout(“moveBooks()”, 5);

} else {

– // display the hidden images; }}

• Note that instead of using yCoord() function from API, moveBooks() uses xCoord() to move object in horizontal direction– Also, parameters of shiftIt() function are now

switched so books object moves 10 pixels to right every 5 milliseconds


• Last step is to unhide the three images– Do this in a function calling showIt() function

from Avalon.js API– Decide to unhide each at half-second intervals

function showObjects() {

setTimeout(“showIt(‘AB’)”, 500);

setTimeout(“showIt(‘Fiction’)”, 1000);

setTimeout(“showIt(‘NFiction’)”, 1500); }

– Notice you have to insert object names in single quotes since you have to enclose entire command in double quotes


• May have noticed that in creating this animation, each function called the next one in sequence after it was finished– Common technique to ensure effects are

presented in proper order

Controlling Layout for Different Monitor Resolutions

• Terry noticed that you’ve created page based on monitor resolution of 640 x 480 pixels– What happens when users view page under

other resolutions?

– See Figure 1-31

• At sizes larger than this, images/text move progressively toward upper-left corner of window

– Terry would like to see them remain in center, both horizontally and vertically

– Rather than create a different page for each resolution, think of the objects as existing on a canvas that is 620 by 300 pixels

– Every object would then be offset from left and top edges by a distance equal to size of the border around this imaginary canvas

– Example: if dimensions are 760 x 560, border width would be (760 - 620/2 or 70 and border height would be (560 - 300)/2 or 80 pixels

• Under Terry’s proposal, if the width is W, then the offset in horizontal direction would be (W - 620)/2– If height is H, offset in vertical direction will be

(H - 300)/2

– By adding offsets to current coordinates of each object, display could be centered for any resolution

– However, in order to use this calculation, need to be able to determine width (W) and height (H) of each user’s display window

Calculating the Size of the Display Window

• Netscape and IE use different techniques to calculate width/height of window– In Netscape, these values are properties of

window object, where:

window.innerWidth

window.innerHeight– store the width/height within the browser,

excluding any toolbars, menus, status bars

– To include those elements in the calculation, use the properties:

window.outerWidth

window.outerHeight– IE does not support these properties– Instead, have to measure width/height of the body

of the document

document.body.clientWidth

document.body.clientHeight

• Because of how IE processes this property, it can only be used after entire HTML file has been processed– If you try to evaluate these commands within

header section, error message will result

• To calculate W and H offsets, will add following commands to placeObjects() function:

if (isNS) {

W=(window.innerWidth-620)/2;

H=(window.innerHeight-300)/2;

}

if (isIE) [

W=(document.body.clientWidth-620)/2;

H=(document.body.clientHeight-300)/2; }

– Don’t have to recalculate values of isNS and isIE variables since this has already been done in the API


• Now have to add W and H values to each coordinate in placeObjects() function so that objects are placed in appropriate locations for all windows– See Avalon_52.html

• Also need to change value of the coordinates used to determine where to stop moving Avalon and Books text– See Avalon_53.html

Determining Screen Properties

• For more general info about user’s monitor settings, can use the screen object– See Figure 1-37

Using Path Animation

• Animation you did is an example of linear animation because animation takes place over a straight line, going from one point to the next (either down or to the right)– Another type is path animation, in which each

coordinate in the path is entered into an array and the animation moves from point to point

– Path can be any shape, as shown in Figure 1-38

• Have completed your work on Avalon Books opening page

working with dynamic page layout

Documents

opening page

dynamic html

style attributeswith

placement of objects

objectsplacing objects

avalon booksintroduction

word books

dynamic presentations