Date post: | 17-Jan-2018 |
Category: |
Documents |
Upload: | cecily-bruce |
View: | 225 times |
Download: | 0 times |
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)