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 wasnt 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+ 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 //NOTICE value attribute!!! ARTICLE PHP //THIS IS THE DEFAULT OPTION MYSQL jQuery CSS(3) 8. Blink Text using jQuery function blink(selector){ $(selector).fadeOut(slow, function(){ $(this).fadeIn(slow, function(){ blink(this); }); }); } $(document).ready(function(){ blink(.blink); }); 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, dont 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); }); 12. Form Field Default Values with jQuery $(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); } }); }); }); input { display:block; margin-bottom:5px; }
Posted on: Thu, 06 Mar 2014 05:55:35 +0000
Trending Topics
Recently Viewed Topics
© 2015