List of in-browser UI techniques?

Question

I'd like to know what can be done in a browser UI (using a browser+CSS+javascript, not using Flash or Silverlight). For example, I think it's possible to:

• Drag and drop
• Arrange list items horizontally, and make them behave like menu items
• Make things on page visible or invisible, depending on where the mouse is hovering

I admit this is a broad question, but that's what I'm looking for: an overview of available UI techniques (preferably with, also, at least a little clue or hyperlink as to how to implement each one).

Do you know of such a list or dictionary?

I'm especially interested in any techniques for interaction and user input (i.e. not simply page layout and navigation where the end-user is only consuming information).

---

Edit: people answered that I should look to see what functionality is implemented in various 'JavaScript UI toolkits'. FWIW, the following are my brief review/summary after looking at some of the suggestions.

• http://demos.mootools.net/ -- implements a small (not wide) variety of UI features
• http://ajaxian.com/by/topic/ui -- not an organized or coherent reference, more like a blog that reviews various things.
• http://jqueryui.com/demos/ -- concise, organized introduction to a dozen interactions and/or widgets
• http://plugins.jquery.com/ -- a library of a couple of thousand 'plug-ins' in 20 categories ... vaster and not so immediately understandable nor so consistently documented as the jqueryui demos
• http://www.dojotoolkit.org/ -- takes a bit of navigating ... the easiest introduction to all functionality might be http://dojocampus.org/explorer/
• http://script.aculo.us/ -- not very big
• http://extjs.com/ -- quite a variety of powerful features, with a good set of demos at http://extjs.com/deploy/dev/examples/samples.html
• http://mochikit.com/ -- this is another small library
• http://developer.yahoo.com/yui/ -- includes about 20 widget classes, thorough documentation (each class description includes a link to demos), and special mention for having "Layout Manager" and "CSS Reset".
• http://www.midorijs.com/ -- quite small and simple, no demos

To summarize, I think the best answers (i.e. the easiest-to-browse collections of the most functionality) are:

• http://extjs.com/deploy/dev/examples/samples.html
• http://dojocampus.org/explorer/
• http://developer.yahoo.com/yui/examples/

Answer 1

look at the documentation for things like mootools and jquery UI, there are plenty of examples of the crazy stuff that you can do in there.

Also check out ajaxians UI section

Answer 2

Check out JQuery and JQueryUI

Answer 3

check out jquery UI http://jqueryui.com/ as well as plugins http://plugins.jquery.com/ this is just a simple example what you can achieve via Java Script

Answer 4

A very great many things can be done in JS.

Answer 5

Try any of these javascript libraries:

• http://www.dojotoolkit.org/
• http://mootools.net/
• http://jquery.com/
• http://script.aculo.us/
• http://extjs.com/
• http://mochikit.com/
• http://developer.yahoo.com/yui/
• http://www.midorijs.com/

If you accept the HTML Canvas as valid HTML (Microsoft doesn't), you can do even more (requires Canvas support in your browser):

• https://developer.mozilla.org/en/Canvas_tutorial
• http://www.blobsallad.se/
• http://www.benjoffe.com/code/demos/canvascape/ - 3rd person shooter

Answer 6

I think you could in principle do almost anything you can think of that involves the page changing how it looks in response to user action. I mean, js can do amazing visual effects, including pretty complex animation and vectors, and retrieve data from anywhere that allows it to using ajax, so put that way you can display anything you want how you want.

The question is how much resources these take client side. While pretty much anything is possible, not everything will necessarily be practical, and I doubt there's any reliable way to decide which things will be too resource-heavy to realistically implement on the client side.