gora

Hi, in this post let's see how to add select all options to jQuery Select2 plugin . Select2 is an excellent alternative to the standard HTML selection box that supports all its functions and provides greater flexibility. The plug-in is easy to setup and use. It supports multiple selection options where the selected elements will be added as pills to the top text box. You can also tag, search and load remote data-sets to select2 control. Below we will see how to use select2 in your web projects, and select all options at once by ticking a check box using jquery. How to Use Select2 jQuery Plug-in? To implement Select2 plug-in in your projects, create a regular drop-down box with html markup as usual. HTML: <select id="states" style="width:300px"> <option>Alaska</option> <option>Arizona</option> <option>California</option> <option>Florida</option> <option>Hawaii</option> ...

Hi! In this post, let's see how to add images to dropdown list using jquery . I had a form with a drop-down element for the list of countries and wanted to insert the corresponding country flag before each country name. But HTML does not support the addition of elements to select box. Then I found some CSS hack but this method is not compatible with all browsers. Finally, I decided to go with java script and found a fairly neat solution. Actually, it is a jquery plugin called 'select2'. It includes the autocomplete feature to dropdown list , but also allows you to add icons to those select options. Below, I'll show you how to use the select2 add-on to insert country flags before the country names in a drop-down list. jQuery - Adding Images to the Dropdown List: STEP-1) First load the 'jQuery' and 'Select2' libraries on the Web page. You need to add both 'css' and 'js' files of the plugin. <link href="https://cdnjs.cloudflar...

Hi! Today let's see about creating treeview using bootstrap and jquery . A Treeview is a tree like representation of elements in a hierarchical structure. It offers a quick and easy navigation through websites. Although there are several jquery plugins available for tree view that simplify the task, I wanted something that works well with bootstrap. And I found out a good library called 'Bootstrap Treeview' . It leverages the best of bootstrap framework and helps you display hierarchical tree structures using the JSON data set. You can do much more than a simple tree, like fetch data from the database and render a dynamic tree, make it collapsible, add icons , checkboxes and filters etc. Building Treeview with Bootstrap: Now let's see how to add treeview in bootstrap. To build the menu, we need three different libraries, Bootstrap CSS jQuery Bootstrap Treeview These libraries are available in the cdn, so you can load them directly on your projects without down...

Hi! In this post, let's see how to autocomplete search from database using codeigniter and ajax . We are going to pull in live search thing something similar to Google search. As soon as you start typing in the textbox, the related suggestions will appear from the database. To implement this auto complete feature we need a jquery plugin called 'Select2'. Select2 is an excellent plug-in that supercharges the regular select box with search functionality . It's really inappropriate to make the end user to skim through hundreds of options to pick just one. With Select2 the entire process is a breeze. It adds up a search filter to the dropdown (select box), thus populating results on fly with the help of ajax. AJAX Autocomplete Search from Database in CodeIgniter: To implement the live autocomplete search in codeigniter, we need two JavaScript libraries, 1. jquery.js and 2. select2.js . Either download them or use from the cdn library just like I do in this demo. Jus...

Hi! Today, we are going to see an interesting tutorial, which is to animate typing effect using jquery typed.js plugin . Not all animations require the skill of a graphics artist. You can pull in some really cool animations just with jquery plugins. jQuery has its share of animation plugins and 'Typed.js' is one among them. It is simple, lightweight and let you add typing effect to web pages. The text will be typed literally character by character thus giving you the impression it is being typed on a terminal. Come, let's see how to implement this typing effect on websites. Adding Animated Typing Effect in jQuery: Typed.js is a jquery library to simulate the terminal typing effect that allows you to print plain text or html as if you were typing on the screen. How to Use it: First create a container to print the string. <div id="container"></div> Then call the function typed() on the container element that we have created and provide the str...

Hi, this time I have come up with a jquery basics tutorial which discusses about how to convert json to html table. In simple terms we are going to use jquery to display data from a json file in neat table format with added pagination and search options to it. To make our life easier there is an excellent jquery plug-in called ‘DataTables’ which we will use for this task. DataTables is a flexible jquery tool which adds up advanced interaction controls to any HTML table. Using this we can easily add pagination, instant search or multi-column ordering to the html table. Moreover it supports all modern day data sources like DOM, JavaScript, Ajax and server-side processing. Convert JSON Data to HTML Table using jQuery As an example let’s take the below sample json file which contains an array of objects and display it in html table using datatables. Don't Miss: How to Create Responsive Carousel Image Slider Also Read: How to Create Image Lightbox Effect with jQuery empda...

Hi, I'm back with another useful and interesting tutorial that talks about implementing jQuery Password Strength Meter to Twitter Bootstrap Framework. Guiding users to choose complex passwords and let them know the strength of their selected passwords during user registration process (signup) is a good and necessary practice to include in websites. Having password strength checker not only improves overall site security but will also gain users trust. Here we'll see how to incorporate it on websites built over twitter bootstrap css framework. Password Strength Meter for Twitter Bootstrap In order to implement password strength meter to bootstrap, we need a jquery plug-in called 'Pwstrength' which attach a nicely animated progress bar to the password input field and show up a real-time password strength checker. This jquery plug-in heavily relies on bootstrap framework and it requires it for the plugin to work properly. Implementing Password Strength Meter To...

LightBox is a popup window that is used to open up images , html contents & other multimedia stuffs. This effect can be produced with css and js but using addons will simplify the task. In this tutorial I will show you how to add such lightbox effect to images with a jQuery plugin , called FancyBox. FancyBox plugin lets you produce clean and elegant lightbox effect with smooth animations. Download the latest version of the plugin here , extract the contents and move the folder 'source' to your working folder. Add Image LightBox Effect using jQuery First we need to include the required js and css files. FancyBox plugin is built over the jQuery library so we should load the jquery file first for the plugin to work. Recommended Read: How to add Photo Frame Effect to Images using pure CSS <!-- include jQuery library --> <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> <!-- include fancyBox JS and CSS fil...