Technical notes

Posts

JQGrid Custom Validation

How to check whether EmailId already exists or not colModel:[{name:'emailId',index:'emailId', width:200,editable:true, sorttype:'int',editrules:{email:true, required:true, custom:true, custom_func:checkvalid}}], function checkvalid(value, colname) { var gr = jQuery("#list2").getGridParam('selarrrow'); if(gr=='') { var flag = false; var allRowsInGrid=$("#list2").getGridParam("records"); for(i=1;i<=allRowsInGrid;i++) { var rowId = $("#list2").getRowData(i); var emailId = rowId['emailId']; if(emailId == value) { flag = true; } } if(flag == true) return [false,"Email Id: Email already exist, Please enter a different email ID."];

jQuery to Simple Image Scroller

<!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" xml:lang="en-us"> <head> <title>jCarousel Examples</title> <link href="../style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="script/jquery-1.2.3.pack.js"> </script> <script type="text/javascript" src="script/jquery.jcarousel.pack.js"> </script> <link rel="stylesheet" type="text/css" href="style/jquery.jcarousel.css"/> <link rel="stylesheet" type="text/css" href="style/skin.css" /> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ }); }); </script>

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,