10 Snippets Every JQuery Developer Should Learn To Code

Web development has become a vital aspect of any business marketing strategy. A website built using customized range of elements is more likely to drive better customer attention by providing things at its best especially in terms of creativity and interactivity.

expert jQuery developers

10 JQuery Snippets for Developers

There are numerous JavaScript frameworks available but jQuery is clearly the most popular framework used by over 78% of top million sites. It is meant to make many of those JavaScript functions easier to manage just with a single line of code.

And of course, JQuery’s popularity lies in its simplicity and it seems we can do almost anything and everything we like with this powerful library. For all the options open to us, there are certain elements such as smooth scrolling, fixing broken images automatically, and detecting hover state produced using jQuery to make the website function smoothly.

Down below mentioned are some of the most useful jQuery code snippets recommended by expert jQuery developers of eTatvaSoft that should be taken into account right away.

#1 Detect Internet Explorer Version

When it comes to CSS design, Internet explorer has always been considered as a problem for both developers as well as designers. The IE6’s Dark Age has passed making it less popular across the globe, still it can be detected easily with the help of below-mentioned code.

$(document).ready(function() {

if (navigator.userAgent.match(/msie/i) ){

alert(‘I am an old fashioned Internet Explorer’);

}

});

Of course, this snippet can be used to detect other browsers as well.

Also Read-   How to Do Content Strategy So Effectively?

#2 Smooth scrolling to top of the page

This can be considered as one of the most widely used JQuery effects. Clicking on a link will smoothly move the page to the top. Although, there is nothing new in it but almost every developer tends to write similar kind of function.

$(“a[href=’#top’]”).click(function() {
$(“html, body”).animate({ scrollTop: 0 }, “slow”);
return false;
});

#3 Stay/Fixed on Top

One of the handiest used jQuery snippet that lets an element to stay on top of the page. Moreover, it is highly used for the navigation menu, toolbars or messages.

$(function(){
var $win = $(window)
var $nav = $(‘.mytoolbar’);
var navTop = $(‘.mytoolbar’).length && $(‘.mytoolbar’).offset().top;
var isFixed=0;

processScroll()
$win.on(‘scroll’, processScroll)

function processScroll() {
var i, scrollTop = $win.scrollTop()

if (scrollTop >= navTop && !isFixed) {
isFixed = 1
$nav.addClass(‘subnav-fixed’)
} else if (scrollTop <= navTop && isFixed) {
isFixed = 0
$nav.removeClass(‘subnav-fixed’)
}
}

#4 Replace HTML tag by another

$(‘li’).replaceWith(function(){
return $(“<div />”).append($(this).contents());
});

#5 Detect viewport width

Now that mobile devices have become pretty much in vogue. It is super useful to be able to easily detect a smaller viewpoint. This means it is super easy to do with jQuery
var responsive_viewport = $(window).width();

/* if is below 481px */
if (responsive_viewport < 481) {
alert(‘Viewport is smaller than 481px.’);
} /* end smallest screen */

#6 Automatically fix broken images

In case, if the site is big and has been online for a couple of years, the risk of having broken images increases. Hence, using this function will not only simply detect broken images but even replace it with an image of your choice, noticing visitors regarding the problem.

$(‘img’).error(function(){
$(this).attr(‘src’, ‘img/broken.png’);
});

#7 Detect Copy, Paste and Cut Behavior

With jQuery, it’s super easy to detect copy, paste and cut behaviors on an element of your choice.

$(“#textA”).bind(‘copy’, function() {
$(‘span’).text(‘copy behaviour detected!’)
});
$(“#textA”).bind(‘paste’, function() {
$(‘span’).text(‘paste behaviour detected!’)
});
$(“#textA”).bind(‘cut’, function() {
$(‘span’).text(‘cut behaviour detected!’)
});

#8 Automatic target=”blank” attribute to external links

If linking to an external site, as a jQuery developer you may wish to use the “target=”blank”” attribute in order to open the site in a new tab. Since, the attribute isn’t W3C valid it requires a snippet to detect if the link is external or not.

var root = location.protocol + ‘//’ + location.host;
$(‘a’).not(‘:contains(root)’).click(function(){
this.target = “_blank”;
});

#9 Fade In/Out on Hover

Another extraordinary snippet to carry in your toolbox. Chances are there that you may require to implement it every now and then.

$(document).ready(function(){
$(“.thumbs img”).fadeTo(“slow”, 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads

$(“.thumbs img”).hover(function(){
$(this).fadeTo(“slow”, 1.0); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo(“slow”, 0.6); // This should set the opacity back to 60% on mouseout
});
});

#10 Disable space in text/password inputs

In fields like email, username, password, etc, spaces aren’t much needed. So what can be done is?

$(‘input.nospace’).keydown(function(e) {
if (e.keyCode == 32) {
return false;
}
});

These are a few pieces of jQuery code that I found myself using at every now and then. I hope you bookmark this page.

[10 JQuery Snippets]

Rakesh Patel

Rakesh Patel is Marketing Manager at eTatvaSoft - web & mobile app development company. He writes about Technology Trends, Leadership and many more things about IT services and enabled people to learn about new technologies through his online contribution.

Latest posts by Rakesh Patel (see all)

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of
0Shares