It is true that we can do anything with jQuery. Today I’m sharing some rocking jQuery code snippets from 2014. In my point of view, these code snippets are part of every web development project nowadays. Enjoy these jQuery code snippets from 2014.
Zebra stripped unordered list
This is a method of having different colors each line on a list. Very handy to use for tables and plain divs.
[code type=”php”]
$(‘li:odd’).css(‘background-color: #000’);
[/code]
How to make two divs of same height
If you want to make two divs of same height via jQuery, this little jQuery code will help you out.
[code type=”php”]
$(‘.first_div’).css(‘min-height’, $(‘.second_div’).height());
[/code]
How to create smooth accordion with jQuery
Just create necessary HTML markup on page, and use this simple code for creating simple accordion.
[code type=”php”]
//First close all the panels
$(‘#panel’).find(‘.data’).hide();
//Now accordion
$(‘#panel’).find(‘.data_header’).click(function() {
var find_next = $(this).next();
find_next.slideToggle(‘fast’);
$(‘.data’).not(find_next).slideUp(‘fast’);
return false;
});
[/code]
Toggle fade
This code snippet is related to animation.
[code type=”php”]
//Code for toggle
$(‘.button’).click(function() {
$(‘.element’).slideToggle(‘slow’);
});
//Code for fade
$(‘.button’).click(function() {
$(‘.element’).fadeToggle(‘slow’);
});
[/code]
How to stop the loading of links with jQuery
[code type=”php”]
$(‘a’).click(function(e) {
e.preventDefault();
}
[/code]
How to disable input fields with jQuery
[code type=”php”]
$(‘input [type=”submit”]’).attr(‘disabled’, true);
[/code]
How to toggle a class on hover with jQuery
[code type=”php”]
$(‘.button’).hover(function() {
$(this).addClass(‘new_class’);
}, function() {
$(this).removeClass(‘new_class’);
});
[/code]
How to fix broken images with jQuery automatically
[code type=”php”]
$(‘img’).error(function() {
$(this).attr(‘src’, ‘img/not_found.png’);
});
[/code]
How to check if images are loaded fully
[code type=”php”]
$(‘img’).load(function() {
console.log(‘images successfully loaded’);
});
[/code]
How to create back to top button with jQuery
First create an HTML anchor tag.
[code type=”php”]
<a href=”#”>Back to top</a>
[/code]
[code type=”php”]
// jQuery Code
$(‘a.to_top’).click(function() {
$(document.body).animate({scrollTop : 0 }, 500);
return false;
});
[/code]
How to remove class after delay in jQuery
[code type=”php”]
var anchor = $(‘#anchor’);
setTimeout(function() {
anchor.removeClass(‘current’);
}, 3000);
[/code]
How to clear a file input
[code type=”php”]
var input = $(“#control”);
function something() {
input.replaceWith(input.val(”).clone(true));
};
[/code]
How to center a div on div with jQuery
[code type=”php”]
// Centers on screen
jQuery.fn.center = function (div) {
this.css(“position”, “absolute”);
var position = div.position();
this.css(“top”, Math.max(0, ((div.height() – this.outerHeight()) / 2) + position.top) + “px”);
this.css(“left”, Math.max(0, ((div.width() – this.outerWidth()) / 2) + position.left) + “px”);
return this;
};
//use
$(‘#ajxload’).center($(‘#mapWrapper’)).show();
[/code]
How to detect browser with jQuery
[code type=”php”]
//http://api.jquery.com/jQuery.browser/
// Mozila
if ($.browser.mozilla) {
alert( “this is firefox” );
}
// Opera
if ($.browser.opera) { $(“.yourclass”).remove(); }
// Webkit
if ($.browser.webkit) {
alert( “this is webkit!” );
}
// MSI
if ($.browser.msie) {
alert( “this is MSI” );
}
[/code]
How to disable scrolling with jQuery
[code type=”php”]
// Prevent Scrolling
$(document).bind(“touchmove”,function(event){
event.preventDefault();
});
[/code]
How to fade in sequence with jQuery
[code type=”php”]
if($j(‘body’).is(‘#mtvGuy’)){
//Hide before the fade
$j(‘div#sideNav li’).hide();
/**
* Side Navigation fade in loop
*/
function outer(){
var a = 0;
function inner(){
if(a===$j(‘div#sideNav li’).length){return;}
a++;
$j(‘div#sideNav ul li’).eq(a).fadeIn(210,function(){fader();});
}
return inner;
}
var fader = outer();
fader();
}
[/code]
How to find all internal links with jQuery
[code type=”php”]
var siteURL = “http://” + top.location.host.toString();
var $internal_Links = $(“a[href^='”+siteURL+”‘], a[href^=’/’], a[href^=’./’], a[href^=’../’], a[href^=’#’]”);
[/code]
How to fix z-index problem in IE (Internet Explorer)
[code type=”php”]
// jQuery version
$(function() {
var zIndexNumber = 1000;
// Put your target element(s) in the selector below!
$(“div”).each(function() {
$(this).css(‘zIndex’, zIndexNumber);
zIndexNumber -= 10;
});
});
// MooTools version
if(Browser.Engine.trident){
var zIndexNumber = 1000;
// Put your target element(s) in the selector below!
$$(‘div’).each(function(el,i){
el.setStyle(‘z-index’,zIndexNumber);
zIndexNumber -= 10;
});
};
[/code]
How to insert element between other elements
[code type=”php”]
$(“p:not(:last-of-type)”).after(“<br />”);
[/code]
