check if dynamically added class is present in order to resize the elements on window.resize

Viewed 27

in a function i trigger based on the html response from an api a two or one column lay-out and add corresponding classes (one-col or two-col):

if ($('element > table').length) {
    widget.fadeIn().slideDown(time);
    if ($windowWidth < 480){
       $content_main.animate({width: "90%"});
       //class handling
       content_main.removeClass('two-col');
       content_main.addClass('one-col');
       $sidebar_container.animate({width: "90%"});
    } 
    if ($windowWidth >= 480 && $windowWidth < 1024 ) {
       $content_main.animate({width: "100%"});
       //class handling
       content_main.removeClass('two-col');
       content_main.addClass('one-col');
       $sidebar_container.animate({width: "100%"});
    } 
    if ($windowWidth >= 1024) {
       $content_main.animate({width: "65%"});
       //class handling
       content_main.removeClass('one-col');
       content_main.addClass('two-col');
       $sidebar_container.animate({width: "33%"});
    }
       $('element').slideDown(1000);
    } else {
       if ($windowWidth < 480){
       //class handling
       $content_main.removeClass('two-col');
       $content_main.addClass('one-col');
       $content_main.animate({width: "90%"});
       $sidebar_container.animate({width: "90%"});
    } 
       if ($windowWidth >= 480 ) {
       //class handling
       $content_main.removeClass('two-col');
       $content_main.addClass('one-col');
       $content_main.animate({width: "100%"});
       $sidebar_container.animate({width: "0"});
    } 
          
      widget.css({'display':'none'});
       
   }

this works. But then i tried to make this work with a resize function:

function resize65(){
  //this if statement is not recognized
  if ($content_main.hasClass("two-col")) {
    if ($windowWidth < 480){
       $content_main.animate({width: "90%"});
      $sidebar_container.animate({width: "90%"});
    } 
    if ($windowWidth >= 480 && $windowWidth < 1024 ) {
       $content_main.animate({width: "100%"});
       $sidebar_container.animate({width: "100%"});
    } 
    if ($windowWidth >= 1024) {
       $content_main.animate({width: "65%"});
       $sidebar_container.animate({width: "33%"});
     }
  }
}//end function

//call function on resize
$window.on("resize", function () {
      console.log('resized');
      resize65();
  }).resize();

The dynamically added class is not recognized. I tried various ways (not worth mentioning and spoiling space) to get this to work, but finally i seek help from stackoverflow.

0 Answers
Related