html - Call javascript function, when row contains certain amount of columns

Question

I'm working on a MVC application. One of the pages contains a row and two columns.

When you resize the window to a certain width it automatically puts the second column under the first one.

I'm using the bootstrap grid system to achieve this.

        <div class="row">
            <div id="draftContainer" class="col-md-6 col-sm-6 col-lg-6">
                ...
                (Some content)
                ...
            </div>
            <div id="releaseContainer" class="col-md-6 col-sm-6 col-lg-6" >
                ...
                (Some other content)
                ...

            </div>
        </div>

I would like to know if its possible to somehow fire an event when the second column drops under the first and then call a javascript function.

The case is, that I have some CSS classes that should be added and removed depending on whether theres one or two columns.

I hope you get the idea.

Thanks in advance

question from:https://stackoverflow.com/questions/66061469/call-javascript-function-when-row-contains-certain-amount-of-columns

Answer 1

I want to help

https://codepen.io/sinandogan/pen/YzpwvRL

<div class="row">
    <div id="draftContainer" class="col-md-6 col-sm-6 col-lg-6">
        ...
        (Some content)
        <input type="hidden" id="css1" value="<style>#draftContainer{background:#d8ffc0} #releaseContainer{background:#eee}</style>" />
        ...
    </div>
    <div id="releaseContainer" class="col-md-6 col-sm-6 col-lg-6" >
        ...
        (Some other content)
        <input type="hidden" id="css2" value="<style>#draftContainer{background:#eee} #releaseContainer{background:#f44336}</style>" />
        ...

    </div>
</div>
<div id="appendStyle"></div>

<script> 
  function control(){
    if($('body').width() > 766){
        $('#appendStyle').html($('#css1').val());
    }else{
        $('#appendStyle').html($('#css2').val());
    }
  }
  
  //first run
  control();
  
  $(document).ready(function() {
    $(window).resize(function(){
        control();
    });
  });
  </script>