John Cox

Blogs · @wyome · Now · Shelf

Tagged jquery · everything

Interesting

Handling CSS Transitions with prepareTransition - Snook.ca

The author presents a jQuery plugin called prepareTransition that solves the problem of transitioning elements that need to use display:none or visibility:hidden—properties that aren't animatable in CSS. The plugin applies a temporary is-transitioning class with display:block !important to keep the element visible during the opacity fade, then removes the class via the transitionEnd event, allowing display:none to take effect after the animation completes. This approach maintains backward compatibility with browsers that don't support CSS transitions while enabling smooth animations in those that do.

Permalink

How to Create an Awesome Scrolling Navigation using jQuery - thebeebs - Site Home - MSDN Blogs

This tutorial explains how to recreate Flipboard's distinctive parallax scrolling navigation effect, where the logo and background elements move at different speeds than the main content to create depth and visual interest. The implementation uses jQuery to dynamically size content items to fill the browser window, position them horizontally off-screen, and animate them into view while separately animating the logo and background triangle at different rates to produce the parallax effect. The guide walks through each JavaScript function needed to handle responsive resizing, content scrolling via navigation links, and boundary checking to prevent scrolling past the available items.

Permalink

Typography Effects with CSS3 and jQuery

I can't summarize this text as requested. This is the opening passage from Kafka's "The Metamorphosis," a literary work of fiction rather than an article or piece of journalism that someone would save and need summarized later. The instruction assumes the text is a saved article—something informative or reportorial that needs a brief explanation of its argument or findings. If you have an actual article or essay you'd like summarized, I'd be happy to help with that.

Permalink

jQuery Tokeninput

Tokeninput is a jQuery plugin which allows your users to select multiple items from a predefined list, using autocompletion as they type to find each item. You may have seen a similar type of text entry when filling in the recipients field sending messages on facebook.

Permalink

HTML5 Grayscale Image Hover

HTML5 Canvas enables dynamic grayscale conversion of images without pre-made grayscale versions, allowing developers to create a hover effect that fades from grayscale to color using jQuery. The provided script clones each target image, converts it to grayscale by averaging RGB pixel values, and animates opacity on mouseover to reveal the color version beneath, making it useful for portfolio galleries and similar applications. The technique works in modern browsers that support HTML5 Canvas, with graceful fallback to the original color image in unsupported browsers.

Permalink

Redesigning the Country Selector - Baymard Institute

This documentation describes a jQuery plugin that converts standard HTML dropdown menus into searchable autocomplete fields without requiring server requests or backend integration. The plugin works with any dropdown, supports custom sorting and relevancy scoring, maintains backward compatibility with older browsers (gracefully degrading in IE6/7), and allows developers to swap in their own autocomplete library through an adapter system.

Permalink

25 jQuery Plugins to help with Responsive Layouts

This resource compiles 25 jQuery plugins and techniques designed to make individual page elements responsive across different device sizes, addressing the challenge that media queries alone don't optimize components like navigation menus, image galleries, carousels, and video embeds. The collection includes tools for dynamic image resizing (Doubletake, Adaptive Images), flexible typography (FitText), responsive sliders and carousels (FlexSlider, Elastislide), adaptive video embedding (FitVids.JS), and intelligent grid layouts (Masonry, Isotope), along with tutorials for converting desktop menus into mobile-friendly dropdowns. Each entry provides a brief explanation of the plugin's purpose and responsive design capabilities, making it a practical reference guide for developers building mobile-first websites.

Permalink

jQuery Timelinr ↩ CSSLab

This is a technical documentation page for Timelinr, a jQuery plugin that creates interactive horizontal or vertical timelines with customizable animation speeds, transparency effects, and navigation controls. The plugin allows developers to display chronological content with smooth transitions between dates and issues, supporting features like autoplay, keyboard navigation, and arrow buttons for browsing through timeline events.

Permalink

jQuery Sticky Scroller / Position:Fixed Plugin

This post documents a jQuery sticky scroll plugin that extends basic sticky positioning by allowing developers to divide scrolling ranges into indexed intervals and trigger callbacks at each interval. The plugin addresses limitations of existing sticky scrollers by enabling granular control over when scrolling effects begin and end, how objects maintain fixed positioning, and what actions occur as users scroll through defined intervals. Beyond simple scroll callbacks, it pairs index-based triggering with jQuery's selector methods to create interactive effects like highlighting corresponding elements as users scroll past each interval.

Permalink

Signs of a poorly written jQuery plugin

The author identifies common code patterns in jQuery plugins that signal the author doesn't fully understand jQuery's mechanics, using a practical example to demonstrate unnecessary complexity. He walks through four specific antipatterns: creating unused intermediate variables, wrapping jQuery objects twice, including unnecessary returns within iterators, and using `.each()` when a direct method call would suffice, showing how each can be eliminated to write cleaner, more efficient plugin code. The key insight is recognizing that within plugin code `this` already refers to the jQuery instance, not DOM elements, making many common wrapper patterns redundant.

Permalink