jQuery – how to raise hide and show events

Using my simple monkey-patch plugin found here: http://upshots.org/javascript/jquery-monkey-patch-duck-punch-manager, this is pretty simple… $.monkeyPatch({ hide : function(){ this.trigger(‘hidden’); }, show : function(){ this.trigger(‘shown’); } }); That’s it – now you can listen for “hidden” and “shown” events normally… $(selector).on(‘hidden’, function(){ console.log(‘hidden’); }); Note that this only hooks into the $.fn.hide and $.fn.show methods – hiding an […]

jQuery – lazy load (or effect) when an element is scrolled into the viewport

1. Implement a test to determine if the element is within the viewport. This one works. 2. Find a throttle or debounce function. Here’s my take, and underscore’s. 3. Create a function that uses the method in #1 to test if the element is visible, then perform your action (load an image, animate, add more […]

jQuery – detach elements to work with them

jQuery encourages us to .detach() elements to work with them: http://learn.jquery.com/performance/detach-elements-before-work-with-them/ Here’s a little plugin to help do just that (relies on my .insertAt method found here)… $.fn.insertAt = function(elements, index) { var array = $.makeArray(this.children().clone(true)); array.splice(index, 0, elements); this.empty().append(array); return this; }; $.fn.work = function(callback /*, … rest */){ var params = Array.apply(null, arguments).slice(1); […]

jQuery – insert elements at index

In response to some solutions on the board that failed for various reasons: 1. Allows multiple elements to be inserted (no other version I found did this, usually because they worked by appending and using .last()) 2. Maintains events and data (solved by .clone(true) on .children()) 3. Works with 0-children containers (by using children.before()) 4. […]

JavaScript – throttle and debounce functions

A couple years ago the notion of managing JS execution with timers was in vogue – IDK what caused that particular wave of interest, but I remember doing the same thing to mousemoves around 2001/2002 (when it really mattered – you could actually watch the caret blink less frantically as your throttling function upped it’s […]

jQuery – get real height of hidden or overflow: hidden elements

The scrollHeight property should get back the actual height of an element, even if hidden or masked by an overflow:hidden container: $(element).prop(‘scrollHeight’); However, I’ve found that having a negative absolute position can throw this off – in one implementation (a personal proof-of-concept – all neat and tidy), I was able to remedy it with the […]

jQuery (or anything else) basics of dragging

Here’s the most basic implementation of dragging I’m aware of… I’ll present an example usin jQuery, but the same logic can be used in any JS framework, raw JS, or even ActionScript, Java, or any other language or technology that processes similar user events and provided a UI. Here’s the idea: On mousedown: 1. record […]

jQuery – monkey patch (duck punch) manager

a little plugin to make simple monkey patches to $.fn a little easier… takes a map of method names (keys) and functions (values)… Each one is redefined on the $.fn object, which then calls the original method (first), as well as the new function (last). Arguments and scope are preserved. $.monkeyPatch = function(map) { var […]

jQuery – simple on shown / hidden events

this is a fairly old trick but i get asked about it pretty commonly, so… monkey patch to raise an event when showing or hiding elements: (function($){ var original = { hide : $.fn.hide, show : $.fn.show }; $.fn.hide = function(){ original.hide.apply(this, arguments); this.trigger(‘hidden’); }; $.fn.show = function(){ original.show.apply(this, arguments); this.trigger(‘shown’); }; })(jQuery); POC: http://jsfiddle.net/moagrius/ka78R/

jQuery – change tag name

Obviously, the tagName of an element is readonly – however, you can fake it with a little trickery. Just swapping with replaceWith and copying over the product of .html() won’t get data or events. Here’s an ugly little hack that should do the trick: $.fn.changeTag = function(tag){ // create the new, empty shim var replacement […]