Element resizing issue after hover in jQuery

Question

So I am having an issue with css and jquery. Currently jquery, on window load and on window resize, dynamically resizes certain elements so that it all has equal height and width whenever it loads and browser window resizes, which is great.

My problem is that since it's only inline css, some of the elements, after the action is performed on hover, gets resized and it doesn't automatically apply the new sizes to all the other elements.

I was thinking maybe having embedded in the head or body and jQuery manipulates that but I don't know if that is possible.

I am open to suggestions...

here is what i am working on so you can see for yourselves: http://staging.idgadvertising.com/idg/do-not-touch/

//Resize videos and picture holders
    $(window).load(function(){
var frameWidth = $(".teammember").width();

var topTotal = parseInt(frameWidth) + 13;
$(".teammember").css("min-height", topTotal );
        $(".teammember").css("height", topTotal );
    });

$(window).resize(function(){
var frameWidth = $(".teammember").width();

var topTotal = parseInt(frameWidth) + 13;
$(".teammember").css("min-height", topTotal );
    $(".teammember").css("height", topTotal );
    });
 });

Answer 1

Your problem is not with jQuery but with the float property.

In your CSS, remove the float: none property from the #top .flex_column_table_cell selector.

Or if you can't change this CSS directly, try changing your window.load function to add a float property to each .teammember element:

$(window).load(function(){
    var frameWidth = $(".teammember").width();

    var topTotal = parseInt(frameWidth) + 13;
    $(".teammember").css("min-height", topTotal );
    $(".teammember").css("height", topTotal );
    $(".teammember").css("float", "left" );

});

Nice approach with the team members by the way! :)

Cheers, Jeroen

Edit: added jQuery solution.