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!

Creating a Nice Slider With jQuery UI

March 29th, 2008

Sliders have many things going for them as a UI element; they offer the benefit restricting the choice a user has, without taking up the space of a drop down. If you need to ask the user to select a number between a range, you can either do an input box with validation, a drop down select element listing each possibility, or you can do a slider.

One drawback of a slider is the user not knowing what he’s selected as there’s no discrete output. If you are sliding to scale something, you can eyeball something, but wouldn’t it be nice if the slider provided some feedback to the user (”50%”) as the user was fiddling with it? I’m going to show you how to do just that with the jQuery UI library.

Check out the demo here

The necessary dependencies :

• jQuery Slider & UI Base
• jQuery

The code I used is as follows :

HTML

<div id='container'>
	<div class="slider_container">
		<div class='small_label'></div>
		<div class='slider_bar'>
			<div id="slider_callout"></div>
			<div id='slider1_handle' class='slider_handle'></div>
		</div>
		<div class='large_label'></div>
	</div>
</div>

CSS

body { background: #284a6e; }
#container { height: 100px; border: 1px solid #284a6e;}
.slider_container { position: relative; margin-top: 50px; height: 40px;}
.small_label { background: url(minus.gif) no-repeat; height: 19px; width: 19px; overflow: hidden; float: left; }
.slider_bar { background: url(bar.gif) no-repeat; height: 19px; width: 260px;  float: left; margin: 0px 5px; position: relative;}
.large_label { background: url(plus.gif) no-repeat; height: 19px; width: 19px; overflow: hidden; float: left; }
.slider_handle { background: url(selector.png) no-repeat; height: 19px; width: 20px; overflow: hidden; position: absolute; top: 1px;}
#slider_callout { background: url(callout.gif) no-repeat; height: 45px; width: 38px; overflow: hidden; position: absolute; top: -50px; margin-left:-10px;  padding: 8px 0px 0px 0px; font-family: "Myriad Pro"; color: #284a6e; font-weight: bold; text-align: center;}

Update: A couple commenters noticed a little outline gremlin in Firefox 3 when using the slider. Just add * :focus { outline:none } to get rid of it. I’m not sure which element the outline is on, so applying it to * can’t hurt

JavaScript

After I recorded the video, it dawned on me that there’s a way to do this that is a bit simpler: by using the ui object passed in by slider, and grabbing the “left” css property of the handle. That way, the callout matches the css handle at all times, with no calculations needed; and you can reserve minValue and maxValue to return values that are useful for your web application.

Thanks to Andrew and John in the comments, I have fixed some bugs with the code. Now you can click on the bar itself and the callout will fire correctly. For this I utilized the “stop” event, checked if the callout was already visible, and displayed it if not.

The code looks like this :

$(function() {
	$('#slider_callout').hide();
	var calloutVisible = false;
	$('.slider_bar').slider({
		handle: '.slider_handle',
		minValue: 0,

		maxValue: 25,
		start: function(e, ui) {
			$('#slider_callout').fadeIn('fast', function() { calloutVisible = true;});
		},
		stop: function(e, ui) {
			if (calloutVisible == false) {
				$('#slider_callout').fadeIn('fast', function() { calloutVisible = true;});
				$('#slider_callout').css('left', ui.handle.css('left')).text(Math.round(ui.value));
			}
			$('#slider_callout').fadeOut('fast', function() { calloutVisible = false; });
		},
		slide: function(e, ui) {
			$('#slider_callout').css('left', ui.handle.css('left')).text(Math.round(ui.value));
		}
	});
});

For reference purposes, here is the code I used in the video :

$(function() {
	$('#slider_callout').hide();
	$('.slider_bar').slider({
		handle: '.slider_handle',
		minValue: 0,
		maxValue: 240,
		start: function(e, ui) {
			$('#slider_callout').fadeIn('fast');
		},
		stop: function(e, ui) {
			$('#slider_callout').fadeOut('fast');
		},
		slide: function(e, ui) {
			$('#slider_callout').css('left', ui.value).text(Math.round(ui.value * (100/240)));
		}
	});
});

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