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: 11 10 9 8 7 6 5 4 3 2 1 » Show All
There are 104 comments (+Add)
Pages: 11 10 9 8 7 6 5 4 3 2 1 » Show All
Loading ...
104 sbobet http://www.sbobet-th.com
March 4th, 2010 at 3:40 am
Thank.JQuery only is for presentation
103 Adnan http://abcoder.com
February 28th, 2010 at 4:59 am
Never mind… to me it is useless and makes no sense. You are using 3 different images for 1, 2, 3. Why not a single image for background and put the numbers in text?
Ya I know the font you are using for the “Step 1″, “Step 2″, “Step 3″ may not be in the system and it has a little glow effect. For that I’ll use “Cufon” technology.
Also using css you can apply “Step 1″ instead of “1″ to OL (ordered list) or any elements
For an example:
body {counter-reset:step;
}
li:before
{
counter-increment:step;
content:"Step " counter(step);
}
102 Sune http://sunebrostrom.com
February 28th, 2010 at 4:43 am
Thanks for this great tutorial!
One thing though; remember to use the “string operator” when combining literals and variables:
var variable = "text" + otherVariable + "more text";101 vincentdresses http://www.hibridal.com
January 6th, 2010 at 1:43 am
喜欢你们的设计与技术，常来看看
100 Motti http://www.horesh-studios.com
December 15th, 2009 at 6:55 pm
very nice ideas
made me look at some stuff a bit differently, thanks for the great info!
99 sebastien http://sebastienhiticas.com
November 12th, 2009 at 6:35 am
usefulll tks !
98 Mike http://www.comastore.com
October 31st, 2009 at 5:09 am
very nice job
97 Richard Pergament
October 7th, 2009 at 3:02 am
I would be a bit careful with this one, make sure that the sequential programming generated by JQuery only is for presentation, and not content.
96 Cody
October 5th, 2009 at 10:37 am
@palance
Replying #87, I have this problem too. I believe you have to modify the code a bit. In this tutorial it only loops through the <li> element. That’s why the number doesn’t reset at another <ol> element. I guess……just add another loop for <ol>, like…”for each” <ol>, we loop the <li>.
I’m a newbie of jQuery, but seems like the below code had solved the problem,
$('ol#step').each(function () {
$(this).find('li').each(function (i) {
i = i+1;
$(this).addClass('item' + i);
});
});
Hope this helps.
I’m looking forward to a cleaner solution too~~
95 Cyrus
September 21st, 2009 at 9:17 am
Great , jQuery Sequential List
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com