jQuery UI Theme Options

June 2nd, 2008

A week or so ago I offered to help with the jQuery project. I’m such a big fan that I felt compelled to give back. While I consider myself decent at JavaScript I’m not even remotely close to being good enough to contribute code to the project. However, I knew that jQuery was going through a site / branding redesign and I wanted to know if I could help with that.

Unfortunately the lead designer heading up that project never got back to me, but the jQuery UI team did catch my offer for help and let me know that I could contribute in the way of a jQuery UI theme! Since then I’ve been spinning my wheels trying to come up with some decent, portable options. I’ll take a vote and see which one is the most popular, and then hand it off to another fellow (another guy anxious to help with the jQuery project) for some CSS magic.

So without further hullabaloo, here are the three mock ups I have so far. I’d love to hear everyone’s feedback!

jQuery UI Theme 1

(click image for larger version)

This theme takes the concept of the “floating tabs” from the current Flora theme. The color scheme is muted, the gradients are soft, and it has a nice polished feel to it.

jQuery UI Theme 2

(click image for larger version)

This theme is a based on the design of the jQuery UI home page. Black, orange and blue, with a nice container for the tabs. This is the most crisp of the three mock ups, but also the least portable.

jQuery UI Theme 3

(click image for larger version)

This theme is the brightest and perhaps the most portable. Someone in the jQuery UI group mentioned they liked the look of Meebo, so I used their interface as an inspiration point for this. I used a similar bright blue / orange combo, but I toned down the gradients, and ditched the rounded corners in favor of something a bit more crisp.

Oops, I forgot…

So I forgot to make the accordion style for each of these. However, I will wait until we green light a certain concept and just develop the accordion as well as all mouseovers for that particular theme.

Thanks!

Thanks to the jQuery UI team for this opportunity, and thanks to Seth for the CSS help. Again, I would love feedback on all accounts! Be sure and cast your vote as well!

[polldaddy poll="666439"]

Compressing / Minimizing JavaScript with Automator

March 19th, 2008

Compressing your JavaScript is a good idea when moving your JavaScript code to your production server. I won’t go into why (because it makes it smaller, duh) so I’ll just assume we’re both cool that it needs to be done.

My compressor of choice is Yahoo’s YUI Compressor, and it comes in a nice Java .jar that you can download and use ’til your heart’s content. However, because I’m lazy, opening the terminal, typing in the command, and feeding it files is just too difficult for me, so I (with the help of a friend of mine) wrote an Automator Finder plugin so you can just right click a .js file and click “minimize” and it creates a new one with .min.js as its extension.

Now there is no bug checking or error returning in this plugin. It’s about as dumb as it can possibly be. When you download it, be sure and point the .jar to the correct YUI .jar file in the perl script or it won’t work. If you have any suggestions for the plugin, be sure and let me know (that is, when I get my comment system working)!

The perl script is just this :

      #!/usr/bin/perl -w
      $CCMD =
      "java -jar ~/Documents/Code/yuicompressor-2.3.5/build/yuicompressor-2.3.5.jar";
      $CARGS = "-o";

      $FN = shift;
      $_ = $FN;
      s/\.js/\.min\.js/g;
      s/ /\ /g;
      $FN2 = $_;

      `$CCMD $FN $CARGS $FN2`

Without further ado, the download is here: Automator YUI Plugin

Image overlapping content in a rounded corner layout

March 17th, 2008

Every now and again, I run into a complex rounded corner layout that requires a bit of finagling with overflows, z-indices and positions. The most common case is that the image I have used for the top corner is overlapping the content within the content div.

The problem

To see what I mean, check out the demo I put together for illustration purposes. In everything but Firefox 3 beta, the top image overlaps the content within the <div class='content'> div. This behavior is pictured to the right as well.

Now your first thought is that this is a z-index issue, and you wouldn’t be far off (we’ll get to that in a moment), but the cause of the problem is the overflow: hidden attached to the .cap class. If you ditch this (we’ll use the utter magic of Firebug to accomplish this)… voilá, your content is visible. View the previous demo with overflow: hidden removed.

Is this a bug?

I’m honestly not sure what’s going on here, from a rendering standpoint. It seems like the negative margin on the .cap div is throwing off the renderer, disallowing content from being shown within the box model; that is, it’s a rendering bug. Maybe it’s a commonly known bug? I honestly have no idea; as much development work as I do, you’d think I’d keep up with the trends and bugs with their catchy names. If you know of this being a common bug, please let me know! That is… when I get the comment system up and running.

The thing that makes me wonder if this is a bug is the fact that it happens in all browsers (even the WebKit beta, which seems to be at the forefront of CSS compliance). However, it seems to render just fine in the Firefox 3 beta… so who knows? Not me.

The Fix

Now, on to a fix:

The problem for me, is turning off overflow: hidden can sometimes create its own problems. I’m thinking specifically of IE not adhering to the height: property if the height is smaller than 1em (even if there is no text in the div). In order to fix this, you must use overflow: hidden. It’s good practice if you want a div to maintain a static height, anyway. So how do we fix this and keep overflow: hidden intact?

Z-index! As far as crazy css properties go, this one is pretty reliable across all browsers. The only thing you have to remember is to make sure you put a position: attribute on the div. Z-index is completely unreliable if there is no position: attribute of the div it applies to. In most cases, position: relative; will do just fine without screwing up your layout.

In this case, I applied a z-index of 10 (anything higher than 1 is not necessary, but going overboard is fun) to the .content div, which effectively puts it on “top” of the .cap div. See this fix in action.

I know it’s not a terribly common bug, and it’s not a terribly difficult fix to figure out. However, it bugs me every so often, so I thought I’d share what I’ve learned!