Javascript – dom.hastin.gs

Thu 29th Mar 2012Tue 17th Apr 2012

Better timeouts and intervals with Javascript

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

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.

Sun 18th Mar 2012Mon 26th Mar 2012

jQuery Parallax: In action

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:

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!

Thu 31st Mar 2011

jQuery serializeObject 0.1

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.

Fri 29th Oct 2010Fri 29th Oct 2010

jQuery Ajaxify Lite

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.

Tue 14th Sep 2010Thu 16th Sep 2010

autoPopulate 0.1

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…)

Fri 16th Apr 2010

Minify CSS – Shrink your CSS down to size

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://dom.hastin.gs/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.

Thu 1st Apr 2010

jQuery – Persistent Input Labels

Do you forget whats supposed to go in the field the second you tab onto it?

Are you concerned your users will too?

Never fear! This simple plugin places an element of the same type underneath the current element and shows the contents of the title attribute (or whatever attribute you decide to use) as a label until you type text into the box!

It’s a very early version, and probably has a few bugs, but I’ve implemented enough to make it fairly useful I think. Unfortunately when you resize a textarea in webkit, it doesn’r fire the resize event, so I’ve added a workaround using mousemove (I tried to only capture mousemove if a mousedown had been detected, but to no avail…)

You can see a demo here, and get the files here.

Wed 27th Jan 2010

Dropdownify – Minimal effort dropdown

So recently I was asked to change a navigation style of an existing site to drop-down menus.

Simple, I thought, just use one of the many existing drop-down plugins. I tried many, but most seemed to use hardcoded styles and I had a few problems (some of which I encountered again, writing this).

So I’ve made this, I think it’s fairly robust, but I’m sure there’ll be problems with embedded objects (flash) and select boxes (in <= IE6), but for my needs, it sufficed, so I thought I'd share, in case anyone else needs a simple script to manage drop-downs. To use, create a nest of elements like this:

<ul id="top">
  <li>
    <ul>
      <li></li>
    </ul>
  </li>
</ul>

<li>

<ul>

</ul>

</li>

</ul>

or something similar (any elements, should work) and call:

// jQuery:
$('ul#top').dropdownify();

// mootools
$('top').dropdownify();

// jQuery:

$('ul#top').dropdownify();

// mootools

$('top').dropdownify();

Which should create a simple drop-down.

There are a couple of examples, one for jQuery and one for mootools, and the files can downloaded here and here.

I did encounter a problem with IE, mainly due to z-index faults, so with HTML code like the following:

<div class="nav-wrapper">
  <ul id="top">
    <li>
      <ul>
        <li></li>
      </ul>
    </li>
  </ul>
</div>

<li>

<ul>

</ul>

</li>

</ul>

</div>

I used the following CSS:

div.nav-wrapper,
div.nav-wrapper ul,
div.nav-wrapper ul li {
  position: static;
  z-index: 100;
}

div.nav-wrapper,

div.nav-wrapper ul,

div.nav-wrapper ul li {

position: static;

z-index: 100;

}

Mon 14th Dec 2009Mon 14th Dec 2009

jQuery Message – Letting the user know what’s going on

Screenshot

Recently I’ve seen a few implementation of Growl in Javascript and basically just thought I’d have a go too. Everyone’s doing it, or so it seems!

This simple implementation is styled using pure CSS and you should be to easily modify it to suit your needs!

I’ve set up a demo page and the files can be grabbed from here.

Thu 24th Sep 2009Fri 29th Oct 2010

jQuery Ajaxify – Update

I’ve been doing more work on the jQuery AJAXify plugin, it’s now a lot more robust (I think…) and I’ve squashed a few bugs that were in the previous version (with help from Andrea Battaglia) along with adding in a few new features (with their own bugs no doubt!).

Theres an updated test page and as ever a direct link to download here.

Check out the test page to see the new features!

Edit: Further updates, all links have been updated to version 0.3b. Added (and documented existing) callbacks as requested by Sebioff! And a further fix for the ‘append’ option. Also fixed IE6 compatibility.

Further Update: Another update after the comment from David Lee about $(‘form’).serialize();

Another Further Update: I have set up a Google Code repository for this plugin, which states that this code is released under the MIT license.

Update October 2010: I have updated this plugin for jQuery 1.4.3 as a ‘lite’ version.