As i said before, i will show you some more nice tricks on that carousel. Today i will show you how can you put a fully automated pagination.

How it works?

A page have five items. So we need to scroll five items with one click. We take the full width of carousel items wrapper (UL) and divide to carousel width (div.carousel). To be sure we will have an integer number, we will round up the number (using Math.ceil()). After that, we will insert a link for each page between previous and next link. So, here how I did it: (to avoid confusion, i will use italics for previous/next links - which actually is the carousel control)
(more…)

If you ever used jQuery UI Accordion before, you probably notice that sometimes you have an annoyng bug when you change between accordion items: the bottom of the accordion jumps few pixels. Why is that? That’s why because Dimension plugins (which is included on last version of jquery, by the way) doesn’t know to compute very well the dimensions if you have padding/border attributes.

So, what can I do, perhaps you ask yourself?

• Don’t use padding and borders anymore. Uh… Not too reliable, isn’t?
• Use extra markup. Well… Is not too elegant, but is the best (and also the simplest) way to get rid of headaches! So the only thing you must do is to wrap all accordion item content into a div :

(more…)

Ok, as ai said you before, i want to make a tutorial about a more advanced carousel than previous was.

I won’t explain HTML and CSS code (is very simple and intutive):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<div class="carousel">
	<div class="ctrls">
		<a href="#" class="prev">Previous</a>
		<a href="#" class="next">Next</a>
	</div>
<ul class="clearfix">
	<li><img src="http://farm4.static.flickr.com/3164/2719962411_77cf9e1699_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3159/2720786298_d33f97bfcd_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3280/2719962373_f49bb3e2a2_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3001/2720787742_d2f263372c_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3046/2720787680_8f358f938e_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3108/2719963843_f2e963af8f_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3141/2719965289_83902cf96c_t.jpg" alt="" /></li>
 
	<li><img src="http://farm4.static.flickr.com/3164/2719962411_77cf9e1699_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3159/2720786298_d33f97bfcd_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3280/2719962373_f49bb3e2a2_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3001/2720787742_d2f263372c_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3046/2720787680_8f358f938e_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3108/2719963843_f2e963af8f_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3141/2719965289_83902cf96c_t.jpg" alt="" /></li>
</ul>
 
 
</div>

CSS file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

* {margin:0;padding:0;}
 
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {display:inline-block}
/* Hide from IE Mac \*/
.clearfix {display:block}
/* End hide from IE Mac */
* html .clearfix {height:1px}
.carousel {
	position: relative;
	overflow:hidden;
	height:500px;
	width:540px;
	margin:50px auto
}
	.carousel .ctrls {
		margin:10px
	}
	.carousel ul {
		position: absolute;
		width:8000px;
	}
		.carousel li {
			float:left;
			width:98px;
			height:98px;
			border: 1px solid #fff;
			list-style:none;
			margin-right:10px;
			text-align: center;
		}

The good part of this carousel is that you can have as many as you want in your page. You can have both fixed and fluid width and will work with no problem. Or at least no problem: on fluid layout, some images can be cutted. So, the best use is fixed width. Also, you can have autoscroll (with timers, i will say more later), but is not recommended because you may encounter some performance troubles.

After we include last version of jQuery, we have to do these things:

1) Iterate trough all .carousel containers (if you want to pick another name, this is the place and this is also the time!) and set the width.

1
2
3
4
5

$('.carousel').each(function(){
	var _this=this;
	var elWidth = $(_this).find('li:eq(0)').width()+12;
	$(_this).find('ul').width(elWidth*$(_this).find('li').length).css('left', 0);
});

We assume that all LI have same width, 10px margin and a border. So we adjust the width with 12 px (2px from border). If you have a wider margin (or none) change it, otherwise you will have some serious problems

The previous/next buttons we will control with a separate function, because we don’t have double scroll on double click, right? We put the function INSIDE of the each loop:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

function carouselCtrls () {
	$(_this).find('a.prev').unbind().click(function(){
		$(this).unbind();
		if(parseInt($(_this).find('ul').css('left'))<0) {
			$(_this).find('ul').animate({
				left: '+='+elWidth
			}, function(){
				carouselCtrls();
			});
		}
		return false;
	});
	$(_this).find('a.next').unbind().click(function(){
		$(this).unbind();
		var maxWidth = (parseInt($(_this).find('ul').width())-$(_this).width()-10)-(-parseInt($(_this).find('ul').css('left')));
		if(maxWidth>0){
 
		$(_this).find('ul').animate({
			left: '-='+elWidth
		}, function(){
				carouselCtrls();
			});
		}else {
			$(_this).find('ul').animate({left:0},function(){
				carouselCtrls();
			});
		}
		return false;
	});
	};

One of the most useful thing on forms is an “autoselect” function. How is this work? Let’s assume that you have a standard search box:

When textbox is focused you can do three things:

1. Do nothing. Let the user to delete all text. Not good for lazy people, right?
2. Autoclear box. But if user want only to change a letter (typo) or add another word, then he should re-type all things. Not good for usability.
3. Autoselect box content. Is just like the user double clicks on the text. How can you do this? Read further to see

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var initValue;
$(document).ready(function(){
$(':text').each(function(){
	$(this).focus(function(){
		initValue = $(this).attr('value');
		$(this).select();
	});
	$(this).blur(function(){
		if($(this).val() == ''){
			$(this).val(initValue);
		}
	});
});
});

What is the best thing with this? Well… If an user just leave the text box blank, that form is auto filled with previous value.

Pretty nice, huh? Well… I think is pretty useful too

Did you ever ask yourself how can you display a “loading” indicator when you make ajax calls using various libraries?

The simple but efficient answer is this:

1
2
3
4
5
6

$(document).ready(function(){
$('<div id="busy">Loading...</div>')
        .ajaxStart(function() {$(this).show();})
        .ajaxStop(function() {$(this).hide();})
        .appendTo('body');
});

And that’s all. You need to do this only once.

Ofcourse, you can apply some CSS styles to #busy div, using an image generated with ajaxload or something similar.

I didn’t use any other libraries (actually i used prototype with scriptaculous sometime like AGES ago), but i think all cool libraries (like jQuery) have similar methods.

Another great news: with MORE than 50 fixes (but no new features tough) jQuery UI 1.5.1 is out.