• Added ‘centeredX’ and ‘centeredY’ options.
• Removed ‘hideUntilReady’ option. It looks pretty bad if you don’t hide the image until it’s fully loaded.
• Fixed IE img onload bug.
• Now supports iPhone/iPad orientation changes.

Many thanks to Peter Baker for providing the code to center the images.

Download Backstretch Now

A recent Weightshift project, Central, brought about a few development challenges, one of which was background imagery. Naz had designed the page to include photography set behind the content. This raised questions:

• How would we deal with the additional weight of the images (~150–250K) without dragging down the page’s load time?
• Everyone’s browser window will be a different size. How do you determine what is the best/largest size to make the image, so that it fills the entire window?
• How do you account for images that are proportioned differently?

I did some research and found a few good solutions, though each had its limitations.

CSS-based solutions were straightforward, but didn’t address the requirement of triggering the download only after the page was ready. Javascript solutions addressed the page load requirement, but were often more complex than we needed and required the user to have prior knowledge of the image size (something that we couldn’t necessarily predict). The final solution was not novel, it was an amalgam of both solutions, implemented in Javascript.

Backstretch is a simple plugin recreated from the code used on Central, derived from the ideas presented in existing CSS and JS solutions. It is meant to be used by those who want a lightweight, minimalist implementation of dynamically-resized background images that can be executed in one line of Javascript, with nothing more than a link to an image.

Download Backstretch

• Choose slide direction (left or right)
• Custom width slides
• Modal slides
• unobtrusive
• Mutiple slide definitions on the same page
• Fully supported with IE7+, FireFox 2+, Safari 2+
• Minified version included!

Link

The widget that I created–TinyFinder–looks for rev=canonical links in a webpage, and displays them in the statusbar of the browser window. Rev=canonical links are meta tags that are used when a website wants to suggest a preferred tiny url to use. For example, the Flickr page (http://www.flickr.com/photos/srobbin/3533142101/) can also be accessed by Flickr’s own tiny url (http://flic.kr/p/6odh48). Of course, you could always use one of many url shortening services, but Flickr’s custom URL suggests what you’ll see on the other side of the redirect: a photo/movie. Several services are starting to employ their own custom tiny urls:  Dopplr, Threadless, Songza, and many more.

If the web page you are looking at does not provide its own tiny, custom URL, you can always click on the statusbar widget; one will be created for you and automagically copied to your clipboard.

Link

RêþLÃÇÏñg εÅςΗ ¢hªRã¢τÊ® ωîτh Τhê hΤΜι ÈÑτíτý Èqúî√âLéÑΤ óƒ gΩβΒLψ-gõÕΚ.

Sometimes we have a purpose to our actions, and sometimes we play around and have fun. This is the latter: fun without an ounce of purpose…

Textual Chocolate

As web developers, we spend precious time laying out our pages, using every UI concept in the book to conserve space, while trying to maintain a user's focus on the task at hand. There are many techniques to use — Lightbox, Carousel and Tabs to name a few — and today I hope to offer up another: jQuery pageSlide.

jQuery pageSlide was inspired by the UI work of Aza Raskin. In his recent posts regarding concepts for Firefox Mobile and a mouse-based Ubiquity, Aza introduced the idea of sliding (or "throwing") content aside to reveal a secondary content pane.

This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.

<script type="text/javascript">
    $(document).ready(function() {
        $('a.pageslide').pageSlide({
            width: "300px"
        });
    });
</script>

Similar to Lightbox, pageSlide has two major advantages:

1. The primary window is reserved for content; secondary interactions do not require additional space on the page — the area they need is created and removed on demand.
2. Because the user can see the original window, they have a greater likelihood of retaining focus, and can easily return to the previous task.

Can I See It In Action?

Of course, you can! Click for a pageSlide demo.

Where Do I Get It?

I've setup a GitHub project for jquery-pageslide. Note: It's just a rough outline of how the plugin should function and in not production-ready yet. I've intentionally left it as a simple skeleton so that others may participate in the design and implementation process. Comments and suggestions, either here or on the project page, are welcome and appreciated.

When we first encounter Javascript programming, the quintessential function that enamors us all is alert(). Plunk that baby down into a page and, bam (or more accurately…thwunk!), a magical dialog box appears, grabbing the viewer’s attention and providing useful/useless information:

But is this the best way to convey important information? Probably not. For one, the alert box is modal; a user cannot continue with their task until they’ve clicked OK — their train of thought is broken.

One solution to this problem is to use transparent messaging. Rather than doing a disservice by re-explaining, I’ll refer you to read Aza Raskin’s article on Monolog Boxes and Transparent Messages. Or, if you’d like to see them in the wild, check out Songza: we utilize transparent messages to convey the state of media player (play a song, then press the space bar to Pause.)

Now, that’s all well and good, you might say, but what about sites that I don’t have programmatic control over? As a user, I’m at the mercy of whatever features the site programmer chooses to implement. Not true. Enter Ubiquity.

Ubiquity and pageLoad_

One of the goals of Ubiquity is to extend functionality across websites, regardless of whether or not the original programmer had coded that type of interaction (i.e. language translation, map insertion, word definition, etc). As such, Mozilla Labs has given programmers a bevy of authoring tools, including the pageLoad_ prefix. If, in your command file, you create a function that starts with pageLoad_, Ubiquity will execute this code whenever a new page is loaded into the browser window. It is this functionality that allows users to override native Javascript functions, such as alert().

 function pageLoad_overrideNativeFunction() {
     CmdUtils.getWindowInsecure().nativeFunction = function(args) {
          // Your code here
     };
};

By using this pattern, the native function is auto-magically replaced with your customized code each time a new page is loaded. In my case, I’ve chosen to override alert() with a call to create and show a Transparent Message (Note: I’ve used a Singleton with lazy instantiation to converse resources on pages that won’t call the command):

function pageLoad_overrideAlert() {
     CmdUtils.getWindowInsecure().alert = function(str) {
          TransparentMessage.getInstance().show(str);
     };
};

To see a working example, simply install the Ubiquity extension for Firefox and subscribe to the transparent-message command. From there, you can create a test message by issuing the “transparent-message” command, or see how it overrides alert() by revisiting this page and clicking the demo button located at the top of this article.

Note: Many thanks to Micheal Heilemann for authoring the jQuery Humanized Messages plugin. It’s what we use on Songza, and was used as a reference to create the transparent-message command.