Assigning a function to the onload event in jQuery is done like this:

$('img#hello').load(function(){
    alert('Image is loaded');
});

Recently, I created a new template for Theme Forest (’Pixelle‘) which features an integrated gallery. To make the user experience as seamless as possible it made sense to load all the images before the user could start browsing the gallery - the user is presented with an animated loading gif and a feedback box which updates every 300 milliseconds (showing how many images have loaded so far).

To make this work I could have just used the onload event of the window object (the infamous window.onload). The only problem is that doing so would mean that the user wouldn’t just have to wait for the gallery images to load, but all images, external scripts, ‘StyleSheets’ and ‘iframes’ (if there were any) would have to load before the window.onload event is fired. Additionally, if we used window.onload, the user would not recieve any feedback!

The only way to provide the user with accurate progress feedback would be to use the onload event of each individual image. What I ended up doing is adding a new property to each image when it’s loaded. I used jQuery’s ‘data’ function:

$('ul.gallery img').load(function(){
    $(this).data('isLoaded',true);
});

While the data function may seem a mysterious and magical thing all it essentially does is add a new property (property !== attribute) to an element. (With jQuery it’s a little more involved because a cache is used to store referenced properties).

Anyway, this ‘isLoaded’ property idea allowed me to check the progress at pre-defined intervals of 300 millseconds:

function check() {
 
    // Amount of loaded images:
    var loaded = 0,
        total = $('ul.gallery img').length;
 
    // Loop through all relevant images:
    $('ul.gallery img').each(function(){
 
        // If this images has loaded:
        if($(this).data('isLoaded')) {
 
            // Increment value of 'loaded':
            loaded++;
 
        }
    });
 
    // If the amount of loaded images is the
    // same as the total amount of images:
    if(loaded===total) {
 
        // e.g. alert message:
        alert('All gallery images have loaded!');
 
    } else {
 
        // Update the feedback box: (e.g. "1 out of 20 images have been loaded")
        $('#feedback')
        	.html(loaded + ' out of ' + total + ' images have been loaded');
 
        // Check again in 300 milliseconds:
        setTimeout(check,300);
 
    }
 
}
 
// Run function:
check();

Obviously this logic could be used in a number of applications, not just a photo gallery.

I’m not sure how useful others will find it but I created a jQuery plugin with a similar purpose, except it does not have a feedback feature:

// 'whenLoaded' jQuery plugin, simple and short:
 
(function($){
    $.fn.whenLoaded = function(fn){
 
        var $elements = this,
            total = this.length;
 
        $elements.each(function(){
            $(this).load(function(){
                $(this).data('isLoaded',true);
            });
        });
 
        function check() {
            var loaded = 0;
            $elements.each(function(){
                if($(this).data('isLoaded')) {
                    loaded++;
                }
            });
            if(loaded===total) {
                fn.call($elements);
            } else {
                setTimeout(check,300);
            }
        }
 
        check();
    }
})(jQuery);

(’whenLoaded’ jQuery plugin download: jquery.whenloaded.js)

The point in it is to simplify the process of attaching one onload event to multiple objects so that when all objects have loaded the single event fires (figuratively speaking). It’s easier if I just show you an example:

Fading in all images within a page

Let’s say that you want to fade in all the images within your document when they’ve loaded:

$('img').css({
    opacity: 0
}).load(function(){
    $(this).animate({opacity:1});
});

The only problem with the above code is that it will fade each image in after each particular image has loaded. This may be what you’re after, in which case, good for you, if however you are looking to fire a function when ALL images have finished loading then the ‘whenLoaded’ plugin may be useful to you! An example:

$('img').css({
    opacity: 0
}).whenLoaded(function(){
    $(this).animate({opacity:1});
});

Now, nothing will happen until all images are finished loading at which point they will all fade in at the same time. Note: the 'this' keyword within the callback function references all the selected elements, not just one.

If you’re wondering what the difference is between using $(window).load() and $('img').whenLoaded() the former will wait until all assets have loaded (including iframes, external scripts and CSS StyleSheets while the latter will run when all images have loaded.

You may not want to target all images in which case you can use jQuery’s selector engine as per usual:

$('ul.sidebar #widget-x img.tiny').css({
    opacity: 0
}).whenLoaded(function(){
    alert('All tiny images within 'widget-x' have been loaded!');
    $(this).animate({opacity:1});
});

The reason we’re setting the images to opacity:0; as opposed to display:none; is so that the space they accomodate is retained even when they’re not visible. This will only work properly if you have set the width and height attributes of each image.

An even cooler example

Problem: We have a bunch of thumbnails on a single page - the client has requested that all thumbnails fade in one after the other. For this to work all thumbnails must already be loaded before the cascading effect begins.

The window.onload / body.onload events are out of the question because there is a massive background image (1.7mb!) meaning that those events won’t be fired until that huge image has loaded. Somehow we need to collectively target the onload event of all the thumbnail images without having to wait for the huge background image to load.

Solution: We’ll use the ‘whenLoaded’ plugin!

$('div#thumbnails img').css({
 
    // Prepare image for awesome effect:
    opacity: 0,
    height: 0,
    width: 0
 
}).whenLoaded(function(){
 
    // When ALL images are loaded  go through
    // all and apply effect (lasting 400ms) to 
    // each image with an interval of 200ms:
 
    var all = $(this);
 
    function fadeIn(i) {
        if(!all[i]) { return; }
        $(all[i]).animate({
            opacity: 1,
            height: '48px',
            width: '48px'
        },400);
        setTimeout(function(){
            fadeIn(i+1);
        },200);
    }
 
    fadeIn(0);
 
});

You can see a demo of the solved problem over here!

The sky’s the limit!

Just like the onload event itself this plugin will support iframes, script/link elements, framesets, images etc. Another useful application of this plugin would be to wait for all your StyleSheets to load (e.g. $('link[rel=stylesheet]').whenLoaded() )- why would you want to do this? Well, if you have a web application which requires external CSS styles then it might be a good idea to only fire it off when you know for sure that those stylesheets have loaded!

• 

  WP Super Cache

  Super Cache is a true life-saver, especially if you’re likely to get Dugg or Stumbled quite a lot!

  This plugin generates static html files from your dynamic WordPress blog. After a html file is generated your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts.

  Go to the ‘WP-Super-Cache’ plugin page »

• 

  HeadSpace 2

  HeadSpace 2 is wonderful, it allows you to modify every tiny bit of SEO related info on pages, posts, categories etc.

  HeadSpace is a powerful all-in-one plugin to manage meta-data and handle a wide range of SEO tasks. With it you can tag your posts, create custom titles and descriptions that improve your page ranking, change the theme or run disabled plugins on specific pages, and a whole lot more.

  Go to the ‘HeadSpace 2′ plugin site »

• 

  WP-Syntax

  This is the BEST way to highlight your code syntax if you’re using Wordpress. Forget those unreliable and slow client-side alternatives, this will do it all behind the scenes!

  WP-Syntax provides clean syntax highlighting using GeSHi — supporting a wide range of popular languages. It supports highlighting with or without line numbers and maintains formatting while copying snippets of code from the browser.

  Go to the ‘WP-Syntax’ plugin page »

• 

  Live Comment Preview

  I’m quite lazy and haven’t got round to implementing this one but it looks great!

  Live Comment Preview is the simplest way to get live comment previews on your site. Simply activate the plugin — That’s it! This plugin uses only client-side Javascript to format a preview, it does not make any Ajax requests to the server. This provides a smooth live preview as you type.

  Go to the ‘Live Comment Preview’ plugin page »

• 

  Get Recent Comments

  It’s quite nice to have widgets like this in your sidebar, just to assure your users that your blog is active.

  This plugin displays excerpts of the most recent comments and/or trackbacks that have been posted to the articles in your blog.

  Go to the ‘Get Recent Comments’ plugin page »

• 

  Related posts

  A handy plugin, especially useful for blogs with vast quantities of similar content.

  WordPress Related Posts Plugin will generate a related posts via WordPress tags, and add the related posts to feed.

  Go to the ‘Related Posts’ plugin page »

• 

  cformsII Contact Form

  There are quite a few contact form plugins for Wordpress, this one seems to be the best reviewed.

  cforms is a highly customizable, flexible and powerful form builder plugin, covering a variety of use cases and features from attachments to multi form management, you can even have multiple forms on the same page!

  Go to the ‘cformsII’ plugin page »

• 

  Sideblog

  Sometimes you just want to update your blog with a little info instead of an entire post - that’s what this plugin is for!

  Sideblog is a plugin for Wordpress Blog Platform. It is one way of implementing “Asides” - a series of “short” posts, 1-2 sentences in length. Sideblog is now in version 3.

  Go to the ‘Sideblog’ plugin site »

• 

  Breadcrumb NavXT

  Breadcrumbs can seem quite an old-fashioned feature but can really enhance the usability of your site, this plugin makes it really easy to add that functionality to your blog.

  Breadcrumb NavXT is a WordPress plugin compatible with WordPress versions 2.5 and up. This plugin generates locational breadcrumb trails for your WordPress blog.

  Go to the ‘Breadcrumb NavXT’ plugin site »

• 

  Sociable

  Sociable appends a list of the social bookmarking sites (ie. Digg, Del.icio.us, Reddit) at the end of your posts. Very useful!

  Social bookmarking sites allow websurfers to save, catalog, and share interesting pages they find online. The Sociable plugin appends links for your readers to use those sites to the end of each of your blog’s posts, increasing your potential audience.

  Go to the ‘Sociable’ plugin page »

Visit the plugin page »

A quick example of what it can do:

Even though the demonstations are quite playful this plugin could potentially be used for some very practical causes.

Have a look at the demo to see what I’m talking about.

Download the demo ZIP

I’ll be using jQuery for this tutorial. We won’t need any plugins. Right let’s start!

We’ll start with a basic XHTML document with jQuery, our StyleSheet and our JS file linked to:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Portfolio - Horizontal Scrolling</title>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="portfolio.js"></script>
    <link href="portfolio.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="container">
 
		<!-- Stuff goes here -->
 
    </div>
</body>
</html>

The next step is to markup the portfolio. I’ll be using an unordered list with each of the portfolio pieces as a list item:

<h1>Portfolio</h1>
 
<ul id="portfolio">
    <li id="piece1">
        <img src="img/1.png" alt="portfolio piece 1 preview" />
        <h2>Portfolio piece 1</h2>
        <p>Lorem ipsum dolor...</p>
        <p><a href="#">More details &raquo;</a></p>
    </li>
    <li id="piece2">
        <img src="img/2.png" alt="portfolio piece 2 preview" />
        <h2>Portfolio piece 2</h2>
        <p>Lorem ipsum dolor...</p>
        <p><a href="#">More details &raquo;</a></p>
    </li>
    <li id="piece3">
        <img src="img/3.png" alt="portfolio piece 3 preview" />
        <h2>Portfolio piece 3</h2>
        <p>Lorem ipsum dolor...</p>
        <p><a href="#">More details &raquo;</a></p>
    </li>
    <li id="piece4">
        <img src="img/4.png" alt="portfolio piece 4 preview" />
        <h2>Portfolio piece 4</h2>
        <p>Lorem ipsum dolor...</p>
        <p><a href="#">More details &raquo;</a></p>
    </li>
    <li id="piece5">
        <img src="img/5.png" alt="portfolio piece 5 preview" />
        <h2>Portfolio piece 5</h2>
        <p>Lorem ipsum dolor...</p>
        <p><a href="#">More details &raquo;</a></p>
    </li>
    <li id="piece6">
        <img src="img/6.png" alt="portfolio piece 6 preview" />
        <h2>Portfolio piece 6</h2>
        <p>Lorem ipsum dolor...</p>
        <p><a href="#">More details &raquo;</a></p>
    </li>
    <li id="piece7">
        <img src="img/7.png" alt="portfolio piece 7 preview" />
        <h2>Portfolio piece 7</h2>
        <p>Lorem ipsum dolor...</p>
        <p><a href="#">More details &raquo;</a></p>
    </li>
    <li id="piece8">
        <img src="img/8.png" alt="portfolio piece 8 preview" />
        <h2>Portfolio piece 8</h2>
        <p>Lorem ipsum dolor...</p>
        <p><a href="#">More details &raquo;</a></p>
    </li>
    <li id="piece9">
        <img src="img/9.png" alt="portfolio piece 9 preview" />
        <h2>Portfolio piece 9</h2>
        <p>Lorem ipsum dolor...</p>
        <p><a href="#">More details &raquo;</a></p>
    </li>
    <li id="piece10">
        <img src="img/10.png" alt="portfolio piece 10 preview" />
        <h2>Portfolio piece 10</h2>
        <p>Lorem ipsum dolor...</p>
        <p><a href="#">More details &raquo;</a></p>
    </li>
</ul>

We’ll also need to add some basic styles: (portfolio.css)

body,ul,li,h1,h2,p,img {
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
}
 
#container {
    width: 900px;
    margin: 0 auto;
    font-size: 0.8em;
    font-family: Arial, sans-serif;
}
 
h1 {
    font-size: 2.4em;
    text-align: center;
    padding: 30px 0;
}
 
h2 {
    font-size: 1.3em;
    padding: 0.5em 0;
}
 
#portfolio li {
    overflow: hidden;
    padding: 10px;
    margin: 10px 0;
}
 
#portfolio li img {
    float: left;
    margin: 0 10px 0 0;
}
 
#portfolio li p {
    padding: 0.3em 0 0.5em 0;
}

You’ll notice that each portfolio item has an H2 which contains the title, an IMG (which has a preview of the portfolio piece) and a paragraph explaining the portfolio piece. The next step is to extract the required information using jQuery and generate a navigation menu which will allow users to navigate through each slide of the portfolio.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

// portfolio.js
$(function(){ // Function initiates when DOM is ready
 
    // Apply styles to #portfolio and wrap it in #portfolio-wrapper
    $('#portfolio')
        .css({
            height: '163px', // 163 is the height of each portfolio piece 
            width: ($(this).width() * $('#portfolio li').size()) + 'px', // i.e. 900x10 = 9000
            position: 'relative'
        })
        .wrap('<div id="portfolio-wrapper" style="width:900px;overflow:hidden;position:relative;"></div>'); // Wrap in new DIV element (required for scroll to work properly)
 
    $('#portfolio li')
        // Looping through each list-item:
        .each(function(){
 
            var newNavItem = addPortfolioNavItem( $(this).attr('id') , $('img:eq(0)',this).attr('src') , $('h2',this).text() );
 
            newNavItem.children('a:eq(0)').click(function(){
                // When portfolio nav-item is clicked:
                $('img',this).css({opacity:0.8}); // Dim to .8 opacity (to show the user they've been there)
                var id = $(this).attr('href').split('#')[1]; // FIX: IE returns actual HREF instead of href attribute
                var difference = $('#portfolio').offset().left-$('#portfolio li#' + id).offset().left; // leftOffset of ul#portfolio minus leftOffset of selected portfolio piece
                $('#portfolio').animate({left: difference}, 700); // Animate to the value of different over 700 milliseconds
                return false; // prevent default action of links
            });
 
        })
        .css({
            width: '880px', // Specify width as 880 (900 minus 10px padding on each side)
            margin: 0, 
            float: 'left'
        });
 
});
 
function addPortfolioNavItem(id,imgSrc,title) {
 
    // If the new navigation menu has NOT been created yet:
    if(!$('#portfolio-nav').get(0)) { // Test whether nav-menu already exists
        $('<ul id="portfolio-nav"/>')
            .insertBefore('#portfolio-wrapper'); // If it does not exist then create it and insert before #portfolio-wrapper (an element which will be created later)
    }
    // creates a new list item and appends it to #portfolio-nav
    return $('<li><a href="#' + id + '" title="' + title + '"><img width="90" src="' + imgSrc + '" alt="' + title + '" /></a></li>').css({display:'inline'}).appendTo('#portfolio-nav');
 
}

You’ll see that we’re looping through each list item of the portfolio and then calling the addPortfolioNavItem function which will create a new navigation item and append it to the newly created ul#portfolio-nav (which is inserted into the DOM before ul#portfolio. When one of the thumbnail images (in the navigation menu) is clicked it dims to 0.8 opacity to show the user what slides they’ve already viewed, then it uses jQuery’s animate method to smoothly change the left CSS property of ul#portfolio to match the offset of the selected slide. I hope the comments in the code above are sufficient, if you have any questions feel free to ask below.

The DEMO shows a very basic example of what can be achieved with the above JavaScript, obviously you could achieve something far snazzier with a little bit more CSS…

Download the demo ZIP

So, here are seven things you can do to make sure your users stay for more than five seconds:

1. 

   Get a logo

   A logo is the first step in creating a solid and memorable brand. Your entire website speaks for itself so make sure it says the right things and get yourself a logo. This is especially important if the name of your site is either really common or really complicated - normally, having a logo will aid your users in remembering your brand and your website.

   • 50+ Kick Ass Logos for Inspiration
   • Faveup - A gallery of inspirational logo design
   • 10 trends that will define logo design in 2008
2. 

   Provide a method of contact

   Don’t leave your users clueless when they want to tell you something. You should give them at least one way to contact you, whether it be an email address, your Linked-In profile or a contact form. Personally I prefer contact forms because they normally provide the quickest way to contact someone. When you list your email address please don’t make it into a ‘mailto’ link and please don’t write it in plain format (person@email.com) - this is just stupid - when I see this I think, "Well, whoever made this website must be an idiot who knows nothing about spam bots!" (a little harsh, I know) Instead of plain email format write it how a human would understand, for example: "You can contact me be emailing John at my-website dot com."

   • Contact Form 7 - A wordpress plugin
   • Hide your email address from spammers
   • Website Contact Form Generator
3. 

   Have an honest "about" page

   Website creation 101 teaches you to create an ‘about me’ / ‘about us’ page but what it does not teach you is what to put on that page. Please be honest! If you’re an individual then don’t say "we are a company", instead say "I am an individual." Also, when a user goes to an about page they expect to see actual information about the site and/or it’s owners/creators, not some marketing drivel which doesn’t actually say anything worthwhile!

   • How to write an "About me" page
4. 

   Speed up your website

   A slow website is the ultimate turnoff for a first-time user. Make sure your website is well optimised - this means your images, scripts, StyleSheets and flash movies have to be optimised down to the smallest size possible (without losing too much quality). Also make sure your hosting package isn’t holding you back, spending a bit extra on hosting can save both you and your users precious time, it’s definitely worth the expense. Also, try and reduce the amount of pages a user has to visit - obviously keep content separate but if you’ve got something like a login form on a page of it’s own then navigating there is just a waste of time for the user; instead you might want to consider integrating the login form on the homepage.

   • Yahoo: Best practices for speeding up your website
   • 25 Ways to Speed up your website
5. 

   Validate!

   Form validation is not just for your benefit, the user loves it too! As long as it’s intuitive and doesn’t require a lot of waiting time data validation can really enhance the user’s experience. If possible, use client-side scripting to achieve this - obviously a server-side solution does need to be in place but it’s always nice to have a speedier alternative (JavaScript). I don’t know about the rest of the world but what I prefer is when it all happens on the fly. So, when I’m entering my required username I will get immediate feedback on whether that username is available or not, instead of having to click submit and re-enter my password and un-tick those stupid "subscribe" checkboxes!

   • Basic JavaScript form validation (w3 Schools)
   • Using Ajax to validate forms
   • jQuery (JavaScript library) validation plugin
6. 

   Treat them like humans

   Don’t make your human users feel like bots. The need to minimize spam is understandable but please use things like CAPTCHA only when you have to. And when marking-up links and deciding which phrases should be links take humans into account before the search engines.

   • ‘Click here’ and other meaningless link phrases
   • A-list-Apart: Human-to-Human Design
   • Escape from CAPTCHA
7. 

   Write JavaScript which degrades, gracefully

   I am totally SICK of people who deny the importance of this practice. For all those out there who don’t quite understand the concept listen up!

   Graceful degradation is the process through which an application or website’s function degrades smoothly without presenting the user with functionless elements or features. Some people out there will tell you that it’s not very important anymore because *most* people have JavaScript enabled. Regardless of the majority you have to cater to as many people as possible. If a user doesn’t have JavaScript enabled and you haven’t bothered to make sure your code degrades, all you’re going to do is confuse that user! Graceful degradation comes hand in hand with progressive enhancement so make sure you take both into account, always!

   • Graceful Degradation for the beginner
   • Graceful Degradation & Progressive Enhancement
   • Understanding Progressive Enhancement

My new website will act as a portfolio and a personal blog. Like all other great things in the world the site is built on Wordpress and themed by me.

See the site now - james.padolsey.com »

The design of the site is quite conventional, there are however a couple of cool features which I think are worth mentioning. The site features a "hand-built" jQuery Ajax contact form which probably isn’t even worth mentioning because they are so common nowadays. I was considering using a Wordpress plugin which does this all automaitcally but all the ones I looked at were far too bloated so I went ahead and made my own. I’m also looking into Ajax’ing the commenting process on the blog… Although that won’t be for a while.

Another feature is the "customize" option. If you have JavaScript enabled you should be able to see a box in the upper right hand corner of the site which, if you click on, an array of colourful options will slide down. I was going to implement a colour picker so users have full control but I decided against it because a pre-defined set of colours (which had been tested to look good) made more sense. So, if you click on the colour of your choice various elements of the page should "magically" change accordingly. Additionally this feature will set a cookie in your browser so that you next time you visit your preference will be retained!

Please subscribe to my new blog… It won’t all be about personal stuff, hopefully I’ll get a couple of webdev related posts up in the near future.

The actual story which was dugg was offering a bookmarklet which you can press to bring up a popup window which enabled you to copy (*gasp*) and paste (*gasp*) funny characters into your tweets. The only problem with this being that it is manual and not really worth the effort… not even slightly! I’m quite lazy so cannot be bothered to open a new window… go into that new window… highlight a bit of text… copy it… select the twitter window… and then paste it into the textbox! So, spending that wouldbe wasted time I created a sweet little GreaseMonkey script which does all of it for you!

You can download it from UserScript.org here > UserScripts.org/scripts/show/34024

Screenshot (click for larger):

The new plugin is called "seekAttention" and allows any element on a page to seek the users attention… with added effects! I’ve been careful to take usability and customization into account with this plugin. It’s fully automated - it detects element size and builds an overlay to suit that element and you have a number of options so you get to decide how the plugin behaves.

It’s hard to explain exactly what it does so please have a look here: seekAttention jQuery plugin.

If you have any comments, questions or any bugs to raise please leave a comment on this blog post. As it’s an experimental plugin there are bound to be a few minor issues, especially with older browsers.

At 7pm (I’m in the UK) I downloaded my copy of Chrome (from here: google.com/chrome) and installed it straight away. I’ve prepared some juicy screenshots for those too tired to read:

Features

• One box for everything: Chrome has a multi-functional address bar allowing you to search multiple resources/sites and access sites by typing in their URL’s all into one box.
• New tab page: Google Chrome automatically displays your most visited pages and search engines as well as recently closed bookmarks.
• Application Shortcuts: Chrome allows you to create desktop-app like shortcuts to your online apps such as Google Mail or Google docs so instead of having to muddle around with tabs and bloated browsers you can open your app in a single window of it’s own - as if it were actually a desktop app!
• Dynamic Tabs: Chrome has some neat features to let you control your tabs more easily.
• Crash control: Since each tab is in a process of it’s own, if a website you’re visiting crashes and no longer responds it is only that single tab which has crashed instead of the entire program.
• Incognito mode: Sometimes you won’t want you’re recently viewed items to be logged or available on the new tab page - Chrome’s inCognito mode is a more private way to surf the internet.
• Importing settings: Much like other browsers, Chrome will import bookmarks and settings from other browsers.
• New V8: The way Chrome runs JavaScript is totally revolutionary and is said to massively speed up the running or heavy web apps.
• WebKit rendering engine: This is not bad news for web developers. Since the rendering engine is the same as Safari’s there will be little need to worry about incompatibilities.

So… Firefox, Safari, Opera or… Chrome?

Chrome looks and feels wonderful. I’ve only been using it for a couple of hours and already find it a very fast and fluid experience. However, there is no way I am ditching Firefox’s flexibility/expandability or Opera’s security/speed for something which is still only in beta. I think I will definitely keep Chrome installed and I will hopefully make use of it. I know for a fact that I’ll be running Google Mail on it from tonight onwards!

I am looking forward to the next few releases of this awesome browser!

Thank you Google!

Related Links

• Google Chrome Forum!
• Google Chrome Homepage
• A fresh take on the browser - Google Blog
• Firefox boss responds to Google’s Chrome
• Google Chrome Process Manager
• Ten Questions About Google Chrome
• Google on Google Chrome - comic book
• Google Chrome Screenshots

I thought it would be a good idea to expand on the tutorial for the benefit of those who want to integarete the style-switcher into their own website.

In the tutorial, we made use of the popular JavaScript library, jQuery. I’m a big fan of jQuery and think it’s a time-saver and definitely something you should pursue if you want to add UX enhancements throughout your site. Though in some situations it’s not a good idea to use jQuery; if you’re only using it for a couple of features within your site then it might be better to just write the actual JavaScript instead, to save space. (jQuery.min is ~50k!)

So, for anyone you wants it, I have written the non-jQuery version.

NOTE: Just like the jQuery version it works in IE6, IE7, Opera, FF and Safari. If you followed the concepts outlined in the tutorial then it shouldn’t be too hard to see what’s going on here. - Since I’m using no library it’s bound to be a longer script; "one line with jQuery is several lines without it!"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197

var styleSwitcher = {
	// Begin script:
	init: function(){
		// Initialise the CSS dummy method:
		// (If you don't know what this is then read through the NETTUTS tutorial!)
		styleSwitcher.cssDummy.init();
		// Specify container of the links (<A>) to different styles:
		var ss = document.getElementById('style-switcher');
		// If it exists on the page:
		if (ss) {
			// Get anchors within the container and assing length to variable:
			var ssLinks = ss.getElementsByTagName('a'), l = ssLinks.length;
			// Loop through all anchors:
			while (l--) {
				// Assign onclick event:
				ssLinks[l].onclick = (function(){
					var href = this.href;
					// Load the stylesheet:
					styleSwitcher.loadStyleSheet(href);
					return false;
				});
			}
		}
	},
	loadStyleSheet: function(href){
		// Create new overlay DIV element and style it:
		// (applyCSS is another method)
		if(!document.getElementById('overlay')) {
			var overlay = document.createElement('div');
			overlay.id = "overlay";
			styleSwitcher.applyCSS(document.body,{height:'100%'}); // For IE6
			styleSwitcher.applyCSS(overlay,{
				position: 'absolute',
				top:0,
				left: 0,
				width: '100%',
				height: '100%',
				zIndex: 1000,
				background: 'black url(img/loading.gif) no-repeat center',
				opacity: 0,
				filter: 'alpha(opacity=0)'
			});
			// Append our overlay to the document:
			document.body.appendChild(overlay);
		} else {
			var overlay = document.getElementById('overlay');
		}
		// Fade in the overlay
		styleSwitcher.fadeIn(overlay,function(){
			// Callback function: Get response from style-switcher.php:
			styleSwitcher.AJAX.load(href + '&js',function(data){
				// Do stuff with the data response:
				var link = document.getElementById('stylesheet');
				if(link) link.href = 'css/' + data + '.css';
				// Initiliase the "check" method of cssDummy:
				styleSwitcher.cssDummy.check(function(){
					// Once CSS has loaded fade-out the overlay:
					styleSwitcher.fadeOut(overlay);
				});
			})
		})
	},
	// It makes sense to make a quick method to apply CSS rules to elements:
	applyCSS: function(element,styles){
		// If styles are passed in as an object the proceed:
		if (typeof styles == "object") {
			// We don't want an array though:
			if (!styles[0]) {
				// Loop through array and apply styles:
				for (var i in styles) {
					element.style[i] = styles[i];
				}
			}
		}
	},