Scripts

The following is a list of JavaScript links and resources from around the web. Create unobtrusive tabs, fading tooltips, unobtrusive show/hide behavior and the fadish Fade Anything Technique.

Top 10 custom JavaScript functions of all time (#)

It's a bold title, but then again, these are ten+1 functions that anyone who has coded up some JS functions wants on their side.

JavaScript Tabifier automatically create an html tab interface (#)

Follow a few simple rules, drop in some CSS and JavaScript and the Tabifier will tab up your content for you. As seen currently over on Authentic Jobs. This script also includes Persistent tabs using cookies, which is a super useful feature.

Crop & Resize with JavaScript, PHP, and ImageMagick (#)

A very useful little widget assembled with Prototype, script.aculo.usand PHPs imagemagick, this implementation allows one to crop and resize an image and then presumably save it to the server.

Pretty sure we'll be scooping this for image manipulation in our CMS.

Upload multiple files with a single file element (#)

A slick little javascript enhanced form that allows you to upload >1 file with only one file input element. How, you ask? Using the DOM, it’s actually a relatively simple matter to conceal a file element once a file has been chosen, and add a new (empty) one in its place.

Form Help without Popups (#)

An interesting, unobtrusive and "degradacefully" approach to using help boxes in forms. I'm sure someone will add a yellow fade to this as well, just for fun.

moo.fx javascript effects library (#)

An easy to use, fast, cross-browser, standards compliant javascript library intended for simple effects like opacity fades, text resizing and height and width toggles. File size (prototype.js) a mere 3 kilobytes!

Behaviour: missing link for your ajax apps. (#)

This library looks to be interesting: Behaviour lets you use CSS selectors to specify elements to add javascript events to. I haven't put it to the test yet (other than the demo), but this looks to be a very useful library for adding unobtrusive effects to your web applications via CSS selectors. Nice.

Creating Huge Bookmarklets (#)

Brad Neuberg shows us how we can write longer more maintainable bookmarklets by inserting a script element into the DOM through a bookmarklet. The bookmarklet calls an external javascript script and appends it to whatever document you are viewing. Makes maintenance a dream.

Link Thumbnails on Hover (#)

A clever little piece of Javascript that fetches (from Amazon or MSN) and displays the thumbnail image of a website linked to in an anchor. Check out the demo here.

FrogJS Javascript Image Gallery (#)

Dubbed a simple, unobtrusive javascript gallery, the FrogJS JavaScript image gallery is a degrades gracefully and works in most browsers.

The interface and presentation is a bit different then other image galleries, it can handle images of different sizes and has the ability to put captions under each image as well.

JavaScript Fading Tooltips (#)

Dustin Diaz "innovates the wheel" with Sweet Titles, his crack at unobtrusive fading tooltips, a javascript function that displays the title attribute content of anchors.

Expandable Listmenu Script (#)

A nice little expandable list menu script that uses javascript to expand and contract sub-menus and degrades nicely in browsers that do not support it - this one has that Windows +/- menu feel.

Unobtrusive show/hide behavior, reloaded (#)

Well documented, researched and worth a visit, this article presents the usual javascript toogle with the unobtrusive (and accessible) twist.

Shows you how to build those toggle links without inline javascript and offers a nice, accessible fix for the window.onload issue, where there is a brief moment where all toggleable elements are visible, before they get hidden

Fadomatic - dhtml opacity effect (#)

A JavaScript class called 'Fadomatic' that provides cross-browser DHTML alpha-fade effects. Some examples are provided and some minor issues discussed. Reminds me of the Basecamp yellow fade.

The Fade Anything Technique (#)

Originally made hot by Basecamp, background fading to hilite edits or changes to content has caught on lately, and is particularly useful as a UI widget in Ajax based applications.

Over at axcentric, the Fade Anything Technique (FAT) looks to be a good implementation of this feature, as it requires no inline JavaScript, is background color aware and fades smoothly.

Sliding Select Elements (#)

An interesting little UI widget. Rather than your normal select dropdown, Mike West puts together a sliding selector widget, ideal for when users need to rate an item from 1-10, for example.

JavaScript Object Notation (JSON) (#)

JavaScript Object Notation (JSON) is a lightweight data inerchange format that can be used with xmlHTTPRequest (ie, JSON rather then XML). Works with many flavors of programming language.

Automagically collapsing rows (#)

An unobtrusive JavaScript script that will automatically collapse every second row of a table and insert +/- symbols and buttons for expanding and collapsing.

Yellow-fade technique for dummies (#)

Another "Basecamp Yellow Fade" script. As expected from Garrett, it's unobtrusive.

From the site: a little JavaScript number that will automatically add the yellow-fade technique to your pages without any inline JavaScript. All you have to do is link to the file from your page, and it will handle the rest.

MyBlogLog Dissected (#)

Mark Wubben dissects the code behind MyBlogLog. A nice learning experience from one of the JavaScript wizards behind sIfr.

An object-oriented Javascript library (#)

An object-oriented Javascript library that includes effects that will be available in an upcoming version of Ruby on Rails, including Fade, Appear, Puff, Squish and Scale (see some demos here). That "Scale" example squishes like a bowl full of jelly.

Textarea with "autosave" (#)

A little Javascript magic that sets a cookie with the content of a textarea, so that when you navigate away from (or accidentally close) a page, your work is saved.

A better way of entering dates (#)

Here's an excellent little javascript widget written by Simon Willison. It's a date text input that, along with a little javascript, will automatically format the date a user inputs to the format required for input. Did that make sense?

The Coolest DHTML JavaScript Calendar (#)

Looks to be a promising DHTML calendar. There are so many of these, yet still I haven't found one that I like. This one may pass the test...

DOMSlides (#)

From the site: DOMSlides turns an HTML document into presentation slides via Unobtrusive JavaScript. Seems to work well, and not too bad with JavaScrpt off either.

Check out the Resource categories for older content

The latest from my personal website,
Mike Papageorge.com

SiteUptime Web Site Monitoring Service

Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:

The Principles Of Successful Freelancing

I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.

The Art & Science Of JavaScript

The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.

The PHP Anthology: 101 Essential Tips, Tricks & Hacks

Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..