JavaScript IV

1. JavaScript IV Robin Burke ECT 270

2. Outline • Final project reminder • Style review • Manipulating style • Special effect examples

3. Final project • Grading rubric • fill in for your team • bring to class next week

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

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

6. Example • style sheet for course site

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

8. 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 = ...

9. 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; }

10. Examples • change font color • change font family • button example from 10/27

11. Manipulating position and boundary • Position is another style property • also boundary via clip property • Many effects possible • animation • drop down menus

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

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

14. Animation examples • linear shift • path animation • snowflakes

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

16. Controlling display, cont'd • Clipping • Can set the size of the container smaller than its contents • elem.style.clip = rect(x1, y1, x2, y2);

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

18. What to do with excess • Use overflow property

19. Example • scrollable HTML area

20. Drop-down effects • Clipping can be used for drop-down menus • purely in HTML • no images

21. Before clipping After clipping

22. Note • Book's DOM API is not needed with Mozilla • Book's code is really ugly • mine is better

23. 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=

24. Example • rollover • expandable outline

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

26. Example • rollover

27. Next week • Grading sheet • Be here at 5:45 pm for presentations • stay to hear your classmates