Intermediate

20 Impressive jQuery Plugins to Replace the HTML Select Box

The traditional HTML select element is not very powerful out of the box, it lacks in more substantive features. Today, the web demands controls with multiple features for a user-friendly experience and the traditional HTML select box just can’t compete. Features like multi-select, grouping, hierarchical lists, and custom HTML markup make light work of projects and tasks, and the HTML Box lacks these features.
Writing your own implementation for these features will require a lot of effort, and testing browser compatibility can be a nightmare. Luckily, jQuery offers lots of plugins to save you from that hassle. This post has a compiled list of 20 impressive jQuery plugins to replace the traditional HTML select box with a sleek, stylish and feature-rich select box. These jQuery plugins offer various features like changing default styles, adding search functionality, grouping the items, creating hierarchies, keyboard navigation, multiple item selection and many other features.

1. Pretty Dropdowns

Pretty Dropdowns

https://github.com/thdoan/pretty-dropdowns

Pretty Dropdowns is a simple, lightweight jQuery plugin that converts <select> drop-down menus into “pretty” menus that you can skin using CSS. It features:

  • Two arrow styles and sizes to choose from (or add your own style)
  • Easily add icons, thumbnails, and other custom HTML to the menu items
  • Support for multiple-select lists
  • Support for option groups
  • Tooltips (title) carried over at select, option, and optgroup levels
  • Full keyboard navigation (you can even go directly to a menu item by typing its text!)
  • Auto-linked to label (menu will get focus when you click on the label)
  • Accessibility (it plays nicely with screen readers)
  • Sensibility (when you open the menu it does its best to keep the menu items within the viewport)
  • Complete control over the look and feel of the drop-down menu by modifying prettydropdowns.css

2. SelectPick

SelectPick

http://project.zyy1217.com/selectpick/

SelectPick is a fast, simple, customizable, and lightweight jQuery plugin to customize the HTML drop-down box with custom styling. The beauty of this plugin is that it can be applied to any type of HTML, not necessarily just HTML select box. Features include:

  • Possibility to bind to multiple types of HTML elements
  • Customizable data sources
  • Support for Ajax asynchronous access to data
  • Providing options and labelling disable functions
  • Dynamically setting selected items
  • User style customization

3. InputPicker

InputPicker

https://github.com/ukalpa/inputpicker

InputPicker is a jQuery input plugin that converts an input text field into a filterable, multi-column dropdown select box. When initiated this plugin appends a div element below the input box and styles it with the help of default CSS classes. It supports both local data (data array) and removing data sources (JSON) via AJAX requests. The plugin also gives flexibility to developers to change the width and height.

4. Select2

Select2

https://select2.github.io/

Select2 is a jQuery replacement for traditional select boxes. Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. It features:

  • Over 40 languages and RTL support.
  • Fully skinnable CSS built with Sass and an optional theme for the Bootstrap 3.
  • Full extensibility to work exactly how you want it to
  • Dynamic item creation
  • Support for both modern and legacy browsers

5. Sweet Dropdown

Sweet Dropdown

http://sweet-dropdown.adepto.as/

Sweet Dropdown is a simple jQuery plugin which creates flexible and animated dropdowns in any direction with any kind of content. It also supports adding icons to select items as well as the option to apply dark or light themes for styling. This plugin works in all major browsers.

6. Awesome Select

Awesome Select

https://github.com/prevwong/awesome-select

Awesome Select is a beautiful and customizable jQuery plugin for transforming the boring select tag into something beautiful and minimal, with animations inspired from Material Design. You are free to change the way the dropdown looks based on your own taste. This plugin also supports immersive mode, which allows you to render the dropdown in a modal window covering the complete screen. The animations are based on CSS3 transform and transition properties.

7. jQuery Dropdown

jQuery Dropdown

https://github.com/daneWilliams/jquery.dropdown

jQuery Dropdown is a flexible and cross-device jQuery plugin for replacing HTML selects and multi-level menus with animated select dropdowns. This plugin allows you to create simple, multiple select, nested, grouped and custom HTML content dropdowns. The plugin allows you to override default settings for animation, keyboard navigation, multiple item selection and other default settings.

8. Combo Select

Combo Select

https://github.com/PebbleRoad/combo-select

Combo Select is a jQuery plugin that converts a select box into a searchable and keyboard-friendly interface. The plugin creates a div element and styles it using the default CSS. It also attaches the keydown event to capture key strokes for filtering the select. The other advantage of this plugin is that it falls back to native select on mobile and iPad devices. It features:

  • Search and filter, select items
  • Mobile- and tablet-friendliness (fall-backs to native select)
  • Keyboard accessibility
  • Ease of style
  • Data attribute support
  • Support for both numeric and string data types in select
  • Support for implicit style attributes

9. Fuzzy Dropdown

fuzzy Dropdown

https://github.com/zeusdeux/fuzzy-dropdown

Fuzzy-dropdown is a jQuery plugin that converts a select box into a fuzzy searchable dropdown. Fuzzy string matching is a technique for finding strings that match a pattern approximately rather than exactly. Fuzzy-dropdown delegates interactions to the underlying select box. Also, the dropdown is fully navigable via arrow keys. Fuzzy-dropdown by itself does no styling. All the styling is controlled via CSS. This gives you complete freedom to style your dropdown however you want.

10. DDList

DDList

http://code.cwwonline.be/serviceddlistjquery

DDlist is a lightweight jQuery plugin that allows you to create a stylish dropdown list supporting list options with text, images, and additional description strings. This plugin hides the select element and the list is ‘reconstructed’ by means of a jQuery-generated <ul> list inside a <div> container. The select element options can also be defined via a JSON array object. The plugin comes with a CSS file that contains various classes to present the internal elements and their styles, giving you the option to modify the existing style to match with your website design.

11. ddSlick

ddSlick

http://designwithpc.com/Plugins/ddSlick

Ever wanted a dropdown with images? Well, you now have a plugin for that! ddSlick is a free and lightweight jQuery plugin that allows you to create a custom dropdown with images and descriptions.

  • Adds images and descriptions to otherwise bland drop downs
  • Allows JSON to populate the drop down options
  • Converts your HTML select element to ddSlick
  • Uses Minimum CSS and no external stylesheets to download
  • Supports call-back functions on selection

12. Dropdown Checkboxes

Dropdown Checkboxes

https://github.com/creativecirclemedia/dropdown-checkboxes

Dropdown checkboxes is a simple jQuery plugin that turns a bootstrap dropdown component into a compact multi-select dropdown list with checkboxes. This plugin creates a hidden input element. When the values are checked and saved, the plugin creates a JSON array of all checked values and assigns the same to the hidden input box. This plugin also allows you to pre-check the checkboxes on page load. When the selected checkbox’s text values goes beyond a certain length, then the plugin truncates the string value for better UI arrangement.

13. Hierarchy Select

Hierarchy Select

https://github.com/NeoFusion/hierarchy-select

Hierarchy Select is a lightweight jQuery plugin which converts the Bootstrap dropdown into a filterable dropdown list. This plugin works well for simple dropdowns and also for hierarchical dropdown, both with the option to search. You need to define an input element just above the select element. The plugin makes use of this input element to create search functionality for the select box. It attaches a keyup event to the input box and responds to keyboard interaction. For searching the text, it makes use of the indexOf() function which returns the position of the first occurrence of a specified value in a string.

14. Selectric

Selectric

http://selectric.js.org/

Selectric is a fast, simple, and light jQuery plugin designed to help in stylizing and manipulating traditional HTML selects elements. It also allows you to select multiple elements and add icons to select list items. It features:

  • Keyboard navigation (Up/Down/Left/Right/Word search)
  • Easy customization
  • Permanently visible options box
  • Independence from external libraries (besides jQuery)
  • Word search compatibility with western Latin characters set
  • 10 built-in themes
  • The ability to dynamically add items to select the element
  • Support for various callbacks for customizable handling
  • Options to populate the data via Ajax
  • Support for custom HTML markup

15. Sumo Select

Sumo Select

http://hemantnegi.github.io/jquery.sumoselect/

Sumo Select is a beautiful and cross-device jQuery plugin that progressively enhances an HTML Select Box into a Single/Multiple option dropdown list. The dropdown list can be fully customizable using simple CSS. It can adapt itself according to any device, keeping the User Experience unbroken. It features:

  • Single and Multi-select options
  • Search support
  • Optgroup support
  • Localization support
  • Full customization by simple css
  • Support for almost all devices
  • Intelligent rendering according to device
  • Rendering native Single/Multiple pop-ups on Android, iOS, Windows and other devices
  • Custom postback data format
  • Selected, Disabled, Select All, keyboard navigation and Placeholder support
  • A redesigned UI (No external icons are used now and the color scheme can be controlled by CSS)
  • Easy extendability to allow developers to create new widgets

16. Fast Select

FastSelect

http://dbrekalo.github.io/fastselect/

Fastselect is a lightweight plugin for enhanced select elements based on jQuery. It enables responsive, fast, and sensible UI upgrades of selected elements with features like option searching and remote dataset loading. It weighs less than 5KB (minified and gzipped). It provides features like searching, filtering, tagging, single-select, multi-select, autocomplete, and dynamic AJAX content.

17. Selectize

Selectize

http://selectize.github.io/selectize.js/

selectize.js is a lightweight plugin for creating a solid and user-friendly select list with clean and powerful APIs. It’s useful for tagging, contact lists, country selectors, and so on. It clocks in at around ~7kb (gzipped). It features:

  • Skinnability – Comes with LESS stylesheets and shims for Bootstrap 2 and Bootstrap 3.
  • Clean API, code, and extensibility
  • Smart Ranking / Multi-Property Searching & Sorting – Options are efficiently scored and sorted on-the-fly
  • Caret between Items – Use the left and right arrow keys to move between items
  • Select and delete multiple items at once
  • RTL supported – Great for international environments
  • Item Creation – Allow users to create items on the fly
  • Remote Data Loading

18. Light Weight Select

LightWeightSelect

https://github.com/keyo321/jQueryLightWeightMultiSelect

This is a super lightweight jQuery plugin that converts a multi-select drop menu into a simple two panel selection interface. The UI is completely controlled via CSS, so you can change the look and feel according to your needs. The plugin size is 4kb after minification, 2kb for the CSS and 2kb for the double arrow icon.

19. BetterSelecter

BetterSelecter

https://github.com/BenMMcLean/BetterSelecter

BetterSelecter is a simple, clean and easy to use jQuery plugin for converting the standard HTML select box into a stylish and sleek searchable select box. The styling is controlled via CSS classes which gives you flexibility to change the design per your requirements. This plugin appends a div element with a span inside to create a searchable select box and display the selected value.

20. SelectMe

SelectMe

https://github.com/bschueller/jquery.selectMe

selectMe is a jQuery-based select replacement plugin that replaces the large select element into a neat and searchable solution. It can also add a checkbox or radio button to the items for a better way of selecting the item. It supports:

  • Search for specific elements
  • Selecting or unselecting all elements which are currently shown
  • Show only selected elements
  • Optgroups
  • Navigating through elements with arrow keys (up + down)
  • Selecting elements via space key
  • Jumping directly to the search field when pressing a key while navigating in the dropdown

Conclusion

These lightweight and customizable jQuery plugins allow you to turn the normal HTML select elements into stylish and sleek select elements. These plugins offer various powerful features like searching, grouping, custom HTML markup, keyboard navigation, remote data loading, RTL support, multiple item selection, and other small but handy features. The other advantage is that all the plugins use simple CSS classes to style the select elements. This gives flexibility to the developers to override or change the default plugin style to your own style implementation.

How to Use jQuery to Dynamically Open Links in New Tabs

Even if you’re a new or beginning developer, you probably know that you can easily make links open in new tabs by using the target attribute with your anchor tags. To make a link open in a new tab, all it takes is to make your HTML look like this:

<a href="/link/" target="_blank"></a>

The target=”_blank” attribute is all you need to make your links open in new tabs. But what if your anchor tags weren’t written this way, and you still want your links to open in new tabs? You can go back through your HTML and hand code it yourself, but if you’ve got a lot of anchor tags this could take you a really long time. Luckily, jQuery is here to save the day.

With jQuery,  you can use some really straightforward snippets to dynamically open all external links in new tabs without having to go through every line of your HTML with a fine-toothed comb. To see the snippet for yourself, check out the code below:

$('a[@rel$='external']').click(function(){
     this.target = "_blank";
});

That’s it. All it takes are two lines of  jQuery to make sure that all of your external links open in new tabs. The function is triggered by the .click() event method, so the function won’t run unless any of the external links are clicked on, so it’s a pretty lightweight solution. You can see that the snippet above uses the ‘a[@rel$='external']‘ selector. This can be used to select all of the external links, and apply the target=”_blank” attribute to it. But, if you find yourself wanting to select all of the anchor tags on your page, you can remove the rel code and simply use ‘a’ as the selector. You can also use a similar concept to select all links of one class or ID type by placing the class or ID name in the selector.

Using jQuery to Count Child Elements

If you ever find yourself needing to know how many child elements an HTML element has, you’re in luck, because there’s a jQuery function for that.

There are actually a few different ways you can go about doing this. The first is really simple and straightforward, and will count all the children elements of an element, regardless of what type of element it is or its class or id names. To do this, we just need to use the .children() method and chain it with the .length() method, and apply it to the element in question whose children total we’d like to know. So, for example, if we’d like to know how many children a div element with the id of #main has, we can use the following snippet:

$("#main").children().length;

Okay, that’s easy enough. But what if you’re trying to find something more specific, like the number of children of an element that are <p> tags, or <h1> tags, then the code is a little bit more complicated.

You might know that you can use jQuery selectors a lot like CSS selectors (and if you don’t know, try reading this handy guide to brush up on your jQuery skills). So in CSS, if you want to select the direct child of an element, you do so by using the > symbol after the parent but before the child element. For example, in CSS, if you want to select the p elements that are children of any div element with the #main ID, you’d use the following code:

div#main > p{
   //insert code here
}

In jQuery, it’s actually almost the same principle. To select the specific children elements of an element, your selector would look almost exactly the same as it would in CSS (except, of course, for the jQuery syntax). From there, you just need to apply the .length() method to your selector to count all of the children. So if you’re trying to count all of the p element children of the #main div, your jQuery code can look like this:

$("main > p").length;

There you go, that’s all it takes.

Drag and Drop HTML Table Rows Using jQuery

HTML tables are the preferred UI option for displaying data. Sorting, paging and searching/filtering are must-have functionalities for any HTML table with extensive data. These functions make HTML tables more user-friendly and efficient for the end user. In some cases one may require drag and drop functionalities for HTML table rows. Unfortunately, implementing drag and drop for table rows is not available out of the box with jQuery. To implement this, we need to use a jQuery plugin called TableDnD. In this post, we’ll learn how to implement drag and drop HTML rows using jQuery plugin TableDnD.

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.

<table id="tblData">
   <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
   </tr>
   <tr>
      <td>Maria Anders</td>
      <td>30</td>
      <td>Germany</td>
   </tr>
   <tr>
      <td>Francisco Chang</td>
      <td>24</td>
      <td>Mexico</td>
   </tr>
   <tr>
      <td>Roland Mendel</td>
      <td>100</td>
      <td>Austria</td>
   </tr>
   <tr>
      <td>Helen Bennett</td>
      <td>28</td>
      <td>UK</td>
   </tr>
   <tr>
      <td>Yoshi Tannamuri</td>
      <td>35</td>
      <td>Canada</td>
   </tr>
   <tr>
      <td>Giovanni Rovelli</td>
      <td>46</td>
      <td>Italy</td>
   </tr>
   <tr>
      <td>Narendra Sharma</td>
      <td>56</td>
      <td>India</td>
   </tr>
   <tr>
      <td>Alex Smith</td>
      <td>59</td>
      <td>USA</td>
   </tr>
</table>

CSS

The following CSS classes are used to style the table and its rows. The myDragClass CSS class styles the row that needs to be dragged and dropped. This style will be applied for the duration of the drag and then removed when the row is dropped.

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: #dddddd;
}
.even {
    background-color: #ecf6fc;
}
.odd {
    background-color: #ddeedd;
}
.myDragClass {
    background-color: yellow;
    font-size: 16pt;
}

jQuery Code

As mentioned in the beginning of the post, the TableDnd plugin will be used for implementing this feature. This plugin allows the user to reorder the rows within a table. The great thing about this plugin is that it doesn’t take into account cell count within a row or the row containing form elements. Using this plugin, you can also mark rows as non-draggable and/or non-droppable so that other rows can’t be dropped onto them. Now, let’s look at using this plugin.

The plugin is only dependent on the jQuery library, so download the jQuery library and TableDnd plugin library.  Then include the reference of jQuery and this plugins library. To implement the basic functionality, call tableDnd() function on the table element. Like this:

$(document).ready(function() {
    $("#tblData").find("tr:even").addClass("even");
    $("#tblData").find("tr:odd").addClass("odd");
    $("#tblData").tableDnD();
});

The above code will apply different row styles for odd and even rows, and will also implement drag and drop functionality for the rows. You can check out the demo at the following link.

The above code does the basic job of dragging and dropping the rows. To make it look more attractive, we can also highlight specific rows. Remember, we defined a CSS class named myDragClass. This plugin provides an option to set a CSS class to row during dragging. Use the onDragClass option to set the CSS class. Like this:

$("#tblData").tableDnD({
   onDragClass: "myDragClass"
});

This style will be applied for the duration of the drag and then removed when the row is dropped. You can check out the demo at the following link. Looks great, don’t you think?

However, there is a small UI problem that you may have noticed in both the demos. To make tables look more attractive, we used different background colors for even and odd rows, but when the row is dragged and dropped the color styling is negatively affected. The styles that were previously applied to the rows are moved with the data. Take a look at the image below to understand the problem.

To fix this formatting issue, we need to implement a onDrop event. This event is called when the row is dropped. We can pass a function that will be called when the row is dropped. The function takes 2 parameters: the table and the row that was dropped. So inside the function, we can re-arrange the styling order. Like,

$(document).ready(function() {
  $("#tblData").find("tr:even").addClass("even");
  $("#tblData").find("tr:odd").addClass("odd");
  $("#tblData").tableDnD({
    onDragClass: "myDragClass",
    onDrop: function(table, row) {
      $("#tblData").find("tr").removeClass("even odd");
      $("#tblData").find("tr:even").addClass("even");
      $("#tblData").find("tr:odd").addClass("odd");
    }
  });
});

The above code first removes the CSS classes from the table rows and then reassigns the color styles. One thing to note here is that for the onDrop event to get called you must have IDs assigned to all your table rows. So when generating the HTML table dynamically, make sure you assign the ID attribute to table rows. In case of a static HTML table (like in this case), either you can manually assign an ID to every table row (which can be painful) or you can take advantage of jQuery to assign it via code. Like this:

var iCnt = 1; 
$("#tblData tr").each(function() {   
    var id = "tr" + parseInt(iCnt);   
    $(this).attr("id", id);   
    iCnt++; 
});

The above code loops through table rows and adds ID attribute to each row. So now, everything looks good. Check out the demo at the following link!

If you wish to restrict certain rows to be non-draggable, then you can add a “nodrag” class to that table row and the plugin will take care of the rest. Like this:

<tr class="nodrag">

Similarly, if you want to make rows non-droppable so other rows can’t be dropped onto them, add “nodrop” class to that table row and let the plugin do its magic. Like this:

<tr class="nodrop">

For the demo, row no. 3 is marked as nodrag and row no. 8 is marked as nodrop. You can also give a different style to them to let user know that these rows have special restrictions. For this demo, non-draggable rows are highlighted with a light blue background while the non-droppable rows are highlighted with a red background.

.nodrag {
  background-color: lightblue;
}
.nodrop {
  background-color: red;
}

You can check out the demo at the following link!

This plugin offers other events and styles to play around with, and also works with hierarchical tables. Please visit the official website to learn more about this plugin.

Conclusion

To sum it up, we’ve just learned how to drag and drop HTML table rows using the TableDnD jQuery plugin. Along with drag and drop implementation, this jQuery plugin offers options to style the way rows are dragged and dropped. Using this plugin, you can also mark individual rows as non-draggable and non-droppable.

How to Verify User Age with jQuery Code

If you’ve ever visited a site that’s selling a product that has certain age restrictions (for example, a site selling or representing an alcohol brand might prompt you to verify that you’re over 21 before you’re allowed access to the site), you might have come into contact with an age verification form. It turns out, that this type of form is a fairly easy one to validate, because all you need to do is prove whether it’s true or false that someone is older than the desired age cut off for access to your site.

The jQuery snippet you can use to validate this type of form is as follows:

$("#age-verify").submit(function() {
    var day = $("#day").val();
    var month = $("#month").val();
    var year = $("#year").val();
    var age = 21;
    var mydate = new Date();
    mydate.setFullYear(year, month - 1, day);
    var currdate = new Date();
    currdate.setFullYear(currdate.getFullYear() - age);
    if ((currdate - mydate) & lt; 0) {
        alert("Sorry, only persons over the age of " + age + " may enter this site");
        return false;
    }
    return true;
});

The code above assumes that the only relevant information you’re collecting from your age verification form (here it has the id #age-verify – - be sure to change it to match the id of your own form) is the day, month, and year of your users birth. The age variable sets the minimum age of users allowed access to your site. For the purposes of this example, we’ve made the minimum age 21.

Using some simple arithmetic and an if else statement, the snippet above determines whether a person is over 21 by checking if the current date subtracted by the age variable is greater than zero. If it is, then they are allowed access to the site, and if it isn’t, they’re presented with a “Sorry, you’re not old enough” message. Of course, there’s nothing about this form that wouldn’t stop an under age user from simply lying about the year of their birth, but the same is true with implementations of this type of form across the board, including with big, international brands.

jQuery Bubbling Text Effect

This tutorial will demonstrate how to use CSS, jQuery, and JavaScript to create a really simple and cool text effect where it appears as though there are bubbles forming behind the text. After forming, the bubble float above the text before they disappear. This tutorial was inspired by a code snippet that originally appeared on CodePen.

Screen Shot 2017-04-15 at 4.08.17 PM

The HTML

To start creating this effect, first you’ll need some HTML. We’ve included our text in an h1 tag which is wrapped in a div. Check out our code below:

<div class="bubbles">
<h1>Bubble Text!</h1>
</div>

The CSS

Even though jQuery is the most important part of getting the animated bubbles to work for this effect, this snippet would be incomplete without some styling. In the CSS code snippet below, we define things like the background-color, the font-family, and the round shape of the bubbles. Make sure you don’t skip this step, but feel free to customize the code to your liking.

body {
background-color: #3498db;
}
.bubbles {
    display: inline-block;
    font-family: arial;
    position: relative;
}
.bubbles h1 {
    position: relative;
    margin: 1em 0 0;
    font-family: 'Lemon/Milk', cursive;
    color: #fff;
    z-index: 2;
}
.individual-bubble {
    position: absolute;
    border-radius: 100%;
    bottom: 10px;
    background-color: #fff;
    z-index: 1;
}

The jQuery

All that’s left to create this cool effect is the addition of some jQuery code. The jQuery is very straightforward – we need to create two arrays, one blank one that will determine the positioning of the bubbles, and another that is populated and will help determine the size of each bubble. Then, we’ll need to write a function that selects random array elements, and another that generates a new selection every 350 milliseconds. Then we have some code that will append the bubbles to the HTML so that they appear in the viewport, and finally we need a final callback function to remove the bubbles from the viewport, so that a huge collection of bubbles doesn’t accumulate at the top of the page. The original author of the aforementioned CodePen snippet annotated the jQuery code very well, so we’ve left his meticulous notes in the code to help you follow the steps as you read them.

// Created for an Articles on:
// https://www.html5andbeyond.com/bubbling-text-effect-no-canvas-required/
jQuery(document).ready(function($) {
    // Define a blank array for the effect positions. 
    // This will be populated based on width of the title.
    var bArray = [];
    // Define a size array, this will be used to vary bubble sizes
    var sArray = [4, 6, 8, 10];

    // Push the header width values to bArray
    for (var i = 0; i & lt; $('.bubbles').width(); i++) {
        bArray.push(i);
    }

    // Function to select random array element
    // Used within the setInterval a few times
    function randomValue(arr) {
        return arr[Math.floor(Math.random() * arr.length)];
    }
    // setInterval function used to create new bubble every 350 milliseconds
    setInterval(function() {
        // Get a random size, defined as variable so it can be used for 
        // both width and height
        var size = randomValue(sArray);
        // New bubble appeneded to div with it's size and left position being set inline
        // Left value is set through getting a random value from bArray
        var styleElm = 'style="left: ' + randomValue(bArray) + 'px;';
        styleElm = styleElm + 'width: ' + size + 'px; height:' + size + 'px;"';
        $('.bubbles').append('<div class="individual-bubble"' + styleElm + '></div>');

        // Animate each bubble to the top (bottom 100%) and reduce opacity as it moves
        // Callback function used to remove finsihed animations from the page
        $('.individual-bubble').animate({
            'bottom': '100%',
            'opacity': '-=0.7'
        }, 3000, function() {
            $(this).remove()
        });
    }, 350);
});

Now you can experiment with this very cool effect — customize the speed, size of the bubbles, colors, etc — and add it to any of your next projects!