This script extends the return from window.setTimeout and window.setInterval to be an object itself that you can stop() and restart(), preserving the function for further use.

var t = window.setTimeout(function(timeout) {
    // timeout argument is the timeout object itself
    console.log('test');
}, 300);
// test
t.restart();
// test
 
var s = window.setInterval(function(interval) {
    // interval argument is the interval object itself
    Messages.check();
}, 1000);
// Interval
s.stop();
// Interval
s.complete;
// 9
s.cancelled;
// 1

Please note: I’ve only really tested this in Chrome! I can’t see why it wouldn’t work in other browsers, I guess maybe some of these would be protected, but I’m not sure… If that’s the case, it wouldn’t be too difficult to utilise the alternative new Timeout(function(){ }, 400); syntax…

There’s a bit more (not much!) of an explanation here and the code is available here. There are no prerequisites for this code, should run on plain old Javascript.

Edit: Minor update to the script to include the object in the callback.

Since my example was on a fairly empty page, I thought I’d link to a couple of sites that are using it in the real world:

• Lunaii-dollmaker.com – a great header, excellent style
• Attackemart.in – a great idea utilising horizontal and vertical movement
• lsd.in.ua – a good example on the homepage

If you’re using the script and think your sites is a good example of utilising the parallax effect, please leave me a message!

I am going to try and work on a full set (that can be incrementally loaded), but this has been sufficient for my needs so far.

Use it here!

Edit: I’ve updated the Tool to allow for various functions, input via literals (\x0d or \u02f4), returning to multibyte in the text area and other fixes. The same link will work.

This link was incredibly helpful with my investigation and testing!

This bookmarklet will reload all the associated stylesheets in the current document. It looks for all <link/> elements with rel="stylesheet", removes from the DOM and re-adds them appending a ?_=1234567890 (or &_ depending on the URL, where the numbers represent the JS timestamp) into the <head/>.

Hopefully this will help someone suffering similar pain to myself!

Reload CSS (Add the link to the left to your bookmarks to use!)

Please note: I haven’t tested this in IE, but surely it’ll work… Right?

Full commented code:

(function(document, getElementsByTagName, toString, match, href, length, i) {
    var head = document[getElementsByTagName]('head')[0],
        links = document[getElementsByTagName]('link'),
        store = [];
 
    // iterate over all the existing s
    for (; i < links[length]; i++) {
        // if it's a stylesheet
        if (links[i][href][toString]()[match](/\.css/)) {
            // clone the element, false is needed as Firefox requires the deep flag
            store.push(links[i].cloneNode(!1));
 
            // then remove it from the DOM
            links[i].parentNode.removeChild(links[i]);
 
            // decrement i, because links is a NodeList (not an array) and when the element is
            // removed from the DOM, it is also removed from the NodeList
            i--;
        }
    }
 
    // iterate over the stored items
    while (store[length]) {
        // strip out any previous cachebusting querystring
        store[0][href] = store[0][href][toString]().replace(/([&\?])_=\d+/, '');
        store[0][href] = store[0][href] + (store[0][href][toString]()[match](/\?/) ? '&' : '?') + '_=' + Date.now()[toString]();
 
        // put the element in the 
        head.appendChild(store.shift());
    }
})(document, 'getElementsByTagName', 'toString', 'match', 'href', 'length', 0);

Event.live = function(s, e, f) {
    Event.observe(document, e, function(event) {
        if (Element.match(event.target, s)) {
            if (!(f.call(event.target, event))) {
                event.stop();
            }
        }
    });
}

To use this run something like the following:

Event.live('div#doesnt_exist_yet a.button', 'click', function() {
    // run this when the button is clicked
});

Hope this helps!

You can download the script here and there’s a demo here.

Since .live() is supported for more events now, I thought it was time to get it working how I always wanted it to work.

Using the same syntax on links as before, you can specify the target div, using the target=”" attribute and the url is automatically extracted from the href=”" or action=”" attribute meaning you can keep your code simple and valid but have easily Ajax populated content, as since I’m using .live() any future links/forms that match the original selector will continue to be ‘ajaxified’.

There’s a demo here and source code too, as ever.

Also available through Google Code.

New features:

* Image titles
* Separate configuration
* Standard mode with safe URLs as well as mod_rewrite enabled ‘nice’ URLs
* Added ‘..’ parent folder to galleries

The demo page has been updated and the script is available to download here.

Luckily the Find and Replace regular expression engine is pretty cool!

I’ve got this small (!) regular expression that should minify your CSS, by putting:

;?\s*([:;,{}])\s*|\s*/\*()[\S\s]+?\*/\s*|(\s)\s+

in the Find box and:

$1

in the replace box, and by ensuring that Regular expression is ticked, you should be able to minify CSS with the Replace All button!

Note: I haven’t test this particularly extensively, or with the IE expression(). This may produce undesired results! It certainly seems to be fine on all the standard CSS I’ve tested it with.

I created a theme (which might only work with the nightly builds…) that is not entirely disimilar to the Twilight theme for TextMate.

Thought I’d share it, in case anyone else would like it too!

It looks like this:

Download it here.