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.
Table of Contents
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.
#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.
[AdSense-A]
$(“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.
[AdSense-A]
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.
[AdSense-A]
[10 JQuery Snippets]
- 10 Snippets Every JQuery Developer Should Learn To Code - September 2, 2017