Archive for category jQuery
Select tags(words) from one list to another using jQuery
Posted by admin in JavaScript, jQuery on April 11th, 2009
Select tags using jQuery
You can view the working demo here.
Here I am showing an example in which we can select tags from given tag cloud using jQuery. The code the easy to understand and easy to customize as per requirement. I have created two DIVs. First DIV contains all the tags when page load. We can select tags from first DIV by double clicking on the tags. We can also remove selected tags from second DIV by double clicking on tag. We can also sort the tags by using filters (like:- All, Popular, and New). We can get the IDs of selected tags by clicking the submit button.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Select tags(words) from one list to another using jQuery</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery.js"></script> </head> <body> <div class="page"> <div class="form"> <h3>Select tags(words) from one list to another using jQuery.</h3> <br /> <div class="formbox"> <div id="tags_left" class="alltags tagsbox"> <a href="javascript:void(0);" class="ctagleft all new" tagid="2">Design</a> <a href="javascript:void(0);" class="ctagleft all new" tagid="3">Gadgets</a> <a href="javascript:void(0);" class="ctagleft all new" tagid="4">Hardware</a> <a href="javascript:void(0);" class="ctagleft all new" tagid="5">Industry News</a> <a href="javascript:void(0);" class="ctagleft all new" tagid="6">Linux/Unix</a> <a href="javascript:void(0);" class="ctagleft all new" tagid="7">Microsoft</a> <a href="javascript:void(0);" class="ctagleft all new" tagid="8">Programming</a> <a href="javascript:void(0);" class="ctagleft all new" tagid="9">Security</a> <a href="javascript:void(0);" class="ctagleft all new" tagid="10">Software</a> <a href="javascript:void(0);" class="ctagleft all new" tagid="11">Business/Finance</a> <a href="javascript:void(0);" class="ctagleft all new" tagid="12">World News</a> <a href="javascript:void(0);" class="ctagleft all new" tagid="13">Political News</a> <a href="javascript:void(0);" class="ctagleft all popular" tagid="14">Political Opinion</a> <a href="javascript:void(0);" class="ctagleft all popular" tagid="15">Environment</a> <a href="javascript:void(0);" class="ctagleft all popular" tagid="16">General Sciences</a> <a href="javascript:void(0);" class="ctagleft all popular" tagid="17">Space</a> <a href="javascript:void(0);" class="ctagleft all popular" tagid="18">PC Games</a> <a href="javascript:void(0);" class="ctagleft all popular" tagid="19">Playable Web Games</a> </div> <div id="tags_right" class="seltags tagsbox"></div> </div> <div class="float_break"></div> <div style="float:left; padding:0px 1px 0 4px;"><h6>Double click on tag to select</h6></div> <div style="float:left; padding:0px 0 0 210px;"><h6>Double click on tag to remove</h6></div> <div class="float_break"></div> <h6> Sort by: <a href="javascript:void(0);" id="show_all">All</a> <a href="javascript:void(0);" id="show_popular">Popular</a> <a href="javascript:void(0);" id="show_new">New</a> </h6> <br /> <div class="float_break"></div> <div class="formbox"> <input type="button" value="Submit" id="submit"/> <div class="float_break"></div> </div> </div> </div> </body> </html>
<script language="javascript"> $(document).ready(function () { $('.ctagleft').dblclick(function() { var tag_clone = $(this).clone(true); if ($(tag_clone).hasClass('ctagleft')) { $(tag_clone).removeClass('ctagleft').addClass('ctagright'); $('#tags_right').append(tag_clone).append(' '); } else if ($(tag_clone).hasClass('ctagright')) { $(tag_clone).removeClass('ctagright').addClass('ctagleft'); $('#tags_left').append(tag_clone).append(' '); } $(this).remove(); }); $('.ctagright').dblclick(function() { var tag_clone = $(this).clone(true); if ($(tag_clone).hasClass('ctagleft')) { $(tag_clone).removeClass('ctagleft').addClass('ctagright'); $('#tags_right').append(tag_clone).append(' '); } else if ($(tag_clone).hasClass('ctagright')) { $(tag_clone).removeClass('ctagright').addClass('ctagleft'); $('#tags_left').append(tag_clone).append(' '); } $(this).remove(); }); $('#submit').click(function() { var tags = ''; $('#tags_right .ctagright').each(function() { var tag_id = $(this).attr('tagid'); tags += tag_id + ','; }); if (tags == '') { tags = 'No tag selected yet.'; } alert('Selected tags ID are: ' + tags); }); $('#show_popular').click(function(){ $('#tags_left .all').css("display", "none"); $('#tags_left .popular').css("display", ""); }); $('#show_all').click(function(){ $('#tags_left .all').css("display", ""); }); $('#show_new').click(function(){ $('#tags_left .all').css("display", "none"); $('#tags_left .new').css("display", ""); }); }); </script>
Create simple left tree menu using jQuery
Posted by admin in JavaScript, jQuery on March 23rd, 2009
We can easily create left tree menus for our website. Left tree menus provide easy navigation to our website and our website look more organized.
Left Tree Menu Image
You can view the working demo here.
You can download the source code here.
In tree menu each item is called node. A node further can have child nodes. We used unordered list for menus “<ul></ul>“. We are just toggling the “display” property of “<ul>” from “block” to “none” and “none” to “block” when user click on it. The “block” will expand the menu and “none” collapsed it.
HTML Code:-
<div class="content"> <ul id="root" class="menu"> <li> <a href='javascript:void(0);' childid = 'c_12' class='cat_close category'> </a> <a href='javascript:void(0);'>Diabeties</a> </li> <ul id='c_13'> <li> <a href='javascript:void(0);' class='product'> </a> <a href='javascript:void(0);'>Skelaxin</a> </li> </ul> <li> <a href='javascript:void(0);' childid = 'c_8' class='cat_close category'> </a> <a href='javascript:void(0);'>Pain Killers</a> </li> <ul id='c_8'> <li> <a href='javascript:void(0);' childid = 'c_11' class='cat_close category'> </a> <a href='javascript:void(0);'>Brufin</a> </li> <li> <a href='javascript:void(0);' childid = 'c_10' class='cat_close category'> </a> <a href='javascript:void(0);'>D Cold Plus</a> </li> </ul> <li> <a href='javascript:void(0);' childid = 'c_5' class='cat_close category'> </a> <a href='javascript:void(0);'>Ultracet</a> </li> <ul id='c_5'> <li> <a href='javascript:void(0);' childid = 'c_7' class='cat_close category'> </a> <a href='javascript:void(0);'>Ultracet</a> </li> <ul id='c_7'> <li> <a href='javascript:void(0);' class='product'> </a> <a href='javascript:void(0);'>Generic Ultracet</a> </li> </ul> </ul> <li> <a href='javascript:void(0);' childid = 'c_3' class='cat_close category'> </a> <a href='javascript:void(0);'>Watson</a> </li> <li> <a href='javascript:void(0);' class='product'> </a> <a href='javascript:void(0);'>Carisoprodol</a> </li> <li> <a href='javascript:void(0);' class='product'> </a> <a href='javascript:void(0);'>Levitra</a> </li> </ul> </div>
JavaScript Code:-
<script type="text/javascript"> $(document).ready(function() { $("#root ul").each(function() {$(this).css("display", "none");}); $("#root .category").click(function() { var childid = "#" + $(this).attr("childid"); if ($(childid).css("display") == "none") {$(childid).css("display", "block");} else {$(childid).css("display", "none");} if ($(this).hasClass("cat_close")) {$(this).removeClass("cat_close").addClass("cat_open");} else{$(this).removeClass("cat_open").addClass("cat_close");} }); }); </script>
Select content from one list to another using jQuery
Posted by admin in JavaScript, jQuery on February 27th, 2009
List Content Selection using jQuery
Few days back I was searching for some JavaScript functionality in which we can drag and drop elements from one list to another. I have found few good examples but all of them have some limitations. Like few are not working in IE or not fit for my requirement.
So, I have decided to write one myself. I have used jQuery JavaScript library because its provide some cool functions to easily work with DOM.
The example is easy to understand and you can easily extend or change it as per your need. I have tested it in Firefox 3.0, Google Chrome 1.0, Safari 3.3.2 and IE 7.0 on windows platform.
What I did is I have created two DIVs. First DIV have all the items when page load. User can select multiple items from first DIV using checkbox and click the right button to move the selected items from first DIV to second DIV. They can also move item from right DIV to left DIV using the left button.
You can view the working demo here.
You can download the source code here.
Here is the code for it with explaination:
HTML:
<div id=”all_users”> <div id=”user1″ userid=”1″ class=”innertxt”> <img src=”images.jpg” width=”75″ height=”75″><strong>Test User 01</strong> <ul> <li>User ID: 1</li> <li>Email: user1@nodomain.com</li> <li style=”padding-top:5px;”><input type=”checkbox” id=”select1″ value=”1″ class=”selectit” /> <label for=”select1″> Select it.</label> </li> </ul> </div> </div> <div> <a href=”javascript:void(0);” id=”move_right”>Right »</a><br /><br /> <a href=”javascript:void(0);” id=”move_left”>« Left</a> </div> <div id=”selected_users”></div>
We have two DIVs with ID “#all_users” and “#selected_users“. “#all_users” contains all the items and “#selected_users” is empty when page load. The first DIV contain an item”#user1“. We also have two links “#move_left” and “#move_right” for moving items between lists.
JavaScript:
<script type="text/javascript"> $(’#all_users .selectit’).click(function() { var userid = $(this).val(); $(’#user’ + userid).toggleClass(’innertxt_bg’); }); </script>
When user check the “select it” checkbox of any item we add the “.innertxt_bg” class to that item. When user unchecked any “select it” checkbox we remove the “.innertxt_bg” class from that item. This is done by “toggleClass()” method. “toggleClass()” method first check the given class is assigned to element, if class is assigned then its remove it otherwise assign to element.
<script type="text/javascript"> $(”#move_right”).click(function() { var users = $(’#selected_users .innertxt2′).size(); var selected_users = $(’#all_users .innertxt_bg’).size();if (users + selected_users > 5) { alert(’You can only chose maximum 5 users.’); return; } $(’#all_users .innertxt_bg’).each(function() { var user_id = $(this).attr(’userid’); $(’#select’ + user_id).each(function() {this.checked = false;}); var user_clone = $(this).clone(true); $(user_clone).removeClass(’innertxt’); $(user_clone).removeClass(’innertxt_bg’); $(user_clone).addClass(’innertxt2′); $(’#selected_users’).append(user_clone); $(this).remove(); }); }); </script>
When user clicks the “move right” button, We check which items are selected in first list. All the selected item have the class “.innertxt_bg”. Then we create the clone of selected item using the jQuery “clone()” method and append this clone at the end of second list. After appending the clone to second list we remove the actual item from first list using the “remove()” method. We are also implementing the limit in selection of number of items from first list. We are using “size()” method to find the number of selected items.
<script type="text/javascript"> $(”#move_left”).click(function() { $(’#selected_users .innertxt_bg’).each(function() { var user_id = $(this).attr(’userid’); $(’#select’ + user_id).each(function() {this.checked = false;});var user_clone = $(this).clone(true); $(user_clone).removeClass(’innertxt2′); $(user_clone).removeClass(’innertxt_bg’); $(user_clone).addClass(’innertxt’); $(’#all_users’).append(user_clone); $(this).remove(); }); }); </script>
When user clicks the “move left” button, we just do exactly same what we did in case of “move right” click. The difference is we move item from right list to left list and doesn’t check the number of selected items as there is no need of it.
<script type="text/javascript"> $(’#view’).click(function() { var users = ”; $(’#selected_users .innertxt2′).each(function() { var user_id = $(this).attr(’userid’); if (users == ”) users += user_id; else users += ‘,’ + user_id; }); alert(users); }); </script>
When user click the “view” button we will collect all the item IDs from the right list and display it to user using “alert()” method. You can send the selected item information to server using AJAX or you can assign it to a hidden field and submit the form.
You can view the working demo here.
You can download the source code here.