CODEWITHSUNDEEP
jquerydynamicwidth
Matt Rogers
Matt Rogers

Reputation: 156

jQuery if width greater than set child div widths

I think I have a pretty straight forward jQuery question however i just can not seem to get this working.

Basically I have a container div with the class '.content-padding'. Inside this I have nine divs that all have the class '.work-buttons'. Using jQuery I want to get the current width of '.content-padding' and if it is greater than 700px wide I want to make it so the '.work-button' divs sit three across with a 30px gutter (eg '.content-padding width' / 3 - 20px).

I have written the following jQuery code but something doesn't seem to be working. I have been working on it for a couple of hours now and it is starting to get to me. Can anyone see something wrong with the code below.

$(window).resizeboxes(function() {
if ($(".content-padding").width > 700){
    $(".three-wide, .two-wide, .one-wide").removeClass(".three-wide, .two-wide, .one-wide"); 
    $(".work-buttons").addClass(".three-wide"); 
    $(".work-buttons").width($(".content-padding").width/3 - 20);
    $(".work-buttons").height($(".work-buttons").width*.75);
}
});
$(window).trigger('resizeboxes');

Upvotes: 0

Views: 4718

Answers (1)

Jason P
Jason P

Reputation: 27012

.width() is a function. You need to execute it:

if ($(".content-padding").width() > 700) {

Also, resizeboxes isn't a built-in function. Is that a plugin, or were you trying to do this:

$(window).on('resizeboxes', function() { ... })

Upvotes: 3

Related Questions