SnakShop

This WYSIWYG application was made, in order to get a fast impression of the available CVI effects and their illustration qualities. CVI equals to "Canvas Vml Image effects". The CVI libraries requires no plugin or extension. The CVI libraries uses unobtrusive javascript to keep your code clean and they work in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, IE6+ and Safari. On older browsers, they will degrade and your visitors won't notice a thing.

packed.it is a Web 2.0 on-line service capable of optimizing and improving web navigation for everyone. It's simple, fast and easy to customise. packed.it is the accessible answer to the Web 2.0, It is compatible with most browsers and in line with best practice in terms of accessibility and standards.

This page demonstrates different uses of the technique described in the article Transparent custom corners and borders, version 2. Please read that article for more info on how this technique works. Should you want to link to this, please link to the related article instead of to this demo page. Thanks!

A web server handles HTTP (Hypertext Transfer Protocol) requests sent to it by web browsers. When you type in a URL —http://www.digital-web.com, for example—your computer sends out a request to look up the servers needed to handle requests and send responses back quickly. The technique for determining how to route requests to the cluster of web servers efficiently is called load balancing.

DOMtab is a JavaScript that turns a list of links connected to content sections into a tab interface. The script removes any "back to top" links in the section and automatically hides all but the first one when the page is loaded. You can use as many tabbed menus on the page as you want to.

BarCamp London 2 is coming up next weekend and having been hard at work on all my paying projects I’ve hardly had any time to work on other stuff. This meant that I didn’t really have anything to show and tell which is a bit crap. I thought this would be a good excuse to work on something that I’ve been threatening to do for a while: a generic microformats parser for JavaScript. Yes, there are a few things about but they all tend to be tied to a single format and I wanted to build a framework that would allow any microformat to be defined using a JSON-like definition so it could be used as new formats emerge.

Sometimes, when we are building websites and web applications, we need a percentage bar / progress bar to show the progress of a specific task. However, it is very difficult to find a working and easy solution without using Flash. Therefore WebAppers have created a simple Javascript based Percentage Bar / Progress Bar which is inspired by Bare Naked App. Bare Naked App taught us how to display Percentage Bar with 2 images only by using CSS. And then I used a little bit of Javascript to make it more interactive. You can use it anywhere you can think of. Use your Imagination, I am sure you will find it useful somewhere.

In the past, memory leaks haven't posed huge problems for Web developers. Pages were kept relatively simple and navigation between different locations within a site was a great way to clean up any loose memory. If there was a leak, it was most likely small enough to go unnoticed. New Web applications live up to higher standards. A page might run for hours without being navigated and retrieve updated information dynamically through Web services. Language features are pushed to the breaking point by combining complex event schemes, object-oriented JScript, and closures to produce entire applications. With these and other changes, certain memory leak patterns are becoming more prominent, especially those previously hidden by navigation. The good news is that memory leak patterns can be easily spotted if you know what to look for. Most of the troublesome patterns you might face have known workarounds requiring only a small amount of extra work on your behalf. While some pages might still fall prey to small memory leaks, the most noticeable ones can be easily removed.

SoundManager 2 is a Javascript Sound API which talks to Flash, effectively mapping most of Flash 8's native sound capabilities to Javascript.

Experiments with advanced use of the browser DOM. Warning: most of this stuff will require a fully DOM-compliant browser, which means Internet Explorer 5.5 or better, or Firefox, or Safari, or Opera. They may work in other browsers; alternatively, they may not.

FitFlash is a smart script that resizes your flash automatically if your browser window size is smaller or greater than your flash minimum desired size keeping it accessible independent of screen resolution.

like Growl - in javascript

The original Suckerfish Dropdowns article published in A List Apart proved to be a popular way of implementing lightweight, accessible CSS-based dropdown menus that accommodated Internet Explorer by mimicking the :hover pseudo-class. Well now they're back and they're more accessible, even lighter in weight (just 12 lines of JavaScript), have greater compatibility (they now work in Opera and Safari without a hack in sight) and can have multiple-levels.

LiveValidation is a small open source javascript library built for giving users real-time validation information as they fill out forms. Not only that, but it serves as a sophisticated validation library for any validations you need to make elsewhere in your javascript, it is not just limited to form fields.

Javascript as a programming language can be tricky, difficult and very hard to learn. Despite of all that, it's used in almost every website out there because of the enormous list of applications that we can build and places where we could use Javascript better than anything else. It's so widely used that if I were to start making that list which I mentioned above I think it would take me hours only to think of what's more important to start with. This isn't going to be an article about Javascript, since I'm sure I'm not the right person to talk about, but an article to showcase snippets of Javascript code that I often use to enhance the looks or user experience on my web apps. It's very easy to know them all in one place and use them whenever we want so, without further talking, I'll present you my top list of Javascript snippets.

JavaScript is a fully-featured Object-Oriented programming language. On the surface, it shares syntactical similarities with Java and C, but the mentality is quite different. At its core, JavaScript is more similar to functional languages. Inside is a list of JavaScript tips, some offer techniques to simulate features found in C-like languages (such as assertions or static variables). Others are meant to improve performance and explore some of the more obscure parts of the web scripting language.

Sarissa is an ECMAScript library acting as a cross-browser wrapper for native XML APIs. Sarissa is an ECMAScript library acting as a cross-browser wrapper for native XML APIs. It offers various XML related goodies like Document instantiation, XML loading from URLs or strings, XSLT transformations, XPath queries etc and comes especially handy for people doing what is lately known as "AJAX" development.

The jQuery Cycle Plugin is a lightweight slideshow plugin. Its implementation is based on the InnerFade Plugin by Torsten Baldes, the Slideshow Plugin by Matt Oakes, and the jqShuffle Plugin by Benjamin Sterling. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects.

UFO is a DOM script that detects the Flash plug-in and embeds Flash objects (files with the .swf extension). It has its roots in the Web Standards community and is designed to support W3C standards compliant, accessible and search engine friendly web design. It also contains several features and best practice techniques that other scripts currently don't have.

Control.Tabs attaches creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute. Since it attaches these behaviors to HTML that already has semantic meaning, it will degrade gracefully for browsers that do not support JavaScript, and is search engine friendly. It attaches in one line of code for simple use cases, but is highly customizable and can be used in a variety of edge cases.

ightBox is a plugin for jQuery. It was inspired in Lightbox JS by Lokesh Dhakar. jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and you use the power and flexibility of jQuery´s selector.

JSValidate is a form validator that utilizes aspects of prototype and scriptaculous to bring you a simple to execute, non-intrusive javascript form validator. With minimal setup, your forms can be processing clean data in no time at all.

Rounded Corners with CSS are a hot topic in web design: I think that there are hundreds of articles on them. This page is intended to present the solution I came up, that doesn't requires images, extra markup nor CSS.

Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page.

ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads. It's inspired by Mac OS X modal dialogs. And yes, it may also be useful for showing bigger versions of images. :)

There are a lot of JavaScript Calendars out there, but actually only a few can be very customizable to fit anyone's need. That's why we have created a Calendar Component that is very customizable and extendable.

Dojo is an Open Source DHTML toolkit written in JavaScript. It builds on several contributed code bases (nWidgets, Burstlib, f(m)), which is why we refer to it sometimes as a "unified" toolkit. Dojo aims to solve some long-standing historical problems with DHTML which prevented mass adoption of dynamic web application development.

Retrieves and sets the cursor position, as well the selected text of inputs and textareas. After searching, I saw it's the only code which retrieves right information in textareas under Internet Explorer without damaging the "Ctrl+Z"

A Hyperbolic Tree (HT) is a "focus+context" information visualization technique used to display large amount of inter-related data. This technique was originally developed (and patented) at Xerox PARC.

797 + Ajax/Javascript/Dhtml examples and demos to download

Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages. The library offers these features and advantages: * No plugins like Flash or Java required. * Popup blockers are no problem. The content expands within the active browser window. * Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it. * Compatibility and safe fallback. If the user has disabled JavaScript or the JavaScript fails in any way, the browser redirects directly to the image itself or to a fallback HTML page. This fallback is able to cope with most exceptions and incompatibilities.

Control.Scroller is an extension to the Prototype and script.aculo.us JavaScript framework. It's using the Control.Slider in script.aculo.us, and extends it, with the control of the clipping of a content-container. It can also control up and down-buttons (or left and right).

Here is an exemple of FormCheck in use. Under each label, you have the class I added to perform the different checks. If you look at the source code of the page, you will see that I set a lot of things when I initialize my class, but they are all optionals (I use them in this case mostly to translate alert messages in french. The only thing you really need to do, is loading mootools, loading the class and it css, and initialize the class (without options) in an addEvent. Enjoy :)

Have you ever stood behind a novice Internet user and watched how they browse the web and navigate through different sites? Most designers know that seeing their sites through the eyes of an average user is extremely good for spotting usability issues but most don't spend the time to extend this research across other websites.

Finally a lightweight accordion that is built with scriptaculous and works properly in every browser.

Prototype.js documentation

The Aptana IDE is a free, open-source, cross-platform, JavaScript-focused editor and development environment for building Ajax applications. It features code assist on JavaScript, HTML, and CSS languages, FTP/SFTP support and a JavaScript debugger to troubleshoot your code.

Ext is a client-side, JavaScript framework for building web applications. In early 2006, Jack Slocum began working on a set of extension utilities for the Yahoo! User Interface (YUI) library. These extensions were quickly organized into an independent library of code and distributed under the name "yui-ext." In the fall of 2006, Jack released version .33 of yui-ext, which turned out to be the final version of the code under that name (and under the open source BSD license). By the end of the year, the library had gained so much in popularity that the name was changed simply to Ext, a reflection of its maturity and independence as a framework. A company was formed in early 2007, and Ext is now dual-licensed under the LGPL and a commercial license. The library officially hit version 1.0 on April 1, 2007.

Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework. If you also use Scriptaculous you can even add some nice effects to them.

A small javascript/flash library to get the best of both worlds - The great upload capabilitys of flash and the accessibility and ease of html/css

There are times when using a JavaScript library is called for. Building large web applications that use a wide array of utility functions that help aid in developing multi-tiered class systems, advanced UI components, complex event models, and heavy use of DOM scripting helpers. Yep. Those are all great.

instant.js 1.3 allows you to add an instant picture effect (including tilt) to images on your webpages

dTree is a free JavaScript tree menu.

Let's be honest - I'm tired of answering same questions over and over again. Prototype.js is a widely used javascript library with somewhat confusing online documentation. I personally find API reference to be a great resourse overall (with few glithes of course), but it's far from being newbie-friendly. I've been developing with prototype for almost a year now and have been spending a lot of time on the IRC channel. It's hard to explain what kind of nonsense people are asking sometimes. It seems to me that most of the time prototype is used at 15%, not more. I'm not surprised anymore to see Ajax.Request used with document.getElementById on one line

Here you'll find how to use sIFR on your website.

Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love :)

Now that we have gone over Flex and PHP its time to get some client side interaction going on with Javascript. This tutorial will show you how to call javascript functions from flex and flex functions from javascript. There is a really nice example of the use of this on Google Finance, as well as a number of other google sites.

Very Good

Embedding Adobe Flash content using SWFFix

A jQuery plugin for embedding Flash movies.

A script that enables deep linking for SWF applications. SWFAddress is a small script that sits on top of SWFObject and provides deep linking for Flash websites and applications. In other words it enables the Back, Forward and Reload buttons of the browser and creates unique URLs with page titles that can be sent over email or IM. SWFAddress uses the ExternalInterface functionality introduced in Flash Player 8 and comes with a technique that enables search engine indexing for deep Flash links.