jQuery.fn.center = function () {
this.css("position", "absolute");
this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
return this;
}
Showing posts with label jquery. Show all posts
Showing posts with label jquery. Show all posts
Saturday, November 23, 2013
Jquery ui datepicker appears off screen fix
/*e.g. $('.ui-datepicker').center();*/
Restricting keyboard input with jQuery and validate decimal precision,scale
keycodechecker Demo
txt.Attributes.Add("class", "numbersonly");
In blur or textbox leaving, or in button click call the below function
txt.Attributes.Add("class", "numbersonly");
In blur or textbox leaving, or in button click call the below function
function IsDecimal(Salary) {
var _Salary = $('#' + Salary);
if (!_Salary.isValidScale(6, 2)) {
_Salary.focus();
alert('Invalid decimal points');
return false;
}
return true;
}
/*Numeric validation starts*/
//Allows decimal places with only one .(decimal point or full stop)
$(".numbersonly").keydown(function (event) {
// Prevent shift key since its not needed
if (event.shiftKey == true) {
event.preventDefault();
}
// Allow Only: keyboard 0-9, numpad 0-9
if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)
//Allow Only: backspace, tab, left arrow, right arrow
|| event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39
//Allow Only: delete, home, end
|| event.keyCode == 46 || event.keyCode == 36 || event.keyCode == 35
//Allow Only: .(full stop [keyboar, numpad]) and check if there is more than one .(full stop)
|| ((event.keyCode == 190 || event.keyCode == 110) && $(this).val().indexOf('.') < 0)
) {
// Allow normal operation
} else {
// Prevent the rest
event.preventDefault();
}
});
//Validate the count of precision and scale of a decimal value
//ctrlID.isValidScale(6,2);
jQuery.fn.isValidScale = function (precision, scale) {
//return !Number.isNaN(num) && parseFloat(num).toFixed(scale).toString() === this.val();
/* debugger;
var ina = !isNaN(num);
var len = decimalPlaces(num)
var isTrue = decimalPlaces(num) <= parseInt(scale)
var tr = !isNaN(num) && isTrue;*/
var num = parseFloat(this.val()) || 0;
var intPart = parseInt(this.val()).toString(); //Convert to string
//if input control is empty
if (num.length == 0) return true;
if (intPart.length > parseInt(precision)) return false;
return !isNaN(num) && decimalPlaces(num) <= parseInt(scale);
};
function decimalPlaces(n) {
var a;
var len = (a = (n.toString().charAt(0) == '-' ? n - 1 : n + 1).toString().replace(/^-?[0-9]+\.?([0-9]+)$/, '$1').length) >= 1 ? a : 0;
return parseInt(len);
}
$(".intonly").keydown(function (event) {
// Prevent shift key since its not needed
if (event.shiftKey == true) {
event.preventDefault();
}
// Allow Only: keyboard 0-9, numpad 0-9, backspace, tab, left arrow, right arrow, delete, home, end
if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46 || event.keyCode == 36 || event.keyCode == 35) {
// Allow normal operation
} else {
// Prevent the rest
event.preventDefault();
}
});
var isValidCurrency = function (input) {
var num = parseFloat(input);
return !Number.isNaN(num) && parseFloat(num).toFixed(2).toString() === input;
};
/*Numeric validation ends*/
How to get the value of checkboxlist in jquery
For the checboxlist create an attribute for each listitem
/*to get the checkbox value in jquery*/
foreach (ListItem li in cbHideColumns.Items)
{
li.Attributes.Add("someValue", li.Value);
}
How to get the value in jquery
$(".cbShowOrHideGvCols input[type=checkbox]").each(function () {
var checkbox = $(this)
if ($(ctrl).is(":checked")) {
var val = checkbox.parent().attr('someValue');
}
});
/*to get the checkbox value in jquery*/
foreach (ListItem li in cbHideColumns.Items)
{
li.Attributes.Add("someValue", li.Value);
}
How to get the value in jquery
$(".cbShowOrHideGvCols input[type=checkbox]").each(function () {
var checkbox = $(this)
if ($(ctrl).is(":checked")) {
var val = checkbox.parent().attr('someValue');
}
});
jquery - Datatables change language dynamically
1. Consider we need both chinese and english
2. Create 2 text files jquery.dataTables.en-US.txt, jquery.dataTables.zh-CN.txt
3. Go to the url http://datatables.net/plug-ins/i18n
Get the language text and paste it in the relative files.
4. In the masterpage we need to have a hidden control.
2. Create 2 text files jquery.dataTables.en-US.txt, jquery.dataTables.zh-CN.txt
3. Go to the url http://datatables.net/plug-ins/i18n
Get the language text and paste it in the relative files.
4. In the masterpage we need to have a hidden control.
5. Store the current language in the hidden field.
hdnLang.Value = SessionProxy.Search.Language.ToLower();6. Get the language in the javascript file
var locale = ($('#ctl00_hdnLang').val() || "en-us");
7. Dynamically change the datatable language filevar langFile = "../Scripts/jquery.dataTables.en-US.txt";
if (locale === "zh-cn") {
langFile = "../Scripts/jquery.dataTables.zh-CN.txt";
}
8. Using it in the scriptvar oTable = $('.gvDataTable').dataTable({
"oLanguage": {
"sUrl": langFile
},
"sScrollX": "99%",
"bStateSave": true, //http://datatables.net/forums/discussion/573/how-to-stay-on-current-page-after-re-draw/p1
"fnDrawCallback": function (oSettings) {/*Re-Create serial no for the table*/
/* Need to redo the counters if filtered or sorted */
if (oSettings.bSorted || oSettings.bFiltered) {
for (var i = 0, iLen = oSettings.aiDisplay.length; i < iLen; i++) {
$('td:eq(0)', oSettings.aoData[oSettings.aiDisplay[i]].nTr).html(i + 1);
}
}
/*Put checkboxlist after filter to show/hide columns after excel export*/
$('.cbShowOrHideGvCols').appendTo('div.DTTT_container');
},
/*"sDom": 'r<"H"lf><"datatable-scroll"t><"F"ip>',*/
"sDom": '<"H"lTfr><"datatable-scroll"t><"F"ip>',
"oTableTools": {
"sSwfPath": "../Scripts/media/swf/copy_csv_xls_pdf.swf",
/*"sSwfPath": "http://datatables.net/release-datatables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",*/
"aButtons": [{ /*http://datatables.net/extras/tabletools/button_options*/
"sExtends": "xls",
"sFileName": "xlsFileName.xls",
"sButtonText": "
",
"sTitle": "Title of the file"
/*"fnInit": function (node) { formatTableToolsButton(node, 'DTTT_button_xls'); }*/
}
/*, {
"sExtends": "pdf",
//"sButtonText": "
",
"sFileName": "PdfFileName.pdf",
"sTitle": "Title of the file"
}*/
]
}
});
/*When we edit the gridview, header and row are zigzag.
Call this to overcome it
*/
setTimeout(function () {
oTable.fnAdjustColumnSizing();
}, 50);
/*after page load call this event, if there is a postback*/
if ($('.gvShowOrHideGvCols tr').length <= 0) $(".cbShowOrHideGvCols").css("display", "none");
$(".cbShowOrHideGvCols input[type=checkbox]").each(function () {
ToggleGridViewCol('.gvShowOrHideGvCols', this, '');
});
/*when the checkbox checked changed*/
$(".cbShowOrHideGvCols input[type=checkbox]").change(function () {
ToggleGridViewCol('.gvShowOrHideGvCols', this, '');
});
/*Remarks: if we want to show or hide gridview columns
grid: GridView.ClientID
ctrl: CheckBoxList control(if we are using foreach)
colIndex: gridview column index we need to show/hide
someValue: this the attribute added to the checkbox, which holds the checkbox value
*/
function ToggleGridViewCol(grid, ctrl, colIndex) {
var col = (colIndex === '') ?
$(ctrl).parent().attr('someValue') : colIndex;
if (col != '') {
var show = $(ctrl).is(":checked");
if ($(grid + " tr").length <= 0) return true; //check gridview loaded/empty
var oTable = $(grid).dataTable();
var bVis = oTable.fnSettings().aoColumns[col].bVisible;
if (show && !bVis)
oTable.fnSetColumnVis(col, true);
else if (!show && bVis)
oTable.fnSetColumnVis(col, false);
}
}
Friday, November 9, 2012
Setting minDate and maxDate for jquery datepicker
$(function () {
var dateToday = new Date();
var startDate = new Date(dateToday.getFullYear(),
dateToday.getMonth(), dateToday.getDate() - 30);
$("#txtFromDate").datepicker({
minDate: startDate,
maxDate: dateToday
});
$("#txtToDate").datepicker({
minDate: startDate,
maxDate: dateToday
});
});
Subscribe to:
Posts (Atom)