Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • 5 Useful jQuery Tricks for every Programmer

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 285
    Comment on it

    jQuery is a feature-rich JavaScript library. jQuery makes the things like animation,events handling, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

    Here we are sharing some useful jQuery tricks that can be used by any programmer in any of his project.

    1) Disable Right-Clicking

    We see most of the non-technical internet try to copy the website content by selecting it and then copying it by using right click of the mouse. We can disable this by using the following below code. This will just disable the right click in any of the webpage where the script of jQury is written.

    $(document).ready(function() {
    	//Detects the right-click context menu
    	$(document).bind("contextmenu",function(e) {				 
    		//warning prompt - optional
    		alert("No right-clicking in this page!");
    
    		//delete the default context menu
    		return false;
    	});
    });

     

    2)Back to Top Link

    We see in many websites that when we scroll down any webpage, the backto top link appears in the webpage and then when we click on that link, we scrolls up automatically at the top of the page.

    We can apply this setting in our webpage by using the following code

    $(document).ready(function() {
    	//when the id="top" link is clicked
    	$('#top').click(function() {
    		//scoll the page back to the top
    		$(document).scrollTo(0,500);
    	}
    });

    3) Preloading Images in jQuery

    This feature quickly load the images in the webpage when the website loads.

    jQuery.preloadImagesInWebPage = function() 
    {
         for(var ctr = 0; ctr<arguments.length; ctr++)
    {
    jQuery("").attr("src", arguments[ctr]);
    }
    }
    To use the above method, you can use the following piece of code:
    $.preloadImages("image1.gif", "image2.gif", "image3.gif");
    To check whether an image has been loaded, you can use the following piece of code:
    $('#imageObject').attr('src', 'image1.gif').load(function() {
    alert('The image has been loaded');
    });

    4)  Open Links in New Windows

    This code will help to get the more page views into your website. Whenever visitor clicks on any of the url, the link will always opens in the new tab.

    $(document).ready(function() {
    	//select the links
    	//and apply the target=_blank
    	$("a[href^='http']").attr('target','_blank');
    });

    5) Text Resize with jQuery

    With the help of this code of jQuery, user can resize  the text of websites. This code will find the current font size and user can change the font size of that page dynamically.

    $(document).ready(function() {
    	//find the current font size
    	var originalFontSize = $('html').css('font-size');
    
    	//Increase the text size
    	$(".increaseFont").click(function() {
    		var currentFontSize = $('html').css('font-size');
    		var currentFontSizeNumber = parseFloat(currentFontSize, 10);
    
    		var newFontSize = currentFontSizeNumber*1.2;
    		$('html').css('font-size', newFontSize);
    		return false;
    	});
    
    	//Decrease the Text Size
    	$(".decreaseFont").click(function() {
    		var currentFontSize = $('html').css('font-size');
    		var currentFontSizeNum = parseFloat(currentFontSize, 10);
    
    		var newFontSize = currentFontSizeNum*0.8;
    		$('html').css('font-size', newFontSize);
    		return false;
    	});
    
    	// Reset Font Size
    	$(".resetFont").click(function(){
    	$('html').css('font-size', originalFontSize);
      });
    });

     

     

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: