notebook

from edd couchman, the creator of redheat and chopter

Post archive for ‘javascript’

Lazy Load Images with Prototype

Download lazyload.js.
Requires prototype.js version 1.6.0_rc0 or above.

Element.addMethods({
lazyload: function(element, options)
{
/**
What does it do?
It delays loading of images in (long) pages. Images below the fold (far down in the
page) won’t be loaded before the user scrolls down. This is exact opposite of image
preloading. With long pages containing heavy image content end user result is the
same. Page feels [...]

Equal Height Columns

There are no CSS hacks that can get equal-sized columns, so I wrote this tiny bit of Javascript to do the work for you. Simply add a class of “column” to any <div>s and their heights will match when the page loads.

function matchColumns()
{
var columns = $A($$(’div.column’));
var column_height = 0;
var max_height = 0;
columns.each(function(column)
{
column_height = column.getHeight();
max_height = [...]

Smooth Scrolling Links

FAQs are tedious, but we can make their usage much more enjoyable (although I use this word lightly) by imroving the User Experience slightly.
Normal FAQs jump from the list of questions to the answer; with a simple bit of Javascript the page will smoothly scroll to the answer, and then–as a bonus–the answer will flash [...]

Regular Expression

It’s been a while since I last wrote anything on here — this blog has been abandoned since I went back to uni. — so I thought it best to show you a small part of the work I’ve been doing.
So here it is, the regular expression I have written for tradeswomen.biz:
search.match(/^(?:an?\s)?([A-Za-z\s]+)?\s(?:(?:in|from|near|around|
close to|working in|based in)\s)([A-Za-z0-9\s]+)(?:[.,;]?)$/);

More prototype

Earlier I wrote about prototype and script.aculo.us. I’ve been using it even more at work, and really, really like it.
Who wants to write document.getElementById(”searchbox”); when you can write $(’searchbox’);And Ajax; how could it be easier to make an Ajax request than new Ajax.Request()Exactly, it couldn’t.

Prototype and script.aculo.us

The prototype javascript library is one of the most brilliant, time-saving tools a web developer can use. It’s so easy to use this in conjunction with script.aculo.us to create some user-friendly “drag-and-drog reordering elements with auto-save” to a page.
I’ve used it in a giant database-driven application we’re developing, and it has helped to trim hours [...]