Tag Archives: jquery

AutoCarousel – Let’s make things rolls!

Posted on by
2

Ok, so it’s been a while, huh? I promised you i will learn how to autoslide previous carousel. Now you can find how (is ridiculous!)

Ok, so we will use previous slider and we add this at the end of the script:

var slideThis = window.setInterval("$('.carousel').find('a.next').trigger('click')", 1000);
$('.carousel').bind('mouseenter', function(){
	window.clearInterval(slideThis);
}).bind('mouseleave', function(){
	slideThis = window.setInterval("$('.carousel').find('a.next').trigger('click')", 1000);
});

Ok, what happened? Well… let see:

1) We set an interval of how often carousel should ride. The time is in milliseconds, so 1000 is one second. If you want five seconds you put 5000 and so on. I defined a variable for slide because we want to be able to manipulate somehow. Every time you set a timer (either is setInterval or setTimeout) you will get an ID of that timer. If you don’t want to interact with slider, just remove the variable :)
2) On mouseenter event, we clear the previous timer, based on previous ID;
3) On mouseleave event we set the interval back. And… This is it :D

Ok, you may wonder why i used mouseenter/mouseleave events instead of hover. I don’t know if the problem is with jQuery or with Javascript (i admit, i DON’T know Javascript!), but when you use hover, on first element inside of your hovered element you will simply loose… hover. Is weird, sounds complicated, but if you try this, you will see what i mean ;)

But wait, what will I do if I have more than one slider?
As I said before, i suck at javascript. I know some basic timer tricks and… that’s it. Maybe is possible to use same function for many sliders, i don’t know. I never need more than one auto-slider on a page :D Anyhow, i saw there is a problem with timers when you have too many (high CPU usage) so.. use carefully.

Advanced Carousel – Part II

Posted on by
1

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)
Continue reading →

jQuery UI Accordion jump bug

Posted on by
2

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 :

Continue reading →

Advanced Carousel

Posted on by
5

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):




		
		
	


    

    • 

    • 

    • 

    • 

    • 

    • 

    • 

    • 

    • 

    • 

    • 

    • 

    • 

    •

CSS file:

* {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. 

$('.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 :D

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:

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;
	});
	};


Let see how it works (i will explain only one link because the other one works same – but reverted):
Continue reading →

One nice form trick

Posted on by
3

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? :D
  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 :) 
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 :)