Frustrations with fisheye menus

While scanning down Jon Udell’s blog this morning, a link to the fisheye menu demo caught my eye. I’d seen the demo before, but I checked it out anyway. I started think about how it could be done with DOM. Only later that evening, while showing my demo to Elexa, did I notice that the reason Udell had linked to the fisheye menu was because someone else had already made one with Javascript and CSS. Oh well.

Anyway, I like how I got my fisheye menu to work; it degrades nicely in older browsers (it just shows the list as regular sized text) and it doesn’t flash when rolling over the items. I added a delay to the onmouseout which triggers the “defocusing.” It’s the moving out of the links that causes the flashing in Danny Ayers’s demo.

Taking a closer look at the original Flash demo, I realised how come it looks so much better than either of the HTML versions: the focusing changes the sizes of all the items. Undaunted, I figured I’d keep going.

A little refactoring and some DOM fudging later, I had a working demo in which all the items are resized.

But I still didn’t get it right. Go ahead, take a look at the version I first came up with.

Can you see why it doesn’t work? Try to focus on the bottomost items. As soon as the cursor moves over them, they’re made larger �” but so are the ones before them, pushing the bottom items down and away from the cursor.

The solution is make the menu a fixed height. I thought this would d be a trivial matter. All I needed to do was subtract the height of the focused item and split the remaining height between the items before and after it. This wasn’t a problem, though I was getting pretty deep into pixel values now, which was something I’d tried to avoid.

There was only one problem left. I couldn’t, for the life of me, figure out how to calculate equally diminishing font sizes relative to the height available. I twiddled around on pen and paper for an embarrassingly long time, and came up with several partial formulas. But there was always one unknown constant that I couldn’t solve.

It finally dawned on me that I’m working on a geometric series (duh). Some googling later, I’d found plenty of geometric series formulas, but no where could I find how to solve the constant q from the sum of the series.

I knew the first term a1 was the value of the focused item’s font size. I knew the sum, which was the amount of space the diminishing items needed to cover. What I didn’t have was the ratio that each item consecutively decreased �” the constant q.

In the end I did find an answer to my question.

There is no way to do it.

It would appear that it’s not possible to find the ratio of a geometric series from the sum, at least in cases where n is greater than 5 (which is quite probable in this case, as menus requiring a fisheye effect are by definition longer than ten items).

Oh well, again. Here’s a version that works a little better. You can actually focus the bottom items, sort of.

  • Version 1a �” three-tiered “focus range”
  • Version 2a �” failed try at full focus range; the bottom items are hard to focus
  • Version 1b �” full focus range, diminishing ratio fixed at 2 pixels with stoppers to control minimum font sizes
  • Version 2b �” full focus range, diminishing ratio 0.9

---