1 / 27

JavaScript IV

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

Download Presentation

JavaScript IV

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related