0

I believe my question is unique because I am using a counter whose width can constantly increase, as opposed to the container width changing, which is what seems to usually be asked.

My site is http://script-timer.com/, and I am trying to decrease the font of the timer when it overflows its container div. Here is the javascript I am currently working on to accomplish this: 

$(document).ready(function() {
    while( $('#scriptTime').width() > $('#timer-container').width() ) {
        $('#scriptTime').css('font-size', (parseInt($('#scriptTime').css('font-size')) - 1) + "rem" );
    } 
});

This looks like right to me, but being as I am very much still learning, I am most likely missing something simple. Is there a better way to accomplish this? Thank you for your help!

bclementson
  • 3
  • 3
  • 1
    You can create a responsive font size by using v units. Try doing `font-size:2vh;` or something like that. Resize the window and notice as the size changes. – www139 Nov 25 '15 at 04:52
  • 6
    Possible duplicate of [Font scaling based on width of container](http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container) – santerref Nov 25 '15 at 04:53
  • I have tried playing around with Viewport Percentage Units, but it does not seem to scale if the font itself is resizing - such as when the timer interval increases to over a minute. At that point, the font is just overflowing the container. – bclementson Nov 25 '15 at 05:13
  • Consider using css !! Have a look at this article - https://css-tricks.com/viewport-sized-typography/ – Jinu Kurian Nov 25 '15 at 05:32
  • I will look over the articles on viewport sized typography again, thanks! – bclementson Nov 25 '15 at 05:35

1 Answers1

0

Here is a link to the plugin: https://plugins.jquery.com/textfill/ And a link to the source: http://jquery-textfill.github.io/

or

add this in css method

overflow: auto;

Durgaprasad Gudi
  • 16
  • 3