jQuery Used in Projects
1. Get the length of any class
var numItems = $('.video_box').length;
//Here we get the length of video_box class
2. Get the value of first class
var sourcePath = $(".firstLoadThumb").first().val();
//Here we get the first firstLoadThumb class value
3. Splits the text into array
var sourcePath = "lion|dog|cat";
animal = sourcePath.split('|');
console.log(animal[0]);
//It is explode the string into array. Here animal[0] return lion.
4. Load the page by jquery
location.reload();
5. Datepicker
Open Datepicker on image click
Html code:
<div class="input-append date" id="dp3">
<input type="text" id="datepicker" />
<span class="add-on"><i class="icon-calendar" id="cal2"></i></span>
</div>
javascripr:
$("#dp3").datepicker();
// Here datepicker will open on image and textbox click
On click event on image
$("#calImg").click(function(e) {
$("#datetimepicker1").datepick("show");
});
if you wanted to submit the form on selecting the date:
$("#StartDate").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
onSelect: function(dateText, inst) { $("#myform").submit(); }
});
show the DatePicker when textbox gets focus and hide the datepicker after 2 seconds.
$('#txtDate').datepicker();
$('#txtDate').focus(function() {
$(this).datepicker("show");
setTimeout(function() {
$('#txtDate').datepicker("hide");
$('#txtDate').blur();
}, 2000)
})
$( "#datepicker-3" ).datepicker({
appendText:"(yy-mm-dd)",
dateFormat:"yy-mm-dd",
altField: "#datepicker-4",
altFormat: "DD, d MM, yy"
});
<p>Enter Date: <input type="text" id="datepicker-3"></p>
<p>Alternate Date: <input type="text" id="datepicker-4"></p>
off weekdays
$( "#datepicker-5" ).datepicker({
beforeShowDay : function (date)
{
var dayOfWeek = date.getDay ();
// 0 : Sunday, 1 : Monday, ...
if (dayOfWeek == 0 || dayOfWeek == 6) return [false];
else return [true];
}
});
DateRange validation
$("#txtFrom").datepicker({
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$("#txtTo").datepicker("option", "minDate", dt);
}
});
$("#txtTo").datepicker({
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() - 1);
$("#txtFrom").datepicker("option", "maxDate", dt);
}
});
6. Insert Element after img element
$("#btn2").click(function(){
$("img").after("<p>Hello Inserting element</p>");
});
<img src="/images/xyz.gif" alt="jQuery" width="100" height="140"><br><br>
<button id="btn2">Insert after</button>
7. Add table row in jQuery
<table id="bootTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
$('#bootTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
8. Add or remove Rows in table
<table class="form-table" id="nameFields">
<tr valign="top">
<th scope="row"><label for="name">Name</label></th>
<td>
<input type="text" id="name" name="name[]" value="" placeholder="Name" />
<a href="javascript:void(0);" class="addName">Add</a>
</td>
</tr>
</table>
$(".addName").click(function(){
$("#nameFields").append('<tr valign="top"><th scope="row"><label for="name">Name</label></th><td><input type="text" id="name" name="name[]" value="" placeholder="Name" /> <a href="javascript:void(0);" class="remRow">Remove</a></td></tr>');
});
$("#nameFields").on('click','.remRow',function(){
$(this).parent().parent().remove();
});
9. Get the parent element
<div class="testDemo">
<a href="javascript:void(0);" class="demo">Click Here</a>
</div>
$('.demo').click(function(){
var currentClass = $(this).parent().attr('class');
alert(currentClass);
})
// It will return "testDemo"
Now get the index number of parent class
var index = $('a.demo').parent().index(".testDemo");
or var index = $(this).parent().index(".testDemo");
// It will return the index number of "testDemo"
10. Use siblings to traverse nearest element or parallel
<div class="panel-heading panel-heading-link">
<a href="#collapse_42" data-parent="#accordion" data-toggle="collapse"> Stunt Reel </a>
</div>
<div id="collapse_42" > Test</div>
Suppose you want to change the panel-heading background color on basic of "collapse_42" id
$('#collapse_42').siblings('.panel-heading').css({'background-color':'#333'});
If you want to remove the anchor tag of panel-heading element
$('#collapse_42').siblings('.panel-heading').find('a').remove();
11. Remove Function
If you want to remove anchor tag of testDemo class
<div class="testDemo">
<p>dsdsds</p>
<a href="javascript:void(0);" class="demo">Click Here</a>
</div>
$('.demo').click(function(){
$(this).remove();
})
12. Get the value of any field
<input type="text" id="booking_date">
$('#booking_date').val();
13. Get text of any element
<p id="booking_date">Hello this is testing paragraph text</p>
$('#booking_date').text();
14. Hide and show any element
<div id="booking_date">Hello this is testing paragraph text</div>
$('#booking_date').hide();
$('#booking_date').show();
15. Change CSS by jQuery
$('#cartmsg_result').css("color","#97D504!important");
$('#cartmsg_result').css({'background-color':'#333','color':'#000'});
16. Check wether checkbox/radio box is checked or not
<input type="checkbox" value="all" id="checkFrnd" name="all">
if($("#checkFrnd").prop('checked') == true){
alert('Hello');
}
if ($("#checkFrnd").is(":checked")) {
alert('Hello');
}
or
Check or Uncheck bootstrap checkbox
$('#allCheck').click(function() {
if($(this).attr("checked")){
$('#states').find('span').addClass('checked');
}else{
$('#states').find('span').removeClass('checked');
}
})
$('input[type="checkbox"]').prop('checked', true);
or
$('.checkAll').on('click',function(){ if($(this).prop('checked') == true){ $('.checkOnce').prop('checked',true); }else{ $('.checkOnce').prop('checked',false); } });
17. Get the value and text of selected option
<select id="userName">
<option value="1">Sudhir</option>
<option value="2">Karan</option>
<option value="3">Sumit</option>
<option value="4">Amit</option>
</select>
$("#userName" ).val(); // Get the value
$( "#userName option:selected" ).text(); // Get select option text
18. Calculate the sum of same class of input field
var sum = 0;
$(".productQuantity").each(function(){
if($(this).val()!=''){
sum += parseFloat($(this).val());
}
});
19. Jquery toggle class
//Add or remove class by single function.In this we highlight the div after every 3 click.
<div> Highlight the div </div>
var $thisParagraph = $('div');
var count = 0;
$thisParagraph.click(function() {
count++;
$thisParagraph.toggleClass( "highlight", count % 3 === 0 );
});
20. jQuery Slide example.
Html:
<div class="demo"> Testing for hide and show div</div>
<a href="javascript:void(0);" id="hide">Click to hide</a>
<a href="javascript:void(0);" id="show">Click to show</a>
jQuery:
$("#hide").click(function(){
$(".demo").hide( "slide", { direction: "down" }, 2000 );
});
$("#show").click(function(){
$(".demo").show( "slide", {direction: "up" }, 2000 );
});
$("#hide").click(function(){
$(".demo").slideToggle( 'slow');
});
21.Empty form on click event
$('#resetBtn').on('click',function(e){
$(':input','#searchby')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
e.preventDefault();
});
22. Use of mouseout function
$('.add_btn').mouseout(function(){
alert('fdfd');
});
23. Form submit on pressing "Enter" button
$('form').each(function() {
$(this).find('input').keypress(function(e) {
// Enter pressed?
if(e.which == 10 || e.which == 13) {
return _functionLogincheck();
}
});
});
24. Blocking keyCode
$(document).keydown(function(event){
// Prevent F12 button
if(event.keyCode==123){
return false;
}else if(event.ctrlKey && event.shiftKey && event.keyCode==73){
return false; //Prevent from ctrl+shift+i
}
});
// Prevent right click
$(document).on("contextmenu",function(e){
e.preventDefault();
return false;
});
25.Open and close bootstrap model
<a href="javascript:void(0);" class="btn btn-primary btn-lg openModel">
Launch demo modal
</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<a class="custom-close"> My Custom Close Link </a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
JavaScript:
$(function () {
$(".custom-close").on('click', function() {
$('#myModal').modal('hide');
});
$(".openModel").on('click', function() {
$('#myModal').modal('show');
});
});
26. jQuery closest and find method
The .closest selector traverses up the DOM to find the parent that matches the conditions.
the .find selector traverses down the DOM where the event occurred, that matches the conditions.
closest selector example with html and javascript
<div class="rel-wrap">
<img src="http://placekitten.com/g/920/300" width="920" height="300" class="my-img">
<div class="my-div">
second div
</div>
</div>
$('.my-img').mouseenter(function(){
$(this).closest('.rel-wrap').find('.my-div').animate({left: '0px'}, 1000);
});
$('.rel-wrap').mouseleave(function(){
$('.my-div', this).delay( 1000).animate({left: '-940px'}, 500);
});
27. Slide readmore options
HTML
<div class="about-text">
<b>Tina France</b>
<p>Being fascinated with sound from the very early age inspired her to concentrate on getting trained as a classical singer and a composer.<br/> <a href="#" class="show-about">Read More</a></p>
<div class="about-hidden">
<p>She did her training Under Soprano Patricia MaCmahon at RSAMD and composers William John Sweeney and Nick Fells at the university of Glasgow.
</p></div>
</div>
JavaScript:
$('.show-about').click(function(e){
e.preventDefault();
$(this).closest('.about-text').find('.about-hidden').slideToggle();
$(this).text($(this).text() == 'Read More' ? "Show Less" : "Read More");
});
28. Get the visible first element of class
html:
<ul class="demo1">
<li class="news-item" id="1"></li>
<li class="news-item" id="2"></li>
<li class="news-item" id="3" style="display:none;"></li>
<li class="news-item" id="4" style="display:none;"></li>
javascript:
var first = $('ul.demo1').find('li:visible:first').attr('id');
alert(first);
29. Multiple event on single selector
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
30. How to Scroll to the top of the page?
var xCoord=200;
var yCoord=500;
window.scrollTo(xCoord, yCoord);
31. Fadein and fadeOut elements in stack format
i.e first come Last out
function fadeIn(){
$("li").each(function(i) {
$(this).delay(400*i).fadeIn();
});
}
function fadeOut(){
$($("li").get().reverse()).each(function(i) {
$(this).delay(400*i).fadeOut();
});
}
FadeOut element after some interval
$('.menu-show-now').delay(1500).fadeOut('slow');
32. Remove duplicate row of table
function removeDuplicateRow(){
var seen = {};
$('#searchcus>table>tbody> tr').each(function() {
var txt = $(this).text();
if (seen[txt])
$(this).remove();
else
seen[txt] = true;
});
}
or you can use:
var addedProductCodes = [];
$('input:button').click(function () {
var td_productCode = $("#sales-product-code").val();
var index = $.inArray(td_productCode, addedProductCodes);
if (index >= 0) {
alert("You already added this Product");
} else {
$('#test tr:last').after("<tr><td>data[" + td_productCode + "]</td></tr>");
addedProductCodes.push(td_productCode);
}
});
33. Dynamically moving rows up and down jquery
Html:
<table>
<tr>
<td>Element 1</td>
<td>2008-02-01</td>
<td>
<span class="up"> Move up</span>
<span class="down"> Move Down</span>
</td>
</tr>
<tr>
<td>Element 2</td>
<td>2007-02-02</td>
<td>
<span class="up"> Move up</span>
<span class="down"> Move Down</span>
</td>
</tr>
<tr>
<td>Element 3</td>
<td>2007-02-03</td>
<td>
<span class="up"> Move up</span>
<span class="down"> Move Down</span>
</td>
</tr>
</table>
javascript:
$('.up,.down').click(function () {
var row = $(this).closest('tr');
if ($(this).is('.up')) {
row.insertBefore(row.prev());
}else {
row.insertAfter(row.next());
}
});
34. Create radio buttons behave like single-choice checkboxes Html: <p><label><input type="radio" name="question1" value="morning"> Morning</label><br> <label><input type="radio" name="question1" value="noon"> Noon</label><br> <label><input type="radio" name="question1" value="evening"> Evening</label></p> <script> $(document).ready(function(){ $("input:radio:checked").data("chk",true); $("input:radio").click(function(){ $("input[name='"+$(this).attr("name")+"']:radio").not(this).removeData("chk"); $(this).data("chk",!$(this).data("chk")); $(this).prop("checked",$(this).data("chk")); }); }); </script>
1. Get the length of any class
var numItems = $('.video_box').length;
//Here we get the length of video_box class
2. Get the value of first class
var sourcePath = $(".firstLoadThumb").first().val();
//Here we get the first firstLoadThumb class value
3. Splits the text into array
var sourcePath = "lion|dog|cat";
animal = sourcePath.split('|');
console.log(animal[0]);
//It is explode the string into array. Here animal[0] return lion.
4. Load the page by jquery
location.reload();
5. Datepicker
Open Datepicker on image click
Html code:
<div class="input-append date" id="dp3">
<input type="text" id="datepicker" />
<span class="add-on"><i class="icon-calendar" id="cal2"></i></span>
</div>
javascripr:
$("#dp3").datepicker();
// Here datepicker will open on image and textbox click
On click event on image
$("#calImg").click(function(e) {
$("#datetimepicker1").datepick("show");
});
if you wanted to submit the form on selecting the date:
$("#StartDate").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
onSelect: function(dateText, inst) { $("#myform").submit(); }
});
show the DatePicker when textbox gets focus and hide the datepicker after 2 seconds.
$('#txtDate').datepicker();
$('#txtDate').focus(function() {
$(this).datepicker("show");
setTimeout(function() {
$('#txtDate').datepicker("hide");
$('#txtDate').blur();
}, 2000)
})
$( "#datepicker-3" ).datepicker({
appendText:"(yy-mm-dd)",
dateFormat:"yy-mm-dd",
altField: "#datepicker-4",
altFormat: "DD, d MM, yy"
});
<p>Enter Date: <input type="text" id="datepicker-3"></p>
<p>Alternate Date: <input type="text" id="datepicker-4"></p>
off weekdays
$( "#datepicker-5" ).datepicker({
beforeShowDay : function (date)
{
var dayOfWeek = date.getDay ();
// 0 : Sunday, 1 : Monday, ...
if (dayOfWeek == 0 || dayOfWeek == 6) return [false];
else return [true];
}
});
DateRange validation
$("#txtFrom").datepicker({
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$("#txtTo").datepicker("option", "minDate", dt);
}
});
$("#txtTo").datepicker({
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() - 1);
$("#txtFrom").datepicker("option", "maxDate", dt);
}
});
6. Insert Element after img element
$("#btn2").click(function(){
$("img").after("<p>Hello Inserting element</p>");
});
<img src="/images/xyz.gif" alt="jQuery" width="100" height="140"><br><br>
<button id="btn2">Insert after</button>
7. Add table row in jQuery
<table id="bootTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
$('#bootTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
8. Add or remove Rows in table
<table class="form-table" id="nameFields">
<tr valign="top">
<th scope="row"><label for="name">Name</label></th>
<td>
<input type="text" id="name" name="name[]" value="" placeholder="Name" />
<a href="javascript:void(0);" class="addName">Add</a>
</td>
</tr>
</table>
$(".addName").click(function(){
$("#nameFields").append('<tr valign="top"><th scope="row"><label for="name">Name</label></th><td><input type="text" id="name" name="name[]" value="" placeholder="Name" /> <a href="javascript:void(0);" class="remRow">Remove</a></td></tr>');
});
$("#nameFields").on('click','.remRow',function(){
$(this).parent().parent().remove();
});
9. Get the parent element
<div class="testDemo">
<a href="javascript:void(0);" class="demo">Click Here</a>
</div>
$('.demo').click(function(){
var currentClass = $(this).parent().attr('class');
alert(currentClass);
})
// It will return "testDemo"
Now get the index number of parent class
var index = $('a.demo').parent().index(".testDemo");
or var index = $(this).parent().index(".testDemo");
// It will return the index number of "testDemo"
10. Use siblings to traverse nearest element or parallel
<div class="panel-heading panel-heading-link">
<a href="#collapse_42" data-parent="#accordion" data-toggle="collapse"> Stunt Reel </a>
</div>
<div id="collapse_42" > Test</div>
Suppose you want to change the panel-heading background color on basic of "collapse_42" id
$('#collapse_42').siblings('.panel-heading').css({'background-color':'#333'});
If you want to remove the anchor tag of panel-heading element
$('#collapse_42').siblings('.panel-heading').find('a').remove();
11. Remove Function
If you want to remove anchor tag of testDemo class
<div class="testDemo">
<p>dsdsds</p>
<a href="javascript:void(0);" class="demo">Click Here</a>
</div>
$('.demo').click(function(){
$(this).remove();
})
12. Get the value of any field
<input type="text" id="booking_date">
$('#booking_date').val();
13. Get text of any element
<p id="booking_date">Hello this is testing paragraph text</p>
$('#booking_date').text();
14. Hide and show any element
<div id="booking_date">Hello this is testing paragraph text</div>
$('#booking_date').hide();
$('#booking_date').show();
15. Change CSS by jQuery
$('#cartmsg_result').css("color","#97D504!important");
$('#cartmsg_result').css({'background-color':'#333','color':'#000'});
16. Check wether checkbox/radio box is checked or not
<input type="checkbox" value="all" id="checkFrnd" name="all">
if($("#checkFrnd").prop('checked') == true){
alert('Hello');
}
if ($("#checkFrnd").is(":checked")) {
alert('Hello');
}
or
Check or Uncheck bootstrap checkbox
$('#allCheck').click(function() {
if($(this).attr("checked")){
$('#states').find('span').addClass('checked');
}else{
$('#states').find('span').removeClass('checked');
}
})
$('input[type="checkbox"]').prop('checked', true);
or
$('.checkAll').on('click',function(){ if($(this).prop('checked') == true){ $('.checkOnce').prop('checked',true); }else{ $('.checkOnce').prop('checked',false); } });
17. Get the value and text of selected option
<select id="userName">
<option value="1">Sudhir</option>
<option value="2">Karan</option>
<option value="3">Sumit</option>
<option value="4">Amit</option>
</select>
$("#userName" ).val(); // Get the value
$( "#userName option:selected" ).text(); // Get select option text
18. Calculate the sum of same class of input field
var sum = 0;
$(".productQuantity").each(function(){
if($(this).val()!=''){
sum += parseFloat($(this).val());
}
});
19. Jquery toggle class
//Add or remove class by single function.In this we highlight the div after every 3 click.
<div> Highlight the div </div>
var $thisParagraph = $('div');
var count = 0;
$thisParagraph.click(function() {
count++;
$thisParagraph.toggleClass( "highlight", count % 3 === 0 );
});
20. jQuery Slide example.
Html:
<div class="demo"> Testing for hide and show div</div>
<a href="javascript:void(0);" id="hide">Click to hide</a>
<a href="javascript:void(0);" id="show">Click to show</a>
jQuery:
$("#hide").click(function(){
$(".demo").hide( "slide", { direction: "down" }, 2000 );
});
$("#show").click(function(){
$(".demo").show( "slide", {direction: "up" }, 2000 );
});
$("#hide").click(function(){
$(".demo").slideToggle( 'slow');
});
21.Empty form on click event
$('#resetBtn').on('click',function(e){
$(':input','#searchby')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
e.preventDefault();
});
22. Use of mouseout function
$('.add_btn').mouseout(function(){
alert('fdfd');
});
23. Form submit on pressing "Enter" button
$('form').each(function() {
$(this).find('input').keypress(function(e) {
// Enter pressed?
if(e.which == 10 || e.which == 13) {
return _functionLogincheck();
}
});
});
24. Blocking keyCode
$(document).keydown(function(event){
// Prevent F12 button
if(event.keyCode==123){
return false;
}else if(event.ctrlKey && event.shiftKey && event.keyCode==73){
return false; //Prevent from ctrl+shift+i
}
});
// Prevent right click
$(document).on("contextmenu",function(e){
e.preventDefault();
return false;
});
25.Open and close bootstrap model
<a href="javascript:void(0);" class="btn btn-primary btn-lg openModel">
Launch demo modal
</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<a class="custom-close"> My Custom Close Link </a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
JavaScript:
$(function () {
$(".custom-close").on('click', function() {
$('#myModal').modal('hide');
});
$(".openModel").on('click', function() {
$('#myModal').modal('show');
});
});
26. jQuery closest and find method
The .closest selector traverses up the DOM to find the parent that matches the conditions.
the .find selector traverses down the DOM where the event occurred, that matches the conditions.
closest selector example with html and javascript
<div class="rel-wrap">
<img src="http://placekitten.com/g/920/300" width="920" height="300" class="my-img">
<div class="my-div">
second div
</div>
</div>
$('.my-img').mouseenter(function(){
$(this).closest('.rel-wrap').find('.my-div').animate({left: '0px'}, 1000);
});
$('.rel-wrap').mouseleave(function(){
$('.my-div', this).delay( 1000).animate({left: '-940px'}, 500);
});
27. Slide readmore options
HTML
<div class="about-text">
<b>Tina France</b>
<p>Being fascinated with sound from the very early age inspired her to concentrate on getting trained as a classical singer and a composer.<br/> <a href="#" class="show-about">Read More</a></p>
<div class="about-hidden">
<p>She did her training Under Soprano Patricia MaCmahon at RSAMD and composers William John Sweeney and Nick Fells at the university of Glasgow.
</p></div>
</div>
JavaScript:
$('.show-about').click(function(e){
e.preventDefault();
$(this).closest('.about-text').find('.about-hidden').slideToggle();
$(this).text($(this).text() == 'Read More' ? "Show Less" : "Read More");
});
28. Get the visible first element of class
html:
<ul class="demo1">
<li class="news-item" id="1"></li>
<li class="news-item" id="2"></li>
<li class="news-item" id="3" style="display:none;"></li>
<li class="news-item" id="4" style="display:none;"></li>
javascript:
var first = $('ul.demo1').find('li:visible:first').attr('id');
alert(first);
29. Multiple event on single selector
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
30. How to Scroll to the top of the page?
var xCoord=200;
var yCoord=500;
window.scrollTo(xCoord, yCoord);
31. Fadein and fadeOut elements in stack format
i.e first come Last out
function fadeIn(){
$("li").each(function(i) {
$(this).delay(400*i).fadeIn();
});
}
function fadeOut(){
$($("li").get().reverse()).each(function(i) {
$(this).delay(400*i).fadeOut();
});
}
FadeOut element after some interval
$('.menu-show-now').delay(1500).fadeOut('slow');
32. Remove duplicate row of table
function removeDuplicateRow(){
var seen = {};
$('#searchcus>table>tbody> tr').each(function() {
var txt = $(this).text();
if (seen[txt])
$(this).remove();
else
seen[txt] = true;
});
}
or you can use:
var addedProductCodes = [];
$('input:button').click(function () {
var td_productCode = $("#sales-product-code").val();
var index = $.inArray(td_productCode, addedProductCodes);
if (index >= 0) {
alert("You already added this Product");
} else {
$('#test tr:last').after("<tr><td>data[" + td_productCode + "]</td></tr>");
addedProductCodes.push(td_productCode);
}
});
33. Dynamically moving rows up and down jquery
Html:
<table>
<tr>
<td>Element 1</td>
<td>2008-02-01</td>
<td>
<span class="up"> Move up</span>
<span class="down"> Move Down</span>
</td>
</tr>
<tr>
<td>Element 2</td>
<td>2007-02-02</td>
<td>
<span class="up"> Move up</span>
<span class="down"> Move Down</span>
</td>
</tr>
<tr>
<td>Element 3</td>
<td>2007-02-03</td>
<td>
<span class="up"> Move up</span>
<span class="down"> Move Down</span>
</td>
</tr>
</table>
javascript:
$('.up,.down').click(function () {
var row = $(this).closest('tr');
if ($(this).is('.up')) {
row.insertBefore(row.prev());
}else {
row.insertAfter(row.next());
}
});
34. Create radio buttons behave like single-choice checkboxes Html: <p><label><input type="radio" name="question1" value="morning"> Morning</label><br> <label><input type="radio" name="question1" value="noon"> Noon</label><br> <label><input type="radio" name="question1" value="evening"> Evening</label></p> <script> $(document).ready(function(){ $("input:radio:checked").data("chk",true); $("input:radio").click(function(){ $("input[name='"+$(this).attr("name")+"']:radio").not(this).removeData("chk"); $(this).data("chk",!$(this).data("chk")); $(this).prop("checked",$(this).data("chk")); }); }); </script>
Comments
Post a Comment