Altering CSS for every nth element of a class

I wanted to improve on my previous jquery fix to remove the left padding for the 4th floating div.widget on the Rabbit Software homepage. If I add more widgets, the rows won't align correctly unless I can remove the padding from every 4th one. Because of the fixed width template and fixed width of the widgets, there are always 3 widgets per row.

The index of widgets counts up from 0, so I needed to fix every child whose index is a multiple of 3.

Even floated div columns: equalHeights

When you are floating a bunch of divs inside a container, it is a design problem when the divs are of different heights depending on their content, because they tend to wrap funky. One can, by brute force, make them all the same height, but that approach is fragile and can create problems with the content contained in each div. (Why is there a flower photo? Just because it looks nice.)

A better approach would be to measure the tallest div and force that height on all the remaining divs. Alas, although there exist some CSS methods for doing this, they're not adequately cross-browser compatible, so a javascript method is the only effective approach.

I found a very nice jquery plugin called equalHeights, and implemented it in the SimpleFolio theme for rabbitsoftware. Thank you again, Filament Group, a great resource for JQuery plugins.

Some small modifications of the SimpleFolio Wordpress theme

I'm using the delightful SimpleFolio Wordpress theme for the Rabbit Software website. I made a donation; it's nice to support good opensource work.

I found a few issues with it that I have addressed.

1. The single post view was incorrectly showing the excluded "Portfolio" category in its Recent Posts sidebar widget. In this theme, you can select a specific category to populate the homepage slideshow. One doesn't necessarily want those posts to appear as normal blog posts. Unfortunately, the exclusion function wasn't working on the single post view page. This problem is easily addressed by editing the sf_portfolio_filter function in the theme's functions.php file.

Change line 50,

if(!is_archive() && !is_admin() && !is_single()){

to

if(!is_archive() && !is_admin() ){

2. I'm using more than 3 homepage widgets, and they weren't wrapping nicely. While the first one had a proper margin-left:0, the fourth one had the default margin-left:30px. I realized there must be some javascript at work behind the scenes, inserting the inline styling to adjust the left margin. Indeed, I opened custom.js in the js folder, and found this line:

$(".home_widgets .widget:first").css("margin-left", "0");

A bit of snooping on the JQuery site clarified this usage for me, and I added this line:

$(".home_widgets .widget:eq(3)").css("margin-left", "0");

to make the 2nd line of 3 widgets line up with the first batch.


3. Of course, I've made a few custom tweaks to the stylesheet so far, such as adding more space below the unordered lists in the .home_widgets .widget class, and adding underlines to the links in the .home_widgets .textwidget.

Temporarily locking submit button

Suggested by this example.
I need a temporarily locking submit button because if there's a validation error on the page, the user needs to resubmit. But I need to stop the clickers (slow response sometimes on this server) and give them some feedback.

$(document).ready(function() {
   $(':submit').click(function() {
        $original = $(this).val();
        $(this).val('Saving, please wait...')
        .attr("disabled","disabled")
        .fadeIn('slow')
        .animate({opacity: 0.4}, 4000)
        .fadeIn('slow', function() {
             $(this).val($original).removeAttr("disabled")
             .animate({opacity: 1}, 2000)  
        }); 
   }); 
});

My only problem is that it conflicts with the jquery validation plugin we're using: it prevents the error bubbles from displaying when submit is clicked.
If I can reference a validation value then I can check whether this function needs to execute or not.

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.

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.