Retina displays can lead to all sorts of new things you can do, some of them headache–inducing. Detecting for retina devices or hi–density displays still isn’t a straightforward thing, but this javascript snippet could come handy for a quick hack:
if((window.devicePixelRatio===undefined?1:window.devicePixelRatio)>1)
// do something here
More details on this technique from Shaun Inman’s post.
“Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.”
YoxView is another jQuery image viewer plugin that doesn’t look like your typical lightbox. Though there are too many lightbox options available, YoxView is among the few that have a built–in slideshow feature, which may come in handy for some sites.
SublimeVideo is a javascript library you can use to serve HTML5 video to capable browsers while still retaining compatibility with older browsers, gracefully degrading to using a flash–based player. In many ways, it is similar to html5media, another library we featured a few weeks ago.
Now here’s a jQuery plugin with an evil twist: jQuery Crash. With just Javascript through jQuery, this plugin will crash anyone using IE6, a not so subtle way of telling them to start using a better browser. Sick.
Uniform supposedly helps you produce “sexy forms with jQuery.” Essentially, it is a jQuery plugin that styles form elements and provides them a consistent look. A few designs are initially available as themes and it should be fairly easy to build your own from it.
jquery-transmit is a jQuery plugin used to produce a flash–based multi–file uploader for your pages, all this quite simply achievable:
$(document).ready(function() {
$("#transmit").transmit("http://mysite.com/upload/");
});
Now there’s no need to dive into flash or swfupload configuration files, multi–uploaders can be as simple a few lines of code.
Plupload is an open–source tool that allows you to provide uploading functionality for your website. So what makes it special? It utilizes HTML5, Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads—all this transparently and without the developer’s intervention.
This project is from the guys who made TinyMCE, so I’m sure incremental updates will be regular.
flashblockdetector allows a developer to use javascript to check if a browser client is using flash blocking extensions. Using this utility, you can inform a reader to whitelist/disable flash blocking for your given site, in case you need flash functionality. I’m sure this is useful for those dreaming of building the next Youtube.
html5media is a javascript utility that you can simply call in your page’s header and use the generic HTML5 <video> tag to display videos, without having to worry if your reader’s browser support HTML5 and the <video> tag.
Usage is very simple. Place this code in the <head> section:
<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>
After that, embedded movies can be added simply:
<video src="video.mp4" width="320" height="240" controls autobuffer></video>
When HTML5 video is supported by a given browser, the file is served as is. Otherwise, a simple flash movie player is dynamically swapped in its place. Note however that encoding issues are still present, especially the H.264/Theora debate that plagues Firefox and makes it different to other modern browsers.
Some useful links for UI and navigation, utilizing jQuery:
Too many lightbox thingies to choose from? I personally like Shadowbox for the many things it can do but there are several others that do well for certain purposes. To help you find the one that fits your needs, the lightbox clones matrix lists the popular options along with its dependencies, capabilities, and the actual library size you’ll be adding to your markup. Helpful!
jQuote is a jQuery plugin that enables you to do old–school print–style pull quotes without redundant markup or images. Just by simply denoting the pull quote from the original text, using simple <span> tags, you get instant big and floated pull quotes! You’ve got to see it for yourself.
Smashing Magazine has a roundup of several JQuery techniques and plugins that may be used for an improved user experience in your sites. 45 of them!
With our regular search for useful jQuery plugins, the magicpreview plugin should be useful for real–time manipulation of the DOM. One real–world use for this is for comment previews and similar things. Nice.