8 jQuery tips and tips for programmers and jquery tips for programmers

Source: Internet
Author: User

8 jQuery tips and tips for programmers and jquery tips for programmers
1) Disable right-click

JQuery programmers can use this code to disable right-clicking on a webpage.

12345678910 $(document).ready(function() {    //catch the right-click context menu    $(document).bind("contextmenu",function(e) {                         //warning prompt - optional        alert("No right-clicking!");         //delete the default context menu        return false;    });});
2) Adjust the text size using jQuery

With this code, you can resize the text on the website (increase or decrease)

1234567891011121314151617181920212223242526272829 $(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);  });});
3) Open the link in the new Windows

Try this code and increase your site impressions because using this jquery code users will go on new window after clicking on any link of your site. Code is below :-

12345 $(document).ready(function() {    //select all anchor tags that have http in the href    //and apply the target=_blank    $("a[href^='http']").attr('target','_blank');});
4) Style Sheets Swap

Swap style sheets using this code and the "Style sheets swap" script is below :-

123456 $(document).ready(function() {    $("a.cssSwap").click(function() {         //swap the link rel attribute with the value in the rel            $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));     }); });
5) return to the top Link

That is very common function you can see on eve site nowadays is "Back to Top ". this functionality is very useful for long pages for make short in a single click. visit this code below :-

1234567 $(document).ready(function() {    //when the id="top" link is clicked    $('#top').click(function() {        //scoll the page back to the top        $(document).scrollTo(0,500);    }});
6) obtain the x and Y axes of the mouse cursor.

You can find the values of X and Y coordinator of mouse pointer. Code is blow :-

1234 $().mousemove(function(e){    //display the x and y axis values inside the P element    $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);});
7) detect the current mouse coordinates

With this script, you can find the coordinates of the current mouse in any Web browser supported by jQuery. The Code is as follows:

12345 $(document).ready(function() {$().mousemove(function(e){$('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);});


8) pre-load images in jQuery

This image pre-loaded script helps to quickly load images or webpages. You don't have to wait for the image to load. Code:

12345678910111213 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…');});

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.