July 2010
Mon Tue Wed Thu Fri Sat Sun
« Jun   Aug »

Month July 2010

Cooking Some Chiptole and Habanero Braised Chicken

Cooking some Chiptole and habanero braised chicken thighs

Do NOT Climb on the Noodle

For Your Safety Do Not Climb on the Noodle

Transformers 3 Movie Set

Transformer 3 Movie Set from the Lobby of Hotel 71

From inside Hotel 71

Chicago: Touristy Photo

Chicago theatre sign

Hot Tacos

Simmering some pork tenderloin in a jalapeno and fresh tomato salsa.

Sleepy Bed Cat

sleepy batman kitty

Shot with the hipstamatic app on iPhone.

Setting min-height on Content Populated via JavaScript

It’s pretty annoying when a page loads and the content gets pushed around and container jump in height due to JavaScript, AJAX, JSON and/or Flash content being pulled to a container. This jump can easily be fixed by using the min-height CSS property on the parent container.

Examples where you may want to set min-height

  • Javascript embedded video players such as Brightcove
  • Sidebar widgets, such as recent tweets or last.fm stats
  • Galleries that are pulling in thumbnails from a database, XML, or JSON file via a JavaScript
  • Basically nearly any container that is going to be filled with a relatively small item and you can predict closely what the height of the item will be

So all you need to do is set min-height using CSS on the container.

#container { min-height:125px; }

Note: min-height follows the box model just like height does so when you set a min-height on a container that will not include borders or padding.

Two Simple Solutions for IE6 support

Of coarse IE6 doesn’t support min-height but IE7 and up does. And of coarse Opera, Firefox, Safari and Chrome support min-height.

But it’s a pretty easy fix. IE6 has a bug (surprise) in the way it supports plain old CSS height. Basically it doesn’t respect the set height of a container and will just expand as needed to fit the content. So in IE6 you can just use height as if it were min-height, but you’ll have to set height in your IE6 stylesheet so that you not setting height on modern browsers too. If you aren’t using conditional comments to serve IE6 an separate stylesheet. Then pinch yourself and then try the Dustin Diaz Fast Hack Bad Ass Method instead. (He didn’t officially name the method so I figured I’d make something up for him.)

Setting min-height isn’t Always the Best Solution

No matter which technique you use the most important thing is to let the user know that something is taking place. Something as simple as a animated image indicator such as a spinning wheel can do the trick.

If a primary part of the interface is going to be loaded with a delay for example, over one second then you might want the box to expand (animating the height property or some other effect) once it’s being populated with content to show the user that content is being pulled in. The interface may look broken to a user if there is a 800px tall box sitting there empty for two seconds, even if you have little indicator spinning. In this case you can have a small 200px box with a message such “Content X is loading…” Then before you display the content have the box slide to the proper height and fade in the content.

Another solution for long content area that are being dynamically filled is to have the the request broken up so that you can immediately start pulling in item 1, then item 2, then item 3, etc. The container can just grow as each item is pulled in.

There probably a million other problems that the min-height property isn’t a good fit. But remember if you remember to put the problem before the solution and are willing to do a little user testing the answer will be come clear.

Late or Really Early Breakfast

CSS Reflections – Great for Dynamic Content

I hope other browser and the W3C pick up CSS reflections. It’s great for dynamic images. I’m using it with the Last.FM API so I can add a nice little refection for webkit browswers. I don’t want to use something like reflection.js because it just makes it complicated when you are already bring in content via Javascript (specifically JSON with Last.fm) plus I don’t really want the content to flash and to waste the user’s CPU on something like a reflection. I’d rather just (insert buzzwords) progressively enhance the the experience for webkit users.

example of reflection

Code used:

-webkit-box-reflect:below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.9, transparent), to(rgba(242,242,242,.6)));

Read more about -webkit-box-reflect at webkit.org.

Chopping up Some Produce for a Taco Salad

Prepping some onions and cilantro for a taco salad