Friday, June 12, 2009

Smart columns with CSS and jquery

Could be useful...

Smart columns with CSS and jquery.

The thing is, these are all the same height. These aren't columns. They're bricks.

I'm perplexed about dealing with a bunch of floating items of different heights. I'm using the usual float everything left strategy, but it would be cool to try this approach to resize the widths to fit the window nicely.

the problem arrives when the items sort out awkwardly when the longest element prevents the shorter ones from stacking up to the left. The only approach I've come up with is being sure to put the longest elements first.

If one could truly fill up columns with content, flexibly.

Wednesday, June 3, 2009

jquery to show a div depending on values of two selects

Using Jquery:


$(document).ready(function() {
$('select#article-type').change(function() {
var type = $(this).val();
var section = $('#article_sections').val();
(type == '500') && (section > 20) && (section < 40)
// higher education event
? $('#event-info').slideDown()
: $('#event-info').slideUp("fast");
return type;
}).triggerHandler('change');
});

$(document).ready(function() {
$('select#article_sections').change(function() {
var section = $(this).val();
var type = $('#article-type').val();
(type == '500') && (section > 20) && (section < 40)
// lifenews sections 31, 32, 33, 34, 35
? $('#event-info').slideDown()
: $('#event-info').slideUp("fast");
}).triggerHandler('change');
});


The trick of this is finding the value of the other select and using it in the calculations for the change trigger.

SitePoint Mega Menus: my incarnation

Got a great approach to menus from the SitePoint MegaMenu post.

ugh, I wanted to share some code, but looks like code tags are verboten here. I really need to make myself a decent blog.

sigh.

Well, the javascript shows up, sans whitespace indenting, so here you go: (of course you also need the hoverIntent plugin for jquery -- read the article!)

function addMega(){

   $($(this).find("h2")).addClass("hover");
   $($(this).find("div.menu-div")).slideDown("50"); 
   $(this).addClass("hovering");
}

function removeMega(){

   $($(this).find("h2")).removeClass("hover");   
   $($(this).find("div.menu-div")).slideUp("fast");
   $(this).removeClass("hovering");
}

var megaConfig = {    
interval: 200,
sensitivity: 4,
over: addMega,
timeout: 500,
out: removeMega
};

$("li.mega-menu").hoverIntent(megaConfig);

// need this jquery plugin for IE6 to solve Z-index issues.
$(".menu-div").bgiframe();

I can verify that it works great in FireFox, Safari 3 and even IE6.