Advanced JQuery Tips Tricks And Solutions

Today, We want to share with you Advanced jQuery Tips Tricks and Solutions.In this post we will show you Pro jQuery Tips, Tricks and Strategies, hear for Helpful jQuery Tricks, Notes, and Best Practices we will give you demo and example for implement.In this post, we will learn about 5 Powerful jQuery Tips and Tricks for Developers with an example.

Advanced jQuery Tips Tricks and Solutions

Contents

There are the Following The simple About Helpful jQuery Tricks, Notes, and Best Practices Full Information With Example and source code.

As I will cover this Post with live Working example to develop Advance jQuery Tips & Tricks for Developers & Designers, so the Top 5 Easy jQuery Tricks for Designers is used for this example is following below.

1) Preloading images

$(document).ready(function() {
    jQuery.preloadImages = function() {
        for (var i = 0; i ").attr("
            src ", arguments[i]);
        }
    }
    $.preloadImages("profile.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() {
        $('link[rel=stylesheet]').attr('href', $(this).attr('rel'));
    });
});

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;
            }
        }
    });
});

5) Get the mouse cursor x and y axis

$(document).ready(function() {
    $().mousemove(function(e) {
        $('#demoXcordinateY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
    });
});

Click here to get all detailed info: jquery tricky examples

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about cool things to do with jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Advanced jQuery Tips Tricks and Solutions