Andrew Sellick » Prototype

Script of the week

andy — Thu, 04 Oct 2007 23:06:24 +0000

It’s been a while since I last posted a script of the week, however, as soon as I found this script I knew I had to put it on my site. Well this week it is a script called LightWindow that claims the prize. Before you all moan at yet another light-’whatever’ as it is so well put on the LightWindow site please read on as this one is really worth a look.

Now I have seen a lot of LightBox esq effects out there but this one wins the prize. Not for aesthetics as on that front it is just the same as the others, however, if you look at the media types that LightWindow is compatible with you gain an understanding as to why exactly it is that this script is so impressive (In fact LightWindow claims to support every media type). Couple this with superior Browser compatibility and the sheer versatility and flexibility and you have a winning package.

The code is slightly heavy at 63KB and when taking in to account that it also uses Prototype and Script.aculo.us you can gather that it is a big bit of kit, however, the scalability of this code leads me to believe it is totally worth it.

Finally the list of features that LightWindow offers is phenomenal and well worth a browse. Have a look for your self at the LightWindow feature list.

Simple JavaScript Idle State using Prototype

andy — Wed, 03 Oct 2007 13:17:29 +0000

This is a fairly simple piece of code, however, I decided it was worth putting up on the site for everybody to see.

Anyway the code itself aims to fire a function when there has been no mouse movement for a predefined length of time and reset the count every time the mouse is moved.

code

The code is very simple, therefore, only the JavaScript is worth talking about for this example, so that is going to be the focus of this article. Have a look for yourself below.

Right then here we go:

JavaScript

var idleTime = 5000;
var timeOut = ”;

function init() {

    Event.observe(document.body, ‘mousemove’, resetIdle, true);

    setIdle();

}

function onIdleFunction(){

    alert(’Your browser has been idle for ‘ + (idleTime/1000) +’ seconds.’);

}

function resetIdle(){

    window.clearTimeout( timeOut );
    setIdle();

}

function setIdle(){

    timeOut = window.setTimeout( "onIdleFunction()", idleTime );

}

Event.observe(window, ‘load’, init, false);

At the top of the code there is a variable called "idleTime", this variable sets the idle state time (in milliseconds) that the browser mouse be idble for, before firing the function. Change this as you wish.

Next we have the "init" function which is called on page load by an event listener at the bottom of the sample code. This itself sets a mouse move event listener (which resets the idle state when fired) on the document body and also calls the idle state function.

We then have an "onIdleFunction" which is where you put the code you wish to be fired when the page is idle. In this example we’re just alerting out that the page has been idle.

Finally we have two functions, resetIdle and setIdle, which really do exactly what it says on the tin. The first resets the idle state (on mouse movement) and the second sets the idle state.

Well that’s about it so have a look for yourself at the demo and code below.

demo

Feel free to view the Simple JavaScript Idle State using Prototype Demo.

download

Also please have a look at the Simple JavaScript Idle State using Prototype Code.

note

The Idle State at present only uses mouse movement for detect inactivity. This will be problematic when considering devices that do not have mice (as it will not work), however, the code can be easily adapted to check for other forms of activity.

It is also worth while mentioning that the mouse move event is applied to the document body and therefore you must make sure that the height and width of the body and html are set to 100% for this to work, otherwise the event listener will not work.

Prototype Diagram

andy — Tue, 31 Jul 2007 13:06:24 +0000

I’m sure plenty of you have seen this before as I know I have been using it for a long time but nether the less I thought I would post it anyway.

Jonathan Snook has created a very handy visual representation for the Prototype Framework. It’s an amazingly useful tool to have whilst developing and I recommend it to anyone that wishes to use Prototype.

Anyway here is Snook’s Prototype Diagram. Enjoy!

Prototype & script.aculo.us Image Cropper

andy — Mon, 26 Feb 2007 10:39:59 +0000

Another short article just to document an amazing example of a JavaScript image cropper tool. Based on Prototype and script.aculo.us this example stylishly demonstrates a range of features including minimum image widths and heights, fixed ratios, a crop with preview and the ability to nudge the selected image region by use of the keyword arrow keys. This tool could be integrated into any CMS providing the wow factor for all end users.

Links: