Vertical MooTools Kwicks (Fx.Elements), using relative sizes

I started out to make a vertical menu using Fx.Elements (instead of the classic horizontal one), for one of the sites I’m working on and, as always, I chose to use relatively sized elements (namely ‘em’).

However, although Fx.Base has support for specifying the unit, the original Kwicks demo doesn’t play well out of the box specifying ‘em’ as the unit.

Here’s a demo of what I did: vertical kwicks with em sized elements (notice the scalability of the layout – change the font size and it still works flawlessly)

The solution was to replace all occurences of .toInt() with .toFloat() when extracting the height style property, because if for px there aren’t any decimals, for em or %, there are. It took me a while to find it, I hope it saves you some time.

There’s still a jump effect at the first mouse over in Firefox and Safari (but not in MSIE) that I have to figure out (but for the moment I’ll consider it a “nice effect”- people that have seen it seem to like it ).

For now, it’s tested in Firefox 2, Internet Explorer 6 / 7, Safari 3 – all on Windows. If you get a chance to test it in other browsers, I’d appreciate a mention of it (thanks ).

jQuery BBQ: Better Blockquotes

jQuery BBQ: A blockquote (AKA pullquote) script, that will unobtrusively grab content from your webpage and display it similarly to the way newspapers do it (see Wikipedia's definition of a pull quote). It can either be dropped directly into the webpage, with no configuration, or can take a number of customization parameters if you want [...]

Quick & dirty fix for Slimbox to attach itself to all images

While implementing yet another a WordPress site, I found myself in the situation where I wanted to display any and all images in lightboxes, but with a minimum of interaction from the editor’s part. All current plugins that integrate Slimbox (that I know of – this one, for example) actually require the editor to add [...]

SkinShare tutorial for an age verification using MOOdalBox

MOOdalBox has the the honor to be the first featured post on the SkinShare dev blog, with a tutorial on how to make a quick and easy age verification procedure. Unfortunately, this is a JavaScript only method – so it’s easily bypassed. I’ll have a version that uses more server-side scripting ready some time soon [...]

Tutorial for an AJAX login using MOOdalBox

While browsing the e-magine forums, answering a topic here and there, I discovered very well written and simple to follow tutorial on bulding a modal login dialogue using MOOdalBox. I’m really happy to see such a piece of work – it makes the time I spent writing the scripts even more meaningful. Thank you, Jani [...]

It seems to work great in Safari 2.0.4, FireFox 2.0.0.8 and Opera 9.23.3695 on Mac OS X 10.4.10.

1 Carl Holmberg / October 29th, 2007, 16:04 / #

Wow, quick feedback

Thanks for the Mac tests, Carl – I didn’t have one to test on.

Good to know it works, the client I’m building the site for is on a MacBook Pro

2 RÄƒzvan BrateÅŸ / October 29th, 2007, 16:43 / #

for px there arenâ€™t any decimals

You can, actually, specify a floating point size when using px as a unit. For instance, the computed size for 12.5px will be 12.5333px*

So it *should* be safe to send a patch for that module.

P.S.: where’s the Preview button ?

* at least in Firefox

3 Alexei / October 29th, 2007, 17:04 / #

floating point value*

4 Alexei / October 29th, 2007, 17:28 / #

Didn’t know that, thanks for the info. However, first thing that comes to mind is: how do you display 0.5333px ?? Antialiased ?

5 RÄƒzvan BrateÅŸ / October 29th, 2007, 17:36 / #

According to the std (or one of the first stds, perhaps), a browser should not display any font smaller than 9px.
Opera and Safari both have an option to set the minimum font size which, by default, is 9. Firefox and IE6 will, however, render .5px text (and I don’t know if one could prevent that)

6 Alexei / October 29th, 2007, 22:40 / #

[...] On a happier note, I just launched the “splash page” of an upcoming community website I’m working on, the one that pushed me to write the code for the vertical kwicks. [...]

7 Site / playground / forum downtime :( — e-magine [archives] / November 12th, 2007, 12:30 / #

[...] Homepage [...]

8 Outcut » Vertical MooTools Kwicks / February 22nd, 2008, 18:35 / #

Hey, works not so bad on OSX FF3, but when you first mouseover, the menu stretches far beyond where it should and snaps back.

Not sure if this is also an issue with other browsers.

9 Tim Oxley / August 15th, 2008, 08:59 / #

e-magine(pretty && functional)