ToolTip
function ShowToolTip(toolTipContent) {
var toolTip = $("#tooltip");
if (toolTip.length == 0) {
toolTip = $('<div id="tooltip" style=" background: #ffd; padding: 5px; border: 1px solid #ddd; position: absolute; text-align:left;" glt;</div>');
$("body").append(toolTip);
}
if (toolTipContent != null)
toolTip.html(toolTipContent);
toolTip.css({
top: (window.pageYOffset + window.event.y - toolTip.height() - 20) + "px",
left: (window.pageXOffset + window.event.x - (toolTip.width() / 2)) + "px"
});
toolTip.show();
}
function HideToolTip() {
$("#tooltip").hide();
}
Set focus on the username text box when page is loaded
$('#UserName').focus();
Note: Focus an item immediately after showing doesnot work well. Here is a workaround:
$(element).show();
setTimeout(function () {$(element).children("textarea").focus();}, 0);
Do something when input is focused/unfocused
$('input').bind('focus', function () { $(this).next("span").fadeIn(1000); });
$('input').bind('blur', function () { $(this).next("span").fadeOut(1000); });
Do something when input is focused or clicked
$('input').bind('focus click', function () { $(this).next("span").fadeIn(1000); });
Do something on mouseleave
$('#next').bind('mouseleave',function(){
...
});
Unbind mouseenter event
$('#msg').unbind('mouseenter');
Animate opacity
$('#nav').stop().animate({'opacity':'0.2'},400);
Cancel the default action of the event
$('#next').bind('click',function(e){
...
e.preventDefault();
});
Insert something before
$('#next').before($('#image1'));
$('#next').before($('#div1').html());
Post form using ajax
$.ajax({
type: "GET or POST or PUT or DELETE",
url:"http://...",
dataType: 'json',
data: $('#ContactForm').serialize() or "subscription[title]=" + encodeURI(value),
success: function(data){...},
async: false,
...
});
Do something when mouse enter and leave
$("li").hover(
function () { $('#a').stop().animate({ "top" : '160px'}, 500); },//enter
function () {$('#a').stop().animate({ "top" : '7px'}, 300);} //leave
);
Show modal box without using $(..).dialog("open")
$('#overlay').fadeIn('fast',function(){$('#modal').animate({'top':'160px'},500);});});
Validation (plugin)
$("#signupForm").validate({
rules: { username: {required: true, minlength: 2}},
messages: {username: {required: "mandatory", minlength: "2 length"}}
});
Validation (plugin)
$("#signupForm").validate({
rules: { username: {required: true, minlength: 2}},
messages: {username: {required: "mandatory", minlength: "2 length"}}
});
X and Y position (Event Object)
$('....').bind('click', function (e) {
alert(e.clientX);
alert(e.clientY);
alert(e.pageX);
alert(e.pageY);
alert(this.offsetLeft); //e.layerX - $(e.target).position().left -> firefox
alert(this.offsetTop); //e.layerY - $(e.target).position().top-> firefox
});
$(".myElement").resizable({
handles: 'all',
autoHide:true,//hides the handles except when the mouse hovers over the element.
containment: 'parent', //Constrains resizing to within the bounds of parent
delay: 20,//resizing will not start until after mouse is moved beyond duration
start: function (e, ui) {
},
resize: function (e, ui) {
},
stop: function (e, ui) {
}
});
Keypress (Printable characters) Demo
$(".element")keypress(function () { //work well when element is textarea
Javascript
alert('Handler for .keypress() called.');
})
$(document).keypress(function(e){
alert('Handler for .keypress() called.');
});
Keyup or Keydown (All characters)
$(document).keydown(function(e){
alert('Handler for .keydown() called.');
});
ajaxsubmit (Plugin)
var options = { url: "/Controller/Action", beforeSubmit: fx1, success: fx2};
$('#myForm').ajaxSubmit(options);
json
var str = "...";
var data = $.parseJSON(str);
alert(data.length);
Verify if selector exists
if ($(selector).length > 0) {// Do something}
ResizeImage
function ResizeImage(img, maxHeight, maxWidth) {
var currentWidth = $(img).width();
var currentHeight = $(img).height();
var height_ratio = currentHeight / maxHeight;
var width_ratio = currentWidth / maxWidth;
if (height_ratio > width_ratio) {
$(img).css("width", currentWidth / height_ratio);
$(img).css("height", maxHeight);
}
else {
$(img).css("width", maxWidth);
$(img).css("height", currentHeight / width_ratio);
}
};
Autocomplete
function AutoComplete(textBox, url) {
$(textBox).autocomplete({
source: function (request, response) {
$.ajax({
url: url,
type: "POST",
dataType: "json",
data: { searchText: request.term, maxResults: 10 },
success: function (data) {
response($.map(data, function (item) {
return {
label: item,
value: item
}
}))
}
});
}
});
}
Set the selected index of a Dropdown using jQuery (via options value)
var val = 10;
$(".yyy").find("select[name=yyy] option[value=" + val+ "]").attr("selected", "selected")
string length
var v = "string";
var length=v.length;
Math.abs
var v = -1;
var v1 = Math.abs(v);
string to int
parseInt('123.45') // 123
parseInt('77') // 77
parseInt('077',10) // 77
parseInt('77',8) // 63 (= 7 + 7*8)
parseInt('077') // 63 (= 7 + 7*8)
parseInt('77',16) // 119 (= 7 + 7*16)
parseInt('0x77') // 119 (= 7 + 7*16)
parseInt('099') // 0 (9 is not an octal digit)
parseInt('99',8) // 0 or NaN, depending on the platform
parseInt('0.1e6') // 0
parseInt('ZZ',36) // 1295 (= 35 + 35*36)
Current URI
window.location
String Replace
var str = "askjdf"
str = str.replace("a", "b");
URL encoding
returnURL = "...";
returnURL = escape(returnURL);
window.location = "...?returnURL=" + returnURL;
document.onmousemove = function (e) {
var evt = window.event || e;
window.status =
"Relative to Window(" + evt.clientX + "," + evt.clientY + ") " +
"Relative to Object(" + evt.offsetX + "," + evt.offsetY + ") ";
}
if (document.getSelection) {//firefox
var str = document.getSelection();
}
else if (document.selection && document.selection.createRange) {//internet explorer
var range = document.selection.empty();
var str = range.text;
}
No comments:
Post a Comment