Wishes are waiting in JSFiddle.Go to below URL
Category Archives: Jquery
LightBox PopUp Below Click Event
Online Document Viewer
Inorder to view documents such as doc,pdf,ppt,etc,. in your blog/web site you can make use of google document viewer or scribd.
Allow only numeric input in textbox using jQuery
HTML
<input type="text" name="numeric" class='allownumeric'> <div>Numeric values only allowed</div>
jQuery
$(".allownumeric").keypress(function (event) { if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) { event.preventDefault(); } });
Quarterly,halfyearly,annual year based month day dropdown using jQuery
Working Demo HTMLPeriod <select id="test"> <option value="0">Select</option> <option value="1">Monthly</option> <option value="2">Quarterly</option> <option value="3">Halferly</option> <option value="4">Annualy</option> </select> <div id="MonthDayDynamicBlock"></div>jQuery
$("#test").change(function () { CreateMonthDayBlock($(this).val(), "#MonthDayDynamicBlock"); $(".month").change(function () { var Month = $(this).val(); var divid = $(this).parent("div").attr('id'); CreateDayDrop("#" + divid, Month, "Day"); }); }); function CreateMonthDayBlock(Period, DivBlock) { var MonthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var TotalSelect; var TotalOption; var RemoveOption; var StartRemoveOption; var EndRemoveOption; var SelectOptionArray = []; var RemoveOptionArray = []; var Monthval; $(DivBlock).find("div").remove(); if (Period == 1) { $(DivBlock).append("<div id='MonthDayBlock' class='MonthDayEachBlock divblock paddingbotomfivepx'></div>"); CreateDayDrop("#MonthDayBlock", 0, "Day"); } if (Period == 2) { TotalSelect = 4; } if (Period == 3) { TotalSelect = 2; } if (Period == 4) { TotalSelect = 1; } TotalOption = (MonthNames.length / TotalSelect); RemoveOption = MonthNames.length - TotalOption; if (Period > 1) { for (var i = 1; i <= TotalSelect; i++) { $(DivBlock).append("<div id='MonthDayBlock" + i + "' class='MonthDayEachBlock divblock paddingbotomfivepx'></div>"); CreateMonthBlock("#MonthDayBlock" + i, MonthNames, "Month"); EndRemoveOption = i * TotalOption; StartRemoveOption = (EndRemoveOption - TotalOption) + 1; SelectOptionArray = []; for (var j = StartRemoveOption; j <= EndRemoveOption; j++) { SelectOptionArray.push(j); } RemoveOptionArray = []; $.each(MonthNames, function (ikey, val) { if ($.inArray(ikey + 1, SelectOptionArray) < 0) RemoveOptionArray.push(ikey + 1); }); $.each(RemoveOptionArray, function (indexa, valuea) { $("#MonthDayBlock" + i + " select.month option[value=" + valuea + "]").remove(); }); CreateDayDrop("#MonthDayBlock" + i, SelectOptionArray[0], "Day"); } } } function CreateMonthBlock(MonthDayBlock, MonthNames, Text) { var month_select = $("<select class='month floatleft'></select>"); $.each(MonthNames, function (index, value) { var keynum = index + 1; month_select.append($('<option></option>').val(keynum).html(value)); }); $(MonthDayBlock).append(month_select); $(MonthDayBlock).find(".monthtext").remove(); $(MonthDayBlock).find(".month").before("<div class='monthtext floatleft paddingsidefivepx'>" + Text + "</div>"); } function CreateDayDrop(MonthDayBlock, Month, Text) { if (Month != 0 || Month != "") { $(MonthDayBlock).find(".day").remove(); var dd = new Date(2012, Month, 0); var lastday = dd.getDate(); var day_select = $("<select class='day floatleft'></select>"); for (var i = 1; i <= lastday; i++) { day_select.append($('<option></option>').val(i).html(i)); } $(MonthDayBlock).find(".month").after(day_select); $(MonthDayBlock).find(".daytext").remove(); $(MonthDayBlock).find(".day").before("<div class='daytext floatleft paddingsidefivepx'>" + Text + "</div>"); } else { $(MonthDayBlock).find(".day").remove(); var day_select = $("<select class='day floatleft'></select>"); for (var i = 1; i <= 31; i++) { day_select.append($('<option></option>').val(i).html(i)) } $(MonthDayBlock).append(day_select); $(MonthDayBlock).find(".daytext").remove(); $(MonthDayBlock).find(".day").before("<div class='daytext floatleft paddingsidefivepx'>" + Text + "</div>"); } }CSS
.MonthDayEachBlock { width:100%; float:left; } .monthtext, .daytext, .month, .day { float:left; } .monthtext, .daytext { padding:0 5px; } select.month { width:100px; }
Filling Comma Separated Values into TextBox
Creating Dynamic Table using Jquery
HTML
<div id="dynamictable"></div>
Jquery
$('#dynamictable').append('<table></table>'); var table = $('#dynamictable').children(); table.append("<tr><td>a</td><td>b</td></tr>"); table.append("<tr><td>c</td><td>d</td></tr>");
Click Here to View Demo Dynamic Table
Adding options to select tag using jquery
By using jquery we can easily add options to select tag.
jQuery
$("#select").append($("<option></option>").val(1).html("One")); $("#select").append($("<option></option>").val(2).html("Two")); $("#select").append($("<option></option>").val(3).html("Three"));
=========================================================
HTML
<select id="select"> </select>
Frames attribute,style adjustment by triggering button inside frames using jquery
To change the attribute,style of a frameset/iframe by triggering any event inside the source file try this below code
iframe
$(".button").click(function(){$('iframe', top.document).eq(0).attr('height', '100px');});
frameset
$(".button").click(function(){$('frameset', top.document).eq(0).attr('rows', '100,*');});
Getting URL parameters using jquery
jQuery function
$.urlParam = function(name){ var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href); if (results==null){ return null; }else{ return results[1] || 0; } }
using function
var param=$.urlParam('param');