$(“p”).on(“click”, function(){ $(this).css(“color”, “red”); }); The reason this is smarter is because there are likely many p elements on the page. If there were, say, 10 of them, traditional click event binding would require 10 handlers. The live function only requires one, reducing memory needed by the browser. Then imagine compounding the issue by 100 […]
Category: jQuery
Combine Slide and Fade Functions
$.fn.slideFadeToggle = function(speed, easing, callback) { return this.animate({opacity: ‘toggle’, height: ‘toggle’}, speed, easing, callback); }; Usage $(“#something”).click(function() { $(this).slideFadeToggle(); css tricks
Check if jQuery is Loaded
if (typeof jQuery == ‘undefined’) { // jQuery IS NOT loaded, do stuff here. } css tricks
Add Active Navigation Class Based on URL
Ideally you output this class from the server side, but if you can’t… Let’s say you have navigation like this: <nav> <ul> <li><a href=”/”>Home</a></li> <li><a href=”/about/”>About</a></li> <li><a href=”/clients/”>Clients</a></li> <li><a href=”/contact/”>Contact Us</a></li> </ul> </nav> And you are at the URL: http://yoursite.com/about/team/ And you want the About link to get a class of “active” so you can […]
Redirect webpage in JavaScript
This javascript code should perform http redirect on a given URL. window.location.href = http://viralpatel.net”;
Smooth(animated) page scroll
$(document).ready(function() { $(‘a[href*=#]’).click(function() { if (location.pathname.replace(/^//,”) == this.pathname.replace(/^//,”) && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $(‘[name=’ + this.hash.slice(1) +‘]’); if ($target.length) { var targetOffset = $target.offset().top; $(‘html,body’) .animate({scrollTop: targetOffset}, 900); return false; } } }); // how to use // place this […]
HTML5 Data Attributes
HTML5 data attributes are a simple means to embed data in a webpage. It is useful for exchanging data between the server and the front end, something that used to require outputting <script> blocks or hidden markup. With the recent updates to the jQuery data() method, HTML5 data attributes are pulled automatically and are available […]
Latest Version of jQuery
With all the innovation taking place in the jQuery project, one of the easiest ways to improve the performance of your web site is to simply use the latest version of jQuery. Every release of the library introduces optimizations and bug fixes, and most of the time upgrading involves only changing a script tag. You […]
Use CSS Hooks
The CSS hooks API was introduced to give developers the ability to get and set particular CSS values. Using it, you can hide browser specific implementations and expose a unified interface for accessing particular properties. $.cssHooks[‘borderRadius’] = { get: function(elem, computed, extra){ // Depending on the browser, read the value of // -moz-border-radius, -webkit-border-radius or […]
Clear Form Data
function clearForm(form) { // iterate over all of the inputs for the form // element that was passed in $(‘:input’, form).each(function() { var type = this.type; var tag = this.tagName.toLowerCase(); // normalize case // it’s ok to reset the value attr of text inputs, // password inputs, and textareas if (type == ‘text’ || type […]