1. JavaScript V Robin Burke ECT 270

2. Outline Manipulating style Special effect examples

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

4. Manipulating element class Instead of changing style directly change an element's class let CSS define the transformation Benefit style information not buried in JavaScript elem.className = 'new class' why not elem.class?!

5. Example class-based rollover expandable outline

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

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

8. Example validation

9. 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 change affects every element using the style

10. Example rollover

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 Example animation loop repeat until animation ended draw current frame delay change frame

14. Animation, cont'd Problem looping wastes computer resources worse, prevents user interaction Solution "animation callback" uses JavaScript event mechanism

15. Animation callback Caller sends the name of a function a delay Event mechanism waits as specified by the delay calls the function SetTimeout (fn, delay)

16. Animation examples linear shift path animation snowflakes

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

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

19. What to do with excess Use overflow property

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. Next Week No class Monday Wednesday XML Reading: w3schools tutorial (XML Basic only)