Useful Jquery Code Snippets For Responsive Websites

by admin admin Date: 21-06-2018 jquery coding snippets web development


When you have to manage a web project, jQuery can be of great help. In this article, we have compiled some jQuery tips and tricks for making and enhancing responsive sites.

Detect viewport size

CSS media-queries allow you to detect the viewport size and apply different CSS style to elements depending on the viewport width.

This can also be done in jQuery, and it can be very useful to achieve results you couldn’t using CSS alone. The following example shows how to detect the viewport width, and subsequently add an element to a list.

if ($(window).width() < 960) {
$( "ul.mylist").append("<li>One more list element</li>");  
}  

Source: CSS Tricks

Animate Height/Width to “Auto”

If you have tried using thing.animate({ "height": "auto" }); on an element, you've noticed that it didn't work. Happily, there's a quick and efficient fix to this problem.

Here's the function:

jQuery.fn.animateAuto = function(prop, speed, callback){
var elem, height, width;return this.each(function(i, el){    
el = jQuery(el), elem = el.clone().css({"height":"auto","width":"auto"}).appendTo("body");    
height = elem.css("height"),    width = elem.css("width"),    
elem.remove();  if(prop === "height")  
el.animate({"height":height}, speed, callback);    
else if(prop === "width")  
el.animate({"width":width}, speed, callback);else if(prop === "both")  
el.animate({"width":width,"height":height}, speed, callback);
});    

And how to use it:

$(".animateHeight").bind("click", function(e){$(".test").animateAuto("height", 1000);   
});    
$(".animateWidth").bind("click", function(e){$(".test").animateAuto("width", 1000);   
});    
$(".animateBoth").bind("click", function(e){$(".test").animateAuto("both", 1000);   
});  

Source: CSS Tricks

Scroll to an element

Scrolling endlessly on a smartphone isn’t the most fun thing ever. This is why it can be very useful to set scrolls so your visitors won’t need to take 10 seconds to reach the info they’re looking for.

Let start with an auto-scroll: The code below will programmatically scroll to a specific element on the page:

$('html, body').animate({scrollTop: $("#target").offset().top  }, 1000);  

Now, let’s set a scroll that the user will activate by clicking on a link:

$('a#source').on('click', function(event) {$('body').scrollTo('#target');  });  

Lazy load images

Lazy loading is a technique that forces a page to only load images which are visible on the clients' screen. It has proven to be very effective for improving your website loading speed, which is extremely important in terms of user experience and SEO.

There are lots of jQuery plugins dedicated to implement lazy loading on your site. If you're using WordPress, I definitely recommend this one.

As for jQuery lazyload plugins, I've been using this one, simply called Lazy Load, on a few sites. It's usage is very easy. The first step is to import the plugin into your HTML page:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lazyload.js"></script>  

Now the HTML code: By default Lazy Load assumes the URL of the original high resolution image can be found in data-src attribute. You can also include an optional low resolution placeholder in the srcattribute.

<img class="lazyload" data-src="img/example.jpg" width="765" height="574">  
<img class="lazyload" src="img/example-thumb.jpg" data-src="img/example.jpg" width="765" height="574">  

It's now time to activate the lazy loading. The following will lazy load all images with the .lazyload class:

lazyload();

Turn navigation menu into a dropdown

When your website features many menu items, it can be tricky to display on small screens. Therefore, an easy fix to this problem is to turn a navigation into a dropdown menu.

The code below will get items from nav and append them to a select dropdown:

// Create the dropdown base  
$("<select />").appendTo("nav");    
// Create default option "Go to..."  
$("<option />", {
"selected": "selected","value"   : "","text"    : 
"Go to..."  }).appendTo("nav select");    
// Populate dropdown with menu items  
$("nav a").each(function() {   
var el = $(this);   
$("<option />", { 
"value"   : el.attr("href"), "text"    : el.text()   }).appendTo("nav select");  
});    $("nav select").change(function() {    
window.location = $(this).find("option:selected").val();  
});  
 
by admin admin Date: 21-06-2018 jquery coding snippets web development hits : 2272  
 
 
 
 

Related Posts

    Vanilla JavaScript equivalent commands to JQuery

    JQuery is still a useful and pragmatic library, but chances are increasingly that you’re not dependent on using it in your projects to accomplish basic tasks like selecting elements, styling…

    What's new in Angular?

    In version 8.0.3 of Angular we can find great changes and say goodbye to our beloved companion the home page of Angular which has been re-designed with a fresh attractive…

    React: 4 types of components to rule them all

    If you have already worked with React, you will probably have found terms like "dumb components", "stateless components" or "high order components" which serve to describe different ways of defining…

    Is jQuery going to die in 2019?

    For a while, JQuery's relevance has been a topic of debate among web developers. We were curious as web developers interested in Javascript to know what others have to say…

    Best 5 Javascript NewsTicker Plugins

    Not all developers know the marquee tag of HTML, that allows you to create a scrolling piece of text or image displayed that is shown horizontally or vertically on the DOM.…

    A roadmap to becoming a web developer in 2019

    There are plenty of tutorials online, which won't cost you a cent. If you are sufficiently self-driven and interested, you have no difficulty training yourself. The point to learn coding…

    Working with JSON in JavaScript

    JSON is short for JavaScript Object Notation and an easy - to - access way to store information. In short, it gives us a collection of human - readable data…

    Top 10 JavaScript Books 2019

    Though simple for beginners to pick up and play with, JavaScript is a flexible, complex language that you can use to build full-scale applications. If you're an aspiring web developer then…

    6 JavaScript Utility Libraries you Should Know in 2019

    Nowadays Javascript is the most popular and widely used programming language, so the ecosystem around it constantly grows. However, it is expected that the small "standard library" of Javascript will remain…

    10 JavaScript podcasts for web developers

    1. Syntax.fm  Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks…

    JavaScript Manual for Beginners

    The JavaScript Manual shows you how to use JavaScript and gives an overview of the language. I   GETTING STARTED ABOUT Created by Netscape in 1995 as an extension of HTML for Netscape Navigator…

    Top JavaScript Libraries in 2018

    As Javascript remains the most popular and widely used programming language in 2018, so grows the ecosystem around it. JavaScript has gained immense popularity over the span of a few years.…