10.5 Dynamic Styles
An element's style can be changed dynamically. Often such a change is made in
response to user events, which we discuss in Chapter 11. Such style changes can
create many effects, including mouse hover effects, interactive menus, and
animations.
Figure 10.4 is a simple example that changes the background-color
style property in response to user input.
Dynamic styles. (Part 1 of 2.)
Dynamic styles. (Part 2 of 2.)
Dynamic styles. (Part 2 of 2.)
Function start (lines 12–17) prompts the user to enter a color name, then
sets the background color to that value. [Note: An error occurs if the
value entered is not a valid color.] We refer to the background color as
document.body.style.backgroundColorthe body property of the document object
refers to the body element. We then use the style property (a property of most
XHTML elements) to set the background-color CSS property. This is referred to as
backgroundColor in JavaScriptthe hyphen is removed to avoid confusion with the
subtraction (-) operator. This naming convention is consistent for most CSS
properties. For example, borderWidth correlates to the border-width CSS
property, and fontFamily correlates to the font-family CSS property. In general,
CSS properties are accessed in the format node.style.styleproperty.
Figure
10.5 introduces the setInterval and clearInterval methods of the window
object, combining them with dynamic styles to create animated effects. This
example is a basic image viewer that allows you to select a Deitel book cover
and view it in a larger size. When one of the thumbnail images on the right is
clicked, the larger version grows from the top-left corner of the main image
area.
The body (lines 66–85) contains two div elements, both floated left using
styles defined in lines 14 and 17 in order to present them side by side. The
left div contains the full-size image iw3htp4.jpg, which appears when the page
loads. The right div contains six thumbnail images which respond to the click
event by calling the display method and passing it the filename of the
corresponding full-size image.
The display function (lines 46–62) dynamically updates the image in the left
div to the one corresponding to the user's click. Lines 48–49 prevent the rest
of the function from executing if interval is defined (i.e., an animation is in
progress.) Line 51 gets the left div by its id, imgCover. Line 52 creates a new
img element. Lines 53–55 set its id to imgCover, set its src to the correct
image file in the fullsize directory, and set its required alt attribute. Lines
56–59 do some additional initialization before beginning the animation in line
61. To create the growing animation effect, lines 57–58 set the image width and
height to 0. Line 59 replaces the current bigImage node with newNode (created in
line 52), and line 60 sets count, the variable that controls the animation, to
0.
Line 61 introduces the window object's setInterval method, which starts the
animation. This method takes two parametersa statement to execute repeatedly,
and an integer specifying how often to execute it, in milliseconds. We use
setInterval to call function run every 10 milliseconds. The setInterval method
returns a unique identifier to keep track of that particular intervalwe assign
this identifier to the variable interval. We use this identifier to stop the
animation when the image has finished growing.
Dynamic styles used for animation.
a) The cover viewer page loads with the cover of this
book. (Part 1 of 4.)
b) When the user clicks the thumbnail of C How to Program, the full-size image begins growing from the top-left corner of the window. (Part
2 of 4.)
c) The cover continues to grow. (Part 3 of 4.)
d) The animation finishes when the cover reaches its full size. (Part 4 of 4.)
The run function, defined in lines 28–42, increases the height of the image
by the value of speed and updates its width accordingly to keep the aspect ratio
consistent. Because the run function is called every 10 milliseconds, this
increase happens repeatedly to create an animated growing effect. Line 30 adds
the value of speed (declared and initialized to 6 in line 24) to count, which
keeps track of the animation's progress and dictates the current size of the
image. If the image has grown to its full height (375), line 35 uses the
window's clearInterval method to stop the repetitive calls of the run method. We
pass to clearInterval the interval identifier (stored in interval) that
setInterval created in line 61. Although it seems unnecessary in this script,
this identifier allows the script to keep track of multiple intervals running at
the same time and to choose which interval to stop when calling clearInterval.
Line 39 gets the image and lines 40–41 set its width and height CSS
properties. Note that line 40 multiplies count by a scaling factor of .7656 in
order to keep the ratio of the image's dimensions consistent with the actual
dimensions of the image. Run the code example and click on a thumbnail image to
see the full animation effect.
This section demonstrated the concept of dynamically changing CSS styles
using JavaScript and the DOM. We also discussed the basics of how to create
scripted animations using setInterval and clearInterval.