jQuery By Example

Sometimes, web developers just wanna have fun. If you can relate to this, then you'll probably love this list we put together of 3 of our favorite super fun jQuery plugins that you can add to your projects. They may not be the most useful or practical plugins around, but they sure are fun to play with.

1. Raptorize

Raptorize is a really fun plugin that you can use to add a raptor (you know, everyone's favorite scary extinct giant lizard with the razor sharp claws) to any web page. You can have it pop up just about anywhere you like, and it even comes complete with sound effects. Roar!

2. BoingPic

BoingPic is a very fun, interactive plugin that you can use to add some crazy interactive effects to images. When you move your cursor over an image, you can use BoingPic to have the image explode based upon where the cursor lands or is moving. It's a really cool, really interesting, and overall super fun jQuery plugin that you can use to play around with images.

3. 3D Monster

This plugin turns a regular 3D cube into an ever-changing, mutating, rotating monster. Well, it's not like any monsters we've ever seen before, but it has about half a dozen legs and it looks like it could probably eat a person, so if that's not scary, then what is? A really cool plugin to add to any project seeking to be different or creative.

This simple and straightforward jQuery code snippet can be used to easily create a "scroll to top" effect on any of your pages or projects. If you've not familiar with the scroll to top concept, it basically involves a link or button of some sort that is typically placed in the bottom corner of a page. When the link or button is clicked, the page scrolls smoothly back up to the top, so that the user doesn't have to scroll manually.

Here's the code that you'd need to implement this effect on your pages or projects:

The HTML

Let's start with HTML for a scroll to top link. It should be pretty straightforward, and look something like this:

The text can say anything you'd like, and you should feel free to get creative with the styling. Many designers and developers prefer links that resemble buttons, rather than plain text links, for this particular purpose.

The jQuery

Like the HTML, the jQuery for this effect is actually quite simple. Take a look at the snippet below to see for yourself how it works:

$(document).ready(function() {

$('.to-top').click(function() {

$('html, body').animate({scrollTop: 0}, 300);

})

});

As you can see, when the 'to-top' link is clicked, the animation method is applied to the html and the body elements, using the scrollTop value, which scrolls the entire page back up to the top. The numerical value (in this case, 300) defines the speed at which it should take for the page to scroll back up to the top in milliseconds.

Text link ads are a very popular way of monetizing any website. Text link ads are simple links which, upon clicking, will take you to the sponsor’s website. One of the nice feature of text link ads is rotation of the links with smooth animation. In this post, we’ll look at out how to implement rotating text links using jQuery.

HTML Markup

In the HTML, define 3 different anchor tag links. All the anchor tag elements have a CSS class called “links”, which is a dummy class used for selecting these elements using the jQuery CSS class selector.

Google

Facebook

Twitter

jQuery Code

Next, we’ll need to use JavaScript setInterval(). The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds). You can follow this outline of the jQuery solution:

· Create an array variable and select all the anchor elements that have CSS class “links”.

· Hide all the anchor links, except the first one.

· Create 2 global variables nTotal and nPos. nTotal will store the array length and nPos will define the index of currently visible link.

· Create a function named RotateLinks(). This function will (you guessed it!) rotate the links. The setInteval() method will call this function every 2 seconds. In the function, first slowly fade out the currently visible link. An index of currently visible links is available in the nPos variable, use the eq() method to select that item from the array. Increase the value of the nPos variable by 1 as we need to make the next link visible. You’ll want to ensure that the nPos value does not exceed nTotal. When nTotal and nPos are equal, which means the last link is visible, you’ll want to start the rotation from the first link again by setting the nPos value to 0. Lastly, set the next visible link to fade-in.

Here is the complete jQuery code.

$(document).ready(function() {

var $anch = $("a.links");

$anch.hide().eq(0).show();

var nTotal = $anch.length;

var nPos = 0;

setInterval(RotateLinks, 2000);

function RotateLinks() {

$anch.eq(nPos).fadeOut("slow", function() {

nPos++;

if (nPos == nTotal) {

nPos = 0;

}

$anch.eq(nPos).fadeIn("slow")

});

}

});

You can check out the demo here!

An important thing to note is that a callback function must be defined with the fadeOut method. This callback is fired once the animation is complete, and is crucial because if we simply fade out and fade in an overlapping of animation will occur. You can check out the issue yourself by modifying the code like this:

function RotateLinks() {

$anch.eq(nPos).fadeOut("slow");

nPos++;

if (nPos == nTotal)

nPos = 0;

$anch.eq(nPos).fadeIn("slow");

}

The call-back function works like a charm. However, if you wish to have more control over the link transitions, you can use the Cycle plugin. This plugin will accomplish this task in just one line of code. To use the Cycle plug-in, you’ll need to wrap all the anchor tag elements inside a container. Like:

Google

Facebook

Twitter

In jQurey, simply call the cycle() function on the wrapper. Like this:

$(document).ready(function() {

$('#Links').cycle();

})

You can check out the demo here!

The default transition time is 4 seconds, but you can override this by setting the timeout option. Like so:

$(document).ready(function() {

$('#Links').cycle({

timeout : 3000

});

})

Please visit this link to learn more about the supported operations.

Conclusion

To sum it up, we saw how to rotate text links using jQuery code and the jQuery Cycle plugin. The plain jQuery code uses simple jQuery techniques to rotate the links. You can also control the rotation speed by updating the setInterval() duration. The cycle plugin provides more options to control the link transitions, if you are looking for increased management. Enjoy!

Adding interactive animations can give a fresh look to any website! Many websites use a background image to cover the complete visible screen. Today we'll see how to add an interesting effect on the background image: to move the background image with the mouse cursor movement using CSS and jQuery.

HTML Markup

Let’s start off by creating the HTML markup. Define an empty div element with an ID attribute. We’ll be using the CSS ID selector to create a background image for the page.

CSS

There is an ID based CSS class to create background images with an image URL. This CSS class also sets the position of the image, the width, and the height to 100% in order to make this div fill the entire visible screen with the background image. The CSS property position is set to “fixed” to keep it positioned relative to the browser window.

The image used in this demo is taken from FreeImages.

#background-image {

background: url(http://images.freeimages.com/images/large-previews/08a/street-by-night-1225351.jpg');

position: fixed;

top: 0;

width: 100%;

z-index: 0;

min-height: 100%;

height: auto;

}

jQuery

The jQuery solution is pretty simple and straightforward. Breaking it down, we want to attach a mousemove event on the div element, calculate the new X and Y position based on the current mouse pointer X and Y position, and assign the calculated values as the new background position to the div element.

The following is the outline of the jQuery solution:

First, define a variable named “pixelToMove” which holds the value for number of pixels to move on mouse movement.
Attach a mousemove event to div element via jQuery ID selector. In the event, first get the screen width and height and store them in variables. These values will be used to calculate the background movement on X and Y axes. The two variables newValueX and newValueY are used to calculate the movement of the mouse cursor. To calculate, use the current mouse pointer position and then divide by the containers width and height before multiplying them with pixelToMove's variable value. These 2 variables will give us the new top and left position of the background image.
Finally, set the background position property to the value of these variables using jQuery CSS method.

Here is the complete jQuery code:

$(document).ready(function() {

var pixelToMove = 50;

$("#background-image").mousemove(function(e) {

var width = $(this).innerWidth();

var height = $(this).innerHeight();

var newValueX = (e.pageX / width) * pixelToMove;

var newValueY = (e.pageY / height) * pixelToMove;

$(this).css('background-position', newValueX + '%' + '' + newValueY + '%');

});

You can modify the value of the pixelToMove variable if you want the image to move a greater or lesser number of pixels.

You can check out a working demo here.

Conclusion

We’ve just learned how to move the background image with the mouse cursor movement. Our jQuery solution makes use of the mousemove event on the background wrapper element to calculate the new top and left position for background image and set its background position accordingly. You can modify the jQuery code as per your requirements to increase or decrease the degree of pixel movement. Have fun!

An array is a commonly used data structure in any programming language as it can hold a collection of elements, each identified by at least one array index or key. It is the preferred choice for holding multiple values/collections as it allows item sorting, item removal, item retrieval from an array using index, and other useful operations. The array needs to be used properly in code as it may introduce runtime errors (‘index out of the range,’ for example) while accessing any item. This post examines how to implement different array operations using jQuery. Let’s begin.

Check if Variable is an Array

While communicating with the external APIs or third party APIs to fetch data, it’s important to check the type of object, otherwise they can break your code. jQuery provides the $.isArray() method to check if the variable is an array or not. It returns true if the object is an array, otherwise it returns false. It takes a variable name as an argument and returns true/false as a result. Take a look at the following code for reference:

var foo = [];
var bar = ["Apple", "Mango", "Strawberry"];
var baz = "Test";
console.log('foo is an array: ' + $.isArray(foo)); // Returns true
console.log('bar is an array: ' + $.isArray(bar)); // Returns true
console.log('baz is an array: ' + $.isArray(baz)); // Returns false

As you can see, foo and bar are array elements and baz is a variable holding a string value. jQuery.isArray() will return true for foo and bar and false for baz.

Find Index of an Item in Array

To get the index of any item in an array, use the jQuery.inArray() method. The $.inArray() method is similar to JavaScript's native .indexOf() method. It returns the index when a match is found, and -1 when it doesn't find a match. Remember, the index starts from 0 so when the first element matches the searched value, the method returns 0. It accepts 3 parameters: value to search, array variable name, and the optional fromIndex value which indicates the index of the array at which to begin the search. The default is 0, which will search the whole array. Take a look at the following code.

var fruits = ["Apple", "Mango", "Strawberry", "Plum"];
console.log('Index of Apple is: ' + $.inArray("Apple", fruits)); //Returns 0
console.log('Index of Banana is: ' + $.inArray("Banana", fruits)); //Returns -1
console.log('Index of Mango is: ' + $.inArray("Mango", fruits, 2)); //Returns -1

In the last line though mango is in the array, it appears before index 2 so -1 is returned.

Sort an Array

Sorting an array requires calling the JavaScript sort() method on the array object. By default, the sort() method sorts the values as strings in alphabetical and ascending order. It works well for string values, but requires an extra parameter (comparative function) to be passed for numerical values to get the correct sort order. See the below code:

var empfName = ["John", "Adam", "Steve", "Peter"];
empfName.sort() // Will produce Adam, John, Peter, Steve

The default implementation sorts in ascending order, but if descending order is needed, then call reverse() method after the sort() method. Shown here:

var empfName = ["John", "Adam", "Steve", "Peter"];
empfName.sort() // Will produce Adam, John, Peter, Steve
empfName.reverse() // Will produce Steve, Peter, John, Adam

Since the sort() method sorts everything as strings, note that a value like "35" is considered bigger than "135", because "3" is larger than "1". Therefore, to sort a numerical array, you need to pass a compare function. That way when the sort() method compares two values it sends the values to the compare function, and sorts the values according to the returned (negative, zero, or positive) value.

var age = [40, 70, 9, 98];
age.sort(); //Incorrect sort values. 40,70,9,98
age.sort(function(a, b){return a-b}); //Correct sort values. 9,40,70,98

Remove an Item from the Array

To remove an item from an array use the JavaScript splice() method. The splice() method adds/removes items to/from an array and returns the removed item(s). This method needs the index of the item to be removed. Most of the time we don’t know the index, so first we need to determine the index using $.inArray(). See the code:

var empfName = ["John", "Adam", "Steve", "Peter"];
  var nameToRemove = "Adam";
  empfName.splice($.inArray(nameToRemove, empfName), 1);

The first argument is the index of the element to be removed and the second argument denotes the number of items to be removed. If set to 0, no elements will be removed. If you use empfName.splice(1,2), then it will remove 2 items from the array which are at index 1. In this case, the remaining items would be John and Peter. You can also add new items to an array using the splice() method. Like,

empfName.splice(2,0,"Mark");

The above line adds “Mark” to the array at the second index. So now the array items would be, ["John", "Mark”, "Peter"];

Remove Duplicate Items from an Array

There is no in-built method available to remove duplicate items from an array. You may find people using or suggesting jQuery.uniqueSort() or jQuery.unique(), but these methods work only on the array of DOM elements, not strings or numbers. So you need to write your own implementation. The following jQuery code creates a function removeDuplicate which uses jQuery.each and jQuery.inArray() to remove duplicate items. See this code:

function removeDuplicate(arrItems) {
  var newArr = [];
  $.each(arrItems, function(i, e) {
    if ($.inArray(e, newArr) == -1) newArr.push(e);
  });
  return newArr;
}
var numbers = [1, 4, 16, 10, 4, 8, 16];
var newArr = removeDuplicate(numbers);

Once this code is executed, the newArr array will have only unique items.

Merge Two Arrays into a Single Array

If you need to merge the content of two arrays into a single array, use the jQuery.merge() method. This method forms an array that contains all the elements from the two arrays. The order of items in each array is preserved with items from the second array appended. By nature, this method merges the content of two arrays into the first array only. Like so:

var arr1 = [10, 19, 22, 36, 50, 74, 10, 22];
var arr2 = [100,200,300];
var arr3 = $.merge(arr1, arr2);
In this case, the content of arr1 and arr3 would be the same. If you wouldn’t like to alter the content of the first array, then use the following code.
var arr1 = [10, 19, 22, 36, 50, 74, 10, 22];
var arr2 = [100,200,300];
var arr3 = $.merge($.merge([], arr1), arr2);

The inner merge first creates an empty array and clones the content of arr1, then the outer merge copies the content to the newly created array. Note that this does not update the content of the original array.

Conclusion

This post briefly examines some of the common array operations using jQuery’s inbuilt methods. These methods can help to discover any array element, merge two arrays, sort the new array, remove items from the array and remove duplicate items from an array. These methods are easy to use and allow you to implement difficult array operations with ease.

HTML tables are a very handy and useful element. They can adapt to any style or design using CSS and can also hold different input type controls like an input box, checkbox and radio button. This post focuses on having a checkbox in every row of the HTML table, allowing users to select/unselect table rows. So in this quick post, we’ll look at how to check/uncheck all checkboxes in an HTML table using jQuery.

HTML Markup

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

To get started, create a standard HTML table on the page. For this demo, our table has 4 columns: checkbox in the first column, then Name, Age, and Country, along with some random data. The checkbox is present in the table header as well as in every table row. When the header checkbox is checked, all the checkboxes in the table rows are also checked and vice versa. Here, only the header row checkbox has an ID attribute.

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;

}

jQuery Code

To implement this functionality, we need to attach a click event to the header checkbox and all the table row checkboxes as well. The solution also takes care of updating the header checkbox status based on the status of the table row checkboxes. The following is the outline of the jQuery solution:

First, attach a click event to the header checkbox. In the event, based on its status, check/uncheck HTML table row checkboxes.
Attach a click event handler to all HTML table row checkboxes. In the event, check the clicked checkbox status and header checkbox status. We’ll also need to update the header row checkbox status based on table row checkbox status. If the clicked checkbox status is false and the header checkbox status is true, then uncheck the header checkbox. When the clicked checkbox status is checked, loop through all the other checkboxes to find out if all are checked or not. If all are checked, then also check the header checkbox.

Here is the complete jQuery code:

$(document).ready(function() {

$('#chkParent').click(function() {

var isChecked = $(this).prop("checked");

$('#tblData tr:has(td)').find('input[type="checkbox"]').prop('checked', isChecked);

});

$('#tblData tr:has(td)').find('input[type="checkbox"]').click(function() {

var isChecked = $(this).prop("checked");

var isHeaderChecked = $("#chkParent").prop("checked");

if (isChecked == false && isHeaderChecked)

$("#chkParent").prop('checked', isChecked);

else {

$('#tblData tr:has(td)').find('input[type="checkbox"]').each(function() {

if ($(this).prop("checked") == false)

isChecked = false;

});

$("#chkParent").prop('checked', isChecked);

}

});

You can see the demo here!

Conclusion

To sum it up, we’ve just learned how to implement check/uncheck checkbox functionality to select HTML table rows based on the header row checkbox status. This solution also updates the header checkbox status based on the status of all the table row’s checkboxes. Based on your needs, you can easily modify this section to take further action on the cell value.

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

https://angular.io/

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

https://facebook.github.io/react/

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

https://www.typescriptlang.org/

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.

NodeJS

https://nodejs.org/en/

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

https://www.emberjs.com/

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

https://vuejs.org/

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

http://knockoutjs.com/

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

http://backbonejs.org/
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.

Conclusion

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!

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 + '';

      $(this).html(newHtml);

    }

  });

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

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

    if (lnkHTML == lesstext) {

      $(this).html(moretext);

    } else {

      $(this).html(lesstext);

    }

    $(this).prev().toggle();

    e.preventDefault();

  });

});

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).hide();

   $(this).prev().toggle();

   e.preventDefault();

});

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!

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

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

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

http://techlaboratory.net/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

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

https://github.com/jeffreypolk/bootstrap-wizard

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

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

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

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

You can check out the code in action here!

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.

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

https://github.com/sapegin/jquery.mosaicflow

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

https://github.com/1217950746/New-Waterfall

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

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

Babylon Grid

http://turbomack.github.io/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.

Gridify

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

Waterfall

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

BlocksIt

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

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.

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:

$("#elm").fadeToogle("slow");
$("#elm").fadeToggle("slow", function(){
console.log("The fadeToggle is finished!");
});

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:

$("#elm").slideUp(); //Uses default value of 400 milliseconds for duration.
$("#elm").slideUp(500);

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:

$("#elm").slideDown(); //Uses default value of 400 milliseconds for duration.
$("#elm").slideDown(1000);

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:

$("#elm").slideToggle("slow", function() {
console.log("Animation complete.");
});

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!

Add a Magnifier for Images using jQuery

What is a Magnifier for Images? An image magnifier is the zooming ability of your cursor point. This is where you can place your cursor on top of an element on the page and the image will be shown in a popup in zoom mode.

If you are looking for zooming in and out capability, make sure to checkout: http://www.jquerybyexample.net/2010/09/how-to-zoom-image-using-jquery.html

Do you want to add a magnifier for your images? Well, jQuery is a great solution for doing so.

Why do we want a Magnifier for Images? Adding an image magnifier allows visitors to see close ups of your images and to analyze fine details. This is especially useful for e-commerce website, art retailers, or digital goods platforms, where your users will want to inspect images closely before making a purchase. If you're using Woocommerce or Shopify for your website, of course you have the option to use plugins such as these: https://apps.shopify.com/cool-image-magnifier. However, if you're not on a CRM platform, we will show you how to implement this cool feature using JQuery!

To make a picture magnifier we will use the zoom() function.

JQuery magnifier used on woman wearing jacket and beanie hat

Building a Magnifier for Images using jQuery is quite quick and easy. However, before starting, it’s important to note that we expect some basic knowledge of HTML, CSS, and jQuery.

First, we begin by creating the structure and page layout.

Let’s make a standard HTML template and import the required CDNs, bootstrap, JQuery and JQuery zoom.

We import the required CDNs in the head of the HTML document by wrapping the URLs in script tags:

<head>
<meta charset="utf-8"/>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.js">
</script>
</head>

As you can see above, we import the JQuery zoom by wrapping it in script tags.

Next, we create the body and add an image tag. You can use any image you would like, but we will be using our logo for this example. After adding the body, this is what your code should look like now:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.js">
</script>
</head>

<body>
<div>
<b>To see the zoom in action, move cursor over this image</b>
<div class="parent">
<img src="https://2.bp.blogspot.com/-pFJyRNpxzz4/VXbxYaJUSfI/AAAAAAAAAQQ/iyDOPDIRFIQ/s1600/logo3.png">
</div>
</div>
</body>
</html>

As you can see above, we add a container-fluid Bootstrap class for proper alignment and padding. To the image class, we add a parent class because we will be using this later on when we add JQuery. Of course, you can also use this class to style your element as you’d like. For the purposes of this tutorial, we won’t be styling the page- only adding the zoom functionality.

Finally, we are now ready to add the JQuery script. The JQuery script looks like this:

<script>
$(document).ready(function() {

    $('.parent').css('width', $('img').width());

$('img')
      .parent()
      .zoom({
magnify: 4,
target: $('.contain').get(0)
      });
});
</script>

Confusing? Don’t worry, it will make more sense once we break down the steps here.

First, we need to call the $(document).ready() function. A page can't be manipulated safely until the document is "ready." The great thing about JQuery is that it detects this state of readiness for you. All the code we are calling inside $( document ).ready() will only run once the DOM (Document Object Model) is ready for the code to execute.

Inside this function, we select the element with class of ‘parent’, which would be this element:

<div class="parent">
<img src="https://2.bp.blogspot.com/-pFJyRNpxzz4/VXbxYaJUSfI/AAAAAAAAAQQ/iyDOPDIRFIQ/s1600/logo3.png">
</div>

Once we select this div, we call .css on this element, passing in 'width', $('img').width(). What does this mean?

Well, let’s start with .css. The .css function is used to get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

The first argument is the css property name, and the second argument is the value to set for the property. So here we are selecting the css width property, and setting the value to $('img').width().

What does $('img').width() do? This selects the img element and gets its width.

Finally, we have this beautiful piece of code here:


$('img')
  .parent()
  .zoom({
magnify: 4
});

$('img') selects the img element and selects it’s parent, then calls the zoom function on that. If you recall, the img element is surrounded by the div with the class of parent, which also happens to be its parent. This is what we are selecting here and calling the zoom function on. The zoom function has property magnify.

For magnify, the value is multiplied against the full size of the zoomed image. If nothing is set for magnify, the default value is 1. This means that the zoomed image should be at 100% of its natural width and height if the value is set to 1. However, we are calling it with 4 because we are zooming at 4x the natural width and height.

There are also other properties you can use with zoom. For example, the target property specifies the selector or DOM element that should be used as the parent container for the zoomed image. This could also be set, as well as properties like callback functions. For more information about the zoom function, visit https://www.jacklmoore.com/zoom/.

If you are implementing this feature for an e-commerce shop, you may also like: http://www.jquerybyexample.net/2013/06/jquery-shopping-cart-ecommerce-plugin.html

You may also like:

http://www.jquerybyexample.net/2013/06/jquery-shopping-cart-ecommerce-plugin.html

Feel free to contact me for any help related to jQuery, I will gladly help you.

Feel free to contact me for any help related to jQuery, I will gladly help you.

JQuery Animation library code

Top 10 jQuery Animation Library and Plugins 2020:

The internet wouldn't have been as futuristic as it is if it hadn't been for jQuery. With more than a decade of upgrades behind jQuery, it remains the most consistently used JavaScript library ever made. It makes the whole experience of web development more dynamic and more beautiful- especially with its large range of libraries and plugins available.

What makes websites look even more futuristic and beautiful? Animations.

The animated web is effortlessly very fast, and a lot of it is powered by jQuery animation. It makes the web more interactive and dynamic. Creating animation elements and other types of interfaces related to web design from complete scratch can be very difficult. jQuery animation libraries and plugins are here to fix that!

In this article, we will talk about the top 10 jQuery Animation Library and Plugins of 2020, which can make it effortless for you to add animations to your website and upgrade your web experience.

Note: “All the provided animation Libraries and Plugins can be downloaded from the colorlid through the separate download feature below that leads you to GitHub."

Icon animations powered by mo.js:

Icon Animations Powered by mo

Web design has two clear sub divisions: underground development, which requires you to focus on learning a specific language and maximizing its limits.

The second is the businesses and large corporations with the resources necessary to create game-changing content such as unique animations.

Take Twitter for example, which uses animated heart icons. Millions of people use Twitter daily, which makes it a big deal.

So, we can see that many people are exposed to these types of animations. It becomes much safer using a library like mo.js when using dynamic animations or visual content on the site as they are powered by a graphics library.

This here is the demo by Tympanus that tells how you can use mo.js to create interactive animations that come with surprise effects.

Motion Graphics for Web with mo.js:

GitHub - mojs/mojs: The motion graphics toolbelt for the web

Motion (mo.js) is the JS library that changes the way designers make specific animations for the web. With the use of mo.js, you can effortlessly customize your web content. It becomes more appealing and more presentable through the use of animations.

The library itself has very smooth and fast performance, as well as a much better API for development. It basically supports the development modularly, allowing you to use specific parts of the library that are required. The project itself is open-source, which means its free to use and uses the feedback of the community.

Polaroid Stack to grid intro Animation:

Polaroid Stack to Grid Intro Animation – Scriptism

When the parallax effect came onto the scene, it was a huge thing. Now, developers are focusing on using parallax to make pages more interactive and smooth.

This effect is known as the polaroid stack, an essential grid of images moving along the page as scrolling up and down.

It moves from one element towards the other without losing focus. Only a few websites employ these techniques at the moment, but the ones that do look fantastic and futuristic.

Material Scroll Animation:

Material Scroll Animation with CSS and Javascript - Designing King

Material Scroll Animation has the right combination of CSS and JS, providing you with a lot of ways to play with the content.

This is great for the modern developer. Material Scroll Animation is allows you to use the material design-built scroll effect that primarily displays the content header. It then provides you with the slide button, which is more straightforward and uncovers the header's actual content.

Elastic Circle Slideshow:

Elastic Circle Slideshow | Codrops

The smoother the animation is, the better it is. Smooth is directly related to the properties of CSS3 and also HTML5. Elastic Circle Slideshow is termed as the smoothest slideshow.

As frontend developers always strive to get the smoothest effect, this is very popular with frontend developers. It allows you to have rapid swipes without any attention loss or discomfort. Therefore, it has been regarded as a great alternative for mobile sites, apart from the obvious statistically higher use for desktop sites.

Interactive Bar Graph:

Interactive Bar Graph

Speaking of statics, analysis, and analytics, jQuery has been highly regarded for data visualisation; it simply outshines other frameworks in these areas.

Interactive bar graphs created by Ettrics let you visualize data beautifully and show different timelines of your data. Some other cool ways to visualize your data are outlined here, with circular charts.

You can uncover detailed data about a particular graph with only a click.

Page Switch for JavaScript:

pageSwitch for JavaScript

This library is a very unique and effortless approach to switch or flip web content.

There are 50+ choices to animate the content dropdown menu. Coding is required to put everything together carefully, but is quite simple to use and understand.

However, if you are looking for interactive solutions, then you can use it with image galleries and grids.

Animating an SVG Menu Icon with Segments:

Animating an SVG Menu Icon with Segment | Codrops

A segment is the class of JavaScript that allows web developers to animate and draw the SVG paths. The results are animated visual SVG contents.

This has been a highly utilized library among modern developers due to the flexibility and ease of use. The animated SVG icon of navigations on your website can be created using this library, and if SVG is not supported- we got you covered. Follow our tutorial here.

Popmotion, the JavaScript motion engine:

Popmotion, Javascript Motion Engine for Animated UI

Popmotion is the JavaScript motion engine that brings physics to the world of web design.

The difficulty level is not what you would expect from such a complicated subject- it is actually quite easy to use and implement in your website. Three prominent examples of Popmotion seen on webpages are Physics movements, Animations, and input tracking. It is actually used for the motion drive of the user interface. It also has support for CSS, SVG, SVG paths, and the DOM attributes.

It also can be used with other API that can accept values numerically. Therefore, it is regarded as one of the most fun libraries to use!

jQuery DrawSVG:

jQuery DrawSVG

jQuery comes with its separate animation engine that can be used for the site's transformation and other cool stuff.

It is actually the jQuery library for SVG content paths animation. It is exceptionally lightweight and asks you to only specify the paths- the library will do the rest of the work.

“In case you want the code for similar animation Libraries and Plugins, you can always go to the GSCODE and download your favorite ones from there."

You may also like:

See Complete Code

Feel free to contact me for any help related to jQuery, I will gladly help you.

The Future of Jquery Mobile and Jquery UI:

Have you heard of JQuery Mobile or JQuery UI? If not, it might be due to their lack of funding. Lately, the last few years have been very hard on the Jquery Mobile and the Jquery UI projects. Aside from the resources lacking funding, they are also losing contributors due to several factors that have slowed the project development. In fact, their last new release was in September 2016 for JQuery UI, which marks exactly 4 years since their stable release to date. However, before getting ahead of ourselves, let’s discuss what both of these projects even are.

JQuery UI and JQuery mobile picture of JQuery programming language

What is JQuery UI:

JQuery UI, is a framework built on top of JQuery with effects, widgets, and central themes which mainly depends upon the JavaScript library. If you need to build a web application with high interaction or want to add a date picker to a form control(For example, like we did here: http://www.jquerybyexample.net/2012/12/jquery-ui-datepicker-set-current-date.html), then JQuery UI is a great option.JQuery UI also works well for web apps that require many controls or special features.

It is a UI that was created by John Resig and released in August 2006. It was around the time that Internet Explorer was quite popular on the internet, and Google Chrome had not even entered the battle yet. The older browsers were depending on JavaScript in many ways, which lead the public to various problems. So, JQuery was made at that time as a new UI to face and solve the public's problems, revolving around the libraries called prototype, Mootools, and Scriptaculous.

JQuery Mobile: Person holding mobile phone representing JQuery mobile

JQuery Mobile is also a UI framework built on top of the Core of JQuery. The primary goal of JQuery Mobile is to develop websites that are responsive and mobile-accessible applications which also support tablets and other devices. The features of JQuery Mobile ease mobile web application development and help developers create responsive applications faster.

JQuery Mobile is actually a popular framework for creating mobile web applications, and works on all popular smartphones and tablets. JQuery Mobile, as you may have guessed, uses HTML5 & CSS3 for laying out pages. This makes it very lightweight as well as easy for developers to contribute to the library.

Looking Forward:

Looking forward, what can we expect frm JQuery UI and JQuery Mobile? Or, even for JQuery as a whole? Even though the last few years have been tough for both frameworks as well as for the JQuery Foundation, there have been some changes introduced that show a brighter future for both Jquery Mobile and Jquery UI.

The changes are in regards to the JQuery team and also on the projects themselves. The team’s main objective is to lessen the duplicated code and the extra widgets common to Jquery UI. This will lead Jquery UI into a framework for mobile with all the essential widgets present.

Two Separate Projects of JQuery, Jquery UI and Jquery Mobile:

The lead for UI has been given to Scott Gonzalez for around some time and has also been a reason for improving quality. As he stepped down on the UI Project, he is now on the backend of this project, helping the company in various ways.

Alex Schmitz, which is the contributor to Jquery UI, has been given the leadership of two projects and the Jquery Mobile. This is enormously helping the project of Jquery Mobile, which serves under Jquery UI. This doesn't mean that both Jquery UI and Jquery Mobile aren’t separate and independent projects; both have their different repositories.

Contribution:

Before, when people were interested in joining the Jquery Mobile or the Jquery UI, they were required to contribute to the library.

For example, they would look at the current issues here: https://github.com/globalizejs/globalize/pull/703

Now, if someone is merely interested, they can take the lead on the widgets, which are sortable without any real contribution to the other parts of libraries.

Communication:

For communication purposes, the project has chosen Slack (https://www.howtogeek.com/428046/what-is-slack-and-why-do-people-love-it/) , which is commonly used for day to day meetings as well.

In the past, they relied on IRC, meaning Internet Relay Chat (you can learn more at https://en.wikipedia.org/wiki/Internet_Relay_Chat), which lead to developers having a personal grudge against IRC. Now, tools like Slack allow for a much more suitable means of communication.

Changes:

Now, both Jquery Mobile and JQuery UI have made tremendous changes to how they work and aimed to improve their user experience.

Alex Schmitz, the combined lead of both Jquery UI and Jquery mobile is aiming to breathe life back into both JQuery UI and JQuery mobile. Despite many users perceiving the projects as being in ‘maintenance mode’ since they haven’t seen new updates since 2016, the team is still working on improving user experience, fixing bugs, and providing support for users.

Conclusion:

Sadly, the JQuery trend has been declining for some time now. In 2020, JQuery is not necessary because of the widespread browser support by JavaScript, which is consistent. Many developers also choose libraries or frameworks that are easier to work with like Angular, React or Vue.

That doesn't mean you shouldn’t want to use JQuery! In fact Jquery is still used on many websites, over 70 percent according to analytics at https://w3techs.com/technologies/overview/javascript_library.

JQuery UI is still the most successful UI library on the web, and easy to use and customize (like we do here, http://www.jquerybyexample.net/2013/04/show-only-month-and-year-in-only-one-jquery-datepicker-multiple.html)

If you’re interested in contributing to either projects of the JQuery Foundation, checkout https://contribute.jquery.org/ :)

You may also like:

See Complete Code

Feel free to contact me for any help related to jQuery, I will gladly help you.

15 Best One Page website template using HTML5 2020:

We have been seeing a big trend of creating single page or one-page websites over the past few years. This is partly due to jQuery and HTML5 making it much easier for developers to create beautiful one-page websites using JQuery.

Creating a one-page website is typically complicated and much more time-consuming than multiple pages websites. This is because you are required to convey so much more information in only a single page, or perhaps display your product or work in a creative way on just one page.

However, with JQuery we can make it effortless to create websites that are stunning with fewer effects and transitions. If you want to make your websites even more stunning, consider checking out these handy CSS snippets.

As a best practice, it is recommended to break the website into different sections that you can display to the user by scrolling down the website, as opposed to fitting each detail on a static page.

It becomes much more effortless to read, and as the user scrolls, this can build anticipation, or surprise the user with new information.

Below we will show you the 15 best one-page website templates using HTML5 in 2020. So, stick with us to the end of the article to learn all about these website templates.

“You can download these templates from wpshopmart; or you can simply download them from GitHub."

Evolo:

30 Best Free One Page HTML Website Templates - Wpshopmart

Evolo is completely free and often referred to as one of the best one-page HTML templates to use.

The best feature which is included in this template is a type of navigation known as a sticky header.

Sticky headers smoothen the scroll towards other sections with a flat design that keeps the header still while the rest of the page scrolls.

It also works great for illustrations, neat testimonial sliders, pricing tables, inquiry forms, team sections, and video modals.

Colid:

Top 31 Free One-Page Website Templates Built With Bootstrap 2020 - Colorlib

Colid is also free to use and a straightforward yet compelling website template.

Colid is suitable for all types of Android, iOS, Windows applications, and also SaaS applications, also known as ‘Software as a Service’. As these types of applications usually require some explaining, we recommend that you implement read more functionality if you are creating a landing page for your SaaS offering.

Due to these features, Colid is termed as very flexible and effortless to use.

However, the flexibility doesn't stop here. You can use this software for business landing pages or online shops as well!

BizPro:

BizPro - Free Minimal One Page Business Website Template - Colorlib

This is a very classical and free one-page business website template. You can build any type of business site using BizPro, starting from local ones to multinational organizations.

BizPro is also very SEO (Search Engine Optimization) friendly and is highly optimized in every possible way for mobile devices.

Imperial:

Imperial – Free Onepage Bootstrap Theme | BootstrapMade

Imperial is a very futuristic and modern template. It is also a very creative template for one-page websites that can really wow an audience.

Imperial is suitable for various studios, digital design agencies, creative agencies, and other businesses of similar interest.

The company's important message or logo can be introduced on the header, which comes with a full-screen part called a hero.

Laura:

Laura Free Creative Bootstrap Theme | BootstrapTaste

This template is a very responsive and clear portfolio template that is free to use.

It is a bootstrap template for one-pagers working on Bootstrap 3 and provides you with clean code, a modern layout, and a fully customizable environment.

Laura is also very mobile-friendly for users that view your site on the go!

Avilon:

Avilon Bootstrap Landing Page Template | BootstrapMade

Avilon is very suitable for a landing page with long scrolling or even longer portfolios.

It features a very clean intro button for a strong call to action and has sticky navigations that scroll down smoothly.

Some sections slide in as a type of scroll, a clean three-tier table for price, client logos, and frequently asked questions with an accordion feature, a gallery with lightbox browsing, and a team section- so, everything you need!

Lastly, there is a footer with an optional form contact and a neatly organized “back to top” button.

Unika:

Unika One Page Portfolio Bootstrap Template

Unika is very responsive and free to use a template based on HTML5 that is perfect for small business agencies and personal portfolios.

It is made using both CSS3 and HTML5 and is flexible enough to work with different browsers and devices.

Boxify:

100+ Free HTML5 Website Templates for Instant Site Launching

Boxify is an incredibly beautiful template and is also very modern, based on CSS3 and HTML4.

It was very carefully designed and crafted to enhance the smooth effect on multiple devices.

Additionally, it is very well fitted for any type of startup website or portfolio, but its flexibility makes it usable for other projects as well.

Ballet:

Ballet One Page Free Website Template

Ballet is also a very modern, clean, and elegant template built with both CSS3 and HTML5.

It is based around the latest framework of Bootstrap, which is 3.3.1. Features include responsive web compatibility with different devices and multi-browser support.

Sky Touch:

28 Best Free One Page HTML Website Templates 2020

As the name suggests, there is no limit to this template. Also, it comes with a beautiful sky to fit the theme, making it very modern.

It is also a very responsive single page template using CSS3, HTML5, and Bootstrap.

Sky Touch is perfect for business, corporate, digital studios, personal portfolios, web agencies, and product showcases.

Anyar:

Anyar – Free Multipurpose One Page Bootstrap Theme | BootstrapTaste

Nothing beats Anyar in terms of simplicity and multipurpose use. Anyar is built with the Bootstrap 3.3 framework, which is very responsive and has a user-friendly UI.

It has multipurpose use and is well known for creating individual portfolios, creative agencies, and companies that are looking for a clean or simple one-page template.

Nova:

Nova - One Page Multipurpose Template by templateHut | ThemeForest

Nova is a trendy and perfectly curated HTML5 site template. It is used in making landing page templates that are responsive and informative.

All the features are included in a free to use project which showcases the one-page template created in Bootstrap.

Finally, it is an immaculate, clean, and nicely organized template suitable for various projects- especially if you’re looking to use lots of icons.

Life Coach:

Life Coach Responsive Website Template #51896

As the name suggests, life coach is a free to use coaching template for coaching websites, which is also very responsive.

It is a bootstrap template and can be used for other types of websites, but it works exceptionally well as a coaching site template.

In case you are a coach or trainer, or even a consultant, you can show off your portfolio using this template.

Exigo:

Free Creative HTML5 One-Page Bootstrap Template - Exigo

Here is another free template based around HTML5. Exigo is very creative and is custom-designed to be minimalist.

It works exceptionally well as a blogging or portfolio template to show your artwork or your travels- for those travel bloggers our there.

Exigo also features a very responsive framework that looks exceptional on any mobile device due to high-resolution graphics.

Meghna:

Meghna - Free Responsive One Page Business Template

Last but not least, Meghna is a free to use responsive template for one-page business sites. It is built with CSS3, jQuery, HTML5 and JavaScript.

Meghna is very minimal, fast loading, and has a light skin that suits many design trends.

"In case you want to learn more about these one page HTML templates or need more variety, then you can check out Colorlib."

You may also like:

See Complete Code

Feel free to contact me for any help related to jQuery, I will gladly help you.

3 Best jQuery Books for Beginners

jQuery arguably the best JavaScript library which is open source. It has completely changed client-side web development, taking it further than just using JavaScript, HTML or CSS. Apart from supporting almost all modern browsers, JQuery has a vast range of access to the DOM programming interface, ultimately allowing you a much massive element selection and manipulation based around the name of elements and its attributes.

As jQuery popularity started to rise, it became inevitable for web developers to take advantage of and learn jQuery.

It is considered the turning point in modern or futuristic web programming that simplifies HTML client-side scripting. So naturally, many developers want to learn JQuery.

Books are always a great way to learn- and perhaps the best way to learn jQuery for beginners is with these great book recommendations. In this article, we will provide you with the top 3 best books for beginners looking to learn jQuery.

E-books are also a great way to learn, and if you’re into that kind of thing we have a great one to recommend here.

Reading jQuery and becoming an expert from a single book is typically not recommended so, you should take into consideration reading a couple of books about jQuery. Therefore, we have compiled three of the most popular books for beginners about jQuery and hope you enjoy!

“Aside from jQuery, if you want to learn more about JavaScript as a developer, our suggestion is medium.com”

Head First jQuery:

Read Head First jQuery Online by Ryan Benedetti and Ronan Cranley | Books

“You can find this book on Amazon."

Head First jQuery is a series for learning jQuery with a couple of different titles like the Headfirst design pattern.

There is a lot of fantastic stuff in this book! The most unique among them being the quality of exercises, which is not present in other books concerning jQuery. This book revolves around real-life projects that are very practical examples to learn from. This is very much similar to doing real-time work while following the book.

Apart from jQuery, you will also learn and refine CSS and HTML. This book also promotes best practices around HTML documents and cascading style sheets.

Besides providing specific knowledge, you will come by interesting questions, puzzles, fireside talks, and ‘headfirst’ ways to teach essential concepts. This book also provides you with the essential details about jQuery, which you can follow along with, for quick learning.

Essentially, it is a must-read for learning jQuery if you are a beginner who is somewhat familiar with CSS, HTML, and a small amount of JavaScript.

This book deals mainly with;

How you can navigate the DOM
You can use jQuery functions for different purposes, like creating on-page visual effects and various animations, building forms or handling other events, etc.
How you can write AJAX applications
How you can leverage the power of HTML and CSS seamlessly.
How you can JSON, PHO, and MySQL to manipulate data
How you can go move from CSS and HTML by using jQuery in combination with DOM.
and more!

jQuery in Action:

Manning | jQuery in Action, Third Edition

“You also can find this book on Amazon."

This book is very similar to the Headfirst jQuery series, and it’s very likely you will fall in love with the jQuery in Action series. Bear Bibeault and Yahuda Katz are really great writers and teachers.

They are real experts popularly known in the JavaScript and jQuery community. Their knowledge and writing style in the book is entirely genuine.

Yahuda Katz has also significantly contributed to popular jQuery plugin developments while leading the team, while Bear Bibeault is considered an expert in the web development world.

This book is well known not only for beginners but also for developers with a bit of experience.

It is very well organized and structured with lots of examples to follow for beginners, making it effortless to understand the basic concepts of JQuery.

A unique concept in the book is the explanation of jQuery event handling. If you’re looking to get good at event handling, this is definitely the book for you!

jQuery in Action also revolves around creating web pages, and solving cross-browser compatibility issues. This book is great for explaining these concepts thoroughly for beginners.

Essentially, jQuery in Action is one of the best books for beginners to learn jQuery.

This book teaches you:

Event handling in jQuery
Plugin creation
Creating a comprehensive application
Unit Testing
Front end development
Animations and the visual effects available with the jQuery
Traversing HTML documents in jQuery

jQuery Cookbook:

Amazon.com: jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide) eBook: Lindley, Cody, Cody Lindley: Kindle Store

“As always, you can find this book on Amazon."

The jQuery Cookbook by Cody Lindley is a remarkable book to learn jQuery for beginners and experts alike.

It’s name completely suits the context because it's like a cookbook that starts with the absolute fundamentals, and also teaches JavaScript fundamentals.

Afterwards, it slowly starts to explore more practical uses with different tested solutions. This is done using the absolute best practices to overcome web development issues.

Like Headfirst and the Action series by Mannings, O'Reilly's Cookbook series is a very famous book series.

Therefore, it can be a most valuable addition to your bookshelf.

As the intent of the Cookbook is to take into account the common problems of web developers working with jjQuery or JavaScript and provide tried and tested solutions, there is a good chance that you will find the solution to all your practical problems here.

Lastly, if you are a very busy developer and need a quick snippet to sort out your code, this is the best book you can find for jQuery.

This book deals mainly with:

Learning how to find elements on the page
Improving forms
Resolving major problems related to features of jQuery such as visual effects, shapes, themes, events, and UI elements
Understanding the event management system in jQuery
Checking code performance and also enhancing it to remove potential errors
Testing jQuery applications using time-proven practical techniques

Once you’ve learned the fundamentals, we have even more book suggestions here!

“There are various books available for you to learn jQuery as a beginner. You can find more of these at wiki.ezvid.com.”

You may also like:

See Complete Code

Feel free to contact me for any help related to jQuery, I will gladly help you.

10 Brilliant Scrolling Effects using jQuery:

Extended scrolling sites have been a trend for quite some time. The coolest ones are the sites with parallax scrolling as we discussed in this article.

In this effect, the images move themselves to give a parallax effect. Whenever the user is scrolling down from the page, various animations are triggered.

It gives a very fresh look and feel to any website if used correctly.

Parallax scrolling is very difficult to accomplish from scratch because of the knowledge required about JavaScript, CSS, and web design to make it happen. Like Parallax scrolling, there are various other Brilliant Scrolling effects that can be easily created using jQuery.

They might be tough to pull off from scratch, but there are many libraries that can make it easier.

Here is a list of 10 brilliant scrolling effects using jQuery; you can simply follow the article to choose the perfect one for your website!

"In case you want to download the Scrolling effects, you can always go to GitHub, or if you want to download a specific one, then you can go to beebom."

Imagine:

Imagine is made by ‘pixevil,' which is a parallax animation and scroll framework. The animation involved in Imagine has nearly limitless possibilities.

Imagine can be used with any type of element on the web page and also comes with a nearly perfect markup of a parallax background.

It is built with GSAP, jQuery, and also Animus while guaranteed to provide you a parallax scrolling effect which is unmatched.

Basically, the reason for Imagine being such a famous library for scrolling effects is that it uses simple syntax for custom animation creation.

You don't even have to learn about JavaScript complexities to create the custom scrolling effect based on animation.

Lateral on-Scroll Sliding with jQuery:

Lateral On-Scroll Sliding with jQuery

This here is a very unique and minimalistic effect for scrolling in jQuery. The main idea here is to merely slide in through the elements depending on the position of the scroll of the document. It will divide the page into right and left side.

When you have to get the element to the center from outside of the page, you can do it with this effect, while the elements can also be moved in 3D spaces.

In this effect, there is also a typography effect, which is made using jQuery and CSS3. Again, you don't need in-depth knowledge of either to implement this effect.

jQuery Scroll Path:

jQuery Scroll Path | Unmatched Style

This is a plugin for jQuery, which lets you create and define your custom scrolling path.

It uses syntax, which is canvas-flavored for path drawing, using the methods known as lineTo, arc, and moveTo.

You can also enable the canvas overlays with the path when initializing this plugin; this helps you get the path exactly right and how you like it!

Skrollr:

Skrollr.js Parallax Scrolling Website Tutorials | Potent Pages

Speaking of the parallax scrolling effect, Skrollr does that, and more!

It is a fully designed library for scrolling animations. You can use it without having any type of parallax scrolling on the page.

Skrollr revolves around CSS3 and HTML5 without you having to gain professional knowledge of either.

Layer 3D:

3D Multi-layer Parallax Effect With jQuery And CSS3 | Free jQuery Plugins

Layer 3d is a jQuery plugin that is extremely powerful and is used for creating the out of image effect, as depicted above.

You can also create the Parallax effect with this plugin with only a bit of web design knowledge. Some other similar plugins you might find useful are listed here.

As a bonus, there is also a mode referred to as full size, enabling you to create a website with a full parallax effect.

Pagepilings.js:

FullScreen/One Page Scrolling Plugin - pagePiling.js | jQuery Post

pagePiling is a plugin for jQuery that enables you to split your website into various sections.

These sections are piled on top of each other. When scrolling or accessing the URL, the sections are revealed in a clean sliding animation.

Pagepiling.js is very compatible with all types of platforms like mobile, desktop, and even tablets.

It also works with all modern browsers but sadly is not supported on older browsers such as IE7.

Therefore, you need to include the JavaScript or CSS file inside HTML if you’re thinking of using pagepiling.js animations in your website.

Alton:

10 Best Parallax Scrolling Plugins

Here is a scrolling jQuery plugin that keeps the native scroll of the browser turned off for targeted scrolling. Basically, it takes you towards the next point vertically on the screen or even towards the container's top.

There are three types of functionalities associated with Alton, called Bookend, Hero, and Standard. The standard one can enable you to use the full page scrolling with an individual maximum height section.

Bookend, on the other hand, allows you to create an effect of bookend, while lastly, the hero will enable you to scroll jack only for the Hero section.

The rest of the page will have native scrolling.

Superscrollorama:

Superscrollorama « jQuerylabs.com

Here is a jQuery plugin that gives you scroll animations powered by Greensock Tweening Engine and Tween Max.

This increases the performance of animation to an incredible extent and also smoothens the animations to make them look effortless.

The animations in Superscrollorama are called through jQuery and use mostly the TweenMax.js functions.

Mobile devices don't support these types of animations because they are touch screens and handle the effects of the scroll in different ways.

However, you can use the ‘setScrollContainerOffset’ to successfully use it on mobile devices with a touch screen.

ScrollMagic:

ScrollMagic - The jQuery plugin for magical scroll interactions | Product Hunt

ScrollMagic is one of the most popular jQuery plugins for magic scroll effects.

It is very future proof and can let you animate the page merely based on the scroll position.

This means you can also move, fix, or even animate HTML elements as you are scrolling.

The duration for scrolling is unlimited, and you can also add parallax effects on top of it all.

Therefore, ScrollMagic is very customizable and also lightweight, having the best external resources and documentation.

You can also use it with various mobile devices because it works with touch screen scrolling.

ScrollMe:

Coding: JavaScript

With the ScrollMe plugin for jQuery, you can simply add the parallax effect for scrolling on your web page.

You can also translate, change the opacity, rotate, and scale the page elements as scrolling around.

There is no knowledge of JavaScript required in ScrollMe; you only need to know or learn a bit of CSS.

You can also animate any type of HTML element by adding 'animateme’ and also the required data attributes.

Last but not least, ScrollMe is best for CSS effect additions because of its lightweight and smooth performance.

We talk about similar scrolling effects in this article which you should check out!

"If you want to learn more about Scrolling effects, or want more of these plugins, you can go to bashooka."

You may also like:

See Complete Code

Feel free to contact me for any help related to jQuery, I will gladly help you.

5 best carousel Jquery plugins for 2020:

It’s needless to say that a boring an plain web page will never catch an audience's attention. Of course, we all know holding a user’s attention is crucial on a webpage, especially nowadays when the average attention span is 8 seconds.

This ultimately calls for a significant interface component, perhaps something that can display images, video and visuals quickly in order to keep our visitor’s attention.

A carrousel is the perfect interface that will allow videos, images, other content to be displayed in a continuous loop interactively.

Luckily for us, instead of custom code and progamming complex carrousels from scratch, we can use carousel plugins for jQuery to do the work effortlessly.

A carousel is referred to as one of the most popular components of UI in modern web design. It allows you to present products, images, blog posts, and other types of content in an infinitely rotating interface.

These featured plugins for jQuery carousel will allow you to make a carousel slideshow equipped with both basic and additional features.

For example, some of these features include lightbox, vertical and horizontal features, PSD and Autoplay with the ticker, etc. Of course, without saying, these plugins also provide support for video and image elements, and with these, there are embedded Vimeo videos, YouTube, and more elements.

Carousels are developed by using the plugins in order to add them and positione them anywhere on the homepage.

“If you want to download the sliders, you can get them from GitHub or even purchase them through Fromget."

UtilCarousel:

Download Free UtilCarousel Responsive jQuery Carousel Plugin - Download Free Themes

With UtilCarousel, you can have multiple options for navigation like drag, touch, pagination, mouse wheel, etc.

It also supports lazy image loading in long web pages, making sure to give the web page an ideal responsive layout.

Hence, it can be viewed on any device screen. The best feature, however, is the clear documentation, making real-time usage effortless.

The starting price of this plugin is $10. The Features include;

7 callback functions
8 developer APIs
9+ already built-in customizable templates
Touch-enabled for mobile and desktop both
Lightbox also enables Vimeo videos, images, and YouTube videos.

Everslider:

Everslider - Responsive jQuery Carousel Plugin by flGravity | CodeCanyon

Every slider is a jQuery plugin that is conflict-free and compliments the JSHint tool.

It is very responsive and can recognize the mouse wheel, keyboard interactions, and touch swipes.

It can also allow you to create carousels of the most recent featured work or blog posts, this is great if you have a portfolio website. If you’re looking to spruce up your portfolio website check out these plugins.

There are also three carousel modes and 30 configuration options and also autoplay with a ticker.

This plugin uses the hardware of CSS3 for various animations with the fallback to jQuery itself.

The price of this plugin is $8 for six months. With this plugin, you get the following features:

A fade effect, which allows you to put the delay in between animations of singular slides
Photoshop document support is also provided to ensure the quality of high pixel imagery
This plugin is very compatible with the Firefox, Chrome, Opera, IE7+ versions for both the iPhone and Android.
It is very lightweight and allows you to add unlimited slides

JSON Slider, Carousel, Timeline:

jQuery jSon Slider, Carousel & Timeline Plugin - Tutsplanet

This plugin is multipurpose and very responsive, allowing you to create sliders, testimonials, tabs, carousels, and a timeline. We also mention some other great timeline plugins here. If that’s what you’re interested in.

It also allows you to have scalable sliders too, which can have a fixed width or can be set up to be full screen.

Sliders are very fast and don't make you wait around in compromise to the webpage loading time.

Ultimately, there are unique sorting options present in the plugin carousel, providing you with different options like the bullets, HTML in pagination, and thumbnails.

The starting price is $13 for six-month support. The Features packed inside the plugin are:

You can search inside the slide, which is totally unique.
There are 4 different types of animation options, like the after-CSS animation, after jQuery Animations, Smooth CSS animation, and jQuery Animation.
The slider can be converted to the infinity loop by simply slide circulation.
It also allows you to use HTML videos and YouTube videos in the slides

jQuery Carousel Evolution:

jQuery Carousel Evolution by themekiosk | CodeCanyon

Image configuration in the carousel is very crucial, and this plugin allows the managing of size in back and front images.

You can also handle the positions or set the number of scroll images.

Furthermore, you can customize the option of autoplay to enhance the slider header impact.

Unique multiple carousels can be created for a single web page with this type of plugin. You can also add a text description to brief visitors about the image.

The starting price is $5. With this plugin, you will have features like:

There are 9 various styles of carousels.
In case you want more 3D effects, then you can give reflection or shadow effects to the image itself.
It also offers you the public API to provide complete control over various components inside the slider.
For ideal mouse control, a smooth scroll through the slider is present.

Agile Carousel:

Js Tutorial - Agile Carousel

With the help of an Agile Carousel, you can create a slideshow or carousel easily.

It also uses the popular data format known as JSON to provide you with simple integration.

The integration is with the data externally as well. It also provided you with the horizontal and vertical content buttons, which are triggered whenever there is a mouseover on them.

The multiple slides which are visible come with three different slides with the fading transitions and sliding.

This plugin is completely free, and the features include:

A better setup, which is customizable using a feature known as control sets.
It also provides you with different buttons like numbered, circle, play, pause, previous, next.
The slideshow is provided with the fade transition and timer.

“In case you want more of jQuery carousel plugins, you can simply read the article on wpshopmart."

You may also like:

See Complete Code

Feel free to contact me for any help related to jQuery, I will gladly help you.

Question: What is jQuery UI?

Answer: JQuery UI, is a framework built on top of JQuery with effects, widgets, and central themes which mainly depend upon the JavaScript library. If you need to build a web application with high interaction or want to add a date picker to a form control(For example, like we did here), then JQuery UI is a great option.

interview questions quiz for jquery lady

Question: What is jQuery Mobile?

Answer: jQuery Mobile is a UI framework built on top of the Core of JQuery. The primary goal of JQuery Mobile is to develop websites that are responsive and mobile-accessible applications which also support tablets and other devices. JQuery Mobile uses HTML5 & CSS3 for laying out pages. If you’d like to build a JQuery mobile app, check out this post.

Question: What is jQuery?

Answer: jQuery is a Javascript library that makes DOM manipulation, event handling, animation, and Ajax requests simpler and more efficient. jQuery has a simple to use API that works great across all modern browsers. JQuery greatly reduces the lines of code needed to achieve the same results in vanilla Javascript. Basically, jQuery simplifies the use of the JavaScript language.

Question: What are Events?

Answer: Event-handling is responding to user actions on a webpage- in JQuery these actions are called events. JQuery provides simple methods for attaching event handlers to DOM elements or selections. This way, the provided function is executed when an event occurs.

Question: What types of jquery Events are there?

Answer: The common DOM events are:

Form
Keyboard
Mouse
Browser
Document Loading

Question: What is $() in jQuery?

Answer: $ is a reference to the jQuery namespace. With it, you can access its static methods, while $() calls a function that either registers a DOM-ready callback if a function is passed to it, or returns elements from the DOM, if a selector. $() as a selector is used to select elements.

Question: What are ID selectors in jQuery?

Answer: ID selectors are the same as they are in CSS. ID selectors use ID to select just one element.

Question: What are class selectors in jQuery?

Answer: Class selectors use a class to select elements. If you want to select a group of elements with the same CSS class, you can use the class selector.

Question: What is the difference between onload() and document.ready() methods?

Answer: Class selectors use a class to select elements. If you want to select a group of elements with the same CSS class, you can use the class selector.

Question: What is the use of css() method in JQuery?

Answer: The jQuery CSS() method is used to get (return)or set the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element. The first argument is the css property name, and the second argument is the value to set for the property.

Question: What is jQuery Ajax?

Answer: AJAX stands for Asynchronous JavaScript and XML and its used to help us load data and exchange data with a server without a browser refresh. JQuery has an array of AJAX methods to help accomplish this. The ajax() method sends an asynchronous http request to the server.

Question: What are some benefits of jQuery Ajax methods?

Answer: A few advantages include:

Ability to send GET and POST requests
Ability to Load JSON, XML, HTML or Scripts
Cross-browser support

Question: Compare onload() and document.ready().

Answer: The Onload() event will be called only after the DOM and resources like images get loaded, but jQuery's document.ready() event will be called when the DOM is loaded (doesn’t wait for ressources).

Question: What is jquery.min.js?

Answer: jquery.min.js is a compressed version of jquery.js used in order to preserve bandwidth.It has the same functionality as jquery.js, but whitespaces and comments are removed, shorter variable names are used, etc. It is always better to use this compressed version in the production environment as the web page loads more efficiently.

Question: What the Zoom plug-in for jQuery?

Answer: Zoom is a plug-in for the jQuery Javascript library. It is a highly flexible tool that allows you to magnify iamges.

Question: What are plug-ins in jQuery?

Answer: JQuery plugins are used to extend jQuery's functionality. This is done by extending the prototype object. This wat, you enable all objects to inherit any methods that you add. Whenever you call jQuery() you're creating a new jQuery object, and all the methods get inherited.

Question: What is chaining in jQuery?

Answer: This is also referred to as Query Method Chaining and allows us to run multiple jQuery commands in sequence on the same element(s). Using chaining, browsers don’t need to find the same element(s) more than once. To use this method, you simply append the next action to the previous action.

Question: What is the filter method in jQuery?

Answer: The filter() method filters out elements that do not match the selected criteria. Filter() then returns those matches.

Question: What is the find method in jQuery?

Answer: Find() is used to find all the child elements of the selected element.

Question: What are all the ways to include jQuery on a page?

Answer:

Include the .js file or .min.js file into the html document.
Include JQuery inside the <script> tags in <head> or <body> tag:

<script src='jquery-3.2.1.min.js'></script>

Write the code within the HTML document inside the <script> tag.

21. Question: What is jQuery.noConflict?

Answer: If we have to use a JS library along with jQuery, the control of $ is given to the JS library (In jQuery, $ is just an alias for jQuery, so we don’t need to use $). To give this control, we use jQuery.noConflict(). It can also be used to assign a new name to a variable.

22. Question: What are the benefits of jQuery?

Answer: The advantages are:

Simple syntax and easy to use
Reduces lines of code as opposed to vanilla Javascript
Has extensive documentation
Deals with cross-browser compatibility issues
Lightweight and Open-source library.
Extensible and fast
Easy DOM manipulation
Event handling & AJAX support.

23. Question: What is Qunit?

Answer: A unit testing framework for JQuery. It's used by jQuery, jQuery UI, and jQuery Mobile and is powerful, easy-to-use, and capable of testing any JavaScript code.

24. Question: Why host jQuery using a CDN?

Answer: A CDN (Content Delivery Network or Content Distribution Network) is a large distributed system of servers that reside in multiple data centers. CDNs are used to provide files from servers faster and therefore loading JQuery from a CDN would make it load faster.

25. Question: Can jQuery be used for server scripting?

Answer: jQuery was only designed for client-side scripting and is not compatible with server-side scripting.

The HTML

The jQuery

HTML Markup

CSS

jQuery

Conclusion

Check if Variable is an Array

Find Index of an Item in Array

Sort an Array

Remove an Item from the Array

Remove Duplicate Items from an Array

Merge Two Arrays into a Single Array

Conclusion

HTML Markup

CSS

jQuery Code

Conclusion

Angular

ReactJS

TypeScript

NodeJS

Ember.js

Vue.js

Knockout

Backbone.js

Conclusion

HTML Markup

jQuery Code

Conclusion

1. Steps

2. formToWizard

3. SmartWizard

4. Material Bootstrap Wizard

5. Wizard.js

6. Stepform

7. jQuery Steps

8. Twitter Bootstrap Wizard

Conclusion

HTML Markup

CSS

Remove Table Row using jQuery

Remove table column using jQuery

Conclusion

Conclusion

Animation

fadeIn()

fadeOut()

fadeTo()

fadeToggle()

slideUp()

slideDown()

slideToggle()

Conclusion

Question: What is jQuery UI?

Question: What is jQuery Mobile?

Question: What is jQuery?

Question: What are Events?

Question: What types of jquery Events are there?

Question: What is the use of css() method in JQuery?

Question: What is jQuery Ajax?

Question: What are some benefits of jQuery Ajax methods?

Question: Compare onload() and document.ready().

Question: What is jquery.min.js?

Question: What the Zoom plug-in for jQuery?

Question: What are plug-ins in jQuery?

21. Question: What is jQuery.noConflict?

22. Question: What are the benefits of jQuery?

23. Question: What is Qunit?

24. Question: Why host jQuery using a CDN?

25. Question: Can jQuery be used for server scripting?