JavaScript V

Robin BurkeECT 270

Outline

Manipulating style Special effect examples

Manipulating style

We can manipulate style dynamicallyjust like other element properties

Each element has an associated style objectsetting the properties of this objectchange the element's displayed styleediting embedded style

Manipulating element class

Instead of changing style directlychange an element's classlet CSS define the transformation

Benefitstyle information not buried in

JavaScript elem.className = 'new class'

why not elem.class?!

Example

class-based rollover expandable outline

Visibility

Style property controls whether an element is shown on the page

Why would I want to hide content?so I can show it later, dynamically

Controlling visibility

Visibilityelem.style.visibility = "hidden";

• or "visible", "inherit"• element takes up space but can't be seen

elem.style.display = "none";• or ""• element takes up no space

Example

validation

Modifying a style associated with a class Stylesheets themselves are objects

Accessed via styleSheets[] array Each style sheet has an array of rules

cssRules[] (NS)rules [] (IE)

We can inspect and modify the styleschange affects every element using

the style

Example

rollover

Manipulating position and boundary Position is another style property

also boundary via clip property Many effects possible

animationdrop down menus

Implementation

Relevant DOM properties elem.style.left elem.style.top

Problem these are string values with units

• "5 px", "10 in" Solution

IE-specific• elem.style.pixelLeft• integer valued

use text processing• parseInt to get value• value + "px" to set

Animation

Repeated display with transformation Example animation loop

repeat until animation ended• draw current frame• delay• change frame

Animation, cont'd

Problemlooping wastes computer resourcesworse, prevents user interaction

Solution"animation callback"uses JavaScript event mechanism

Animation callback

Caller sendsthe name of a functiona delay

Event mechanismwaits as specified by the delaycalls the function

SetTimeout (fn, delay)

Animation examples

linear shift path animation snowflakes

Controlling display Clipping

Can set the size of the container smaller than its contents

elem.style.clip = rect(x1, y1, x2, y2);

Controlling display, cont'd

Clipping creates a viewing areacan't access the rest of the image or

contents To shrink viewing area, but allow

accesschange size of the elementset overflow property

What to do with excess

Use overflow property

Drop-down effects

Clipping can be used for drop-down menuspurely in HTMLno images

Before clipping

After clipping

Note

Book's DOM API is not needed with Mozilla

Book's code is really uglymine is better

Next Week

No class Monday Wednesday XML

Reading: w3schools tutorial (XML Basic only)