Feb 09
jQuery Sequential List
Have you ever had to manually code something that is sequential? Didn’t you find it annonying? Well, here is a simple solution for you. This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. The second example will show you how to add a comment counter to a comment list using jQuery’s prepend feature.
1a. Insert jQuery Code
First, download a copy of jQuery. In between the <head> tag, insert the jQuery code:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#step li").each(function (i) {
i = i+1;
$(this).addClass("item" i);
});
});
</script>
The jQuery will output the source code as:
1b. CSS Code
Style the <li> element with a background image accordingly (step1.png, step2.png, step3.png, and so on..).
#step .item1 {
background: url(step1.png) no-repeat;
}
#step .item2 {
background: url(step2.png) no-repeat;
}
#step .item3 {
background: url(step3.png) no-repeat;
}
2a. Add Sequential Content
You can also use this technique to add sequential content using jQuery’s prepend feature. The following example shows how you can add a counter number to a comment list.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#commentlist li").each(function (i) {
i = i+1;
$(this).prepend('<span class="commentnumber"> #' i '</span>');
});
});
</script>
The code will add the <span class="commentnumber"> tag (with # + 1) to each <li> tag.
2b. CSS
Style the <li> element with position:relative and use position:absolute to place the .commentnumber to the top right corner.
#commentlist li {
position: relative;
}
#commentlist .commentnumber {
position: absolute;
right: 0;
top: 8px;
}
Jobs for Designers and Developers Dache: Logo Design Process
Comments
Pages: 12 11 10 9 8 7 6 5 4 3 2 … 1 » Show All
There are 114 comments (+Add)
Pages: 12 11 10 9 8 7 6 5 4 3 2 … 1 » Show All
Loading ...
114 Izrada Web Stranica http://www.design21th.com
August 31st, 2010 at 11:19 am
Very Nice! THX!
113 Progs4u http://www.progs4u.net
July 6th, 2010 at 11:02 pm
Thank you so much ..
You are very cool
112 Applina http://agneseventuri.it
June 16th, 2010 at 11:45 am
there are a error in the first example
the line:
$(this).addClass("item" i);it generates a error, and perhaps don’t work
the correct is:
$(this).addClass("item"+i);thanks a lot!
111 Nikos
June 11th, 2010 at 6:19 am
very cool well done
110 Abhishek http://aapki-naukri.blogspot.com/
May 26th, 2010 at 1:30 am
Very Nice post…
109 ijhj http://www.cominvbr.com
May 18th, 2010 at 3:28 am
unda
108 Agon
May 13th, 2010 at 4:41 am
thanks for a great explained tutorial…
107 Kathryn Merlihan http://kathrynmerlihan.com
May 11th, 2010 at 1:34 pm
Excellent use of jQuery! I’m using this for all my ordered lists with sequential images. One thing to note for all you developers out there: There is a typo in figure 1a (above).
This line - $(this).addClass(”item” i); is missing the plus sign (+) between “item” and i. To get the above code working replace
$(this).addClass(”item” i); with
$(this).addClass(”item”+i);
Still a great tutorial! Very clear and informative.
Cheers,
Kathryn
106 Web Design http://exmmedia.com
April 28th, 2010 at 8:18 pm
very informative,…thank you:)
105 bernardzodiac http://bernardzodiac.blogspot.com/
March 27th, 2010 at 7:28 am