John Cox

Blogs · @wyome · Now · Shelf

Tagged jquery · everything

Interesting

Lettering.js - A jQuery plugin for radical web typography.

Lettering.js is a jQuery plugin that wraps individual letters in HTML spans, enabling designers to apply CSS styling to single characters rather than entire words or lines. This solves the limitation of CSS, which lacks granular typographic control, and allows for effects like custom kerning, decorative letter treatments, and editorial design techniques that would otherwise require images or workarounds.

Permalink

10 Fresh jQuery Plugins and Tutorials | Tutorials

A roundup of ten jQuery tutorials and plugins designed to help developers add dynamic visual effects to websites, including navigation menus with background image sliding, image cropping tools, carousels, slideshows, collapsing menus, and customizable UI components like styled tooltips and enhanced select lists. The collection emphasizes lightweight, easy-to-implement solutions that improve user interface functionality and web typography capabilities.

Permalink

jQuery Events: Stop (Mis)Using Return False | Fuel Your Coding

Doug Neiner argues that beginners' habit of using jQuery's `return false` to cancel browser defaults is harmful, because it silently bundles preventDefault with stopPropagation and stops execution, breaking parent handlers and delegated events. He walks through the alternatives (preventDefault, stopPropagation, stopImmediatePropagation) and advises where to place the cancellation call: first line during development or for JavaScript-only features, and last line under progressive enhancement so that a script error leaves the normal link or form fallback working.

Permalink

jQuery webcam plugin - Website and Application Intelligence

This guide explains how to properly implement webcam access in modern browsers using the native `getUserMedia()` API, which replaced the author's old Flash bridge from 2010. It covers essential implementation details including requesting camera permissions only on user action, handling permission denials gracefully, capturing full-resolution frames with canvas, switching between multiple cameras, recording video with `MediaRecorder`, and crucially, properly releasing camera resources by stopping all tracks when done. The article emphasizes that reliable camera access requires more than a single API call—it demands careful attention to browser permissions, device constraints, error handling, and lifecycle management to maintain user trust and prevent resource leaks.

Permalink

jQuery tutorial: Text box hints

This tutorial demonstrates how to build a jQuery plugin that displays hint text (stored in an input's title attribute) inside search boxes and form fields, hiding the hint when the field receives focus and restoring it when the field is empty and blurred. The plugin uses unobtrusive JavaScript so the form remains functional without JavaScript enabled, and includes a workaround for Firefox's autocomplete behavior by clearing the hint text on form submission and window unload.

Permalink

Quick Tip: An Introduction to Sammy.js | Nettuts+

This tutorial introduces Sammy.js, a lightweight (under 20kb) jQuery-based framework that uses URL hashes to drive single-page AJAX applications with browser back-button support, and it walks through building a small mailbox app with routes for inbox, labels, and compose forms. Its main argument is that Sammy offers a Sinatra-style, non-all-or-nothing alternative to heavyweight MVC frameworks like SproutCore, one that can be dropped into existing projects and even run several instances on one page. The piece is worth keeping as a concise, hands-on primer for developers weighing a minimal routing layer over full frameworks.

Permalink

Commonly Confused Bits Of jQuery - Smashing Coding

This guide clarifies seven categories of commonly confused jQuery methods by explaining their subtle but important differences: DOM traversal methods like `.parent()`, `.parents()`, and `.closest()` differ in how far up the element tree they search; `.position()` and `.offset()` calculate element location relative to different reference points; `.width()`/`.height()` return integers while `.css('width')`/`.css('height')` return strings with units; event binding methods (`.click()`, `.bind()`, `.live()`, `.delegate()`) vary in which elements they attach to and whether they handle dynamically created elements; DOM search methods `.children()` and `.find()` differ in search depth; filtering methods `.not()`, `.is()`, and `:not()` serve different purposes (filtering, testing, or selector syntax); and utility functions like `.filter()` and `.each()` process element collections differently, with `.merge()` and `.extend()` handling arrays and objects respectively.

Permalink

How to create a stunning and smooth popup using jQuery | yensdesign - Tutorials, Web Design and Coding

This tutorial demonstrates how to build a modal popup window using jQuery with HTML and CSS, featuring smooth fade-in/fade-out animations, automatic centering, and multiple closure options (pressing Escape, clicking outside the popup, or clicking an X button). The example uses a status variable to track whether the popup is open or closed, and jQuery event handlers to trigger the loading, disabling, and centering functions when users interact with the page.

Permalink

Introducing Slippy - HTML Presentations - Seld.be

Slippy is a lightweight HTML presentation library built on jQuery that transforms standard HTML markup into browser-based slideshows, making it especially suited for technical talks with its built-in syntax highlighting and live code execution capabilities. The tool can run JavaScript code samples in real time during presentations and display results in custom styled alert boxes rather than browser dialogs, allowing presenters to demonstrate code interactively. The project is open-source on GitHub with example slides and documentation, though the creator acknowledges it's still under development and plans to improve styling and add more comprehensive docs.

Permalink

10 jQuery Plugins to Help with Web Page Layouts | Tools

This article surveys ten jQuery plugins designed to handle complex page layouts that CSS alone cannot achieve, ranging from flexible container systems and masonry-style grid arrangements to newspaper-column formatting and text-wrapping solutions. The plugins span different layout challenges: some create draggable, resizable containers (mb.containerPlus, UI.Layout), others implement multi-column layouts (Columnizer, js-columns), and a few solve specific problems like making elements equal height or wrapping text around image contours rather than bounding boxes. The selections assume jQuery as the necessary tool for designers facing layout requirements beyond standard CSS float and positioning capabilities.

Permalink

jQuery Plugin : jConfirmAction | Webstuffshare.com - Worth Sharing Bookmarked Webstuff

This is a broad instructional guide covering foundational and intermediate web development concepts, including HTML structure, responsive design with fluid grids, hosting and domain selection, database schema design, and security considerations. It emphasizes that web development skills progress from basics like learning HTML tags to more advanced topics like frameworks and API integration, with practical advice drawn from real-world experience. The resource positions itself as evolving alongside the web itself to serve developers at various skill levels.

Permalink

HoverAttribute jQuery plugin « afEkenholm Web Design

Texten presenterar ett introduktionsöversikt av webbdesign och digital marknadsföring som växande yrkesområden i det moderna samhället, där företag numera är beroende av digital närvaro för att kunna konkurrera. Webbdesign förklaras som utformningen av webbplatser och appar anpassade för specifika ändamål och målgrupper, medan digital marknadsföring definieras bredare och omfattar allt från nätannonsering till sökmotoroptimering. Texten är tänkt som en introduktion till dessa branschområden med löfte om vidare vägledning.

Permalink

jQuery plugin: Easy List Splitter | Andrea Cima Serniotti

This post introduces Easy List Splitter, a lightweight jQuery plugin that transforms single lists into multi-column layouts by splitting list items across multiple columns and wrapping them in a container div. The plugin generates clean HTML without inline styles, supports both vertical and horizontal item ordering, preserves nested lists, and allows different column configurations for multiple lists on the same page. All styling is handled through CSS classes rather than hardcoded JavaScript, keeping the plugin size minimal at 4KB with no dependencies.

Permalink

Lightbox Print Option? - SitePoint Forums

This post provides a step-by-step guide for adding print functionality to Lightbox image galleries by creating a dedicated print stylesheet, adding a print button to the lightbox interface, and binding a print command to that button. The solution involves hiding all page elements during printing while displaying only the lightboxed image, then triggering the browser's print dialog when the button is clicked.

Permalink