Entries tagged "JavaScript"

Scatter is a JavaScript library for randomly arranging HTML elements within a containing element. It is deliberately lightweight, easy to integrate, and without dependencies.

The initial script was written to provide a scattered polaroid effect for an in-page gallery, as a reaction to the complexity found in a couple of existing libraries - both of those other libraries expected JSON files containing the image URLs, which was parsed and iterated through to generate specific markup, and neither of the libraries could be easily modified to take the simpler and more flexible approach of being pointed at existing markup.

Thus, the script that evolved into Scatter was created, with a focus on providing an easy-to-integrate and configurable scattering effect with a clean core script - i.e. following the philosophy of doing one thing well, and also making it easy for others to understand (and extend if needed).

Scatter does not convert JSON to HTML for you - that's a distinct task from randomly arranging HTML elements - but it will work whether your HTML is static or dynamic, and it does not limit you to images styled as polaroids.

The versatility is demonstrated within the Scatter documentation, where a handful of examples show how it can be used to achieve vastly different effects.

Scatter does not require any external libraries, it's a single ~12KB file (~3KB compressed) and will run in any browser released in the past five years (earlier browsers will work with appropriate polyfills, available either from MDN or backwards compatibility libraries).

If you find any issues, or you have a need that Scatter almost-but-not-quite meets, feel free to either raise an issue or get in touch directly to discuss further.

Today was the 1st June, and that means it's Regex Day again!

This annual event was started four years ago by Ben Nadel to celebrate this wonderful (yet often misunderstood) technology, and as usual Ben is running a fun regex competition, with prizes, on his blog.

If that's not enough regex goodness for you, here's a couple of projects you should know about.

First up, there's XRegExp, a library by Steven Levithan which augments JavaScript's native regex functionality with new functionality, and ensures cross-browser compatibility.

For CFML developers, there's cfRegex a replacement regex implemenation providing more power and functionality than CFML's native functions, whilst being easier to work with.

Whatever your level of regex skill, both of these tools are definitely worth checking out.

I've just needed to fix a calendar that didn't implement leap years, and thus was missing 29th Feb this year.

Unfortunately, Google was bringing up various functions that rely on how browsers handle oddities in the built-in date functions, which isn't a sensible approach.

So, here is how to do it relying on the leap year formula:

function isLeapYear(year)
{return ((year%4 == 0) && (year%100 != 0 || year%400 == 0));}

And to implement that:

function readDaysInMonth(month,year)
{
	if (month == 1 && isLeapYear(year) == true) return 29;
	else return [31,28,31,30,31,30,31,31,30,31,30,31][month];
}

(Remember, in JS months are 0-indexed, hence 1 = Feb)