CategoryJavascript

Check for retina via javascript

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: A jQuery Layout Plugin

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

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

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.

jQuery Crash

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

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

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: Uploading Made Simple

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: Detect Browser Flash Blocking

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: <video> Tag for Everyone!

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.

builder2 links for 2009/04/18

builder2 links for 2009/04/02

More lightboxes for JQuery

Just today while looking for new JQuery plugins, I ran into two interesting lightbox options. ColorBox is a lightweight option with some useful additional features; jboxed is another option that does things a bit differently with a unique navigation style not too common for most lightbox solutions.

Date with Javascript

Using jQuery for UI & Navigation

Some useful links for UI and navigation, utilizing jQuery:

The Lightbox Clones Matrix

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!

Javascript Pull Quotes with jQuery

jquotelogo

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.

builder2 links for 2009/02/25

New JQuery Techniques for UX

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!

jQuery magicpreview plugin

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.

© 2017 builder2

Theme by Anders NorénUp ↑

Follow

Get every new post delivered to your Inbox

Join other followers: