Useful jQuery snippets

February 2, 2009
Categories: Web Design

For those who don’t know snippets a small and handy pieces of code that is always helpful to have by your side instead of rewriting or search in Internet or in your brain… The second one is especially hard.

Alright, let’s go:

1. Smooth color change

Very cool thing, you got to install Colour Animation plugin and code:

$(document).ready( function() {
$(“.mainMenu a, .articleTitle a”).mouseover( function() {
$(this).animate({color: “#cc4e4e”}, {queue:false, duration:250 });
}).mouseout( function() {
$(this).animate({color: “#0e8db7”}, { queue:false, duration:350});
});

});

2. Check all checkboxes of certain object

// context = id of the element checkboxes inside of which we need selected
function checkall(context){
$(“#”+context).find(“input[@type$=’checkbox’]”).each(function(){
this.checked = checked;
});
}

3. The amount of elements selected

$(‘element’).size();

4. Radiobutton status

var var_name = $(“input[@name=’radio_name’]:checked”).val();

5. Class switch

$.fn.swapClass = function(c1, c2){
return this.each(function(){
var t = $(this);
(!t.is(‘.’+c1)) ?
t.addClass(c1).removeClass(c2) : t.addClass(c2).removeClass(c1);
});
}

or shorter:

$(‘#element’).toggleClass(‘selected’);

6. Check for window size change

function doSomething() {
alert(“I finished changing the window size”);
};

var resizeTimer = null;
$(window).bind(‘resize’, function() {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(doSomething, 100);
});

Well so far this is all I got. If you guys have any snippets you wouldn’t mind sharing, please submit them below! Snippet topic is limited by client-side web applications (JS, CSS, HTML)

Have a great day!

Comments

Contact Us