CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Saif Islam
Saif Islam

Reputation: 301

Adjust text size dynamically within div and also responsive

I have two working JSFiddle which I want to combine and work together.

JSFiddle-1 : http://jsfiddle.net/MYSVL/3050/

window.onresize=function() {
    var child = $('.artist');
    var parent = child.parent();

    child.css('font-size', '18px');

    while( child.height() > parent.height() ) {
        child.css('font-size', (parseInt(child.css('font-size')) - 1) + "px");
    }

Here the text inside artist container is responsive and its stretching to maximum font size when the screen is bigger. Its also shrinking to smallest font size when screen size is smaller.

JSFiddle-2 : http://jsfiddle.net/MYSVL/3047/

function calcDivHeights() {

     window.onresize=$(".artist").each(function () {

        var child = $(this);
        var parent = child.parent();

        //child.css('font-size', '18px');
        while (child.height() > parent.height()) {
            child.css('font-size', (parseInt(child.css('font-size')) - 1) + "px");
        }

    });
}

Here the function is checking for every artist div and adjusting the font size according to the while condition but I am unable to make it responsive like my JSFiddle-1 . Once the text size is smaller it remains smaller even I make the screen bigger. I want my JSFiddle-2 to work exactly as JSFiddle-1 so that I can maintain the responsiveness of the text according to screen size.

Can someone please help me out or feel free to modify my JSFiddle-2 in order to achieve the goal.

Thanks in advance

Upvotes: 1

Views: 1073

Answers (2)

DrKey
DrKey

Reputation: 3495

I can't see differences between your two fiddles except for the commented child.css('font-size', '18px'), both should do the same thing.

Your second fiddle seems to not works properly because once you resize window to a smaller resolution, child becomes smaller or equal to parent. Then, when you return on bigger resolution, you call again while( child.height() > parent.height() ), but now your child height is not greater than your parent height.

I think the following will just do what you're asking for:

$(document).ready(function () {

function adjustFontSize() {
    var child = $('.artist');
    var parentHeight = child.parent().height();
    while( child.height() > parentHeight ) {
        child.css('font-size', (parseInt(child.css('font-size')) - 1) + "px");
    }
    while( child.height() < parentHeight ) {
        child.css('font-size', (parseInt(child.css('font-size')) + 1) + "px");
    }
};

adjustFontSize(); // Call it when document is ready
window.onresize = adjustFontSize; // Call it each time window resizes

});
.artist-container {
    width: 20%;
    height: 40px;
    border: 1px solid black;
    overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="artist-container">
    <div class="artist">Audhit Audhit Audhit Audhit Audhit Audhit Audhit</div>
</div><br>
<div class="artist-container">
    <div class="artist">Lorem</div>
</div><br>

Upvotes: 1

&#193;lvaro Reneses
&#193;lvaro Reneses

Reputation: 701

I think the CSS media queries approach is so much better for making a web responsive, than calculating everything with Javascript all the time.

For example, you can think about three sizes:

  • Phone (lets say, 400px width)
  • Tablet (lets say, 800px width)
  • Computer (lets say, >800px width)

One way of achieving this, using the desktop first approach, would be:

/* DESKTOP */
body {
  font-size: 1em;
  ...
}
...
/* General rules for desktop
...

/* TABLET */
@media screen and (max-width:800px and min-width:400px) {
   /* Overwrite the rules you want to change */
   body {
      font-size: .75em;
   }
   ...
}

/* PHONE */
@media screen and (max-width:400px) {
   /* Overwrite the rules you want to change */
   body {
      font-size: .75em;
   }
   #div1 {
      height: 20%;
   }
   ...
}

In addition to this, don't forget to work with relative units (em, vw, vh, rem...) and percentages.

Here you have a really good link about responsive design.

Upvotes: 1

Related Questions