archives | wasted potential

CSS sticky footer without javascript

On July 3, 2009

UPDATE: The code I have provided here has a bug in Internet Exploder. Until I get it updated, I suggest you get a working sample here. Thanks.

Occasionally, a website design requires a “sticky footer” – that’s a footer that sticks to the bottom of the browser window when the content is not long enough to fill the browser. If the content is longer than the browser height, it should push the footer down below the content. It’s an easy task with a table-based layout, but it can be surprisingly tricky to pull off with pure CSS layouts.

Just the other day, someone asked me how to do this and I couldn’t remember how it was done off the top of my head, so… voila! a blog post was born. I have created 2 samples of the CSS-based sticky footer that work correctly in all major browsers for footers with a fixed height. No javascript is needed to pull off this effect.

CSS sticky footer

Example 1 shows the most basic scenario. Resize your browser and notice how the footer sticks to the bottom of the window until it hits the bottom of the content area. It is then forced below the content, exactly as it should be.

Example 2 is a slightly fancier version that shows you how to get a sticky footer on a centered layout. Again, the layout is CSS-based and has been tested in Firefox (2 & 3), Safari, Internet Explorer (6, 7 & 8), and Google Chrome.

You can download the source files here. If you’re a CSS ninja, there are enough comments in the files for you to figure it out. Otherwise, I’ll explain some of the details here:

First, open the basic example HTML and look at the top of the code. The first line of code establishes the HTML doctype. You MUST have a valid doctype for the sticky footer to work. I have only tested it with the transitional doctype used in the examples. It should work with other valid doctypes, but you should test it thoroughly if you need to use another doctype.

Next, look at the line that declares the “main_styles.css” stylesheet. This stylesheet contains all of the css for the page. The next 3 lines specify a second stylesheet that contains only CSS overrides for Internet Explorer 6 and 7. This is the cleanest and easiest way I have found to deal with IE problems and it doesn’t require any hacks in the main stylesheet.

The DIV structure is pretty self-explanatory, but note that the footer is not contained inside of the “wrapper” div. It must be outside of the wrapper for the sticky footer.

Next, open “main_styles.css” – the comments should explain everything you need to know to make the sticky footer work. Note that the wrapper div has a min-height declaration. This is why we need a second stylesheet – IE 6 and 7 do not observe min-height correctly. If you open the ie_styles.css” file, you will see that the only style in it sets the height of the wrapper div. IE 6 and 7 treat height as if it was min-height, forcing the footer below the content area. IE 8 appears to follow the standards when it comes to min-height, so no override is needed for it.

Hopefully, the source files will provide you with templates that you can use to start building pages with a sticky footer. Good Luck!

Flash AS3: Smooth lines with the Drawing API

By Andy

On June 10, 2009

In Actionscript/AS3, Flash, Flash drawing API

Flash’s drawing API is really useful for a lot of applications and games, but it has one major drawback: user-drawn lines are usually jagged and sloppy looking. The simple fact is that it’s really difficult to draw smooth lines with a mouse. In many cases, it’s not a big deal and it is an accepted drawback of drawing with a mouse.

Recently, however, I built a flash game and those jagged lines were a real problem. I was creating a linerider-style game similar to this one, in which a user draws a track and then clicks a button to watch a character sled down the lines that they have just drawn. It’s fun to draw loops and jumps and watch the rider flip and fly all over the place. The jagged lines created by the Flash drawing API were creating a lot of problems for the physics simulation. My sled never picked up any speed because of all the little bumps on the user-drawn lines.

After spending a lot of time Googling around, I found a forum post that suggested using a basic easing script to draw smooth lines. It was so simple and so clever at the same time! It solved my problem, so I created a demo to show how it works.

Check out the Flash demo below. When it loads, the ease factor is 1, meaning that there is NO EASING. Try drawing a few circles on the gray rectangle and you’ll see that it’s the usual jagged drawing tool. Now, drag the red slider down until the easing reads about 0.25 and try drawing the circles again. You should notice that the lines look much smoother. Try drawing lines at different speeds and with different easing amounts. Remember that lower numbers mean MORE EASING (I know, it seems backwards, but it prevents a deadly “divide by zero” issue that you get by doing it the other way).

There is one drawback to this method. The line lags behind your mouse a little bit as you draw. In most cases, this isn't a huge issue and the benefit of smoother lines outweighs this drawback.

As usual, you can download the complete source code packet here.

If you've never played Linerider, check out this killer version. Please note that I did not create this awesome game. I created a similar game for a client that wishes to remain anonymous.

Flash AS3: Sequential loading with BulkLoader

By Andy

On April 23, 2009

In Actionscript/AS3, BulkLoader, Flash

BulkLoader is an open source AS3 Library created by Arthur Debert that enables easy loading of multiple assets. This behavior is exactly what I needed for a recent project. I needed to break a large flash website into multiple swfs so that the site preload remained small. I wanted the remaining site pages (individual SWFs) to load in the background, one at a time, after the initial site load. If a user requested a page that hadn’t loaded yet, the background loading would pause and the requested page would load immediately. BulkLoader is designed for exactly this sort of heavy lifting and it saved me a lot of development time.

I’ve created a picture loading demo below to show exactly how this works:

As you can see, I have used BulkLoader as a sequential loader (loading only one image at a time). After bulk loading has begun, you can request any of the images immediately. At this point, BulkLoader will pause the current download and switch to loading the requested image. As soon as that is complete, it will resume the previous download.

There are a few important caveats when using the BulkLoader library:

BulkLoader behaves differently on a web server than in the Flash IDE. When testing BulkLoader, it is important to test it on a web server to get accurate results. The Flash IDE is not able to correctly simulate functions such as pause() and loadNow(), so they should be tested in a browser.
BulkLoader behavior also varies slightly between browsers . In Firefox3 and Safari, paused downloads are restarted from the beginning when they resume. Internet Exploder 7 actually pauses and resumes downloads correctly (go figure!).

As always, you can download source files here. The code is fairly straightforward and I have added lots of comments. Please note that this sample is designed as a demo only - I sacrificed a lot of elegance in the code for the sake of simplicity.

You can get the latest version of BulkLoader here. You will also find online docs and a very helpful discussion list moderated by Arthur Debert himself. It's a great place to get help using BulkLoader or just drop in and say thanks to Arthur.

Flash AS3: target vs. currentTarget

By Andy

On April 13, 2009

In Actionscript/AS3, Flash

While learning Actionscript 3, my button rollovers were not working correctly. The problem was that I didn’t know the difference between target and currentTarget or between MOUSE_OVER and ROLL_OVER. I made an example to demonstrate and I hope to explain it in a way that will save you some time.

AS3 Mouse events use two different properties: target and currentTarget. “target” is the object that fired the MOUSE_OVER (or MOUSE_OUT) event. “currentTarget” is the Movieclip that you applied the listener to. In the example below, the top 2 buttons have MOUSE_OVER and MOUSE_OUT listeners. Each button is made up of 6 different MovieClips. As you rollover the button on the left, the target fades. As you rollover the button on the right, the currentTarget fades. So, you want to use currentTarget right?

WRONG! Watch the output text window at the bottom of the Flash movie as you rollover the button on the right. Even though it appears to be highlighting correctly, it is actually firing a MOUSE_OVER event for every movieclip inside the button! This is not what you want! You want the event to fire once – when you rollover the button. This is where mouseChildren comes in! In the second row of buttons, I have set the mouseChildren property of both buttons to false. This means that none of the internal movieclips will fire an event. Now, when you rollover the buttons, you can see that they highlight correctly and that the target and currentTarget values are the same.

But there is an easier way – use ROLL_OVER and ROLL_OUT! These events automatically ignore the the internal structure of the buttons and register events only on the object that the listener was assigned to (in this case, the button itself). Most of the time, these are the events you will want to use. I rarely use MOUSE_OVER or MOUSE_OUT for anything.

I hope this example helps to clear up some confusion. You can download the source files here and play around with them.