10 jQuery Snippets For Enhanced Website Performance

02 May. 2016 Software Development

Over a past few years, web development has become a vital aspect of any business marketing strategy. A website that is built using customized elements will more likely drive better consumer attention making it visually creative and interactive. A lot of custom elements such as smooth scrolling, fixing broken images automatically, detecting hover state, etc., can be added to make your website function smoothly.

jQuery Snippets For Web Development

Web Development Using jQuery

Such custom elements are commonly produced using jQuery. It is an easy-to-use, simple and powerful library used by developers within the web pages which helps to simplify the DOM manipulation. With only a few lines of codes, you can create a myriad of custom elements and enhanced animations without having to use Flash. It also allows you to modify an existing element in a number of ways as well as decrease the load time of your webpages.

In order to develop and insert the custom elements into your website, take a look at the following list of 10 jQuery snippets that will help you shave off your web development time.

10 jQuery Code Snippets for Enhanced Web Development

1. Smooth Scrolling to the Top of the Page:

This is one of the commonly used jQuery effect – a click on a link that smoothly scrolls to the top of the page. It is a must-use for every developer as they will have to code similar function multiple times.

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

2. Automatically fix the Broken Images:

There are times when a website which is large and has been online for a number of years, conduces to the risk of broken image links. Replacing such broken links one by one can be a tedious task. In such scenario, adding the below code can help deplete a lot of headaches. Even if there are no broken image links on your site, adding this code will not do any harm.

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

3. Stay on Top:

This one is a handy jQuery snippet that lets an element stay on top of the page. It is highly useful 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. Detect Viewport Width:

Today, the slender-stylish smartphones have become way popular than the old and gigantic computers. The below jQuery code can be helpful in detecting a smaller viewport easily.

var responsive_viewport = $(window).width();
/* if is below 481px */
if (responsive_viewport < 481) {
alert('Viewport is smaller than 481px.');
} /* end smallest screen */

5. Disable Space in Input Fields:

Many form fields such as email, username, password, etc., do not require any spaces in it. The simple line of code below helps to quickly disable spaces on selected inputs.

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

6. Toggle Slide/Fade:

Slides and fades are used a lot in animations using jQuery. The Fadein and sldieDown are best-suited methods if you want to display an element when something is clicked. The below jQuery code will work fine if you want that element to appear on the first click and disappear on the second.

// Fade
$( “.btn” ).click(function() {
$( “.element” ).fadeToggle(“slow”);
});

// Toggle
$( “.btn” ).click(function() {
$( “.element” ).slideToggle(“slow”);
});

7. Replace HTML Tag by Another:

There are endless possibilities for replacing HTML tag by another with jQuery. And, this piece of code just makes its super easy.

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

8. Detect Copy, Cut, and Paste Behavior:

With the jQuery code below, it is super easy to detect the copy, cut and paste behavior on your choice of an element on the site.

$(“#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!’)
});

9. Check Image Loading:

If your website has some heavy images, it is important to check if the images are fully loaded so as to continue with the scripts. The three-line code below can easily do that for you. You can further check if a particular image has loaded by simply replacing the img tag with a class or ID.

$(‘img’).load(function() {
console.log(‘image load successful’);
});

10. Stop Link Loading:

At times, you may not want a particular link to be redirected to a page or even reloaded. Or just want it to perform some other action like trigger another script. In this case, the code below can help you do the trick of restricting the default action.

$(‘a.no-link’).click(function(e){
e.preventDefault();
});

Using the above code pieces will help you provide better user experience to your customers. Bookmark this page and feel free to copy these handy jQuery snippets whenever you require.

Developers at Rishabh Software are domain experts and experienced in developing hybrid mobile applications using core technologies like jQuery and others. Learn about the tools and technologies we utilized to develop a custom iOS News App that delivers engaging user experience.

Get a Free ConsultationTalk to our experts to get the best suited web solution for your business

Follow Us
Subscribe to the Blog
Get a Free Consultation
Reach out to our team to get a free consultation for your next projectContact Us