Read the rest of this entry »

This footer behaviour is not a new idea; I’ve seen it on a few sites over the years, the most well known probably being version 7 of Shaun Inman’s site. Take a look at the ‘Work’ page with JavaScript enabled, then disabled to see the effect in action.

I suspect that this behaviour, which can look great in the right situation, has not been widely adopted because existing solutions have always relied on JavaScript for what should be a simple presentation issue.

The technique described in this article is purely a CSS solution and works in all modern browsers, tested down to IE5.5.

Firstly, here’s a demonstration.

The HTML

The CSS

IE6 Stylesheet

How it works

As you can see, the mark-up and styling are pretty simple. Here’s a quick run-through of what’s going on…

• #container is set to be at least as tall as the browser window using min-height and although IE6 doesn’t understand this, it treats height in exactly the same way. #container must be positioned absolutely, or this will not work.
• #footer is positioned absolutely at the bottom of #container
• #content is given a bottom margin equal to the height of #footer to prevent the two ever overlapping.

Known Issues

The simplicity of this technique makes it fairly reliable and the only real issues to consider are for IE6 and below. For these browsers you’ll need to specify any additional containers as also having a height of 100%.

For example, if your mark-up was:

In your IE specific CSS you’d need to specify:

Conclusion

This is a nice and easy solution to those unsightly gaps below your footers and while it won’t be appropriate for every site, it might come in handy from time to time. Please let me know if you find any problems with it.

Demo: http://boagworld.com/FixedFooter/

Via: http://boagworld.com/technology/fixed_footers_without_javascri/

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu. The menu has different orientation and style like you can have horizontal menu, vertica menul, tab based navigation and dropdown structure.

Some Highlights:

• Timed delay on mouseout
• Animation of sub-menu reveal
• Keyboard accessibility
• Supports the hoverIntent plugin
• Indicates the presence of sub-menus
• Drop shadows
• Shows the path to your current page
• Optional callback functions
• Hover support for IE6

You can enhance Superfish menu by using following plugins:

• hoverIntent plugin by Brian Cherne
• bgIframe plugin by Brandon Aaron

Requirements: jQuery v1.2+

Website: http://users.tpg.com.au/j_birch/plugins/superfish/

Javascript Crossfader is nice script to fade between different divs. It fades in and out using different slides you provide to Crossfader. Crossfader has a very smooth animation effect.

The constructor takes three variables: an array containing the ids of the divs to be faded, the fade time (in milliseconds), and the delay between fades (also in milliseconds).

Crossfader Demo

Download Crossfader

This Free CSS Drop-Down Menu Framework is modular, with themes. Not only that the HTML is separated from CSS, but even CSS definitions are categorized into structural and thematic types.

Features:

• Module and Thematic approach
• Well Structured CSS
• Well Organized Code and files
• Easily Transformable to Horizontal, Vertical

Creating a new theme is easy with the available templates and takes 10-15 mins.

Website and Demo: http://lwis.net/free-css-drop-down-menu/

This plugin wraps the jQuery UI datepicker into an interactive component specifically designed for choosing date ranges.

Features and Updates:

Uses jQuery UI 1.6rc4:

The range picker now uses the latest version of jQuery UI’s datepicker, and allows passing of native datepicker options.

Date.js Integration:

We’ve integrated the fantastic date.js library to allow for easy preset development.

Optional Range Advancing Arrows:

Optional forward and back arrows allow a user to jump forward and backward by range duration.

jQuery UI CSS Framework-Driven:

Our range picker uses jQuery UI CSS Framework classes, making it ThemeRoller-Ready.

This plugin requires jQuery and jQuery UI Datepicker. It also uses the jQuery UI CSS Framework as well as one additional custom CSS file. All these can be downloaded from the official site, Checkout the demo below.

Website: http://www.filamentgroup.com/

Demo: Check out this faboulous Date Range Picker

deploy* is an open source web application that enables you to create your web project framework with ease.

It lets you to choose the:

• XHTML document type
• CSS file (blank or with resets)
• jQuery to be included or not. If yes, ask for some popular plugins
• major directories like images, includes to be added

Once the link that creates to project framework is bookmarked, same framework can be created with just a click.

The idea itself is very nice: “instantly starting a project with the preferred structure“. If more libraries, CSS frameworks would be supported, it can become much more flexible (as it is open source, anyone can add these).

There are four buttons on this example, each of which has three states. That would normally be 12 images (thus 12 server requests), but thanks to the CSS sprites technique it is only one. The technique is demonstrated practically in the form of an accordion widget.

Demo

Download

SenCSs is a CSS framework that doesn’t provide a layout system but aims to take care of the rest, like:

• fonts & font-sizes
• paddings
• margins
• colors,
• tables & lists
• headers, blockquotes and what more..

SenCSs has support for forms which helps presenting them nicely (better form support is on the way).

There are also styles for elements like errors, warnings or success messages which are parts of a standard web application.

SenCSs, although being fresh & currently in development, is a nice base to start with & improve depending on your needs.