CODEWITHSUNDEEP
javascriptjquerycsstoggle
johnmiami
johnmiami

Reputation: 3

jQuery Toggle div class on load depending on the content height

I have a dynamic content loaded on my template. The default div background-color is yellow, but when teh content is longer than 300px div toggles or appends the class that wil change the background-color to red. Below is the code. 

<!DOCTYPE html>
<head>
<title>Untitled Document</title>
<style type="text/css" media="all">
.short {background-color:yellow;padding:30px; width:200px;}
.long {background-color:red;padding:30px;width:200px;}
</style>
</head>

<body>
<div class="short">div content</div>
</body>
</html>

Upvotes: 0

Views: 1074

Answers (3)

PeeHaa
PeeHaa

Reputation: 72682

$('div.short, div.long').each(function(){
  if($(this).height() > 300) {
    $(this).removeClass('short').addClass('long');
  } else {
    $(this).removeClass('long').addClass('short');
  }
});

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

Try this

$(document).ready(function(){
  $(".short").each(function(){
    if($(this).height() > 300){
      $(this).removeClass("short").addClass("long");
    }
  });

});

Upvotes: 2

rtpHarry
rtpHarry

Reputation: 13125

If you changed your html to look something like this:

<div id="messageDiv" class="short">div content</div>

Then you could use some code like this:

$(document).ready(function () {
   var $messageDiv = $("#messageDiv");
   if($messageDiv.height() > 300) {
     $messageDiv.toggleClass("long short");
   }
});

But thats only a rough idea because it not clear how you are dynamically loading content and how we can know when to test the height.

Upvotes: 0

Related Questions