Category » Coding » 7 Posts 
CSS Grid Layout » Aug 20, 2010 2:55 PM
I've been seeing more and more tool sets based around CSS grid layouts and I decided to build my own little basic framework in which to operate. This one is based on a 980px wide, 4 column grid. It has 4 types of basic box elements: 1:1 width, 1:2 width, 1:4 width and 3:4 width. These can then be combined to create upto a 4 column page with a 10px gutter.

There are then several styles that can be applied to the basic blocks to differentiate them from each other. This will allow for a huge pool of possible combination's with which to build pages.

The cool thing about this one however is that a little modified version of the jQuery Equal Heights plug-in that automatically goes through a standardizes the height for each row. It uses the ID attribute of the div to group the rows. For example "row1_1","row1_2" and "row1_3" are all set to the height of the tallest of those 3 elements.

More on this Retro-Tax project as is develops a little more. It's only got a very basic rough design at the moment.

Pretty cool!

jQuery Site Exit » Aug 12, 2010 1:30 PM
Here's a nifty little jQuery plug-in I made to watch for an external link and pop up one of those "You're leaving our site!1!" messages:

$(document).ready(function() { $("a[href^='http://']").click(function() {

urlOut = this.href;

$("#exitMsg").dialog({ modal: true, width: 400, draggable: false, resizable: false, buttons: { Cancel: function() { $(this).dialog('close'); }, Continue: function() { window.location.href = urlOut;}, } });

return false;

}); });

This one triggers the standard jQuery UI dialog box that has lots of customizable options. In this case there is a cancel button and a continue on to the external site button.

08/05/10: Magnet North Flash Sample »
07/27/10: ActionScript 3.o - WWFC »
07/25/10: Verallia Mobile Catelog »
01/19/10: Flow Chart Sample »
12/30/09: Designing in HTML/CSS »