CODEWITHSUNDEEP
javascriptjqueryhtmlcss
red house 87
red house 87

Reputation: 2415

if div does not contain this class then execute following

AT the moment I have a few div resize functions that work on different page width queries. These are working fine, however I want to wrap all of these functions for the different window widths in a conditional statement.Basically I only want the functions to resize the div "portfoliopod" if the div does not contain the class pod expanded. Please see my code below and a live example at

http://mrliger.com/index2.php

You can see on the live example that the image is being clipped due to having the height of how the portfoliopod was before expanding it

 if ($( '.portfoliopod' ).not( ".podexpanded" )) {




 $(window).resize(function() {
        if ($(window).width() >= 1025) {

var cw = $(".portfoliocontainer").width()/4;
$('.portfoliopod').height(cw);

        } 
    });

$(window).resize(function() {
        if ($(window).width() <= 1024) {

var cw = $(".portfoliocontainer").width()/3;
$('.portfoliopod').height(cw);

        } 
    });

$(window).resize(function() {
        if ($(window).width() <= 767) {

var cw = $(".portfoliocontainer").width()/2;
$('.portfoliopod').height(cw);

        } 
    });

$(window).resize(function() {
        if ($(window).width() <= 400) {

var cw = $(".portfoliocontainer").width();
$('.portfoliopod').height(cw);

        } 
    });

}

Upvotes: 0

Views: 88

Answers (2)

AmmarCSE
AmmarCSE

Reputation: 30557

First, you do not need multiple resize handlers. Include them in the same one.

Second, use the :not() selector

  $(window).resize(function() {
         if ($(window).width() >= 1025) {
             var cw = $(".portfoliocontainer").width() / 4;
             $('.portfoliopod:not(.podexpanded)').height(cw);
         }
         if ($(window).width() <= 1024) {
             var cw = $(".portfoliocontainer").width() / 3;
             $('.portfoliopod:not(.podexpanded)').height(cw);
         }
         if ($(window).width() <= 767) {
             var cw = $(".portfoliocontainer").width() / 2;
             $('.portfoliopod:not(.podexpanded)').height(cw);
         }
         if ($(window).width() <= 400) {
             var cw = $(".portfoliocontainer").width();
             $('.portfoliopod:not(.podexpanded)').height(cw);
         }
     });

Upvotes: 2

Elliot B.
Elliot B.

Reputation: 17661

You may use this selector:

$(".portfoliopod:not(.podexpanded)")

It will select all elements with the class portfoliopod, but only those that do not have the class podexpanded.

Upvotes: 5

Related Questions