How to Automaically Resize text inside 2 seperate Div's

Question

I found out how to resize text inside a div from this post (How to automatically change the text size inside a div?). It works great for one div. I have 3 div with different text in them and different font-size. Would like to be able to have the text in each div resize when window is resized.

Here is the HTML:

 <div id="logo">
         <a href="http://badboyzbailbondsks.com/index.html" title="Return to the Home Page">
          <img src="bad-boyz-bail-bonds-topeka-ks-home-header.png" width="100%">

          <div id="call"><div>Call Now</div></div>
          <div id="days"><div>24hrs/7 Days A Week</div></div>
          <div id="number">785-640-1234</div>
          </a>
 </div>

CSS:

  #header
 {
max-width:970px;
margin:auto;
 }

 #logo
 {
position:relative;
max-width:970px;
}

#call
{
position:absolute;
top:28%;
right:22%;
color:rgb(255,0,0);
font-size:1.5em;
width:10%;
height:26px;
overflow:hidden;
}

#days
{
position:absolute;
top:31%;
right:6%;
color:rgb(255,255,255);
font-size:1em;
width:15%;
height:18px;
overflow:hidden;
}

#number
{
position:absolute;
top:53%;
right:7.5%;
color:rgb(255,255,255);
font-size:2em;
width:19%;
height:32px;
overflow:hidden;
}

Script for resizing text which works for one Div

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
window.onresize = function() {
$('#call div').css('font-size', '1em');

while( $('#call div').height() > $('#call').height() ) {
    $('#call div').css('font-size', (parseInt($('#call div').css('font-size')) - 1) + "px" );
}
};
});//]]>  

</script>

Have tried adding each div in the code like

('#call div', '#days div', '#number div')

plus in all other spots but doesn't work on resizing all div's justresizes 1 div any help would be great.

score 1 · Answer 1 · answered Feb 01 '14 at 23:57

You can use jQuery's each() method:

$('#call, #days, #number').each(function () {
    while ($(this).children('div').height() > $(this).height()) {
        $(this).children('div').css('font-size', (parseInt($(this).children('div').css('font-size')) - 1) + "px");
    }
}

This assumes you only have 1 div per parent (as per the HTML in your question). If you have multiple, you can just use each() again.

How to Automaically Resize text inside 2 seperate Div's

1 Answers1