Category Archives: Javascript

Better timeouts and intervals with Javascript

Posted on by
Reply

window.setTimeout and window.setInterval don’t ever seem to have been given any love for a long time. (At least from my limited end-user point of view). I’ve toyed in the past with a better queuing system for them and having the ability to run on clear (especially for intervals), but I’ve actually knocked up a basic script that allows object-oriented timeout events. It still uses the native implementations outside, and I’m sure that this has probably already been done 100 times, but I still wanted to have a go.

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.

jQuery Parallax: In action

Posted on by
1

A lot of the traffic I get to this blog is related to the jQuery Parallax script I wrote quite some time ago. Looking at the code now, I don’t think I’d change too much about it, perhaps use .on('mousemouse', ...) instead of .mousemove(), but mostly it seems to serve it’s function quite well. Since the only real functions being called are .mousemove() and .css() it should still be working with the latest versions of jQuery and unless they decide to majorly change the API, it should continue to work too!

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:

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

Bookmarklet: Reload CSS files without reloading the page

Posted on by
Reply

Working on styling the contents of popup windows can be frustrating and laborious. But not if you can just reload the CSS…

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?

Continue reading →

Prototype 1.6: Event.live

Posted on by
Reply

I’ve recently been using Prototype 1.6 and had a need for a jQuery.live() clone. The following code appears to emulate mouse events well (form submits [and maybe more...] do not work in IE):

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!

jQuery serializeObject 0.1

Posted on by
Reply

I found myself in a situation recently where I wanted to have access to variables that would have been posted, in a the same structure as if the form had been posted and returned the JSON, using this jQuery plugin and Douglas Crockford’s JSON library, I think I’ve done it!

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

jQuery Ajaxify Lite

Posted on by
3

I’ve been using the ajaxify plugin for a while now and felt it needed an update.

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.

simpleGallery 0.2 – Minor updates

Posted on by
Reply

I’ve updated the gallery script I created in July. I’ve re-factored the code into a static class for easier modification and have created a config.ini settings file, to save modifying the script itself.

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.

autoPopulate 0.1

Posted on by
14

I’ve had it with filling in the same details repeatedly while testing a new form’s validation!

So much so, that I’ve spent time writing a pointless bookmarklet that makes me even more lazy and probably isn’t doing anything for my typos to real words ratio, however, I thought it might be useful to other people too.

There’s a demo here, and a generator for your own custom one here too.

The uncompressed source is linked at the bottom of the demo page, in case you want to see how it works or extend it. There are some comments there too. (But not many…)

Minify CSS – Shrink your CSS down to size

Posted on by
4

I know there are probably many services offering it already out there, and it’s not too hard to run right in TextMate, but I haven’t been able to find it in 30 seconds of Googling (well, I couldn’t at work, but I’ve since found this… Oh well!), so I set up a quick script to do it for me:

http://www.dom111.co.uk/files/minifycss/

If it’s useful, I might set up a memorable URL, let me know in the comments :)

I did set up syntax highlighting, using codemirror, which looked pretty nice, but made the minification (on large-ish files) take far too long. I haven’t really tested on any huge files, so try this at your own risk, but it seems faster that TextMate was.