Fat Folder Design | Guide

July 23, 2011July 31, 2014

Simple jQuery Rotator

A friend of mine needed a simple image rotor, so after a little pestering I finally decided o make one. It’s dead simple, and theres tons of room for improvement, but it seems to be pretty reliable and they liked it. Figured I’d post it here, perhaps someone can use it and improve upon it.

The script uses 3 parts, first the HTML layout

Snipplr: http://snipplr.com/view/57077/simple-jquery-rotator/

This is pretty simple, you have a container (which isn’t required code-wise), some divs used for the previous and next button sprites (given the IDs rotator_prev and rototor_next respectively) and in the middle is a the rotator_box div, thats the area that actually shows the images or whatever other content you want (The script can handle anything placed in that div). Finally inside the rotator_box there are rotator_set boxes, each one of these has a number at the end of it, each 1 greater than the last. Like I said this was a simple, quickly made rotator.

There is also some CSS applied to this code, the important stuff is below.

#rotator_box{
	width: 354px;
	height: 254px;
	background-color: black;
	display: inline-block;
	vertical-align: middle;
	padding: 4px;
	overflow: hidden;
}

#rotator_box{

width: 354px;

height: 254px;

background-color: black;

display: inline-block;

vertical-align: middle;

padding: 4px;

overflow: hidden;

}

Snipplr: http://snipplr.com/view/57077/simple-jquery-rotator/

The most important part of that is the defined width and height, along with the overflow set to hidden. This gives you a box of the right size to show the content you want, and hides the rest of the content out of view. This can be done in a linear row, a grid, a column, whatever you want, just adjust the width and height.

Finally the last part which pulls it all together, the jQuery script.

$(document).ready(function(){
	var lastloaded = 1
	var maxloadable = $('#rotator_box > div').length;
	$('#rotator_prev').click(function(){
		if(lastloaded-1==0){
			lastloaded = maxloadable;
		}else{
			lastloaded = lastloaded-1;
		}
		update();
	});
	$('#rotator_next').click(function(){
		if(lastloaded+1>maxloadable){
			lastloaded = 1;
		}else{
			lastloaded = lastloaded+1;
		}
		update();
	});
	function update(){
		$("#rotator_box > *:visible").fadeOut(175,function(){
			$("#rotator_set_"+lastloaded).fadeIn(175,function(){
				$("#rotator_set_"+lastloaded).css('opacity','1');
			});
		});
	}
})

$(document).ready(function(){

var lastloaded = 1

var maxloadable = $('#rotator_box > div').length;

$('#rotator_prev').click(function(){

if(lastloaded-1==0){

lastloaded = maxloadable;

}else{

lastloaded = lastloaded-1;

}

update();

});

$('#rotator_next').click(function(){

if(lastloaded+1>maxloadable){

lastloaded = 1;

}else{

lastloaded = lastloaded+1;

}

update();

});

function update(){

$("#rotator_box > *:visible").fadeOut(175,function(){

$("#rotator_set_"+lastloaded).fadeIn(175,function(){

$("#rotator_set_"+lastloaded).css('opacity','1');

});

}

})

Snipplr: http://snipplr.com/view/57077/simple-jquery-rotator/

This script runs on document load and does a few things. First, it defined two onclick events for the next and previous buttons. All they do is add or subtract to the lastloaded variable used to determine what is being displayed, after they do that they run the update function. The update function fades the currently visible items out, and fades the next one in. After it’s faded in, the script reset it’s opacity to 1. This is just a precaution, without the explicit opacity reset click to quickly will cause a minor flitch where an image will no longer fade to full opacity.

Thats it. As I said it was made quickly and simply, but it works great. If you want to see it in action you can check out the Simple jQuery Rotator example, theres some notes in the code (although nothing not covered by this post) and it’s in an external file if you’d like a copy to play around with. If you find a good use for this or make any improvements let me know and I’ll post about them.

July 15, 2011July 31, 2014

Content load on Scroll with jQuery update

This post is primarily an update to me Content load on Scroll with jQuery post. Check it out for more information.

Commenter Mihajlo noted that there was a problem with the Content load on Scroll with jQuery example in Firefox 5 for windows and linux, and before I could even get off work to take a look he posted a fix.

The problem has to do with the browsers cacheing system. When you reload the page it keeps the cached value of the hidden input that keeps track of how far you’ve scrolled, so when you reloaded it would display the initial 50, then jump to wherever you were. The solution is simple, you just need to reset that value once the page is loaded, so that it will overwrite any cached data your browser may be using. The code posted is as simple as it gets

$(document).ready(function() {
	$('#loaded_max').val(50);
});

$(document).ready(function() {

$('#loaded_max').val(50);

});

Snipplr: http://snipplr.com/view/47744/simple-content-load-on-scroll/

You could also fix this by playing with how browsers cache your site, but sine more browsers get it right most of the time, this seems like a better solution to me. I’ve updated the snipplr post and the Content load on Scroll with jQuery example page accordingly. Thanks Mihajlo.

June 4, 2011July 31, 2014

Couple of jQuery selectors

Haven’t had much interesting stuff to do this week so I figured I’d post some jquery selectors I’ve been using for other projects. The first one I found online some time ago and don’t remember who originally made it, the second is one of my own creation.

Case Insensitive Contains

jQuery.expr[':'].Contains = function(a,i,m){
	return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

jQuery.expr[':'].Contains = function(a,i,m){

return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;

};

Snipplr: http://snipplr.com/view/54884/case-insensitive-contains-jquery-selector/

This one was not created by me, but I can’t remember who originally created it. It does the same thing as the built in :contains() selector with one important difference, it’s case insensitive. Since I usually type in all lower case (bad habit I know) I like to use it for filters. It’s also a nice one to use on name filters, that way if the person using the filter doesn’t use the proper case it will still pull of the name, for example if they type in “Delsoto”, but the proper capitalization is “DelSoto” the default :contains() won’t find it, but this modified :Contains() will. Very convient.

Is

jQuery.expr[':'].is = function(a,i,m){
	return jQuery(a).text()==m[3];
};

jQuery.expr[':'].is = function(a,i,m){

return jQuery(a).text()==m[3];

};

Snipplr: http://snipplr.com/view/54885/jquery-is-selector/

This is a simple one I created to be a more accurate varient of the :contains() selector. This will select everything where the contents is exactly what you tell it. It was originally created for a game platform drop-down selector where contains was pulling to many results, for example there are 4 sony system, all with very similar names; Playstation, Playstation 2, Playstation 3, and Playstation Portable. If you use :contains() for “Playstation” you’ll pull all four system. This new :is() selector fixes this and is much faster than looping through a list and comparing them one-by-one.

If you have any questions about these, or happen to know who made that nifty case insensitive one, post and let me know. Use it in a cool project, do the same.