Content sliders, movers, and faders are a key feature of many new site designs, and, frankly, sometimes with all of the moving and shaking it can be difficult to keep track of what your code is doing.
In this series of tutorials, I have been discussing what it takes to build a complex content manipulator using HTML, CSS, and the jQuery JavaScript library. In "Part One" and "Part Two" of this series, I laid the foundation for my example slider/fader. "Part Three" focused on getting the actual images and text (which collectively I have been calling foils) moving.
In this section of the tutorial, I am going to use jQuery to both create and add some foil navigation. Ultimately, this navigation will allow users to select a particular slide, momentarily pausing the fading motion. But first, I just need to get the elements added to the document object model (DOM).
Step No. 5: Add Foil Navigation
I am going to create and place the foil navigation with a single function that has several tasks to complete:
- It must discover how many foils exist.
- It must initialize a new array to store a representation of each foil.
- It will need to append a parent element to the DOM to hold the new array.
- It will need to fill the array with foil representatives.
- It will need to add the individual array items to the page.
- It will need to bind an event listener to the navigation to watch for clicks.
In jQuery, this seemingly long list of needs will be easy to code.
First, I create two variables: one to count the foils and one to create the array.
function foilNavPut(){
var count = $('#conceal > div').length,
fnav = new Array;
Notice the use of the jQuery selector $('#conceal > div') that grabs the exact elements I need.
Next, as listed above, I am going to create a parent element to contain my foil representatives. For this, I want to use an unordered list.
$('#conceal').append('<ul id="foil-nav"></ul>');
In this line of code, I first use jQuery to select a div element with the id "conceal." In my HTML document, this div contains all of the foils, which, as stated above are a combination of text and images. For context, here is the 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>
With the parent unordered list added to the DOM, I turn my attention to creating an array of numbers that will represent my foils. I have already created an empty array fnav above for this very purpose. I could manually insert a number for each item in the array, but I would rather take care of this dynamically.
To begin, I check to make sure that there is at least one foil using a conditional statement.
if(count>0){
If at least one foil exists, I am going to initialize a loop, using the count variable introduced above to set the number of times the loop will run.
for(var i=0; i<count; i++){
Inside of the loop, I simply use literal notation to set the value of each successive item in the array.
fnav[i] = i+1;
Notice that I am using the variable i twice. First, it specifies the particular array item that I want to set a value for and then it helps assign that value. I am adding one to each array item's value since numeric arrays in JavaScript are zero-based.
If I have four foils, which I do in the example, my array would now look like [1,2,3,4].
As each array item is created, I also add it to the DOM using jQuery's append().
$('#foil-nav').append('<li>' + fnav[i] +'</li>');
This line of code places a new list item inside of the foil-nav unordered list and gives the list item one of the values from the array.
My function needs to do just one more thing. It needs to listen and be prepared to take some action when a user clicks. I am going to watch for the event at the unordered list since doing so will give me a small performance advantage over placing an event listener on each list item.
$('#foil-nav').bind('click', function(){foilNav(event)});
To bind — add event listeners to — elements in jQuery, I first name the element to watch. I then bind it, identifying the type of event — "click" in the example — and specifying some action. In this case, jQuery will call a yet-to-be-created function named foilNav, passing it the information about the click event.
My function is now ready.
function foilNavPut(){//places foil navigation on the page
var count = $('#conceal > div').length,
fnav = new Array;
$('#conceal').append('<ul id="foil-nav"></ul>');
if(count>0){
for(var i=0; i<count; i++){
fnav[i] = i+1;
$('#foil-nav').append('<li>' + fnav[i] +'</li>');
}
$('#foil-nav').bind('click', function(){foilNav(event)});
}
}
I also add a call for the function in my document from "Part Three."
$(document).ready( function(){
foils = $('#conceal > div');
counter = (foils.length - 1);
fadeFoils();
foilNavPut();
});
When the example page is reloaded, it now features foil navigation.
Summing Up
In this "Part Four" of the tutorial, I have demonstrated how to add elements to the DOM using jQuery. In the next section, I will make this new navigation function so that when a user clicks on a specific number that number's foil appears.
Related Articles
- Using jQuery to Make Complex Content Manipulation Easy, Part One
- Using jQuery to Make Complex Content Manipulation Easy, Part Two
- Using jQuery to Make Complex Content Manipulation Easy, Part Three
