Highlight a Selected Row in a table using Jquery and CSS class

The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells. –W3Org

In design purpose we can easily design the templates using the tables instead of divs. But if you design the template please use the divs instead of table (Suggested by our designer).Ok now we go for our topic to highlight the table rows.

Why we need to highlight the table row?

Most of the times we need to display the data like a grid. At that time choose the table to display the data. For example if you want to display the data from the database like books in category A. We need to get all the data row by row and include the rows in a table and we place the data in the appropriate columns.

If user wants to delete the third row we need to make the checkbox or radio button to choose the row and if user click the delete button we will delete the row. At this situation we need to highlight which row user chosen for delete, by this way we can avoid accidentally delete the wrong one.

VIEW DEMO

Coding Part:

<!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=utf-8" />

<title>Technotiger87-Highlight Selected row in a table using Jquery and CSS</title>

<script type="text/javascript" src="js/Jquery.1.4.4.js"></script>

<style>

.tableborder

{

padding: 2px 4px 2px 4px;

border: 1px solid #FFFFFF;


}

.tabletitle

{


background:none repeat scroll 0 0 #9EC630;

border-color:#FFFFFF;

border-style:solid;

border-width:1px 1px 1px 0;

color:#FFFFFF;

font-size:14px;

font-weight:bold;

height:20px;

padding-left:5px;

text-align:center;

vertical-align:bottom;

width:150px;

}

.tableodd

{


font-size: 12px;

padding-left: 5px;

padding-top: 5px;

padding-bottom: 5px;

border-style:none solid solid none;

border-width:1px 1px 1px 0px;

border-color:#FFFFFF;

background-color:#E3EEC4;

vertical-align:top;

}

.tableeven

{


font-size: 12px;

padding-left: 5px;

padding-top: 5px;

padding-bottom: 5px;

border-style:none solid solid none;

border-width:1px 1px 1px 0px;

border-color:#FFFFFF;

background-color:#d3E3A4;

vertical-align:top;

}

.highlight

{

font-size: 12px;

padding-left: 5px;

padding-top: 5px;

padding-bottom: 5px;

border-style:none solid solid none;

border-width:1px 1px 1px 0px;

border-color:#9EC630;

background-color:#FFFFFF;

vertical-align:top;

}

</style>

</head>


<body>

<table width="100%" border="1" cellspacing="0" cellpadding="0" class="tableborder">

  <tr class="tabletitle">

    <td class="tabletitle">CheckBox</td>

    <td class="tabletitle">Title</td>

    <td class="tabletitle">Link</td>

  </tr>

  <tr class="tableodd">

    <td class="tableodd"><input type="checkbox" /></td>

    <td class="tableodd">&nbsp;</td>

    <td class="tableodd"><a class="mylink" href="javascript:void(0)">MyLink</a></td>

  </tr>

  <tr>

    <td class="tableeven"><input type="checkbox" /></td>

    <td class="tableeven">&nbsp;</td>

    <td class="tableeven"><a class="mylink" href="javascript:void(0)">MyLink</a></td>

  </tr>

  <tr>

    <td class="tableodd"><input type="checkbox" /></td>

    <td class="tableodd">&nbsp;</td>

    <td class="tableodd"><a class="mylink" href="javascript:void(0)">MyLink</a></td>

  </tr>

  <tr>

    <td class="tableeven" ><input type="checkbox" /></td>

    <td class="tableeven">&nbsp;</td>

    <td class="tableeven"><a class="mylink" href="javascript:void(0)">MyLink</a></td>

  </tr>

</table>


</body>

</html>

Jquery Part:

$(document).ready(function()
 {
   $('td input[type="checkbox"]').live('click',function(){
 if($(this).attr('noclass')!='1')
 {
     if ($(this).is(':checked')){
      anyrowschecked=1;
      
        $(this).parent().addClass('highlight');
        $(this).parent().siblings().addClass('highlight');
     } else if($(this).parent().is('.highlight')) {
       $(this).parent().removeClass('highlight');
       $(this).parent().siblings().removeClass('highlight');
     }
 }
    });
   $('td .deletecontent').live('click',function(){
     var selected=$(this).parent().attr('class');
     if(selected.indexOf("highlight")!=-1)
     {
         alert('You are doing deletion.This will delete the entire data');
       var yes= confirm("Do you really want to delete??");
      if(yes)
      {
        alert("Do Whatever You want");
      }
     }
     else
     {
       
         alert('Please ensure you are deleting the selected row');
     }
       });
 });

Marquee using Jquery

Hi Friends,

we can make the marquee using the Jquery very simple and easy.

For that we need to implement the simple plugin jscroller

You can find the plugin here.They provide the example also.

So I think I dont need to explain the all the things how  we implement.Advantage is we can make the direction as per our wish.

I like a lot.

Simple tooltip using Jquery

Hi Friends,

The tooltip provide the hints to user when they are in the particular point or particular link.

When the user get the hint they may get the idea with in the seconds.Mostly the hints are used in the form fill up process.

Because we need to make the user fill up the form as soon as possible.The tooltip wont occupy the lot of spaces.

Today I found a tooltip that realy make the tooltip in a single file no need to make lot of JS and CSS.

This is the link

You can get the information. I am really lucky today.Because when I  found this I implemented in my project and got the output.

Rotate or Flip the image using Jquery

Smashing JavaScript: 100 Professional Techniques (Smashing Magazine Book Series)One of the excellent tutorial I found in this week is Jquery flip.
By using this we can make the site like a virtual applocation and enhance the user experience with the site.I am going to aplly this in my project for loading the next 9 users.
In my application we are showing the 9 user first if user clicks the nextt arrow button it will load the next 9 user.Instead of using the loading Icon I am going to use this Jquery and make the fun for the user.

View demo and get the source code from the follwing link.Download

On mouseover zoom the image using Jquery

Hi friends,
In this tutuorial I am going to told how to zooming the image when you mouseover on that image .
Now a days the Jquery beaten the flash.This is one best example for that.

In this tutorial I am using the Jquery plugin bubbleup.

Here all the credits goes to AEX

<!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=UTF-8" / >
<title >Learning jQuery: Your First jQuery Plugin is BubbleUP</title >
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" ></script >
<script type="text/javascript" src="js/bubbleup.jquery.js" ></script >
<script type="text/javascript" >

$(function(){

$("ul#menu li img").bubbleup({tooltips: true});

});

</script >
<style type="text/css" >
<!--
body {
background-color: #EDEDED;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
margin: 0px;
padding: 0px;
}

div#content {
width: 1024px;
margin: 50px auto 0px auto;
text-align: center;
}

h3 {
margin-bottom: 50px;
}

ul#menu {
margin: 5px 0px;
}

ul#menu li {
padding: 0px;
display: inline-block;
*display: inline; /* IE 7 and below */
position: relative;
margin-left: 5px;
margin-right: 5px;
width: 48px;
height: 48px;
}

ul#menu li img {
width: 48px;
position: absolute;
top: 0px;
left: 0px;
padding: 0px;
margin: 0 8px 0 0;
border: none;
}

-- >
</style >
</head >
<body >

<div id="content" >
<ul id="menu" >
< li > <a href="http://feeds2.feedburner.com/prlamnguyen" ><img src="images/feed.png" alt="Full RSS Feed" ></a > </li >
< li > <a href="http://feedburner.google.com/fb/a/mailverify?uri=prlamnguyen&loc=en_U" > <img src="images/email.png" alt="E-Mail Delivery" ></a > </li >
< li > <a href="http://twitter.com/" > <img src="images/twitter.png" alt="Follow me on Twitter" ></a > </li >
< li > <a href="http://facebook.com/" > <img src="images/facebook.png" alt="I'm on FaceBook" ></a > </li >
< li > <a href="http://delicious.com/save" onclick="window.open('http://delicious.com/, 'delicious','toolbar=no,width=550,height=550'); return false;" > <img src="images/delicious.png" alt="Save it!" ></a > </li >
< li > <a href="http://technorati.com/" > <img src="images/technorati.png" alt="Favorite this blog" ></a > </li >
</ul >
</div >                        
</body >
</html >

Here is jquery

(function($){
$.fn.bubbleup = function(options) {

//Extend the default options of plugin
var opts = $.extend({}, $.fn.bubbleup.defaults, options);
var tip = null;


return this.each(function() {   

//Set the option value passed here
var $tooltip = opts.tooltips; 



$(this).mouseover(

function () {

if($tooltip) {

tip = $('
' + $(this).attr('alt') + '
');
tip.css({
fontFamily: 'Helvetica, Arial, sans-serif',
color: '#333333', 
fontSize: 12, 
fontWeight: 'bold', 
position: 'absolute', 
zIndex: 100000
});

tip.remove().css({
top: 0, left: 0, 
visibility: 'hidden', 
display: 'block'
}).appendTo(document.body);


//Get the width and height of current image item
var position = $.extend({}, $(this).offset(), {
width: this.offsetWidth, 
height: this.offsetHeight
});


//Get the width and height of the tip element 
var tipWidth = tip[0].offsetWidth, tipHeight = tip[0].offsetHeight;



//Set position for the tip to display correctly
//Postion: top and center of image     
tip.stop().css({
top: position.top - tipHeight, 
left: position.left + position.width / 2 - tipWidth / 2, 
visibility: 'visible'
});

tip.animate({
top: "-=24",
}, 'fast'); 
}        

$(this).stop();
$(this).css({'z-index' : 100, 'top' : 0, 'left' : 0, 'width' : 48}).animate({
left: "-=24",
top: "-=24",
width: 96
}, 'fast');

}

).mouseout(

function () {

if($tooltip) {
tip.remove();
}   

$(this).stop();
$(this).animate({
left: 0,
top: 0,
width: 48
}, 'fast', function() {
$(this).css({'z-index' : 0});
}
);
}

);

});

};

$.fn.bubbleup.defaults = {
tooltips: false
}


})(jQuery);

you can download original files with image from here

Leave the comment to improve us....

Jquery Browser Finder

Hi friends,
Using Jquery we can find the browser.This is going to be very useful when the codings on depending upon the browser oriented.At that time we ca change our coding by finding the browser.So it will take less minutes to solve the issues depending on browser.
All credits goes to akchauhan

< !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 > 
< script type="text/javascript" src="jquery/jquery-1.3.2.min.js" > < /script > 
< script type="text/javascript" > 
$(document).ready(function(){

var browser;
if($.browser.mozilla)
browser = "Firefox";
else if($.msie)
browser = "Internet Explorer";
else if($.browser.opera)
browser = "Opera";
else if($.browser.safari)
browser = "Safari";
else
browser = "Unknown";

$('#browserName').append(browser);
});
< /script > 

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / > 
< title > Browser Finder< /title > 


< body > 
< div id="browserName" > Your Browser: < /div > 
< /body > 
< /html > 

Leave the comments to improve us..

Create a expandable Text area like face boook

Hi friends if you see the text area in face book for replying message it going to be nice and good one.


It is going to be expand for particular distance after that only it going to make the scroll bar.You can also make this by using Jquery.

Here is the code for HTML

< !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=utf-8" / > 
< script type="text/javascript" src="jquery/jquery-1.3.2.min.js" > < /script > 
< !--< script type="text/javascript" src="jquery.autogrow-1.2.2/jquery.autogrow.js" > < /script > -- > 
< script type="text/javascript" src="jquery/autoextendtextarea.js" > < /script > 
< title > Untitled Document< /title > 
< script > 
$(document).ready(function(){
$('textarea#comment').autoResize({
// On resize:
onResize : function() {
$(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
$(this).css({opacity:1});
},
// Quite slow animation:
animateDuration : 300,
// More extra space:
extraSpace : 40
});
});
< /script > 
< /head > 

< body > 
< textarea style="line-height:10px min-height:30px" id='comment' > < /textarea > 
< /body > 
< /html > 

The Jquery Plugin for this is

// JavaScript Document
/*
* jQuery autoResize (textarea auto-resizer)
* @copyright James Padolsey http://james.padolsey.com
* @version 1.04
*/
//Source:http://james.padolsey.com/javascript/jquery-plugin-autoresize/
(function($){

$.fn.autoResize = function(options) {

// Just some abstracted details,
// to make plugin users happy:
var settings = $.extend({
onResize : function(){},
animate : true,
animateDuration : 150,
animateCallback : function(){},
extraSpace : 20,
limit: 1000
}, options);

// Only textarea's auto-resize:
this.filter('textarea').each(function(){

// Get rid of scrollbars and disable WebKit resizing:
var textarea = $(this).css({resize:'none','overflow-y':'hidden'}),

// Cache original height, for use later:
origHeight = textarea.height(),

// Need clone of textarea, hidden off screen:
clone = (function(){

// Properties which may effect space taken up by chracters:
var props = ['height','width','lineHeight','textDecoration','letterSpacing'],
propOb = {};

// Create object of styles to apply:
$.each(props, function(i, prop){
propOb[prop] = textarea.css(prop);
});

// Clone the actual textarea removing unique properties
// and insert before original textarea:
return textarea.clone().removeAttr('id').removeAttr('name').css({
position: 'absolute',
top: 0,
left: -9999
}).css(propOb).attr('tabIndex','-1').insertBefore(textarea);

})(),
lastScrollTop = null,
updateSize = function() {

// Prepare the clone:
clone.height(0).val($(this).val()).scrollTop(10000);

// Find the height of text:
var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace,
toChange = $(this).add(clone);

// Don't do anything if scrollTip hasen't changed:
if (lastScrollTop === scrollTop) { return; }
lastScrollTop = scrollTop;

// Check for limit:
if ( scrollTop >= settings.limit ) {
$(this).css('overflow-y','');
return;
}
// Fire off callback:
settings.onResize.call(this);

// Either animate or directly apply height:
settings.animate && textarea.css('display') === 'block' ?
toChange.stop().animate({height:scrollTop}, settings.animateDuration, settings.animateCallback)
: toChange.height(scrollTop);
};

// Bind namespaced handlers to appropriate events:
textarea
.unbind('.dynSiz')
.bind('keyup.dynSiz', updateSize)
.bind('keydown.dynSiz', updateSize)
.bind('change.dynSiz', updateSize);

});

// Chain:
return this;

};



})(jQuery);

Here all the credits go to Source:james.padolsey

Leave the comment to improve us

CountdownTimer Using Jquery

Hi friends,

In this tutorial I am going tell about how to create and use th countdown Timer using Jquery.

In one of application the client want to display the count down timer.For that I choose Jquery and put it in my application.

The original count down timer is get from David walsh

I slightly modify it and give it to you.

First you need to put the Jquery plugin...

/*
Class:     countDown
Author:    David Walsh
Modified by:Vinoth Kumar.S
Version:   1.0.0
Date:      FEB 05 2010
Built For:  jQuery 1.2.6
*/

jQuery.fn.countDown = function(settings,to,id) {
settings = jQuery.extend({
startFontSize: '36px',
endFontSize: '12px',
duration: 1000,
startNumber: 60,
endNumber: 0,
myid:id,
callBack: function() { }
}, settings);
return this.each(function() {
//alert(settings.toString);
//where do we start?
if(!to && to != settings.endNumber) { to = settings.startNumber; }
//alert(settings.id);


//set the countdown to the starting number
//$(this).text(to).css('fontSize',settings.startFontSize);

hours = Math.floor(to / 60);
minutes = Math.round(to % 60);
if (minutes < 10) {
minutes = "0"+minutes;
}
$(this).text(hours + ':' + minutes).css('fontSize',settings.startFontSize);
//loopage
var myhour=hours + ':' + minutes;
$.cookie('test',myhour,{expires:7,path:'/'});

$(this).animate({
'fontSize': settings.endFontSize
},settings.duration,'',function() {
if(to > settings.endNumber + 1) {
$(this).css('fontSize',settings.startFontSize).text(to - 1).countDown(settings,to - 1);
}
else
{
$.cookie('test',null,{path:'/'});
settings.callBack(this);
}
});

});
};

Then create the Html Page

< !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=utf-8" / > 
< title > countdowntimer< /title > 
< style type="text/css" > 
@import "jquery.countdown.package-1.5.5/css/jquery.countdown.css";

#defaultCountdown { width: 240px; height: 45px; }
< /style > 
< script type="text/javascript" src="jquery/jquery-1.3.2.min.js" > < /script > 
< script type="text/javascript" src="jquery/countdownplugin.js" > < /script > 
< script type="text/javascript" src="jquery/cookie.js" > < /script > 
< script type="text/javascript" > 
$(document).ready(function() {

$('#countdown').countDown({
startNumber: 25,
callBack: function(me) {
$(me).text('All done! This is where you give the reward!').css('color','#090');
$.cookie('test',null,{path:'/'});
//$(this).text(hours + ':' + minutes).css('fontSize',settings.startFontSize);
},
id:5
});
});
< /script > 
< /head > 

< body > 

< p style="border:1px;margin:auto 0px;text-align:center;margin-top:250px;" > 
< span id="countdown" > < /span > 
< /p > 

< /body > 
< /html > 

Please use this and leave the comment to us

Set Interval and Set timeout difference in Jquery

Set timeout in Jquery call the function only once.But the Set interval call the function again and again for the time limit we are given.
But if you want to make the websites such as update the user status and other things you are advice to use set time interval.

If you want to call a function after particular seconds(Such as delay) use the set time out function.

< !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 > 
< script type="text/javascript" src="jquery/jquery-1.3.2.min.js" > < /script > 
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / > 
< title > setTimeout/setInterval< /title > 
< script > 
$(document).ready(function(){
$("#settimeoutfunc").click(function()
{
alert('clciked,Please wait 20 seconds');
setTimeout('alert(\'Settimeout is cliked\')',20000);
});
$("#setIntervalfunc").click(function()
{
alert('clciked,Please wait 20 seconds');
setInterval('alert(\'SetInterval is cliked\')',20000);
});
//alert('test');
});
< /script > 
< /head > 
< body > 
< input type="button" value="settimeout" onclick="" id="settimeoutfunc"/ > 
< input type="button" value="setInterval" onclick="" id="setIntervalfunc"/ > 
< /body > 
< /html > 

Page Redirection Using Jquery

Sometimes we need to redirect the page from the current page to another page.For example if the login is successful the we need to redirect into the Myprofile page or another page wherever you want.

This is simple in Jquery.

Like the javascript window.location.href here also we have the function to redirect.

In the below example I illustrate the page redirection with simple button.If you want to make it depend upon user input in textbox there is also a code.For that you can simply remove the comment lines and use it.

The code is given below

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< xmlns="http://www.w3.org/1999/xhtml">
<>
< equiv="Content-Type" content="text/html; charset=utf-8">
<>
< src="jquery/jquery.js" type="text/javascript">< /script >
<>
$(document).ready(function(){
$("#pageredirect").click(function()
{
/*Remove the comment line and put the comment line in var url="http://www.technotiger87.blogspot.com";*/
/*It will redirect to the particular page given by user in text box*/
//var url=$("#testing").val();

var url = "http://www.technotiger87.blogspot.com"; 
$(location).attr('href',url);

});
});
< /script >
< /head >
<>
< !--Remove the below comment line when you want to enter the URL and redirect it-- >
< !--Redirect Url:< type="text" name="testing" id="testing">
< type="button" name="pageredirect" id="pageredirect" value="Redirect">
< /body >
< /html >

click here to download at pdf format

Leave the comments…

Set the session Using Jquery

Sessions are playing vital role in the web development. Most of the time we need to set the session during development.

For example when the user get the successful login we set the session Id or Cookie to track the user for the full of successful session.

If we develop the code using Jquery we can create the session using Jqury session plugin.

For that plugin you can download it from the following link

http://code.google.com/p/jquery-session/downloads/list

I used the version 0.3 in this example

In this version there is also a JQuery, Json .Jquery.session is available.You can use it depend upon your meeds.

The following PHP program set the session using Jquery

< !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=utf-8" / > 
< title > Seesion Using Jquery< /title > 
< script type="text/javascript" src="jquery/jquery.js" > < /script > 
< script type="text/javascript"  src="jquery/jquery.session.js" > < /script > 
< script type="text/javascript" > 
$(document).ready(function(){
$.session("example","mysession");
alert($.session("example"));
});
< /script > 
< /head > 

< body > 
< !--Please Visit http://technotiger87.blogspot.com and leave the comments-- > 
< /body > 
< /html > 

Use this and leave the comments

Text box allow only the numbers by using Jquery

Today I need a coding for text box only allow the numbers. I got the script from the net. Here I am going to present for www.scribd.com users.

The coding shows below…


HTML coding..

<!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=utf-8" />
< title>Untitled Document</title>
< script type="text/javascript" src="jquery/jquery.js"></script>
< script type="text/javascript" src="jquery/jqueryvalid.js"></script>
</head>
< body>
< input type="text" name="quantity" id="quantity" /> 
</body>
</html>

Before going to run the code please note I include the jquery.js. This is the file you can get from http://jquery.com/ .before the jquery/jquery.js here jqurey is the folder name you can write as username/jquery.js or else what you wish..

Then in next I include another javascript file named jqueryvalid.js.Here you need to write the jqueryvalid.js in the jquery folder.

jqueryvalid.js ……

$(document).ready(function(){

$("#quantity").keypress(function (e){
if( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57))
{
//display error message
$("#errmsg").html("Digits Only").show().fadeOut("slow"); 
return false;
} 

});

});

Whenever the key pressed within the textbox it is checked ASCII character for whwther is it number or alphabet. If alphabet it wont be allowed to enter.

It is really useful for validation…

Hide a Table Column Using Jquery

Today I need a coding for hide table column in a table. Here I am going to present for our blog users.

The coding shows below…


HTML coding..

<!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=utf-8" />
< title>Untitled Document</title>
< script type="text/javascript" src="jquery/jquery.js"></script>
< script type="text/javascript" src="jquery/hidetable.js"></script>

</head>

< body>
< table>
< tr>
< td>
< input type="radio" id="radiobtn" name="radiobtn" value="1"/ > Show Table column<br/>
< input type="radio" id="radiobtn" name="radiobtn" value="2"/ > Show Table column<br/>
< input type="radio" id="radiobtn" name="radiobtn" value="3"/ > Hide Table Column<br/>
</td>
< td id="hidecolumn">
< input type="checkbox" name="checkme" id="checkme"/> Check me
< input type="text" name="entertext" id="entertext"/> I am Text box
</td>
< tr>
</table>
</body>
</html>

Before going to run the code please note I include the jquery.js. This is the file you can get from http://jquery.com/ .before the jquery/jquery.js here jqurey is the folder name you can write as username/jquery.js or else what you wish..

Then in next I include another javascript file named jqueryvalid.js.Here you need to write the jqueryvalid.js in the jquery folder.

jqueryvalid.js ……

$(document).ready(function(){
$("input:radio[name='radiobtn']").click(function() {
var isDisabled = $(this).is(":checked") && $(this).val() == "3";
if(isDisabled==true)
{
$("#hidecolumn").hide();

}
else
{
$("#hidecolumn").show();

}
});

});

Use this and leave the comment.

Get the dropdown value using Jquery

Today I am going to tell you how to get the dropdown value when the user clicks on it. It sometimes very much useful to get the value and stored it on database.

For example you may use the time zone or anything.At that time it provides more helpful to you.

Even this is going to be small thing it helps a lot.

Here the HTML code is displayed…

;">< !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=utf-8" / > 
< title > Untitled Document< /title > 
< script type="text/javascript" src="jquery/jquery.js" > < /script > 
< script type="text/javascript" src="jquery/getdropdownvalue.js" > < /script > 
< /head > 

< body > 
< select name="getdropdown" id="getdropdown" > 
< option value="1" > Trial  1< /option > 
< option value="2" > Trial  2< /option > 
< option value="2" > Trial  3< /option > 
< option value="2" > Trial  4< /option > 
< option value="2" > Trial  5< /option > 
< option value="2" > Trial  6< /option > 
< /select > 
< /body > 
< /html > 

The Jquery will be coded below as…

$(document).ready(function(){

$("#getdropdown").change(function() {
var trial=$("#getdropdown option:selected").text();
alert(trial);
});

});

Here getdropdown is the ID of dropdown box

You can put val() instead of text() you get the dropdown value

Create a cookie using Jquery

Today I told you the fact creating cookie.Creating cookie is often we need when we develop the site.

Here I told you how to create a cookie .

Creating a cookie in Jquery is very simple than other languages.But for creating a cookie you need the plugin you can download it from the following link.

http://plugins.jquery.com/files/jquery.cookie.js.txt

< !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=utf-8" / > 
< title > Untitled Document< /title > 
< script type="text/javascript" src="jquery/jquery.js" > < /script > 
< script type="text/javascript" src="jquery/cookie.js" > < /script > 
< script type="text/javascript" > 
$(document).ready(function(){
$.cookie("example","mycookie");
});
< /script > 
< /head > 

< body > 
< ?php echo $_COOKIE["example"];? > 
< /body > 
< /html > 

Run the above code will give result of cookie value. The

$.cookie("example","mycookie");

means example give name to cookie,mycookie is the value

My cookie is printed on the page.

You can delete the cookie by

$.cookie("example", null);

Create the cookie with expiration

$.cookie("example", "foo", { expires: 7 });

Please leave the comments