Download presentation
Presentation is loading. Please wait.
Published byAnnice Hensley Modified over 9 years ago
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 Title here
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.