Sensible DateTime. Minimalistic Drag'n'Resize for jQuery. Who?
JqDnR Minimalistic Drag'n'Resize for jQuery What? JqDnR is a lightweight plugin for jQuery that lets you drag, drop, and resize elements. Features; Drag + Drop Element Posistioning South East ResizingDefinable Drag and Resize "handles"Translucent Dragging, Preservation of Original Opacity Why? I wrote jqDnR to compliment jqModal elements, allowing drag+resize functionality while remaining true to the plugin's minimalistic architecture. jqDnR provides the all the basic elastic functionality most dialogs will need. If you like jqDnR, please consider a dontation to support its development: When? Current Version: 2007.08.19 +r2 (c) 2007 Brice Burgess under The MIT License Where? Download the Plugin (jqDnR.js - 972 bytes) Download the Dimensions Plugin (dimensions.js) [OPTIONAL] - If detected, the dimensions plugin by Brandon Aaron will be used to alleviate Internet Explorer "jumpiness" with elements that have fixed or percentage based position.
How? Examples. Building a jQuery-Powered Tag-Cloud. TipTip jQuery Plugin. Sliding Boxes and Captions with jQuery. Add an extra layer of information to your images with sliding boxes.
This is now a plugin! Check out the announcement post for the Mosaic jQuery plugin. Check the project page for the latest release notes and features! The Basic Idea All of these sliding box animations work on the same basic idea. Confused? From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect. Step 1 – CSS Foundation Work Given the basic structure outlined in the helpful image above, we will need to use a little bit of CSS to make it work as intended. The following defines the viewing window (.boxgrid) and sets the default position for images within it to the top left. If you aren’t using the semi-transparent captions you are done with CSS – move to Step 2. Opacity that plays nice in all browsers is a rough topic, educate yourself if you need to. Now we’ll need to set up the default starting point for the caption box.
Daverupert.com. Oh wow!
Lettering.JS now has it's own website with a little mini-gallery.Check it out to see how other people are using it. Paravel has just wrapped up an exciting secret project with three of the web's most talented designers: Jason Santa Maria, Frank Chimero, and Naz Hamid. These designs are epic, like 18,123px epic. Working with these guys was a complete joy. There were a few fun development challenges and - as you might expect from these gentlemen - a lot of fancy typography work in the delivered PSDs. Before Trent and I marked up the designs, we noticed that in many instances we would need to style individual letters. Individual Letter Control with Lettering.js We developed a really simple, lightweight, easy to use jQuery plugin, we're calling it "Lettering Dot JS", and we're releasing it today for free over on Github.
We'll start with some really basic markup: <h1 class="fancy_title">Some Title</h1> The resulting code will churn your .fancy_title and output the following: jQuery Masonry. Dynamic Page / Replacing Content. By Chris Coyier On This article is an update to this old article, which had an ugly demo and a variety of techniques in it no longer probably considered good practices.
This new demo is much cleaner, up to date, and fuller featured. Because the old article was a bit of a different scope, I'll leave it alone, just refer to this one. Update January 2013: There are better practices now, detailed here. Let's say you wanted to make a website where clicking buttons in the nav would dynamically load some content. View Demo Download Files The HTML: It all works without JavaScript There is no excuse for the navigation of a website to be completely broken without JavaScript enabled. The navigation links to the files that contain that content, and are fully formed functional pages on their own. <nav><ul><li><a href="index.php">Home</a></li><li><a href="about.php">About</a></li><li><a href="contact.php">Contact</a></li></ul></nav> jQuery JavaScript The JavaScript is the fun part here!
Prereq Code Dump.