Technical notes

Posts

jQuery To Simple tabs

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>Tabs</title> <script src="script/jquery-1.1.3.1.pack.js" type="text/javascript"></script> <script src="script/jquery.history_remote.pack.js" type="text/javascript"></script> <script src="script/jquery.tabs.pack.js" type="text/javascript"></script> <script type="text/javascript"> $(function() {

jQuery Drop Down Menu

Steps to develop the Drop Down menu . Step 1: Create a new file (suckerfish.html) and add the following code into it: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>jQuery Drop Down Menu</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#van-one li").hover( function(){ $("ul", this).fadeIn("slow"); }, function() { } ); if (document.all) { $("#van-one li").hoverClass ("sfHover"); } }); $.fn.hoverCl

jQuery Toggle the Div

Steps to develop the Toggle of a Div . Step 1: Create a new file (jqrycollapse.html) and add the following code into it: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>JQuery Collapse</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function() { $("#click_here").click(function(event) { event.preventDefault(); $("#div1").slideToggle(); }); $("#div1 a").click(function(event) { event.preventDefault(); $("#div1").slideUp();

JQuery Sliding elements example

For sliding effect jQuery has following methods : .slideDown( ) This method display the matched elements with a sliding effect. Example : Image is initially hidden, we can show it slowly : $('#clickme').click(function() { $('#imageNew').slideDown('slow', function() { // Animation complete. }); }); .slideToggle( ) This method is used to display or hide the matched element with sliding effect. .slideUp( ) This method is used to hide the element with sliding effect. Example(for slideToggle & slideUp) : In the below example, when you click on given button, a window opens .And if you again click on this button, it hides window. This window also contain a '[x]' button. When you click on it, it hides the window also. This window displays because the button click fires 'slideToggle' event, which slide u

How to add Horizontal Scroll bar and checkbox in JQGrid

autowidth:true, scrollable:true, shrinkToFit:false, autoheight:true, multiselect: true,

On Change Event in JQGrid

colModel:[ {name:'countryName',index:'countryName',width:100,editable:true,edittype:"select", editoptions:{value:countrylist, dataEvents :[ { type: 'change', fn: function(e) { var thisval = $(e.target).val(); $.get('state.htm?id='+thisval, function(data) { var res = $(data).html(); $("#stateName").html(res); })

Passing data to the Server

Many times you collect input from the user and you pass that input to the server for further processing. JQuery AJAX made it easy enough to pass collected data to the server using data parameter of any available Ajax method. Example: This example demonstrate how can pass user input to a web server script which would send the same result back and we would print it: <html> <head> <title>the title</title> <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("#driver").click(function(event){ var name = $("#name").val(); $("#stage").load('/jquery/result.php', {"name":name} ); }); }); </script> </head> <body> <p>Enter your name and click on the button:</p> &l