6 Lightweight jQuery Plugins for Fixed Elements

Giving fixed positioning to elements is a great way to keep them visible on the page no matter how much or how far a user scrolls. Fixed positioning can be achieved easily using CSS -- it only takes one line of code to change the position of an element from static or relative to fixed. But if you're looking to create dynamic fixed elements, it's a little more complex and requires a bit of jQuery or JavaScript.

Dynamic fixed elements are elements that become fixed after the user has scrolled a certain amount down the page -- usually they become fixed once the user has scrolled past them. You can write code yourself to create dynamic fixed elements, but these type of fixed elements can be created easily using jQuery plugins. Check out the following lightweight jQuery plugins to see just how quickly and easily you can start adding fixed elements to your projects.

1. Sticky Kit

Sticky Kit is a great free and lightweight plugin that allows elements to become fixed or "stuck" to the page, no matter how far a user scrolls. With the plugin, you can easily make one or several different elements sticky, so it gives you a lot of options in terms of functionality.

Here's another plugin that allows you to make one or multiple HTML elements fixed. The plugin is lightweight, free, and easy to use. Additionally, it's supported on recent versions of most popular browsers. Plus, while it makes elements fixed when vertical scroll occurs, the elements are still able to move left to right if there's a horizontal scroll.

Headroom.js is a lightweight JavaScript plugin that makes it super easy for you to change the position of elements based on a user's scroll. The plugin has no dependencies so it's super lightweight and won't significantly slow down your page's performance.

Waypoints allows you to quickly and easily trigger a function when you scroll to a particular element. When the function changes the CSS position property to fixed or changes the CSS class to one with a fixed positioning, you're good togo.

This plugin is so lightweight and easy to use, it's like magic. Use it to add really cool effects to your scroll -- including fixed positioning.

6. Sticky

This simple plugin makes it easy to add fixed positioning to any element on scroll so that any of your elements will remain visible no matter how much far you scroll up or down. 

3 Ways to Use jQuery to Detect AdBlock

Ad blocking software is becoming increasingly prevalent among internet users, for a number of reasons. The most important of which is that, often times, ads can really decrease a user's experience. They can be obnoxious, and they can be slow -- and not just slow down your webpage, but also a user's entire browser or computer. Additionally, ad blocking software is now super easy for even the least technologically savvy users to get ahold of -- the Chrome extension for AdBlock makes it particularly easy to install.

For many casual web page browsers and internet users, this ad blocking software is great news. For website owners and operators, however, it's brutal. Because many websites rely on revenue from ads to keep running, ad blocking software can severely decrease the amount of money they're able to make from their website. With jQuery, it's actually possible to detect if a user is taking advantage of ad blocker software. Once the ad blocker is detected, you can choose to ask them to whitelist your site or even take it so far as to block them from your site until they've removed their ad blocker or whitelisted you.

What follows is a list of 3 ways that you can use jQuery to detect AdBlock software.

1. Detect AdBlock

Detect AdBlock is a website that offers real, easy to implement solutions to detect AdBlock software on your websites using JavaScript. The code is provided by AdBlock Analytics, who gives you step-by-step instructions on how to effectively detect whether or not your users are blocking your ads. Once the ad blockers are detected, Detect AdBlock gives you three options for how to proceed: you can send the data to Google Analytics, you can save and post the data to an external script, and/or you can display a custom message to your user. This is a great, easy solution for detecting ad blocking software. 

2. Code Synthesis Ad Blocker Detection Plugin

Code Synthesis' solution to detecting ad blocking software uses jQuery. The method of detection is to create a "dummy" ad container that, if installed, the ad blocking software will interpret as an ad and try to suppress. If this happens, then you know that your user is utilizing ad blocking software, and this particular code snippet gives you the option of displaying a custom message to your user(s). 

3. Adi.js

Adi.js is sort of a less hands-on approach compared to the other two ad blocking solutions we've already presented. That's because Adi.js is actually a plugin that you can install onto your projects, rather than code snippets that you have to insert yourself. Once you've installed the plugin, you only need to call any of the built-in functions to detect ad blocker software and execute a reaction to the software if it's found. This plugin is lightweight, super easy to install, and even easier to use. A great option for if you're trying to quickly add an ad blocking software detection functionality to your site or projects. 

Optimize Your jQuery Selectors for Best Performance

Optimize Your jQuery Selectors for Best Performance
Optimize your jQuery selectors for best performance

Over time, the data size has increased for nearly every application. Due to huge amount of data residing in various database servers, performance becomes the most important and integral part of any application. If the page takes lots of time to render the data, it creates a bad impression and results in loss of interest by the end users. There are different places where performance can be increased, including database code, server side code to process the data and client side code.
Application development has also gone through monumental change over time. The client calls REST API and the server automatically sends the data in JSON or some other format. It’s the responsibility of client side code to process and render it for display. Therefore, it’s pretty important to follow best practices for client side code in order to ensure best performance. jQuery is one of the most popular and most used client side libraries, so writing high performance jQuery code is of the utmost importance. One of the key areas of performance improvement is in the methods for selecting and manipulating HTML elements. jQuery selectors allow you to select and manipulate HTML element(s) quite easily. This post shows how to optimize your jQuery selectors for best performance. 
Let’s begin!
Before we get into optimization tips, let me first give you a quick overview of the different categories of jQuery selectors.  There is no official categorization, but they can be categorized in this way:
  • ID selector $('#elementID')
  • Tag selector $('p')
  • Class selector $('.CSSClass')
  • Attribute selector $('[type="text"]')
  • Pseudo selector $(':visible')

Always use ID selector if possible
Accessing DOM is a very expensive operation, so it’s beneficial to minimize effort and time. As we all know, the ID attribute is unique for each HTML element on the page. in JavaScript document.getElementById() is the function that one would use to select the HTML element. It’s the fastest and the best way to select the element because it directly maps to the element. jQuery is a library written on top of JavaScript, which means that it internally calls the JavaScript functions to do the job. When you use ID as a selector in jQuery, it internally calls document.getElementById(). To select the HTML element with elm as ID, the jQuery code looks like this: $("#elm");
This method works well in all browsers, so it’s a good choice if you are using an older browser.

Cache your selector
Caching improves the performance of the application. You can cache data or objects for better performance. You can also cache your jQuery selectors for better performance using the ID as your selector (as mentioned in the previous tip). When you don’t cache the selector, jQuery must rescan the DOM to get the element. You may not feel the difference in small applications, but with large applications this becomes very critical. Let’s look at the process of caching objects in jQuery. The following simple line of code caches the selector and stores it in the $elm variable: 
var $elm = $("#elm");
Now use the $elm variable instead of using the jQuery ID selector. Like this:
var $elm = $("#elm");
Remember, the scope of a variable is limited to where it is defined. If it is defined as a global variable then you can use it anywhere in the jQuery code, but if it is inside a method the scope will be limited to that particular method only. Global caching is useful for elements which are frequently used in the code.

Define a context with jQuery selectors
By default, jQuery selectors perform their search within the DOM. But while defining the selector, you can pass the context, which limits the searching range for the jQuery selector. In other words, you are instructing jQuery to look inot the context rather than beginning the search from the document root. This helps in speeding up the searching process which will definitely improve the performance. Passing the context is optional, but you should use it whenever you can. 
Enough theory! Let’s take a look at a practical example. Consider the following HTML code:
<div id=”parent1”>
<div class=”child”> </div>
<div class=”child”> </div>
<div class=”child”> </div>
If you want to select all the div element with child class you can use the following jQuery code:
var $elm = $(".child");
The above code will search for elements with child class starting from the document root. It can be optimized by passing via an alternate selector. Like,
var $parent = $("#parent1");
var $elm = $(".child", $parent);
This limits the search range, so now searching is limited to the div with ID parent1. The context argument can be a DOM element, a document, or a jQuery object. If you pass context, then jQuery will internally use the find method to retrieve the elements. So the above code is internally converted to:
var $elm = $parent.find(".child");
jQuery first checks if the passed context is a jQuery object. If it is, it calls the find() method on the given context. If the given context is a DOM element, it first converts it to a jQuery object and then executes the find() method. As such, it is better to pass the object as context instead of the DOM element because it will reduce the conversion time.

Don’t repeat your selectors
As mentioned earlier, you can cache the jQuery selectors which prevents you from repeating your selector. jQuery also offers chaining, which allows you to chain multiple methods in a single call. Consider the following jQuery code:
$("div").css("color", "red");
$("div").css("font-size", "14px");
$("div").text("New Text!");
Below is the first optimized version using caching:
var $div = $("div");
$div.css("color", "red");
$div.css("font-size", "14px");
$div.text("New text goes here!");
Next is the second optimized version using chaining:
$("div").css({"color", "red", "font-size", "14px"}).text("New text goes here!");

Use class selector wisely
jQuery also provides a CSS class selector which allows you to select elements with a particular CSS class. This is again a very useful and popular selector as it allows you to select multiple elements at once. However, you have to be cautious while using class selector. The following jQuery code will select all the elements with “dummy” class applied to them:
In this case, jQuery has to scan the complete DOM to discover elements with dummy class.  As mentioned earlier, traversing DOM is a very expensive process so it’s always better to minimize this effort. In this case, you can pass a tag name to reduce the searching scope. Like this:
The above code tells jQuery to only give me the DIV elements with dummy CSS class applied.  Though the class selector works quite well in modern browsers, older browsers have performance issues with class selector. That being said, it’s not always a good choice to add a tag name with class selector. Why? 
In this example, jQuery will first search for all elements with class dummy and then filter records to only return those elements that are div elements. So when the dummy class is only meant for div elements, you need to specify the tag name in order to add an extra step of filtering. Keep in mind that this is only useful when the CSS class is applied to different HTML elements like span, paragraph and div.

Be very specific about selectors
Did you know that jQuery selectors are executed from right to left? In other words, the last selector will be executed first when there are multiple selectors. Consider the following example:
$("div.parent .child");
In this example, jQuery will first search for all elements with class child (last selector executed first) and then apply a filter to return only those elements which are div elements with a parent class applied. This is the optimized version:
$(".parent div.child");
Here we are more specific on the last selector, which helps to speed up performance!

Look for an alternative for the Pseudo selector
Pseudo class selectors are CSS selectors with a colon preceding them. They are also available with jQuery - :visible, :checked or :first. Pseudo selectors are useful for selecting elements with different states, or a particular element from a set of elements, but they are slower compared to other jQuery selectors.  You should either find a way to replace the pseudo selector or be very specific in using it. Let’s take a look at examples of both. The following jQuery code selects all elements which are visible:
You can be more specific here. Like, 
or even better,
Pseudo selectors like :first, :last and :eq allow you to select a particular element from a set of elements. As an example, the following jQuery code will select the first table row using the :first pseudo selector.
The above code can be replaced with better performing code, but first you need to cache the selector (table row in this case).
var tRows=$('tr');
Since jQuery stores this as an array, we can take advantage of it. To get the first table row:
var firstRow=$(tRows[0]);
To get the last element (:last), 
var lastRow = $(tRows[tRows.length - 1]);
Or to get any nth row (:eq(n)),
var nRow=$(tRows[n]);


jQuery is an awesome library that makes developers lives simple, but when not used properly it can be the stuff of nightmares! It’s important to write highly optimized and efficient code for better performance and scalability, on any application. This post shows how to write optimized code for jQuery selectors. These optimization tips show the importance of ID based selectors, the advantages of caching the selectors, defining a context to speed up DOM traversal, being very specific about the selector and using class & pseudo selectors wisely. Make a habit of following these tips to get the best performance from your code!

7 Free jQuery Plugins for Maps

cThe ability to add a map functionality to your site can be a big deal -- especially if the website in question represents an actual establishment that users can visit. In that case, the fact that your users would be able to see where it's located on a map not only helps to make a positive user experience, but it's also just a good way of letting your users know how to find you in real life. If you're looking to add some sort of functionality to your site that will give your users access to locating real life places of business (or even just regular places and addresses), check out the following list of jQuery plugins made for adding maps to webpages.

1. jQuery tWism

The jQuery tWism plugin can be used to create custom clickable maps. With built-in map templates that include a detailed map of the United States OR a detailed world map, you can reveal state names or country names just by clicking on them. This plugin is lightweight, easy to use, and highly customizable.

WhatsNearby uses Google Maps and Google Places API to create a plugin that renders a Google Map that shows the user an interactive map of what is nearby. You can choose what types of establishments are shown -- bars, cafes, restaurants, gyms, etc, and you can also choose a radius for the map to adhere to -- so you can show cafes within 5m of a location, or gyms within 50 meters. It's customizable to meet the needs of your own individual projects.

Geocomplete is a jQuery plugin that creates an auto-complete function for locations using Google Maps API and Google Places Autocomplete Service. All you need to do is create an input field to call the .geocomplete() function on. You've also got the option to add a container that can house an interactive map that will populate based on the location added into the aforementioned input field.

Maplace is a lightweight plugin that makes it easy to embed Google Maps onto any web page. It allows you to quickly create markers and a controls menu on the map, and can run as many maps as you like.

Geolocation marker is a useful plugin that creates a marker circle over a users location as users interact with your map. The circle creates an accurate radius around your users' locations.

jVector Map is a cool, stylish map plugin that is very versatile. It's scalable, interactive, and works across all browsers.

Another map plugin that has an autocomplete feature, this one comes with a built-in interactive map feature that makes it super easy to link up to and integrate with Google Maps.

8 jQuery Plugins for Audio Players

If you want to add an audio player to your website or project, building one out by yourself isn't exactly your best option. Doing so would be extremely time consuming and probably not worth the effort, considering all of the free plugins available that allow you to add audio players to your project in a snap. If you're looking for a quick and easy way to get an audio player set up on your website, check out the following list of free jQuery plugins that you can use to allow your users to play music, podcasts, recordings, or any other type of audio easily on your websites.

1. HTML5 Music Player

This jQuery plugin will add an HTML5 music player to any of your sites. It's lightweight and easy to install.

Use this jQuery plugin to play audio anywhere on your websites. The HTML5 player uses Flash as a fallback and is compatible with recent versions of just about any browser.

If your site has a lot of mobile traffic, this is a great audio player for you. Not only are the audio players responsive, but they're also touch-friendly. The player is simple, minimalist, and the plugin is super lightweight.

jWebAusio is a jQuery audio player and sound library. The library is designed to add sounds to games, so if you're looking for an audio player that will not only add sounds to your games, but give you plenty of different sound effects to choose from, this is a great option.

jplayer is a free, open source media library written in JavaScript that allows you to play audio and video on your webpages. It's used by big name brands like Pandora and BBC, so they must be doing something right.

Wavesurfer is a jQuery plugin that creates an interactive navigable audio visualization using JavaScript and HTML5 canvas. Definitely a cool feature to add to any modern website or project.

This jQuery plugin can be used to add both audio and video players to your web pages. Compatible with most modern browsers and with iOS, so it can be used easily on iPhones and iPads.

This stylish audio player is a beautiful way to add an audio player to your websites and projects. Both beautiful and functional, it's also lightweight and loads asynchronously to help optimize your webpage's load time.