Putting in a little extra effort Adding a loop indicator

The rotating stickies are great! Yet, while the client will only have three or four stickies rotating at any given time, it's a good practice to at least let a user know about how long a view they're in for should they decide to look at all the rotations. Most rotating slide shows have an indicator somewhere to let a user know how many panels are going to be displayed and allowing the user to navigate around the panels.

Let's see about adding this functionality to our rotating posts. First up, we'll need to create a little interface. Inside our #stickyRotate wrapper that we created in the previous code, after the last sticky post object, I'll add in a div with inline styles. Again, this is not necessarily ideal for a working project, but I want to make each step clear. In reality, you'll probably create custom stylesheets or amend the theme you're working on. At any rate, here's our interaction holder. I've placed this code at the bottom of my previous code inside the jQuery document ready function:

jQuery('.sticky:last') .after('<div id="stickyNav"

style="position: absolute; padding: 10px 0 0 0; margin-top: 280px; height: 25px; width: 650px; color: #eee; background: #000; text-align: center"></div>');

And below that code, we'll add some more jQuery which will insert numbers for each sticky post into the #stickyNav div we just created:

jQuery('.sticky')

jQuery('#stickyNav').fadeTo(0, 0.8) .append("<div class='sN'

style='display:inline; margin: 0 5px;

border: 1px solid #999;

padding: 2px 5px;'>"+(i+1)+"</div> ");

This code uses another each function, but we only need, and want, it to run once, and append the numbers 1 through 3 (or however many sticky posts we have)

to the #stickyNav div.

Last, to really finalize this effect, we'll need to dip back inside our loopStickies function. Inside the .animate function's call back function, we'll add the following code that's in bold:

jQuery('.sticky')

/*i = numeric value that will increase with each loop*/

jQuery(this)

/*make sure each div is on it's own z-index*/ .css('z-index','i+10')

/*using the animate function for timing*/ .animate({'backgroundColor': '#000000'}, i*duration, function(){

jQuery(this).fadeIn('slow');

//interactivity jQuery("#stickyNav .sN").css(,color,,,#666666'); jQuery('#stickyNav .sN:eq(,+i+,),).css(,color,,,#ffffffl);

Using the :eq() selector in the previous code, we're able to target the corresponding number in the interface display and make it stand out compared to the other numbers. This allows users to see how many slides there are, and which slide they're on.

Home Everts About Contact

You know you can't live without itl Just wait til your friends catch you in this ride!

Lorem ipsum dolor sit am et, eonsectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna ahqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi

You know you can't live without itl Just wait til your friends catch you in this ride!

Lorem ipsum dolor sit am et, eonsectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna ahqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi

Blogging For Business

Blogging For Business

Download this Guide And Discover How Start And Run Your Very Own Successful Business Blog. Always Wanted To Start Your Own Blog?

Get My Free Ebook


Post a comment