BootStrap

Developing interactive components for websites usually require the same code like equal div Height, Browser detection, preloading images, disabling right-click.. etc.



Yeah you guessed it right, today we gonna share some life saving jQuery snippets that will help you do simple tasks.

01- Display Loading Graphic Until Page Fully Loaded

$(window).load(function() {
    // Animate loader off screen
    $("#loader").animate({
        top: -200
        }, 1500);
});
// where loader is <img src="download.png" id="loader">
//and first element to be loaded.

02- How to Bind a function to an event

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

03- Smooth scrolling to an anchor

$(document).ready(function() {
	$("myLink").click(function() {
		$("html, body").animate({
			scrollTop: $($(this).attr("href")).offset().top + "px"
		}, {
			duration: 450,
			easing: "easeOutBounce"
		});
		return false;
	});
});

04- How to Switch StyleSheets With jQuery

	$('link[media='screen']').attr('href', 'Alternative.css');

05- Add :nth-of-type to jQuery

$.expr[':']['nth-of-type'] = function(elem, i, match) {
    var parts = match[3].split("+");
    return (i + 1 - (parts[1] || 0)) % parseInt(parts[0], 10) === 0;
};

06- How to find out the index of an element in an unordered set

$(document).ready(function(){
 $("ul > li").click(function () {
     var index = $(this).prevAll().length;
 });
});

07- Disable right mouse click

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});

08- How to refresh the src of an image with jQuery

$(document).ready(function(){
   $(imageobj).attr('src', $(imageobj)
           .attr('src') + '?' + Math.random() );
});

09- Automatically Discover Document Links And Apply Class

$(document).ready(function(){
   $('a[href]').each(function() {
   if((C = $(this).attr('href').match(/[.](doc|xls|pdf)$/))) {
       $(this).addClass(C[1]);
   }
});
});

10- Better Broken Image Handling

//  images that a browser can't find fire off an "error" JavaScript event we can watch for.
$('img').error(function(){
        $(this).attr('src', 'missing.png');
});

// Or, hide them
$("img").error(function(){
        $(this).hide();
});

Hope this helps.

This entry was posted on Monday, January 2nd, 2012 at 4:20 pm

and is filed under Tutorials .
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.