Using Method Chaining in jQuery

When you use method chaining in jQuery, it ensures that you never have to use the same selector more than once. Over-using a selector can seriously slow down your code, as every time you call on a selector you’re forcing the browser to go looking for it. By combining or “chaining” multiple methods, you can seriously cut down on the amount of times you make your browser look for the same elements without having to set any variables.

Here’s an example of what your jQuery could look like before you employ method chaining:

$("#header").css('color', '#333");

To chain all of these methods so you only have to use the $(“#header”) selector once, you simply need to connect them using a period “.”:

$("#header").css('color', '#333").addClass("bigger").toggle();

Now, when whatever your event will be to trigger this code occurs, the header will change color, add the .bigger class and whatever CSS properties come along with it, and it will toggle from view — all while the browser only has to find the selector once, rather than three times. Method chaining is a great way to clean up your code, keep things concise, and make sure your code is running as quickly as it possibly can.

Create a Simple Back to Top Button with jQuery

We’ve all seen those handy little “back to top” buttons, the one that usually appear at the bottom of a page once a user starts scrolling that, when clicked, will smoothly return the page back to the top position.

Screen Shot 2016-08-29 at 4.37.50 PM

Insert the following snippet into your projects to add a back to top button to your own pages. The code works by having the button (in this case it’s the element with the class .back-to-top) initially hidden, with instructions to .fade-in() once the user has scrolled past 100px. Have fun styling your button any way you like!

var $backToTop = $(".back-to-top");
/* this hides the back to top button when the page first loads */
/* now we need to write a function that makes the back to top button appear after the user has scrolled a certain amount */
$(window).on('scroll', function() {
 if ($(this).scrollTop() > 100) { /* back to top will appear after the user scrolls 100 pixels */
 } else {
/* this function activates a smooth scroll to the top of the page when the back to top button is clicked */
$backToTop.on('click', function(e) {
 $("html, body").animate({scrollTop: 0}, 500);

15 jQuery Rating Plugins

In this post, find a compiled list of 15 jQuery based rating plugins to create rating system on your website. These plugins can use icon fonts, images, text or your own logo to create ratings. These plugins display ratings in the form of stars, smileys, bars, like/dislike button and thumb’s up/down. These plugins can be used for getting feedback and in case of any ecommerce portal, get rating for your products.

1. RateIt


Fast, progressive enhancement, touch support, customizable (just swap out the images, or change some CSS), unobtrusive JavaScript (using HTML5 data-* attributes), RTL support, supports as many stars as you’d like, and also any step size.

2. Bar Rating Plugin

Bar Rating Plugin

Bar Rating Plugin works by transforming a standard select field into a rating widget. The rating widget can be flexibly styled with CSS.

3. Upvote



Upvote is a lightweight jQuery plugin that generates a voting widget like the one used on Stack Exchange sites.

4. Thumb.js



Thumbs.js is a simple jQuery plugin for creating a like/dislike system with thumb icons to rate your content.

5. Star Rating Plugin



Star Rating Plugin is a simple jQuery rating plugin which uses Googles Materialize Icons.

6. starr



starrr is a very lightweight jQuery plugin (less than 75 lines of code) for creating a star quality rating which uses Font Awesome Icon to render the stars.

7. jQuery Emoji Ratings

jQuery Stars

Emoji Ratings is a simple, lightweight jQuery star rating plugin that uses emoji Unicode characters for rating symbols.

8. Rater



Rater.js is a highly customizable rating widget that supports images, utf-8 glyphs and other HTML elements.

9. jRate



jRate is a jQuery plugin that helps to generate RATING with various features like displaying multi-colored STARs, customize own shapes (like square, rhombus, circle, star) and show ratings horizontally or vertically.

10. Raterater



Raterater is jQuery based 5 star rating widget that uses Font Awesome 4 for scalable & style-able star icons.

11. Rate Picker

Rate Picker


Rate Picker is a jQuery plugin for inserting a simple rating system on your webpage.

12. rateYo


rateYo is a simple and flexible jQuery star rating plugin which uses SVG to render rating so no images required. All you need is to create a div, throw some styles, initialize and that’s it!

13. jQuery Stars

jQuery Stars

jQuery Stars.js is a jQuery plugin for generating a star rating system which can use any icon fonts.

14. RatingBar


ratingBar is a jQuery plugin which replaces a textual rating with a graphical rating using CSS. It’s easy to use, fully customizable and degrades gracefully. It also supports jQuery easing animations.

15. jQuery WebRating

jQuery WebRating

jQuery webRating is easy to use jQuery plugin to create a rating system. It can use stars, hearts, smiles or your own logo. It also uses cookies to limit clicks per visitor.

Quick Tip: Use jQuery to Clone Objects

There’s a really handy .clone() method in jQuery that allows you to copy an HTML element dynamically using a script. This method comes in handy when you want to clone an element after a certain trigger event, like .click() or .hover(). Using the .clone() method is pretty straightforward. Here’s what you would need to do to clone a div with the class .thediv:

var clone = $('div').clone();

The above code will easily clone any HTML element, but if you want to clone a JavaScript object, you’ll need to use different code like in the example below:

var clonedObject = jQuery.extend({}, originalObject);

To use this code to, for example, clone a div after it’s been clicked and then insert the cloned div below the original div, you can use the following code snippet as a guideline:

$("div").click(function () {

Play around with the .clone() method to see what you can accomplish with it and discover all the different ways you can use it in your projects.

Convert Text Cases Using jQuery

In this post, find jQuery code to convert the input type text to UPPER CASE, lower case, Title case and Pascal Case. The case conversion is done once the focus is out from the input text box. However, you can use keypress event also to show the conversion in real time.

Here is the code to convert to UPPER CASE. There is a JavaScript string function called “toUpperCase”, which is used to convert text to UPPER CASE.

$('#txtVal').blur(function() {
  var currVal = $(this).val();

Similar to UPPER CASE, JavaScript also has toLowerCase() method to convert text to lower case. See below code to convert text to lower case.

$('#txtVal').blur(function() {
  var currVal = $(this).val();

Below is the code snippet to convert text to Title case. In Title case, the very first letter of statement is in upper case and others are in lower case. The code snippet below finds the very first letter, then converts it to UPPER CASE and rest letters to lower case.

$('#txtVal').blur(function() {
  var currVal = $(this).val();
  $(this).val(currVal.charAt(0).toUpperCase() + currVal.slice(1).toLowerCase());

And finally, the below code converts text to Pascal Case. In Pascal Case, first letter of the every word is in UPPER CASE and rest are in lower case. First we convert all in lower case and then find the first letter of every word.  To find out the first letter of every word, regular expression is used and then we convert it into UPPER CASE.

$('#txtVal').blur(function() {
   var currVal = $(this).val();
   currVal = currVal.toLowerCase().replace(/\b[a-z]/g, function(txtVal) {
      return txtVal.toUpperCase();

10 Free jQuery Timeline Plugins

Here is another free jQuery plugin collection to create a timeline or display events in chronological order. Using these plugins you can create responsive, interactive and animated timelines. These plugins can be used to show events year by year, create portfolios or to develop any entity in an interactive way.

1. Timelify


Timelify is a really simple jQuery plugin for creating a vertical timeline that animates events with the scroll event using Animate.css powered CSS3 animations.

2. Timeliner


Build a simple, interactive, historical timeline with HTML, CSS, and jQuery. The benefits of this timeline script are that it’s (1) simple, (2) able to handle nearly any form of content (including images, video, audio), (3) printer friendly, and highly customizable with just CSS and HTML.

3. TimelineMe


TimelineMe is a simple-to-use jQuery plugin for rendering a responsive timeline on the webpage that works perfectly with most front-end frameworks.

4. Timeliny


Timeliny is a simple to use jQuery plugin for generating a responsive, interactive timeline that allows you to scroll through events.

5. Timeline


Timeline is a responsive, jQuery-based generator that builds a timeline based on user input. It comes with a number of customization options out of the box such as displaying dates, alternating toggle, animation, and choosing which side it starts on. It comes with little to no styling other than what is required, so it can be styled to suite your specific needs.

6. Timelinr



This simple plugin helps you to give more life to the boring timelines. Supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc…

7. Yearline


Yearline is a jQuery plugin for creating historic timelines based on year.

8. Timeglider


Timeglider JS is a zooming, panning data-driven timeline widget written in Javascript. This widget can be integrated into any HTML application environment.

9. eeyellow Timeline

eeyellow Timeline

eeyellow Timeline is a lightweight and simple-to-use jQuery plugin used to generate a responsive, vertical timeline from plain HTML.

10. jQuery Vertical Timeline

jQuery Vertical Timeline

jQuery Vertical timeline is a lightweight jQuery plugin to create responsive, animated, vertical timelines with plain HTML mark-up. It supports all the modern browsers which support CSS3 transitions and media queries.