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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
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.
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
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.
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.
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) is a lightweight data inerchange format that can be used with xmlHTTPRequest (ie, JSON rather then XML). Works with many flavors of programming language.
An unobtrusive JavaScript script that will automatically collapse every second row of a table and insert +/- symbols and buttons for expanding and collapsing.
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.
Mark Wubben dissects the code behind MyBlogLog. A nice learning experience from one of the JavaScript wizards behind sIfr.
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.
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.
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?
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...
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:
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 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.
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..