Saturday, August 5, 2006

Various heights in html document

Just keep in mind how you can use and control height of different DOM elements. I consider:

offsetTop, offsetLeft
windowHeight
scrollTop
scrollHeight
clientHeight
offsetHeight

Take a look at simple self-explanatory demo and
more comprehensive event and height demo.

Tuesday, August 1, 2006

Drag-and-drop sortable and animated accordion menu

This is the illustration of sortable lists by drag and drop in combination with expandable/collapsible animated accordion.

Animation, some event handling and some object access are based on Yahoo! UI Library.
Accordion menu implementation idea was taken from here.
Core drag and drop function is dom-drag.js. About it you can read here. It's been used as is.
I also used some ideas from here. This page uses dom-drag.js as well.

Here is my demo of the result I've got.

It features:

  • Grip for drag-and-drop.

  • Save/retrieve state (expanded or collapsed) and order of bars in cookies.

  • MS Internet Explorer and Mozilla Firefox similar behavior.

  • Customizable: allowMultipleExpand, expandAllOnload.

  • Pure javascript implementation.


If I'm not get lazy I'll publish the documentation and API.
Regards,
Eugene