jQuery 1.4 Animation Techniques - Index of

[ 209 ]
Chapter 8
}
.slider #scroller { position:absolute; left:0; top:0; }
.slider #scroller img {
display:block; width:150px; height:150px; margin:50px 0 0 50px;
float:left; color:#fff; background-color:#000;
}
.slider #scroller img:first-child { margin-left:0; }
#message {
width:100%; height:30px; padding-top:10px; margin:0;
-moz-border-radius:0 0 8px 8px;
-webkit-border-bottom-radius:8px;
-webkit-border-bottom-right-radius:8px;
border-radius:0 0 8px 8px; position:absolute; bottom:0;
left:0;
background-color:#000; color:#fff; text-align:center;
font:18px "Nimbus Sans L", "Helvetica Neue",
"Franklin Gothic Medium", Sans-serif;
}
3. Save this in the css folder as proximity.css and don't forget to link to it from the
of the HTML page.
What just happened?
Keeping the HTML as simple and as light as possible, we simply add the images that we want
to show to a container element. Any extra elements that we need can be added dynamically
in the nature of progressive enhancement.
There are two sections in the CSS file. The first section is a collection of base styles which
are used if the page is loaded by a visitor that has JavaScript disabled. This ensures that
all of the images are visible and therefore accessible—none of them are hidden or
otherwise obscured.
The second section changes the appearance of the container element and adds styling to
elements or classes that are added dynamically, transforming the appearance of the slider,
provided JavaScript is enabled.
We set the height and width of the container so that only three images are visible at any
one time and set its overflow style property to hidden so that all of the other images are
hidden, ready to be scrolled into view.
We also add positioning for an element with an id of scroller. This element doesn't yet
exist and will be added by the script, which we'll look at shortly. This element will also need
a width, but we can assign this dynamically based on the number of images in the container.