streamofconsciousness

ToolMan DHTML Write Up at StudioWhiz

15 Jun 2005 6 Comments

by Tim Taylor in Entries Tags: CSS, DHTML

Mr. K shared with me his [write up on my library and examples][1] posted at his site [StudioWhiz][2]. In addition to containing some nice ego-inflating compliments, Mr. K also has created his own edit-in-place and drag-and-drop examples linked to from his article.

[1]: http://www.studiowhiz.com/forums/index.php?showtopic=7896
[2]: http://www.studiowhiz.com/

Version 0.2 of ToolMan DHTML Released

27 Apr 2005 148 Comments

by Tim Taylor in Entries Tags: CSS, DHTML

A new version, version 0.2, of the ToolMan DHTML Library has been released. You can try out the examples (Drag & Drop Sorting, Edit in Place) and download it here.

Here are the Top 5 Reasons to be Excited about Version 0.2:

1. IE support. Most examples have been verified to work properly in IE6.

2. Rewritten from scratch; designed for reuse. The new library is more
   modular, better packaged, and less likely to have name collisions with
   your code and other 3rd party libraries.

3. It’s free! Permission granted for personal and commercial use via the
   liberal MIT license.

4. Improved quality. Cleaner, less duplicated code. Where possible,
   library modules have unit tests written using Selenium.

5. This is only version 0.2. It just gets better from here.

Saving a reordered list

16 Apr 2005 55 Comments

by Tim Taylor in Entries Tags: CSS, DHTML

Update 05/11: version 0.2 of the DHTML Library has a helper function to “serialize” the order of a list:

ToolMan.junkdrawer().serializeList(myList)

It returns a string representation of the list as described in the remainder of this post.

Tim Erfle and several others have asked a question like the following:

Is there anyway to report the order of the list after it has been sorted by the user? Its a super cool script, but it would be helpful if store the user modified order in the database.

Because the sorting is done by rearranging elements in the DOM, all you have to do is iterate over the parent element’s children to extract the new order. For example:

function foo(listID) {
    var list = document.getElementById(listID);
    var items = list.getElementsByTagName("li");
    var itemsString = "";
    for (var i = 0; i < items.length; i++) {
        if (itemsString.length > 0) itemsString += ":";
        itemsString += items[i].innerHTML;
    }
    alert(itemsString);
}

To use this in a form submit replace alert(itemsString) with something like myHiddenInput.value = itemsString. Or you could stuff itemsString in a cookie or pass it back to the server with XMLHttpRequest. The above example uses items[i].innerHTML which works fine so long as your list items are plain text. A better approach is to give each LI element a unique identifier. You can use the ID attribute or — if you’re not concerned about valid XHTML — invent a new attribute to use. A list would look something like this:

<ul>
    <li listID="325"><a href="...">Copper</a></li>
    <li listID="27"><a href="...">Gold</a></li>
    <li listID="131"><a href="...">Gold</a></li>
    ...
</ul>

And use a script like this to extract the order:

function foo(listID, formInput) {
    var list = document.getElementById(listID);
    var items = list.getElementsByTagName("li");
    var itemIDs = "";
    for (var i = 0; i < items.length; i++) {
        if (itemIDs.length > 0) itemIDs += ":";
        itemIDs += items[i].getAttribute("listID");
    }
    // do something with itemIDs
}

Drag & drop between lists

15 Apr 2005 57 Comments

by Tim Taylor in Entries Tags: CSS, DHTML

Ben Levy sent me this demonstration of drag & drop between lists:

I don’t know if you are interested, but I was playing with one of your examples of the drag and drop sortable lists and made some changes to allow dragging between multiple lists. I don’t really know how useful that would be, but it seems to work for the most part.

I think it’s pretty damn useful. I especially like that he highlights the drop targets.