jQuery Toggle div class on load depending on the content height

Question

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>

Answer 1

Try this

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

});

Answer 2

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

Answer 3

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.

jQuery Toggle div class on load depending on the content height

Question

3 answers

solution1
2 ACCPTED 2011-07-21 19:51:41

solution2
0 2011-07-21 19:54:00

solution3
0 2011-07-21 19:59:11

jQuery Toggle div class on load depending on the content height

Question

3 answers

solution1 2 ACCPTED 2011-07-21 19:51:41

solution2 0 2011-07-21 19:54:00

solution3 0 2011-07-21 19:59:11

solution1
2 ACCPTED 2011-07-21 19:51:41

solution2
0 2011-07-21 19:54:00

solution3
0 2011-07-21 19:59:11