Thursday, June 28, 2012

Jquery Lightbox Effect

CSS

#lightbox {
 display:none;
 background:#000000;
 opacity:0.9;
 filter:alpha(opacity=90);
 position:absolute;
 top:0px;
 left:0px;
 min-width:100%;
 min-height:100%;
 }
 #lightboxPanel {
 display:none;
 position:fixed;
 top:100px;
 left:50%;
 margin-left:-200px;
 width:400px;
 background:#FFFFFF;
 padding:10px 15px 10px 15px;
 border:2px solid #CCCCCC;
 z-index:2; }


Jquery

$('#ShowPanel').click(function(){
 $('#lightbox,#lightboxPanel').fadeIn(300);
 });
 $('#close').click(function(){
 $('#lightbox,#lightboxPanel').fadeOut(300);
 });

HTML
---------------------

Lightbox

Close

Thursday, June 21, 2012

Tool tip Effect in Jquery


-------Html----------------

--------Html End--------------
------------Jquery----------------
$("input[type='button'].btnClear").after("
");
$('h6.toolTip').css({ font: 'bold 13px arial', width: '140px', padding: '10px 10px 20px 10px', top: '10px', right: '270px', position: 'absolute' }).hide();
$("input[type='button'].btnClear").hover(function () {
$('h6.toolTip').animate({
opacity: 'show', top: '-5px'
}, 'slow');
var toolTipTxt = $("input[type='button'].btnClear").attr('name');
$('h6.toolTip').text(toolTipTxt);
});
$("input[type='button'].btnClear").on('mouseout', function () {
$('h6.toolTip').animate({
opacity: 'hide', top: '10px'
}, 'slow');

});
---------Jquery End-------

Monday, June 18, 2012

JQuery Validate multiple fields with one error


----------HTML----------------








--------HTML END--------------

--------- Jquery ---------------

$.validator.addMethod("selectMonth", function (value, element) {
return this.optional(element) || (value.indexOf('-1'));
}, "Please select month");
$.validator.addMethod("selectYear", function (value, element) {
return this.optional(element) || (value.indexOf('-1'));
}, "Please select year");

jQuery(document).ready(function () {
$("#mainForm").validate({
rules: {
<%=ddlPaymentType.UniqueID %>:{selectNone:true},
<%=txtAccountNumber.UniqueID %>:{required:true, digits:true},
<%=txtAmount.UniqueID %>:{required:true,decimalTwo:true},
<%=ddlExpirationMonth.UniqueID %>:{selectMonth:true},
<%=ddlExpirationYear.UniqueID %>:{selectYear:true}
},
groups: {
Expiration: "<%=ddlExpirationMonth.UniqueID %> <%=ddlExpirationYear.UniqueID %>"
},
errorPlacement: function(error, element) {
if (element.attr("name") == "ctl00$ContentSection$ddlExpirationMonth" || element.attr("name") == "ctl00$ContentSection$ddlExpirationYear")
error.insertAfter("#ContentSection_ddlExpirationYear");
else
error.insertAfter(element);
}
});
------------ Jquery End --------------------

Thursday, June 7, 2012

Auto Format (XXX-XXX-XXXX) Phone Number in Jquery


Phone Number:


------------Jquery-------------------
$('#txtboxID').keyup(function () {
var val = this.value.replace(/\D/g, '');
var newVal = '';
while (val.length > 3) {
if (val.length == 10) {
newVal += val.substr(0, 4);
return false;
} else {
newVal += val.substr(0, 3) + '-';
val = val.substr(3);
}
}
newVal += val;
this.value = newVal;
});
-----------------------

Tuesday, June 5, 2012

jQuery : Protect form submission on enter key-press



$(function() {
$("form").bind("keypress", function(e) {
if (e.keyCode == 13) return false;
});
});

Monday, June 4, 2012

In JavaScript(jquery) validation - text box without commas

Html Code:


Full Name:


Jquery
---------------------------------
jQuery.validator.addMethod("noCommas", function(value, element) {
return this.optional(element) || /^\s*(\w+(\s* \s*\w+)*)?\s*$/.test(value);
}, "Enter full name without commas");

jQuery(document).ready(function () {
$('#mainForm').validate({
rules: {
<%=txtBillingInfoFullName.UniqueID %>:{required:true, noCommas:true}
}
});
});
---------------------------------------------------
Output:
--------------->>>
-------------------------------
dfjkfjl 000 0huih jhjkh 6898
-------------------------------

Javascript find highest and lowest from the given inputs

function highAndLow(numbers){ // numbers = "4 5 29 54 4 0 -214 542 -64 1 -3 6 -6"   let numbersInArr = numbers.split(' '...