Multi Select Drag and Drop Jquery

JQuery
When data is very large and selection using multiselect is difficult so you can use this option multi select drag and drop with jquery. The first holds the options that are available, and the second holds the options that have been selected. Usually, the two boxes are separated by add and remove buttons. You can select an item from the first box, click the add button, and add it to the second box. Likewise, you can select an item from the second box, click the remove button, and it goes back into the unselected box. [sourcecode language="plain"] <table> <tr> <td> <label>All Value</label><br/> <select name="multi_list1" id="select1" multiple="multiple"> <option value="name1">Name 1</option> <option value="name2">Name 2</option> <option value="name3">Name 3</option> <option value="name4">Name 4</option> </select> </td> <td> <a href="#" id="add">&gt;&gt;</a> <br/><br/> <a href="#" id="remove">&lt;&lt;</a> </td> <td>…
Read More

AjaxForm and AjaxSubmit Options

JQuery
Ajaxform uses progressive enhancement, users without JavaScript can still use the form in a traditional way users with JavaScript will get a more sophisticated experience.AjaxForm takes zero or one argument. The single argument can be either a callback function or an Options Object. [code lang="js"]$('#myFormId').ajaxForm();[/code] AjaxForm and AjaxSubmit support numerous options which can be provided using an Options Object. The Options Object is simply a JavaScript object that contains properties with values set as follows: url URL to which the form data will be submitted. Default value: value of form's action attribute type The method in which the form data should be submitted, 'GET' or 'POST'. Default value: value of form's method attribute (or 'GET' if none found) target Identifies the element(s) in the page to be updated with the…
Read More

Add Remove CSS Class Mouseover with JQuery

JQuery
Sometimes we need to change css class on mouseover and mouseout event some of div, images, paragraph for the set any effect or beautiful looks. If you want to change any css class on mouseover this is possible to make very easily using of Jquery. Only three to four lines of code need write in jquery function to make or set any mouseover event to change css style class. Change style class on mouseover with Jquery Here is the one div which is shows navigation menu. [sourcecode language="plain"] <div clas="leftside"> <div class="navOut"><a href="#">ITEM 1</a></div> <div class="navOut"><a href="#">ITEM 2</a></div> <div class="navOut"><a href="#">ITEM 3</a></div> <div class="navOut"><a href="#">ITEM 4</a></div> </div> [/sourcecode] Here is the jQuery function to add rollover effects to this navigation: [code lang="js"] <script type="text/javascript"> $("div.navOut").mouseover(function(){ $(this).removeClass().addClass("navOver"); }).mouseout(function(){ $(this).removeClass().addClass("navOut"); }); </script>…
Read More

Change image on mouse hover effect with jquery

JQuery
This is possible to many way change image on mouse hover effect like javascript. But it will take time and much coding compare to do with jquery. This is very easy to make mouse hover effect with jquery. How to change image mouse over effect with jquery we first need to add the jquery library script [code lang="js"]<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>[/code] [code lang="js"]<img src="logo.png" alt="juswebdevelopment" class="logo" />[/code] This is jquery function for shows change hover effect [code lang="js"] <script type='text/javascript'> $(document).ready(function(){ $(".logo").hover( function() {$(this).attr("src","logo-hover.png");}, function() {$(this).attr("src","logo.png"); }); }); </script> [/code] This function is working with image class="logo". When mouse hover on class logo that time its call this function and change the image as per code.
Read More

How to submit form without refreshing page with jquery and ajax

JQuery
This is very simple artical for submit HTML form data without refreshing page with the help of JQuery and Ajax. jQuery provides a rich set of methods for AJAX web development. With jQuery AJAX, you can request TXT, HTML, XML or JSON data from a remote server using both HTTP Get and HTTP Post. $.ajax(options) is the syntax of the low level AJAX function. $.ajax offers more functionality than higher level functions like load, get, and post. The option parameter takes name|value pairs defining url data, passwords, data types, filters, character sets, timeout and error functions. Below is code for HTML form. [sourcecode language="plain"] <form method="post" name="form"> <ul> <li><input id="name" name="name" type="text" /></li> <li><input id="username" name="username" type="text" /></li> <li><input id="password" name="password" type="password" /></li> <li> <select id="gender" name="gender"> <option value="">Gender</option> <option…
Read More