Website interaction is an important trend that can and does make a site more professional.
Content sliders, faders, switchers, and movers are all examples of popular website interactions and the topic of this tutorial series. My aim is to describe how to combine several of these techniques to create an impressive and complex effect. I will be using HTML, CSS, and the jQuery JavaScript Library as I go along.
In "Part One," I set my goals and described in some detail the content manipulator from Mendocino County, California's online presence. One of our readers, BOBCAT007, had specifically requested an explanation of how this relatively complex content mover, slider, and fader worked, and that request was the impetus for this series.
Step No. 3: Laying Out Page Content
At the end of "Part One," I had created a basic HTML shell, and styled it with a couple of lines of CSS. The result was a photo-centric canvas on which to build.
The Mendocino content manipulator has four foils that fade and slide. For my example, I am going to imitate this structure and place four foils on the page. I want those foils displayed against an element that will frame them. I place the following code inside of the "content" div.
<div id="frame"> </div><!--end frame-->
Here is the code in the context of the HTML "shell."
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Armando's Alpine Outfitter</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="style.css">
<script src="modernizr-1.6.min.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<h3><img src="header.png" alt="Armando's Alpine Outfitter" /></h3>
</header>
<div id="content">
<div id="frame">
</div><!--end frame-->
</div>
<footer>
</footer>
</div> <!--! end of #container -->
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="jquery-1.4.2.js"%3E%3C/script%3E'))</script>
</body>
</html>
I add some CSS to make this frame look presentable.
/*Build the frame*/
#frame {width: 900px; height: 470px; border-radius: 0 20px 0; -moz-border-radius: 0 20px 0; border-bottom: 1px solid #575757; border-right: 1px solid #8b8b8b; background: #fff; background-image: -webkit-gradient(linear, 30% 60%, 0% 5%, from(#fff), to(#575757)); background-image: -moz-linear-gradient(30% 60% 120deg, #fff, #575757 50%); opacity: .4;}
The important parts to notice are the width and height. The background, border radius, and gradient are just graphic design elements. I should note that only the newest versions of the most popular browsers support all of these declarations.
Next, I am going to add four nested div elements, one for each foil. These div elements will each have unique id attributes so that I may easily reference them in the CSS or jQuery. Inside of each div, I am going to place an image and another nested div element for more content.
<div id="frame"></div><!--end frame--> <div id="foil-1"> <img src="foil-img-1.png" alt="Scarpa Boots are great for reaching high" /> <div class="foiled"></div> </div> <div id="foil-2"> <img src="foil-img-2.png" alt="High in your Skis" /> <div class="foiled"></div> </div> <div id="foil-3"> <img src="foil-img-3.png" alt="Arcteryz gear for real mountaineering" /> <div class="foiled"></div> </div> <div id="foil-4"> <img src="foil-img-4.png" alt="Hardcore mountaineering" /> <div class="foiled"></div> </div>
Ultimately, I may want to add images, movies, or lists to the foiled elements. But for now, I am just going to include some Latin text as a space holder.
<div id="frame"></div><!--end frame--> <div id="foil-1"> <img src="foil-img-1.png" alt="Scarpa Boots are great for reaching high" /> <div class="foiled"><p>Suspendisse potenti. Donec volutpat libero a purus mattis laoreet. Donec sit amet justo orci. Aliquam erat volutpat. Sed interdum ligula eget felis laoreet consectetur. Nullam eu velit sit amet risus rhoncus tristique. Aliquam vel purus eget libero mollis tempor at in magna. Sed pulvinar scelerisque elit, ut eleifend tellus suscipit ornare. Aliquam eget lorem sodales est tristique eleifend. Aliquam mi mauris, semper id sagittis vel, semper vitae lacus. Duis quis orci est, et pharetra justo. Proin placerat vestibulum justo. Vestibulum fermentum metus et turpis adipiscing ac pharetra nibh tristique.</p></div> </div> <div id="foil-2"> <img src="foil-img-2.png" alt="High in your Skis" /> <div class="foiled"><p>Suspendisse potenti. Donec volutpat libero a purus mattis laoreet. Donec sit amet justo orci. Aliquam erat volutpat. Sed interdum ligula eget felis laoreet consectetur. Nullam eu velit sit amet risus rhoncus tristique. Aliquam vel purus eget libero mollis tempor at in magna. Sed pulvinar scelerisque elit, ut eleifend tellus suscipit ornare. Aliquam eget lorem sodales est tristique eleifend. Aliquam mi mauris, semper id sagittis vel, semper vitae lacus. Duis quis orci est, et pharetra justo. Proin placerat vestibulum justo. Vestibulum fermentum metus et turpis adipiscing ac pharetra nibh tristique.</p></div> </div> <div id="foil-3"> <img src="foil-img-3.png" alt="Arcteryz gear for real mountaineering" /> <div class="foiled"><p>Suspendisse potenti. Donec volutpat libero a purus mattis laoreet. Donec sit amet justo orci. Aliquam erat volutpat. Sed interdum ligula eget felis laoreet consectetur. Nullam eu velit sit amet risus rhoncus tristique. Aliquam vel purus eget libero mollis tempor at in magna. Sed pulvinar scelerisque elit, ut eleifend tellus suscipit ornare. Aliquam eget lorem sodales est tristique eleifend. Aliquam mi mauris, semper id sagittis vel, semper vitae lacus. Duis quis orci est, et pharetra justo. Proin placerat vestibulum justo. Vestibulum fermentum metus et turpis adipiscing ac pharetra nibh tristique.</p></div> </div> <div id="foil-4"> <img src="foil-img-4.png" alt="Hardcore mountaineering" /> <div class="foiled"><p>Suspendisse potenti. Donec volutpat libero a purus mattis laoreet. Donec sit amet justo orci. Aliquam erat volutpat. Sed interdum ligula eget felis laoreet consectetur. Nullam eu velit sit amet risus rhoncus tristique. Aliquam vel purus eget libero mollis tempor at in magna. Sed pulvinar scelerisque elit, ut eleifend tellus suscipit ornare. Aliquam eget lorem sodales est tristique eleifend. Aliquam mi mauris, semper id sagittis vel, semper vitae lacus. Duis quis orci est, et pharetra justo. Proin placerat vestibulum justo. Vestibulum fermentum metus et turpis adipiscing ac pharetra nibh tristique.</p></div> </div>
The result on page is something of a mess.
I add style declarations for the foil div, including setting height and width attributes for the foiled elements.
/* Declarations for the Divs */
#foil-1, #foil-2, #foil-3, #foil-4 {position: relative; left: 10px;}
#foil-1 {top: -460px;}
#foil-1 img, #foil-2 img, #foil-3 img, #foil-4 img {border-radius: 0 20px 0; -moz-border-radius: 0 20px 0; border: 10px solid #fff;}
.foiled {width: 860px; height: 430px;}
This styles the position of my first foil.
Seeing the foil in place, I decide to add one more div element to the page. This new div will make it easier to hide the bottom portion of the foil.
<div id="conceal">
Here is the updated HTML.
<div id="content">
<div id="frame"></div><!--end frame-->
<div id="conceal">
<div id="foil-1">
<img src="foil-img-1.png" alt="Scarpa Boots are great for reaching high" />
<div class="foiled"><p>Suspendisse potenti. Donec volutpat libero a purus mattis laoreet. Donec sit amet justo orci. Aliquam erat volutpat. Sed interdum ligula eget felis laoreet consectetur. Nullam eu velit sit amet risus rhoncus tristique. Aliquam vel purus eget libero mollis tempor at in magna. Sed pulvinar scelerisque elit, ut eleifend tellus suscipit ornare. Aliquam eget lorem sodales est tristique eleifend. Aliquam mi mauris, semper id sagittis vel, semper vitae lacus. Duis quis orci est, et pharetra justo. Proin placerat vestibulum justo. Vestibulum fermentum metus et turpis adipiscing ac pharetra nibh tristique.</p></div>
</div>
<div id="foil-2">
<img src="foil-img-2.png" alt="High in your Skis" />
<div class="foiled"><p>Suspendisse potenti. Donec volutpat libero a purus mattis laoreet. Donec sit amet justo orci. Aliquam erat volutpat. Sed interdum ligula eget felis laoreet consectetur. Nullam eu velit sit amet risus rhoncus tristique. Aliquam vel purus eget libero mollis tempor at in magna. Sed pulvinar scelerisque elit, ut eleifend tellus suscipit ornare. Aliquam eget lorem sodales est tristique eleifend. Aliquam mi mauris, semper id sagittis vel, semper vitae lacus. Duis quis orci est, et pharetra justo. Proin placerat vestibulum justo. Vestibulum fermentum metus et turpis adipiscing ac pharetra nibh tristique.</p></div>
</div>
<div id="foil-3">
<img src="foil-img-3.png" alt="Arcteryz gear for real mountaineering" />
<div class="foiled"><p>Suspendisse potenti. Donec volutpat libero a purus mattis laoreet. Donec sit amet justo orci. Aliquam erat volutpat. Sed interdum ligula eget felis laoreet consectetur. Nullam eu velit sit amet risus rhoncus tristique. Aliquam vel purus eget libero mollis tempor at in magna. Sed pulvinar scelerisque elit, ut eleifend tellus suscipit ornare. Aliquam eget lorem sodales est tristique eleifend. Aliquam mi mauris, semper id sagittis vel, semper vitae lacus. Duis quis orci est, et pharetra justo. Proin placerat vestibulum justo. Vestibulum fermentum metus et turpis adipiscing ac pharetra nibh tristique.</p></div>
</div>
<div id="foil-4">
<img src="foil-img-4.png" alt="Hardcore mountaineering" />
<div class="foiled"><p>Suspendisse potenti. Donec volutpat libero a purus mattis laoreet. Donec sit amet justo orci. Aliquam erat volutpat. Sed interdum ligula eget felis laoreet consectetur. Nullam eu velit sit amet risus rhoncus tristique. Aliquam vel purus eget libero mollis tempor at in magna. Sed pulvinar scelerisque elit, ut eleifend tellus suscipit ornare. Aliquam eget lorem sodales est tristique eleifend. Aliquam mi mauris, semper id sagittis vel, semper vitae lacus. Duis quis orci est, et pharetra justo. Proin placerat vestibulum justo. Vestibulum fermentum metus et turpis adipiscing ac pharetra nibh tristique.</p></div>
</div>
</div><!--end conceal-->
</div>
<footer>
</footer>
</div> <!-- end of #container -->
By setting the height attribute of this new div and hiding the overflow, I can effectively make the Latin text at the bottom of the first foil disappear. In this process, I take the top declaration that I had applied to the first foil and apply it here.
#conceal {height: 450px; overflow: hidden; position: relative; top: -460px; }
Now, I need to reposition the other foils so that they are all stacked up, one on top of the other.
#foil-2 {top: -900px;}
#foil-3 {top: -1800px;}
#foil-4 {top: -2700px;}
Each image is 450 pixels high, including its border. Each foiled div is 450 pixels high. So to stack the foils, I need to move 900 pixels for each foil. Foil number two moves up 900 pixels. Foil number three moves up 1,800 pixels, and foil number three must move up 2,700 pixels.
As a result, the fourth foil is now on top, stacking above each of the other three in descending order.
Summing Up
With most of the page layout in place, it is time to build a jQuery timer to fade from one image to the next. But I am going to save that for the forthcoming "Part Three" of this tutorial series.
Related Articles
- Using jQuery to Make Complex Content Manipulation Easy, Part One
- Build A Flash-Powered Content Slider from Scratch, Part 1
- Sliding and Gliding Page Content with JavaScript
