So, I've been thinking about how nice it would be if I had something like a zoomable dock (think Mac OSX) where all the clusters would be very small until the mouse got near it—this is called a fisheye effect. This way, lots of clusters can be on the screen, the user doesn't have to scroll, and the potentially very tiny clusters can be magnified just by moving the cursor near by.
Enter jQuery Interface (I'm not sure, but I believe this was the precursor to the current jQuery UI library...). This library has an interface for providing a fisheye effect to a collection of images. n.design Studio has a nice example:
(Go to full-sized demo)
The problem is, Interface only provides zooming of the actual image, not the text within. The clusters I want to magnify will be simple div's with text, so this solution doesn't really work. So, I hacked it to use the CSS zoom property. Zoom will magnify all aspects of a DOM node and its children, including any images. Merging this hack with the example Mac dock above yields the following:
(Go to full-sized demo)
Two things to note:
- the top menu has been changed to a bunch of text div's
- the text labels that appear over the icons in the bottom menu are magnified along with the icon themselves
I'm planning to integrate this with the drag and drop code I've been working with and hopefully have a slick clustering platform. I'll try to post more about it along the way.
Update:
I've been doing all my development on Chrome lately. As such, I've been forgetting to cross check things with Firefox. Turns out that zoom is not supported by Firefox at all. While Firefox does support the -moz-transform: scale(.75) rule, scale does not work like zoom. So, the above will not work in Firefox. At some point, I'll update things to use scale properly.
Aucun commentaire:
Enregistrer un commentaire