jQuery

Draggable Elements That Push Others Out Of Way

Aside from a few esoteric tricks involving stuff like the resize handle on textareas, draggable elements is JavaScript territory on the web. E.g. click on element, hold down mouse button, drag mouse cursor, element drags with the mouse, release mouse button to release element. Or the touch equivalents. Fortunately this is well-tread territory. Time tested tools like jQuery UI offer Draggable (and other similar methods) to make this easy.

But recently in trying to achieve a certain effect (see title of this article) I couldn't quite get jQuery UI to do it how I wanted. But I got it done and here's how.

(more…)

Namespaced Events in jQuery

It's really easy to add an event listener in jQuery. It's equally easy to remove an event listener. You might want to remove a listener because you don't care to perform any actions on that event anymore, to reduce memory usage, or both. But let's say you've attached several listeners to the same event. How do you remove just one of them? Namespacing can help.

(more…)

Email Domain Datalist Helper

What if someone signs up for your web app and they type in their email address as susan_smith@gmaoil.com? They don't notice, they never get their confirmation email, they never can log in again, the "forgot password" feature doesn't work, and there is a lot of frustration and finger pointing.

Can't we help with that?

(more…)

Animating DOM transitions

Say you add some new element to the page and it pushes things around. That can happen instantly, but it helps your brain understand what just happened if the elements that were pushed away animate to their new position. Enter Alex MacCaw and his new magicMove jQuery plugin:

The library works by appending a separate and hidden clone of the element you’re transitioning to the page. Any DOM manipulation you do is actually manipulating that clone. Then, when you’re finished, the library looks at the difference between the element’s current position, and the clone’s position, and animates between them (using CSS transitions).

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag