A few neat javascript/css techniques, posted here as much for my records as anything else; but someone may be interested!!

1. domCollapse: "domCollapse allows you to collapse and expand parts of page by activating other parts of a page.

To define a element that expands or collapses others add the class trigger to it as an attribute. This will automatically collapse the next following element in the document tree and add the functionality to alternately collapse and expand it.

The collapsing and expanding is achieved by adding and removing classes from the elements. This means you do not need to know any Javascript to make domCollapse behave differently."

1. Drag & Drop Sortable Lists with JavaScript and CSS: "In Web applications I've seen numerous - and personally implemented a few - ways to rearrange items in a list. All of those were indirect interactions typically involving something like up/down arrows next

to each item. The most heinous require server roundtrips for each modification…boo. Then I came across Simon Cozens' example of rearranging a list via drag & drop. I was so inspired I had to try it out myself."

1. Showing and Hiding a DIV using CSS and Javascript: "A while back I came across some websites that had sections of the webpage in a div that could be hidden and shown by the click of a link. I set out out on my own to learn how this worked and this is what I discovered.

There are many situations encountered when designing a webpage where showing and hiding a div using a link is useful. For example, if you were making a blog you might want to have a form at the bottom of each entry that allows users to add a comment to your blog entry. It is not necessary to show this form all the time because not all users will want to comment on your entry. You could have a link that says ‘Add a comment’ and when that is clicked it will display a div containing that form."

1. resizable textareas: "he trick is that with the wz_dragdrop.js script, we make the enclosing div resizable and then make the textarea‘s size relative to the enclosing div. this is far easier than trying to capture the keyboard and mouse events directly from the textarea. user’s don't really have to click on the resizer graphic to resize things; anywhere within the div will work. but the graphic gives them a nice clear target."

2. HoverHelp: “Small script to easily display hover tool tips. You can attach a popup to anything by simply giving it a class of ‘hasHelp’ and an id. Then adding the help text to a blockquote and giving that a class of ‘helpContents’ and an id of ‘xxxHelp’ where xxx is the id of the element it's related to.”

3. [brothercake] Docking boxes (dbx): “Docking boxes (dbx) adds animated drag ‘n’ drop, snap-to-grid, and show/hide-contents functionality to any group of elements. And … in what might be another world-first for brothercake - dbx is fully accessible to the keyboard as well as the mouse, an action I‘ve dubbed press ’n' move ”

4. JavaScript-enhanced image replacement | clagnut/blog: "JavaScript-enhanced image replacement posted 12th May 2005.

Most image replacement (IR) techniques work by displaying a background image of text and shifting the real text out of view. This is fine unless you have images turned off, in which case you will see neither the graphical text nor the real text.

So the requirement is to disable the IR if images are turned off. This can be accomplished by a short piece of unobtrusive JavaScript supplementing existing IR techniques"