Raible Designs

Client-side Sorting with the DOM

I'm amazed at how easy it is to sort an HTML table with the DOM and JavaScript. I whipped up a quick modification of Porter's Sort Table Rows demo. The basic enhancements I made where removing the <a>'s from the table headers, and just adding an onclick handler to the <th>'s. I also added indicators to display the the current column/direction that's sorted. Seems to work in most of the browsers too! On Windows 2000, this includes IE6, IE5.5, Opera 7 and Phoenix 0.5. On OS X, the latest versions of Safari, Chimera, IE, Mozilla and Netscape. It doesn't work on OmniWeb, and the cursor: pointer doesn't work on the <th>'s in IE/Mac and IE5.5/Win. Anyway, you can checkout the demo or download with the relevant HTML, .gif and .js files. I've also included it below for your convenience.

I'd love to add this sort of capability to the display tag library.

Great Weekend and the DOM

Boy, what a great weekend I had. Three of my best friends and I drove to Steamboat on Friday night and met up with some other very good friends. There were about 20 of us total that rented a house and had a great time. It was -21 (F) when we drove up, and about -10 when we went skiing on Saturday. The fun we had made up for the cold, and we actually ran into another friend that we hadn't seen in 5 years! Good times were had by all.

Today, back at the grindstone, I got to start working on a UI prototype. I did a lot of stuff with the DOM in JavaScript and CSS. Man that stuff rocks and makes it so easy to create a truly user-friendly webapp. I was doing pretty simple stuff like changing table row background colors, adding/deleting rows in a table and duplicating rows. Tomorrow, I'll be implementing a client-side sorting script on a table. I'm lucky on this project in that I only need to support IE 5.5+ - which has pretty good DOM support. I developed all day long on IE 6.0 and was amazed when I tested it (at the end of the day) and it actually worked on IE 5.5. Made me smile from ear-to-ear. I checked it in and left before I broke anything.

Cool CSS Design

I do like Russ's new design, and I'm almost inspired to redesign myself. Naaahhh, I think I'll save that for a when I'm really bored, or maybe when Julie's in Florida for a week in March. The reason I'm writing this post is to point out the sweet DHTML over at the International Herald Tribune that Russ mentions. In the bottom right corner of the page, you can adjust the font-size and number of columns. Very cool - and the top menu floats while you scroll. All cool stuff and nicely done.

[HTML] Fieldset and Legend

I was reminded today of the <fieldset> and <legend> tags in HTML (BTW, they also work in XHTML). Basically, they are used to draw and label a box around input elements. Here's an example:

<form action="">
<div>
    <fieldset>
        <legend>Name Information</legend>
        <label for="firstName">First Name:</label>
        <input type="text" name="firstName" id="firstName" value="" /><br />
        <label for="lastName">Last Name:</label>
        <input type="text" name="lastName" id="lastName" value="" /><br />
    </fieldset>
    
    <fieldset>
        <legend>Address Information</legend>
        <label for="address">Address:</label>
        <input type="text" name="address" id="address" value="" /><br />
        <label for="city">City:</label>
        <input type="text" name="city" id="city" value="" /><br />
    </fieldset>
</div>
</form>

I added a little CSS for the fieldset and legend tags, and you end up with this:

Pretty cool eh? The labels end up in the text boxes (on some browsers) courtesy of the the label.js script.

New Product from Google - "Froogle"

Google has a new service in beta called Froogle. I might just have to use it to find out where to purchase my next online item.

Froogle is a new service from Google that makes it easy to find information about products for sale online. By focusing entirely on product search, Froogle applies the power of Google's search technology to a very specific task: locating stores that sell the item you want to find and pointing you directly to the place where you can make a purchase.

[ANNOUNCE] Opera 7 Released!

It appears that Opera 7 Final was quitely released today. There's only a Windows version at this point and I can't seem to download it. I wonder if this is b/c everyone is rushing to download it (never to use it again), or if the Internet is once again amiss thanks to SQL Server and lazy Admins. For once, I'm proud to be upgrade happy.

Add a favicon.ico to your site

Want to add a favicon to your site? It's easy using the Graphic Converter. Just use this to change any existing electronic image into an .ico file. Use your favorite icon editor to apply further enhancements to the image, then upload it to your site. Once it's there, you can either put it in the / directory of your site, or refer to it in the <head> of your HTML. I do both.

<link rel="icon" href="/favicon.ico" />

Phoenix Themes Galore!

I found a whole gobbly-gook of new Phoenix themes thanks to Matt Croydon. I'm going with Phoenity Aqua for now. This brings up another point - if you're using Windows and you're NOT using Phoenix, you're wasting your time - it makes browsing so much better.

Cool DHTML HelpTips

Want some good ToolTips, check out the Help Tool Tip from WebFX [demo]. There's all kinds of good stuff on this site, including this very slick sortable table demo [how it works].

Tabbed Forms - Making the web look like Excel

One of the things I'm working on for my day job right now is the ability to display an Excel-like UI for editing a form. So I did a search on Google tonight and found DHTML Kitchen. On this site, they had exactly what I was looking for - a howto for creating a tabbed panel system. So I've used this example to create a prototype of what I can do. This is pretty slick b/c now I can give the users a UI that looks like the Excel they're used to, and I can use the same ValidatorForm for the entire page. It even supports remembering which tab you last selected, and also allows navigation to a tab. The DHTML Kitchen also appears to have all kinds of other goodies to checkout. I'll definitely be adding it to my list of cool bookmarks.

If someone could verify that this prototype works in IE 5.5 - that'd be awesome! This is the browser we have to support at work and all my browsers are 6.0+. In return, I offer you the source in a single zip file :-) After playing with this a bit after posting - it seems like it's got a couple of issues in IE 6. The first is that a double line shows up at the bottom of the top tabs after refreshing. Clicking on any tab at the top snaps the tab bar back into place. The second is performance - it's taking 3-8 seconds to load the page - yikes! I'm still going to use it though, and hopefully optimize and fix these issues later.