26Feb 2012 by admin No Comments

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">>></a> <br/><br/> <a href="#" id="remove"><<</a> </td> <td>…

26Jun 2011 by admin No Comments

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: urlURL to which the form data will be submitted.Default value: value of form's action attributetypeThe 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)targetIdentifies the element(s) in the page to be updated with the server response. This value may be specified…

12Jun 2011 by admin No Comments

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

08Jun 2011 by admin No Comments

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.

02May 2011 by admin No Comments

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…