CODEWITHSUNDEEP
jquerywindow-resize
Yan Mak
Yan Mak

Reputation: 151

Add a css when the height on the window smaller (everytime the window re-size)

Trying to check the height on the window (everytime the window re-size), if that is smaller than < 540px, add a css on a class. But why is it not working? something wrong with my jquery??

$( window ).resize(function() {
var windowh = $(window).height();

if (windowh < 540 ) {
    $(".theclass").css('height', '200px');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 0

Views: 66

Answers (1)

I&#39;m Limit
I&#39;m Limit

Reputation: 899

For your question have a two way solutions

with CSS 

/* OLD CSS*/
.theclass { 
    text-align: right;
    background: lightgray;
}

/* Solution*/
@media (max-height: 540px) {
  .theclass {
    height: 200px;
  }
}
<div class="theclass">
  Full Screen View ↑
</div>

With JS

$( window ).on('load resize',function() { //<-- Change to load,resize
  var windowh = $(window).height();

  if (windowh < 540 ) {
      $(".theclass").css('height', '200px');
  }
});//<-- You forgot close `});`
/* OLD CSS*/
.theclass { 
    text-align: right;
    background: lightgray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="theclass">
  Full Screen View ↑
</div>

Upvotes: 4

Related Questions