Tuesday, September 23, 2008

Select Box Factory 2.1 (with graph)

I guess I can't leave well enough alone, but once i saw the css graphs on this page http://apples-to-oranges.com/goodies/css-for-bar-graphs/, I had to figure out a way to use them. Have a look by clicking the graph icon, then mouse over the bars and labels. Then, starting loading in different colors and watch the graph grow. (removal is shown in help guide).

The thing to realize is that this is by no means a static graph. It is always accurate to the states and numbers of items in the select box (even if you add or remove items).

Granted, it took some time even beyond that demo to get the css to work. I had to deal with max-height, and list-style-type, and it took some time to wire the logic into this chart, but the results are enjoyable. The demo here is relatively positioned, but you can tell this graph and even the dropdown (or a mix) to be absolute, and it will coast over the text instead of pushing it aside. I have it relative for the demo.

The way I have this written, and with the options I added, you can use any labels and build up to 5 states, which hopefully is plenty. You can use any colors too, but the css demo uses background-position for the colors, so you will need to update a very small image. I will be building a skinning set so you can simply choose your color theme and away you go -that is not there yet.

The graphs are the default css colors and image from the site, but they are configurable, and the labels are no longer built into the image.

help guide


Garrett Conaty said...

This is amazing. thanks!

Is there a place for bug reports, etc? Maybe consider putting the sourcecode on github?

One little change to make the metakey work on Mac (jquery doesn't handle it properly).

Also, what would it take to make the elements draggable?

The Ui Guy said...

Hey there, thanks for checking it out! I will check out gitHub, but you can report bugs right here also :)

Let me know of the change and I can add it to the source code immediately.

To make the individual elements draggable, we could use jquery makeDraggable method that I used for the logger, also on my profile.

To do this in jQuery 1.2, simply call $item.draggable(), provided you have the personalized js file from the jQuery Ui site.

hempa said...


I have a problem. I use select factory 2.0. I want to have ~3300 menu items, but it doesn't display more than 45. I didn't found that kind of limitation nowhere. If i post more than 45, on the error console it will give this:

sFacRef.aux.get(choice[0] + sFacRef.id) is null

Thank you!