270 likes | 368 Views
JavaScript IV. Robin Burke ECT 270. Outline. Final project reminder Style review Manipulating style Special effect examples. Final project. Grading rubric fill in for your team bring to class next week. Quick review of style. Introduced in the context of CSS
E N D
JavaScript IV Robin Burke ECT 270
Outline • Final project reminder • Style review • Manipulating style • Special effect examples
Final project • Grading rubric • fill in for your team • bring to class next week
Quick review of style • Introduced in the context of CSS • but can be embedded in particular tags • Style is a specification language for layout • Specify • colors • font properties • position
Style Syntax • element-name {style-name1: property1; style-name2: property2} • h1 { font-weight: bold; font-family: sans-serif; } • Or embedded style • <h1 style=" font-weight: bold; font-family: sans-serif;">Title here</h1>
Example • style sheet for course site
Manipulating style • We can manipulate style dynamically • just like other element properties • Each element has an associated style object • setting the properties of this object • change the element's displayed style • editing embedded style
Note • CSS • "-" is style name separator • font-family: Arial, sans-serif • JavaScript • "-" is subtraction operator • style names use lowerUpper syntax • font-family becomes fontFamily • elem.style.fontFamily = "Arial, sans-serif" • Netscape • style property is missing from "schismatic" Netscape versions (4-5) • instead • elem.fontFamily = ...
Cross-browser solution • StyleAPI file if (document.layers) isNS = true; if (document.all) isIE = true; function setFontFamily (elem, family) { if (isIE) elem.style.fontFamily = family; else if (isNS) elem.fontFamily = family; }
Examples • change font color • change font family • button example from 10/27
Manipulating position and boundary • Position is another style property • also boundary via clip property • Many effects possible • animation • drop 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 • How to achieve repeat? • looping is bad • prevent the user from interacting with browser • better solution • use event mechanism • setTimeout(fn, delay) • the function will be called when the delay has passed
Animation examples • linear shift • path animation • snowflakes
Controlling display • Visibility • elem.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
Controlling display, cont'd • 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 area • can't access the rest of the image or contents • To shrink viewing area, but allow access • change size of the element • set overflow property
What to do with excess • Use overflow property
Example • scrollable HTML area
Drop-down effects • Clipping can be used for drop-down menus • purely in HTML • no images
Before clipping After clipping
Note • Book's DOM API is not needed with Mozilla • Book's code is really ugly • mine is better
CSS and JavaScript • Discussed how to modify style of a single element • one property at a time • CSS lets us have classes • We can modify an elements class at run-time elem.className=
Example • rollover • expandable outline
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 styles
Example • rollover
Next week • Grading sheet • Be here at 5:45 pm for presentations • stay to hear your classmates