Cool and useful jQuery Tips, Tricks and Solutions

jQuery is a new kind of JavaScript Library. It is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Use of the jQuery library is growing and growing (just released jQuery 3.3.1), more and more people are using this useful javascript library.

This means that more and more useful jQuery tips, tricks and solutions are coming available. That’s why I created a small list of 5 cool & useful jQuery tips, tricks and solutions.

jQuery tutorials will help you to learn the essential features of the latest jQuery framework, from the basic to advanced topics step-by-step, so that you can create interactive and stunning web pages yourself with much less effort.

jQuery has a lot of very useful plugins that can help you with almost anything, but there are a couple of plugins that aren’t that smart to use, why?

Well sometimes 1 or 2 lines of jQuery code can do the same thing (or even better), so why use a big script if you can do the same trick with a small piece of code.

1) Preloading images

$(document).ready(function() {
    jQuery.preloadImages = function() {
        for (var i = 0; i ").attr("
            src ", arguments[i]);
        }
    }
    // how to use
    $.preloadImages("image1.jpg");
});

2) Disable right-click

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

3) CSS Style Switcher

$(document).ready(function() {
    $("a.Styleswitcher").click(function() {
        //swicth the LINK REL attribute with the value in A REL attribute
        $('link[rel=stylesheet]').attr('href', $(this).attr('rel'));
    });
    // how to use
    // place this in your header - the links
    Default Theme
    Red Theme
    Blue Theme
});

4) Smooth(animated) page scroll

$(document).ready(function() {
    $('a[href*=#]').click(function() {
        if (location.pathname.replace(/^/ / , '') == this.pathname.replace(/^/ / , '') &&
            location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target ||
                $('[name=' + this.hash.slice(1) + ']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body')
                    .animate({
                        scrollTop: targetOffset
                    }, 900);
                return false;
            }
        }
    });
    // how to use
    // place this where you want to scroll to - the link
    go to top
});

5) Get the mouse cursor x and y axis

$(document).ready(function() {
    $().mousemove(function(e) {
        //display the x and y axis values inside the div with the id XY
        $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
    });
});

Click here to get all detailed info: http://api.jquery.com/