How to change the parent div style if content increase?

Question

Hi, I am facing one small issue. I want to change the parent div style as the content of the div increase its text chars.

<div class="welcome-message"><a href="#">Some link</a></div>

this is the format of the html. lets say it the link text has min char 80 chars, if its more than 80 then the style of the parent div should be change ie. width:200px;

jQuery solution preferred , JS also fine.

thanks

Answer 1

There's no javascript event such as "did the content inscrease ?" dynamic style, all you can do is ask in javascript "did the content increase" every n ms.

But i think your problem is much more a css one ...

Answer 2

You can do it like this:

$(document).ready(function()
{
    if ($('.welcome-message a:first').text().length > 80)
        $('.welcome-message').css({'width': 200});
});

Answer 3

$(document).ready(function(){
    var l=$("div.welcome-message").text().length;
    var w=50;

    if(l>80){
        w=200;
    }else if(l>40){
        w=100px
    }
    $("div.welcome-message").css({'width':w+'px'});
});

Answer 4

Well, assuming you have a separate class that defines the new, larger width:

function checkLength()
{
   if ($('div.welcome-message a').text().length > 80)
   {
      $('div.welcome-message').addClass('myLargeWidthClass');
   }
   else
   {
      $('div.welcome-message').removeClass();
   }
}

You would then call this function on load. E.g.

$(function(){
   checkLength();
});

Answer 5

I know this doesn't answer your question because your div will only change on initial page load, but after reading through the answers for this question I wanted to add this solution for completeness as there is an event that triggers when there is ANY change to the element in the DOM (except for IE)... I found the solution here on SO.

In summary, this works to resize the <div> based on it's dynamic content (note the "DOMSubtreeModified")

 $(".welcome-message a").bind("DOMSubtreeModified",function(){
  var w = ($(this).html().length > 80) ? 200 : 100;
  $(this).parent().css("width", w);
 })

I also added a sample of the code in action to this pastebin.