Hidden Ajax Errors with jQuery

If you use Ajax with jQuery, you may have noticed that you don't get any error messages when things go wrong. Even if you have major bugs in your callback functions, jQuery just silently fails, sweeping any errors under the rug, and leaving you clueless as to what just happened.

For example, you can do this and you won't get any errors:

$.get('page.html', function(){
    this_function_does_not_exist();
});

There are two ways to fix this. You can use $.ajax with the error parameter, passing an error handling function for that particular Ajax call. Or, you can define a global Ajax error handler. If you do a lot of Ajax, and you use Firebug, the latter is a great option. Try this:

$(document).ajaxError(function(){
    if (window.console && window.console.error) {
        console.error(arguments);
    }
});

After running this code, you'll start getting error messages in your Firebug console (if anything breaks with your Ajax calls or callbacks). The error messages aren't the greatest, but at least you don't have to stay in the dark any longer.

Published on July 4th, 2007. © Jesse Skinner

Drag and Drop on QuirksMode

Peter-Paul Koch has put together yet another masterful overview, this time covering Drag and drop, something that has been on my to-do list for over a year. His script even works with just the keyboard! Not only does he offer a great Drag-and-drop script, he explains how it was written so you can better understand how Drag-and-drop works in JavaScript (and take it apart or put it together yourself).

Published on July 1st, 2007. © Jesse Skinner

Safari for Windows

Good news for all Windows-based web developers: Safari for Windows is now available (via).

Hopefully this means that we can make our web sites even more cross-browser (and hopefully doesn't just add another browser with its own quirky differences).

Published on June 12nd, 2007. © Jesse Skinner

Adding Style Blocks Using JavaScript

Whoâ€™s Got Style? - Nicholas C. Zakas writes a good analysis of dynamically creating and attaching <style> elements to a page using JavaScript. He ends up with a function that works in Internet Explorer, Firefox, Opera and Safari.

Published on June 7th, 2007. © Jesse Skinner

Making a 100% height interface

With interfaces on the web that resemble those of the desktop (and better), we often want to get rid of the ubiquitous scroll bar in our web applications. We want all the action to happen directly within the visible browser area. Instead of scrolling, we can offer users new ways to interact with the page like Ajax-based page flipping and sliding panels.

The basis of most scroll-less 100% height interfaces contain some CSS looking like this:

html, body {
    /* get rid of default spacing on the edges */
    margin: 0;
    padding: 0;

    /* get rid of that 2px window border in Internet Explorer 6 */
    border: 0;

    /* fill the height of the browser */
    height: 100%;

    /* no more scroll bar */
    overflow: hidden;
}

This resets the margins and padding of the page, gets rid of the chrome border in IE6, sets the height to 100% of the available space, and hides anything that goes outside the 100%. This needs to happen on both the html and body elements. Having a hidden overflow isn't mandatory, but it makes sure that nothing will cause that scroll bar to pop back up, even if you are dragging things off the edge of the screen.

Now, anything you put directly into the body can also be given height: 100% and it will do exactly what you expect (fill the page). This way, you can have the interface of the page grow and shrink along with the size of the browser. You can even have multiple layers fill the page like this:

/* css */
div.layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

<!-- html -->
<body>
    <div class="layer">
        .. some stuff ..
    </div>

    <div class="layer">
        .. some other stuff ..
    </div>
</body>

You can easily give an element within the page a scroll bar by throwing in overflow: auto on something that has height: 100% and some padding or margins.

We can also use JavaScript to calculate the size of the browser and use this to decide how much content we display at a time. We can do this with some relatively easy code, now that our body is the exact width and height of the browser "viewport":

function getPageSize() {
    return [
        document.body.offsetWidth,
        document.body.offsetHeight
    ];
}

Note that this code only really works with 100% height. On a page with a variable height, it's not reliable at all.

I've put this stuff to use with a lot of projects lately, most notably PictureSandbox (formerly FlickrCash).

For more details on calculating the width of the viewport, check out Viewport Properties at QuirksMode.

<< older posts newer posts >> All posts

Hidden Ajax Errors with jQuery

Drag and Drop on QuirksMode

Safari for Windows

Adding Style Blocks Using JavaScript

Making a 100% height interface

Contact Jesse