7 Awesome jQuery Pinterest Plugins

The web layout made famous by Pinterest is quite popular due to its responsive design and unique grid arrangement. Many web designers have adopted the same design for their websites, and it’s no wonder why! In this post, you’ll find a list of 7 awesome jQuery plugins for creating a Pinterest-like grid layout with ease. They are responsive with high browser compatibility and allow the use of images and/or HTML items. Enjoy!

  1. Mosaic Flow

Mosaic Flow is a super tiny, fast, responsive, simple and easy-to-use jQuery layout plugin that allows you to create a responsive layout like Pinterest. This plugin can create Pinterest layout for images and HTML elements. The only thing to take care for an image grid layout is to specify the image sizes in HTML. Initializing this plugin can be either done via CSS/HTML data attributes or JavaScript.

  1. newWaterfall

newWaterfall is a lightweight jQuery plugin that helps you to create a responsive Pinterest style layout for your website. Due to its responsive nature, it re-arranges the items on window resize event. To use it, you need to call the newWaterFall() function on your unordered list (ul) HTML element. This plugin also has configurable properties like width and delay.  You can override the default values while initializing the plugin.

  1. Pinto

Pinto.js is a responsive, lightweight and customizable jQuery plugin that is super simple to install. It provides fast execution and allows you to override default settings such as width of grid items, gaps between grid items, resizing options for grid items on window resize and various other settings.

  1. Babylon Grid

Babylon Grid is a lightweight jQuery + CSS plugin for creating responsive, dynamic & customizable Pinterest like grids. It features different column width support, few display modes and AJAX support and is incredibly fast because the whole layout is defined in CSS.

  1. Gridify

Gridify is a lightweight jQuery plugin that handles image loading events, window resize events, very long height items, dynamic item width and support animation (CSS3 transition). It also allows you to control the appearance of the grid layout by setting the width of grid items and the margin between grid items.

  1. Waterfall

Waterfall is another jQuery plugin for creating responsive Pinterest-like layouts. It supports infinite Ajax scrolling, custom width for items, fade-in effect on loading, and minimum/maximum columns to arrange grid items. It also allows you to animate the grids on window resize.

  1. BlocksIt

BlocksIt.js is a jQuery plugin for creating dynamic grid layouts. It manages to convert HTML elements into ‘blocks’ and position them in well-arranged grid layouts like Pinterest. Simply specify the number of columns you wish to have and BlocksIt.js will do the rest for you! BlocksIt.js will re-position the selected elements using the CSS absolute position property. It has the ability to calculate the top and left positions for an element based on specific criteria.


To sum it up, these jQuery plugins allow you to create Pinterest-like responsive and dynamic grid layouts. These plugins support setting the width of grid items and the gap between grid items to control the layout. Not only do they work with image elements, they also work with plain HTML parts.

Remove HTML Table Row and Column using jQuery

Remove HTML Table Row and Column using jQuery
Remove HTML Table Row and Column using jQuery The ability to remove rows or columns from the HTML table is a nice feature to have as it allows users to temporarily remove unnecessary information from the UI. This may be quite useful especially when printing a large HTML table - allowing the user to first remove the rows and then print what is needed. This post walks us through the process of removing table rows or columns using jQuery. Please note that this jQuery solution only removes the rows/columns from the UI, not from the actual database.

HTML Markup

To get started, create a standard HTML table on the page. For this demo, our table has 3 columns: Name, Age and Country (along with some random data). The table row/column will be deleted upon click of the row/column itself.

Name Age Country
Maria Anders 30 Germany
Francisco Chang 24 Mexico
Roland Mendel 100 Austria
Helen Bennett 28 UK
Yoshi Tannamuri 35 Canada
Giovanni Rovelli 46 Italy
Alex Smith 59 USA


The following CSS classes are used to style the table and its rows. There are also styles defined to provide alternate colors to the table rows.

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
th {
  background-color: #ccd;
tr:nth-child(even) {
  background-color: #dddddd;
tr:nth-child(odd) {
  background-color: #ddeedd;


Remove Table Row using jQuery

Removing a table row is pretty simple. All you need to do is attach the click event to every tr with only td, not th. On click event remove the clicked row. Like this:

$(document).ready(function() {
  $("#tblData tr:has(td)").click(function() {


You can also add some animation while removing the table rows for a better user experience. Like this:

$(document).ready(function() {
  $("#tblData tr:has(td)").click(function() {
    $(this).fadeOut(500, function() {

The above code uses fadeout animation to remove the row from the UI. You can check out the demo to see the finished result! The above approach removes the HTML table row on click of the row itself, but the ideal way is to have a button in every row that removes the row. To implement this, we’ll have to modify the HTML table markup to accommodate the button. So, let’s go ahead and add a new header column and a new td with a delete button. Like this:

Maria Anders

You will need to add the button in every table row. To delete the row when the delete button is clicked simply attach a click event to all the delete buttons. All the delete buttons will be assigned “delete” CSS class and we’ll use a class selector to select them and then use the closest method to find the row and remove it. Like this:

$(document).ready(function() {
  $('#tblData').on('click', '.delete', function() {

The closest method returns the first element that matches the selector. It starts the search from the current element and progresses up through the DOM tree until it finds a match. Here, an important thing to note is the way the click event is attached. The following jQuery code uses delegate event approach to attach the click event to all the delete buttons.

$('#tblData').on('click', '.delete', function() { 

jQuery .on method has 2 ways to attach events: Direct and Delegate. When a selector is passed, it is considered a delegate event. In this case, the selector is '.delete'. Passing selector is optional. If it’s not present, it is a direct event. The difference between direct and delegate events is that the latter works for dynamically added elements. Direct event only works for the element present on the page at the time of binding the event. It is a best practice to use delegate events as in the future when elements are added dynamically, you won’t have to modify the code. You can check out the code in action at the following link! Remember: the above jQuery code only removes the row from the DOM. You need to code to remove the deleted table row data from the database.

Remove table column using jQuery

To remove a column, it is not ideal to assign a delete button like we did for removing rows. Instead, the column will be removed when the column header is clicked. In the jQuery code, we need to attach a click event to the table header. First, take a look at the complete jQuery code.

$(document).ready(function() {
  $("#tblData tr:has(th)").mouseover(function(e) {
    $(this).css("cursor", "pointer");
  $("#tblData th").click(function() {
    var iIndex = $(this).closest("th").prevAll("th").length;
    $(this).parents("#tblData").find("tr").each(function() {
      $(this).find("td:eq(" + iIndex + ")").remove();
      $(this).find("th:eq(" + iIndex + ")").remove();


This jQuery code performs the following functions:

• First, it attaches a mouseover event to all TD elements to change the mouse cursor to hand style. This tells users that the cell is clickable.

• The code then attaches a click event to the table header columns. Before removing the column, we need to determine the index of the clicked header column. The code uses jQuery selectors closest() and prevAll() to determine the index. The .closest() begins with the current element and travels up the DOM tree until it finds a matching element and the jQuery selector .prevAll() searches all the predecessors of the current element in the DOM tree. Once we have the index value, we can run a loop for each table row to remove td and th based on the index value. Or, instead of removing it, we can hide the td and th by setting the CSS to "display: none".

You can check out the code in action here!


This post walks us through the process of using a jQuery solution to remove HTML table rows/columns on click action. It also describes the process of implementing delete buttons in every row in order to easily remove the row. The jQuery solution uses the closest and prevAll methods to select the column. Based on your needs, you can easily modify the code to take further action on the removed row/column.

8 Awesome jQuery Wizard Plugins

A wizard is a very useful UI component that allows you to present complex or lengthy tasks in a sequence of dialog boxes or well defined steps. The wizard is the ideal choice for presenting registration processes, shopping cart checkout processes or online booking websites. Essentially, wizards are great for any situation where a series of (usually yes/no) questions are used to solve a problem or accept information from the user in a lengthy interactive process.
In this post, you’ll find a list of 8 awesome jQuery wizard plugins which will allow you to add a wizard in your HTML page. These jQuery plugins are simple, lightweight, and come with different options to customize the Wizard. You can easily:
  • Customize the Wizard buttons
  • Control the display for steps
  • Add multiple wizards on the same page
  • Implement URL navigation 
  • Add bootstrap support for better UI with no extra effort 
  • Add Ajax support for async loading the content 
  • Supports form validations using any validation plugin of your choice 
  • Choose from various theme options

1. Steps


Steps is a simple, lightweight and easy to configure jQuery plugin which allows you to create a step wizard from any grouped elements. This plugin is simple to use and it is only dependent on jQuery library. It comes with various options for customizing the wizard. You can:

  • Set the starting number which starts the wizard at a specific step number
  • Implement ‘showBackButton,’ which indicates whether the back button will be visible or not – quite useful if you want to restrict your users from going back to the previous step
  • Implement ‘show/hide’ footer buttons – when footer buttons are not visible, then the user can move back and forth on clicking the step number buttons

2. formToWizard


formToWizard is a jQuery plugin which allows you to turn any web form into a multi-step wizard with the help of jQuery library. In order to determine the number of steps involved, this plugin first selects all fieldsets and optains the size of this wrapped set. Next, it iterates through this wrapped set (that returned all fieldsets), wraps each fieldset into a div and appends a paragraph that will hold the “back” and “next” buttons. You can also customize the name of the previous and next buttons.

3. SmartWizard


SmartWizard is a flexible and heavily customizable jQuery step wizard plugin with Bootstrap support. It is easy to implement and gives a neat and stylish interface for your forms, checkout screen, registration steps etc. There are a lot of features on top of the built-in Bootstrap support, including:

  • Responsive themes 
  • Customizable toolbars 
  • URL navigation and step selection 
  • Customizable options, 
  • Public methods, 
  • Event support, 
  • Ajax content loading, 
  • Keyboard navigation, 
  • Multiple wizard instances on the same page 

A neat thing about SmartWizard is that the author of this plugin regularly updates the plugin based on the user’s feedback. Based on the user’s feedback, the recent version 4.0 has been completely rewritten from scratch, making it more powerful, robust, scalable, and customizable.

4. Material Bootstrap Wizard


The Material Bootstrap Wizard is a jQuery plugin which is a fully responsive wizard, inspired by the famous Google's Material Design. It is one of the handiest elements that can be used inside a project. Material Bootstrap Wizard breaks the long html form into chunks and lets the user see it one step at a time. This way, the user only has to focus on the current step without being overwhelmed. They will, however, be able to see how many steps they have remaining, so they can assess approximately how long the process will be.

5. Wizard.js


Wizard.js is a jQuery step wizard plugin which uses the bootstrap's modal component to display any type of content in a step-by-step wizard. It takes care of the plumbing for moving back and forth between steps, validation, hooks for key events, etc. The wizard depends on structured HTML to define the wizard and the steps for it. The order of the steps presented is defined by the order of the divs within the wizard. There are lots of customization options available to play around. Each step of a wizard can be validated before moving onto the next step using form validation or custom validation.

6. Stepform

StepForm is a simple and lightweight jQuery plugin that converts any form into a sliding form of step by step wizard. It is an ideal choice for creating sign-up forms. It also performs the validation using a data-validate attribute and so the user can slide to the next step only after any errors on inputs on the current slide have been validated. It also supports keyboard interactions using enter and tab keys to move to the next step or to the next field.

7. jQuery Steps


jQuery Steps is a smart UI component which allows you to easily create wizard-like interfaces. This plugin groups content into sections for a more structured and orderly page view. Furthermore, it is as simple as 1-2-3 to add plugins such as jQuery Validation which can prevent step changing or submission. It supports:

  • Async content loading 
  • HTML5 support
  • Accessibility support
  • State persistence
  • Form validation using any validation plugin of your choice
  • Cool transition effects
  • Easy Navigation
  • Keyboard navigation
  • Multiple wizards on the same page 

It is very lightweight (only 2.9KB minified) and works with all modern browsers.

8. Twitter Bootstrap Wizard


Twitter Bootstrap Wizard is a jQuery plugin that uses Bootstrap's tabs component to create step-by-step wizard. It allows users to build a wizard functionality using buttons to go through the different wizard steps and uses events to hook into each step individually.  It also allows you to:
Customize next/previous and first/last buttons
Add a progress bar for interactive UI
Supports forms validation
Multiple wizards on the same page
Disable/enable or show/hide steps.


To sum it up, these jQuery wizard plugins allows you to implement wizards with ease on any HTML page. These plugins are lightweight, easy to integrate, and support various options to customize a wizard based on your needs. 

Implementing the ‘Read More’ Functionality Using jQuery

The Read More functionality is a very familiar feature that you will come across on blogs or websites with long content, like news websites. This feature allows you to compress content and, therefore, put more content in less space. This also gives the user the freedom to skip the content if it’s not relevant to them. Other advantages include:
  • Speeding up the loading process as it allows the implementation of lazy loading. Instead of loading the content in full, the remaining part can be fetched by clicking ‘read more’.
  • Improves website monetization by increasing page views. The website owners can also put ads just below ‘read more’ buttons to increase revenue since it increases the chance that users will click on the ad.
  • Provides quick access to more content.
Creating the “read more” functionality is very simple. It can be easily created using HTML, CSS and a few lines of jQuery code. This post will guide you through creating a read more toggle feature using jQuery. First, we’ll create the “read more” link for the elements, showing the first few lines and hiding the rest of the content. Next we’ll ensure that clicking on the “read more” displays the complete content and also changes the text of the link to “Read less”. Finally, we’d add an optional functionality to hide the “Read more” link after it is clicked.
Let’s begin…

HTML Markup

In the HTML, define a div element with some very long text. The div element has a CSS class called “longtext”, which will be used for selecting this element using jQuery CSS class selector. In this post, there is only one div element on the page, but you may have more than one such element on the page you create. Make sure to assign “longtext” CSS class to all such elements. This will ensure that the jQuery code creates ‘read more’ toggles for each of these elements.

The following CSS classes are used to control the visibility of the content based on the ‘read more’ toggle button. The moretext span CSS class will hide the extra content and links CSS will be applied to the ‘read more’ anchor tag.
.moretext span {

  display: none;


.links {

  display: block;


jQuery Code

The jQuery part is pretty straightforward. It first hides the long content and adds the link ‘Read more.’ Then it attaches a click event to the ‘read more’ link to toggle the hidden text and the button text. 
Here is the complete jQuery code:
$(document).ready(function() {

  var nInitialCount = 150; //Intial characters to display

  var moretext = "Read more >";

  var lesstext = "Read less";

  $('.longtext').each(function() {

    var paraText = $(this).html();

    if (paraText.length > nInitialCount) {

      var sText = paraText.substr(0, nInitialCount);

      var eText = paraText.substr(nInitialCount, paraText.length - nInitialCount);

      var newHtml = sText + '...' + eText + '' + moretext + '';




  $(".links").on('click', function(e) {

    var lnkHTML = $(this).html();

    if (lnkHTML == lesstext) {


    } else {






This jQuery code performs the following functions:
  • First, it defines global variables moretext and lesstext to hold the button text and also defines the nInitialCount variable to store the number of characters displayed before showing the ‘read more’ toggle link. In this post, the value of nInitialCount is set to 150, but you are free to modify this as per your need.
  • It then attaches jQuery each() function to the elements with longtext CSS class. The each() function allows you to iterate through a collection. Inside the loop, first check if the content length is more than initial character count. If yes, then it grabs the initial displayed text and stores it in sText and also grabs the remaining text and stores it in eText. To extract the text, JavaScript substr() method is used. Once this is done, the code forms a new HTML with both of these text variables, some span elements and the anchor tag for the link. Here, the extra text is kept inside a span element whose parent element is also span with CSS class moretext.  We have already defined a CSS class to hide this.
    The new HTML is then assigned to the longtext CSS class element.  Here, the anchor tag link is decorated with CSS class links. At the end of this function, the div will show the first 150 characters, followed by a ‘read more’ link. 
  • Finally, it attaches a click event to the newly added link using CSS class selector. In the click event, it toggles the value of the link via performing a comparison with the current value and lesstext variable value. If the link shows ‘read more’ text, then it assigns ‘read less’ text or vice versa. Then, the code toggles the text using the jQuery prev() method. The prev() method returns you to the previous object.
You can check out the demo here!
If you just want to hide the ‘read more’ button once clicked, then use the following jQuery code, 
$(".links").on('click', function(e) {






This post provides a simple jQuery solution for implementing ‘read more’ toggle functionality.  The jQuery code has 2 parts. In the first part, it attaches the ‘read more’ link, displays only the first 150 characters and hides the remaining content. In the second part, the ‘read more’ button becomes clickable to toggle the text. Based on your need, you can change the value of initial characters to display. This functionality is very useful for long form websites, and we're sure it will come in handy for your work one day. Enjoy!

Must-have JavaScript Framework/Libraries in Your Skillset

JavaScript has come a long way and evolved over the years. There was a time when developers were frustrated with JavaScript issues on the client side and had nightmares to fix cross-browser compatibility issues. The biggest roadblock was the developers had nowhere else to go, other than JavaScript. When the things were looking darkest, jQuery was born. The onset of jQuery was a relief for developers and it made client-side coding an easy ride. jQuery addressed all the JavaScript cross-browser compatibility issues and helped developers to achieve that with fewer lines of code. jQuery is a great library to ease interactions with the DOM, simplified AJAX requests, and made validation easy to implement.

It’s not easy to stay on the top all the time. When the jQuery library was at its peak, it was time for some powerful JavaScript frameworks (Angular, Ember) and other JavaScript libraries (like React) to make front-end coding painless. These libraries and frameworks offer a different way of front-end development and provide great features to make the front-end more powerful and interactive. Now it’s time when almost every month a new JavaScript framework is being introduced and existing frameworks are being updated often. Every framework and library offers unique features, and it’s important for front-end developers to learn them. But it’s impossible to learn and remember everything! Hence, this post talks about some of the most powerful and popular JavaScript frameworks and libraries you must have in your skill set.



Angular is the most popular JavaScript framework available today for building web applications. Angular (commonly referred to as "Angular 2+" or "Angular 2") is a TypeScript-based open-source front-end web application platform led by the Angular Team at Google and by community developers. The initial version of AngularJS (commonly referred to as "Angular.js" or "AngularJS 1.X") is a JavaScript-based web application framework.  AngularJS supports two-way data binding, implements MVC models, dependency injections, use of custom directives, and many more functionalities. Because of some flaws and difficulty in learning Angular 1.x, Angular 2 was created.

Angular 2 was written in TypeScript, a superset of JavaScript that implements many new ES2016+ features. Angular 2 is easier to learn compared to Angular 1.x as it simply focuses on building JavaScript classes. Views and controllers are replaced with components which are easy to read and develop. Angular 2 is modular, mobile-ready, has improved dependency injection, improved data binding, provides better performance and provides more choice for languages to write Angular 2 code.



ReactJS is the fastest growing JavaScript framework. React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It is an open-source JavaScript library used for building user interfaces specifically for single page applications. It’s used for handling view layer for the web and mobile apps. React also allows us to create reusable UI components.

React allows developers to create large web applications to refresh data on the view without reloading the page. The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in the applications. This corresponds to view in the MVC template. It can be used with a combination of other JavaScript libraries or frameworks, such as Angular JS in MVC.

React was first created by Jordan Walke, a software engineer working for Facebook. React first deployed on Facebook’s newsfeed in 2011 and on Instagram.com in 2012. It is maintained by Facebook, Instagram and a community of individual developers and corporations. React is currently being used by many big companies like Netflix, Buffer, Feedly, Airbnb, Walmart, and others.



TypeScript is a free and open-source programming language developed and maintained by Microsoft. TypeScript is a superset of JavaScript, which primarily provides optional static typing, classes, interfaces, and aligns with ECMAScript 6 standard proposals. It is compiled in plain JavaScript and does not require any kind of runtime library to support it. It can be used with IDEs such as Visual Studio that allow spotting compile time errors as you type the code. Static checking, symbol-based navigation, and code validations are a few reasons that make TypeScript popular among developers. Angular 2 is completely written in TypeScript. Typescript is an object-oriented way to write JavaScript and therefore it’s easier for object-oriented programmers to adopt.



JavaScript is primarily used for client-side scripting, whereas JavaScript is embedded in a webpage's HTML to be run client-side by a JavaScript engine in the user's web browser. Node.js enables JavaScript to be used for server-side scripting, and runs scripts server-side to produce dynamic web page content before the page is sent to the user's web browser. Node.js is a platform built on Chrome's V8 JavaScript engine for building fast and scalable network applications.

It uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices. You can write Node.js applications in JavaScript, and can run using the Node.js runtime on OS X, Microsoft Windows, and Linux. Node.js also provides a rich library of various JavaScript modules to simplify the web application development to a great extent.



Ember.js is an open-source JavaScript web framework, based on the Model–view–view-model (MVVM) pattern. It allows you to create scalable single-page web applications by incorporating common idioms and best practices into the framework. It reduces the time, effort, and resources needed to build any web application. It is focused on making you, the developer, as productive as possible by doing all the common, repetitive, yet essential tasks involved in most web development projects.

Ember uses its own template engine which is a superset of the Handlerbars template engine to build semantic templates effectively with no frustration. The other great thing about ember is that it follows conventions over configuration which helps developers to focus more on their apps, and less on creating your own rules. The popularity of Ember can be measured by its user base. It is used on many popular websites: Yahoo, Netflix, Zendesk, Groupon, LinkedIn and many other major customers.



Vue (pronounced like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Vue.js focuses on making ideas in web UI development (components, declarative UI, hot-reloading, time-travel debugging, etc.) more approachable. It attempts to be less opinionated and thus easier for developers to pick up.

Vue was featured as a rising star on GitHub having gained the most stars of any Open Source Project on the popular website. It recently clocked 60,606 stars which makes it among the most popular open source projects on GitHub in general.



Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model.  Knockout is a standalone JavaScript implementation of the Model-View-View-Model pattern. It features:

  • Declarative Binding − HTML DOM elements can be easily associated the model data using concise and readable syntax.
  • Automatic UI Refreshing − Changes made to data model's state are reflected in the UI automatically and vice-versa.
  • Dependency tracking − automatically updates the right parts of your UI whenever your data model changes.
  • Templating − Templates are a way to build complex UI structures. Knockout.js allows you to quickly generate sophisticated, nested UIs as a function of your model data.
  • Extensible - Implement custom behaviors as new declarative bindings for easy reuse in just a few lines of code.

Knockout.js is a compact and pure JavaScript library which can be added on top of your existing web application without requiring major architectural changes.


Backbone.js is a JavaScript framework with a RESTful JSON interface and is based on the model–view–presenter (MVP) pattern. Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. It features:

  • Ease of developing frontend parts by using JavaScript functions.
  • Automatic refreshing the UI when the model changes.
  • Organized code.


This post briefly talks about the most powerful and popular JavaScript frameworks and libraries. Each of them offers a different way of designing and coding the front-end part of any application. These JavaScript frameworks implement MV* pattern to structure the code, two-way data binding, template engines, and automatic page refreshing when data changes. These frameworks and libraries also differ and have great competition! With so many options available, it becomes difficult to choose the right one. These are must-haves in your skillset as your client may have preferences and you should be ready for it. If you are comfortable with JavaScript, then these are easy to learn!