Archive for category jQuery
How use AJAX in DRUPAL
How use AJAX in DRUPAL
We can easily use AJAX in DRUPAL framework. Drupal provide the jQuery javascript library so we can use jQuery for our AJAX implementation. First we write a module in which we are going to implement the server side logic. Suppose our module name is product and we will check the given product name is exist or not in our product table.
<?php /*product.module*/ function product_menu() { $items = array(); $items['product'] = array( 'page callback' => 'drupal_get_form', 'page arguments' => array('product'), 'access arguments' => TRUE, 'type' => MENU_CALLBACK, ); $items['product/check_name'] = array( 'page callback' => 'check_name', 'access arguments' => TRUE, 'type' => MENU_CALLBACK, ); return $items; } function product() { $path = drupal_get_path('module', 'product'); drupal_add_js($path . '/product.js', 'module'); $form['product_name'] = array( '#title' => t('Product Name'), '#type' => 'textfield', '#required' => TRUE, '#size' => 30, '#description' => t('Please enter product name.'), ); $form['check_name'] = array( '#type' => 'markup', '#value' => "<a href='#' id='check_name'>" . t('Check Product Name') . "</a><br/>", ); $form['status'] = array( '#type' => 'markup', '#value' => "<span id='status'></span><br/>", ); $form['submit'] = array( '#type' => 'submit', '#value' => t('Submit'), ); $form['cancel'] = array( '#type' => 'markup', '#value' => l(t('Cancel'), 'product_mgmt'), ); return $form; } function check_name() { $name = strtolower($_GET['name']); $query = "SELECT COUNT(*) AS total FROM {product} WHERE LOWER(product_name) LIKE ('%s')"; $rs = db_query($query, $name); $info = db_fetch_object($rs); $total = $info->total; if ($total) { echo "$('#status').html('This product is available.');"; } else { echo "$('#status').html('This product is not available.');"; } } ?>
Don’t return anything in “check_name()” function otherwise it will return the whole page when we access “product/check_name” path through AJAX.
/*product.js*/ // JavaScript Document $(document).ready(function() { $('#check_name').attr('href', 'javascript:void(0);'); $('#edit-product-name').keydown(function(event){ $('#status').html(''); }); $('#check_name').click(function() { var name = $.trim($('#edit-product-name').val()); if (name == '') { $('#status').html('Please enter product name.'); return; } $.ajax({ type: "GET", url: "/product/check_name", data: "name=" + encodeURI(name), success: function(msg){ eval(msg); } }); }); });
A Simple Modal Window Using CSS And JQuery
Posted by admin in CSS, HTML, JavaScript, jQuery on May 24th, 2009
Simple Modal Window Using CSS and jQuery
In this tutorial, I’m going to share how to create a simple attractive light weight modal window with jQuery and CSS. I like jQuery, because it makes everything so simple and so easy.
You can view the working demo here.
Right, let’s start, this example will show you how to create a modal window that will display the content of a DIV using its #ID.
For jQuery, please include jQuery file in your page where you want to use this model window.
1. HTML code
# <!-- #dialog is the id of a DIV defined in the code below --> # <a name="modalwindow" href="#open">Open</a> # <div> # # <!--You easily customize your window here --> # <div class="window"> # <strong>Testing of Modal Window</strong> | # # <!-- close button is defined as close window --> # <a class="close" href="#">Close window</a> # #</div> # # <!-- Do not remove div#hide, because you shall need it to fill the whole screen --> # #</div>
2. CSS code
# /* Z-index of #hide must lower than #container .window */
# #hide {
# position:absolute;
# z-index:9000;
# background-color:#000;
# display:none;
# }
#
# #container .window {
# position:absolute;
# width:440px;
# height:200px;
# display:none;
# z-index:9999;
# padding:20px;
# }
#
#
# /* Customize your modal window here, you can add background image too */
# #container #openbox {
# width:375px;
# height:203px;
# }3. Jquery code
# $(document).ready(function() { # # //select all the a tag with name equal to modalwindow # $('a[name=modalwindow]').click(function(e) { # //Cancel the link behavior # e.preventDefault(); # //Get the A tag # var id = $(this).attr('href'); # # //Get the screen height and width # var hideHeight = $(document).height(); # var hideWidth = $(window).width(); # # //Set heigth and width to hide to fill up the whole screen # $('#hide').css({'width':hideWidth,'height':hideHeight}); # # //transition effect # $('#hide').fadeIn(1000); # $('#hide').fadeTo("slow",0.8); # # //Get the window height and width # var winH = $(window).height(); # var winW = $(window).width(); # # //Set the popup window to center # $(id).css('top', winH/2-$(id).height()/2); # $(id).css('left', winW/2-$(id).width()/2); # # //transition effect # $(id).fadeIn(2000); # # }); # # //if close button is clicked # $('.window .close').click(function (e) { # //Cancel the link behavior # e.preventDefault(); # $('#hide, .window').hide(); # }); # # //if hide is clicked # $('#hide').click(function () { # $(this).hide(); # $('.window').hide(); # }); # # }); #
Show image when its completely received by browser
Posted by admin in HTML, JavaScript, jQuery on May 17th, 2009
Click on Image to see demo
In this example, I am showing how to display image when its completely received by browser. We need this kind of thing when we are changing any Image through JavaScript and want to show some loader until image is not completely receive by client browser. I am using Image onload event for this purpose. Its fires when image is load by browser. When user click on prev or next link we hide the image by adding the ‘hide‘ class to ‘<img>‘. So, user will see the loader image which we placed in the background of image container. When browser load the next image we removed the ‘hide‘ class from ‘<img>‘ and changed its ‘src‘ from older image to new image. I am also using jQuery for adding and removing CSS class from HTML Element. Check out the Javascript, CSS and HTML code below.
HTML Code:-
<div class="container"> <div class="prev"><a id="prev" href="javascript:void(0);">«Prev</a></div> <div class="image-container"><img id="pic" src="img/blank.jpg" class="hide" /></div> <div class="next"><a id="next" href="javascript:void(0);">Next»</a></div> <div class="clear-float"></div> </div>
CSS Code:-
<style type="text/css" media="screen"> * { margin:0; padding:0; border:0; font-family:Arial, Helvetica, sans-serif; font-size:1em; font-weight:normal; font-style:normal; text-decoration:none; color:#666; } .container { width:800px; margin-left:auto; margin-right:auto; } .image-container { height:300px; width:400px; border:#333333 thin dashed; margin-top:100px; background:url(img/indicator2.gif) center no-repeat; float:left; } .image-container img { height:300px; width:400px; } .prev{ width:50px; float:left; margin-left:143px; margin-top:250px; } .next{ width:50px; float:left; margin-top:250px; text-align:right; } .clear-float { clear:both; height:1px;} .hide { display:none;} </style>
JavaScript Code:-
<script type="text/javascript" src="img/jquery.js"></script> <script language="javascript"> $(document).ready(function() { var index = 0; var path = 'img/'; var images = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg"]; var pre_images = new Array(); var loaded = new Array(); $("#prev").click(function() { index--; $("#pic").addClass('hide'); if (index < 0) {index = images.length - 1} getImage(); }); $("#next").click(function() { index++; $("#pic").addClass('hide'); if (index >= images.length) {index = 0} getImage(); }); function getImage() { if (loaded[index] == true) { document.getElementById("pic").src = pre_images[index].src; $("#pic").removeClass('hide'); } else { pre_images[index] = new Image(); pre_images[index].src = path + images[index]; pre_images[index].onload = function() { loaded[index] = true; document.getElementById("pic").src = pre_images[index].src; $("#pic").removeClass('hide'); } } } getImage(); }); </script>
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>