Animation

Animation looks pleasing to the eye, but creating animation is not an easy job. It’s important to take into account the effect that animations can have on performance, as even the coolest animations can have negative effects and downgrade user experience. Luckily, jQuery has some inbuilt methods to implement simple animations with ease. These methods are named in such a way that they are clearly labeled for their use and functionality. In this short post, we’ll look at each of these methods in action.
These animation methods have one thing in common - accepted parameters. The following 3 parameters are applicable for all methods:

Duration: Optional parameter. Either string or number specifications can be used to determine the amount of time given for the animation to complete. The default value is 400 milliseconds. It also accepts “slow” or “fast” string values where “fast” indicates duration of 200 milliseconds and “slow” indicates 600 milliseconds.

Easing: Optional. Easing indicates the speed of the animation at different points during the animation. jQuery provides inbuilt swing and linear easing functions to help you play with this parameter.

Callback: Optional. A function that may be executed after the animation is complete.

fadeIn()

The fadeIn() method gradually changes the opacity of the selected element from hidden to visible. It changes the opacity value from 0 to 1. It will not work on hidden items. To use this method,

$("#elm").fadeIn("fast");
$("#elm").fadeIn(1000); // 1 second

fadeOut()

As you may have guessed, this is the opposite of fadeIn(). This method gradually changes the opacity of the selected element from visible to hidden. It changes the opacity value from 1 to 0. Once the opacity reaches 0, the jQuery set display property is set to none. To use this method:

$("#elm").fadeOut("slow");
$("#elm").fadeIn(2000); // 2 seconds

fadeTo()

The fadeTo() method is similar to the fadeIn() method but it gives the option to control the opacity of the element. You can specify the opacity value, as shown here:

$("#elm").fadeTo("slow", 0.3); //The opacity value is 0.3

The above code will change the opacity of the element gradually to 0.3.

fadeToggle()

This method is a combination of fadeIn() and fadeout(). If the elements are faded out, fadeToggle() will fade them in and when the elements are faded in, fadeToggle() will fade them out. Like this:

slideUp()

The slideUp() method slides-up the selected element to hide it. This method internally controls the height of the element. Once the height reaches 0, it sets the display property to none in order to hide it. To implement it, use the following code:

slideDown()

This method works opposite to the slideUp() function. It slides-down the selected element to show it. This method changes the height of the matched elements from 0 to the specified maximum height. Thus, it gives the element a slide down effect. To implement it, use the following code:

slideToggle()

This method is a combination of slideUp() and slideDown(). Internally this method also makes use of the display style property. While sliding up, when the height of the element reaches 0 it sets the display style property to "none". While slide down it sets the "inline" value of the display property. Based on the value of the display property, it determines whether to slide up or down. To implement it:

Bonus tip: If you want to disable all the animation, set jQuery.fx.off property to ‘true’. This is quite useful when your jQuery code uses animation heavily and you need to disable it. Instead of visiting every single line and modifying it, it’s better to use this property to disable animation completely.

Conclusion

This post talks briefly about various inbuilt animation methods available in jQuery. These methods can perform animations like fading and sliding in both directions. These methods also accept duration to control the speed of your animation. They are simple to use and allow you to implement simple animation with hardly any effort. Have fun playing with them!

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!

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.

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.

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.

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.

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.

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.

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.

Conclusion

-->

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
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

CSS

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%;

}

td,

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() {

$(this).remove();

});

});

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() {

$(this).remove();

});

});

});

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:

Name
Age
Country
Action
Maria Anders
30
Germany

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() {

$(this).closest('tr').remove();

});

});

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".

Conclusion

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.

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

Enjoy!

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

https://github.com/masade/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.

Conclusion

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.

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.

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.

Conclusion

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!