12 More jQuery Code Snippets That You Can Use!
Code snippets in jQuery for when you are running out of ideas by yourself!
We recently published a collection of 10 jQuery Code Snippets that you could use. If that wasn't enough for you then here are 12 more. Copy and enjoy!
1. Enable submit button if text entered with jQuery
$('#username').keyup(function() {
$('#submit').attr('disabled', !$('#username').val());
});
2. Center Div on div with jQuery
// Centers on screen
jQuery.fn.center = function (div) {
this.css("position", "absolute");
var position = div.position();
this.css("top", Math.max(0, ((div.height() - this.outerHeight()) / 2) + position.top) + "px");
this.css("left", Math.max(0, ((div.width() - this.outerWidth()) / 2) + position.left) + "px");
return this;
};
//use
$('#ajxload').center($('#mapWrapper')).show();
3. jQuery Show Content Based on Select Option
jQuery(function () {
jQuery('#select_ID').change(function () {
var selected = $(this).find(':selected').val();
jQuery(".item_to_hide").hide();
jQuery('#' + selected).show();
}).change();
});
4. Prevent multiple submit of your form with jQuery
$(document).ready(function() {
$('form').submit(function() {
if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
jQuery.data(this, "disabledOnSubmit", { submited: true });
$('input[type=submit], input[type=button]', this).each(function() {
$(this).attr("disabled", "disabled");
});
return true;
}
else
{
return false;
}
});
});
5. jQuery Highlight related label when input in focus
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
$("label").removeClass("labelfocus");
});
6. Document Ready with Global Ajax Listener and Status Indicator in jQuery
$(function(){
/**
* ATTACH AJAX LISTENER TO BODY TO MAKE A GLOBAL
* AJAX STATUS MONITOR FOR THE WHOLE PAGE. ANY AJAX
* CALL FROM ANY FUNCTION THAT RUNS ON THE PAGE
* WILL AUTOMATICALLY REPORT ITS STATUS
*/
$("body").ajaxStart(function(){
$('#ajax_status_div').html("Ajax Request Sent");//update text message
$('.activity_indicator').show(); //show ajax activity image(spinner gif)
});
$("body").ajaxSuccess(function(event,xmlHttp,options){
var status = xmlHttp.statusText;
var url = options.url;
var data = options.data;
$('.activity_indicator').hide(); //hide ajax activity image(spinner gif)
$('#ajax_status_div').html("URL : "+url+" <br/> Status : "+status);//update text message
});
});
7. Set Default Value for Select Lists Using value attribute with jQuery
$(function(){
$('select[value]').each(function(){
$(this).val(this.getAttribute("value"));
});
});
//The Markup Looks Like This
<select name="category" id="category" value="PHP"> //NOTICE value attribute!!!
<option value="ARTICLE">ARTICLE</option>
<option value="PHP">PHP</option> //THIS IS THE DEFAULT OPTION
<option value="MySql">MYSQL</option>
<option value="jQuery">jQuery</option>
<option value="CSS(3)">CSS(3)</option>
</select>
8. Blink Text using jQuery
<script type="text/javascript" >
function blink(selector){
$(selector).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this);
});
});
}
$(document).ready(function(){
blink('.blink');
});
</script>
9. jQuery Making textfield only accept numeric values
$(document).ready(function() {
$("#txtboxToFilter").keydown(function(event) {
// Allow only backspace and delete
if ( event.keyCode == 46 || event.keyCode == 8 ) {
// let it happen, don't do anything
}
else {
// Ensure that it is a number and stop the keypress
if (event.keyCode < 48 || event.keyCode > 57 ) {
event.preventDefault();
}
}
});
});
10. jQuery Hide datepicker on key press and submit on enter
$(document).ready(function() {
$(".datepicker").keypress(function (e) {
$(".datepicker").datepicker("hide");
if (e.which == 13) {
var param = 'change_expiry_date_'+getId(this.name);
$("#operation").attr("value",param);
form.submit();
}
});
});
11. Add class depending on browser with jQuery
$(document).ready(function(){
$('html').addClass($.browser);
});
<b>
12. Form Field Default Values with jQuery</b>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$('.someClass').each(function() {
var $this = $(this);
var defaultVal = $this.attr('title');
$this.focus(function() {
if ($this.val() === defaultVal) {
$this.val('');
}
});
$this.blur(function() {
if ($this.val().length === 0) {
$this.val(defaultVal);
}
});
});
});
</script>
<style>
input {
display:block;
margin-bottom:5px;
}
</style>
</head>
<body>
<input class="someClass" type="text" title="Name" value="Name" />
<input class="someClass" type="text" title="Email Address" value="Email Address" />
<input class="someClass" type="text" title="Default Value Here" value="Insert form refill here" />
</body>
</html>
