Change font size based on container height/width

Question

I'm trying to do simple jquery function:

<div id="container"><span>This is my text</span></div>

js code:

$(document).ready(function() {
    var fontSize = parseInt($("#container").width()/4)+"px";
    $("#container span").css('font-size', fontSize);
});

css code:

* {
    font-family:Myriad Pro;
}

#container {
    height:100px;
    width:98%;
    background-color:#eeeeee;
    padding:1%;
}

It works when I change resize window and refresh it, but I'd like it to work continously, so when I resize browser window font-size is changing dynamically.

http://jsfiddle.net/8TrTU/1627/

Answer 1

You can add a handler on the window resize event and execute a new function update_fontsize which holds your fontsize magic:

var update_fontsize = function(){
    var fontSize = parseInt($("#container").width()/4)+"px";
    $("#container span").css('font-size', fontSize);
};

$(window).resize(function() {
    update_fontsize();
});

$(document).ready(function() {
    update_fontsize();
});

Answer 2

Keep your code in a named function say - changeSize and call it in document.ready and window.resize as below:

DEMO

function changeSize(){
    var fontSize = parseInt($("#container").width()/4)+"px";
    $("#container span").css('font-size', fontSize);   
}

$(document).ready(function() {
    changeSize();
    $(window).resize(changeSize);
});

or just once in document.ready() as below:

$(document).ready(function() {
    $(window).resize(changeSize).trigger('resize');
});

Answer 3

$(document).ready(function() {
  $(window).resize(function(){
    var fontSize = parseInt($("#container").width()/4)+"px";
    $("#container span").css('font-size', fontSize);
    });
  var fontSize = parseInt($("#container").width()/4)+"px";
    $("#container span").css('font-size', fontSize);
    
});

* {
    font-family:Myriad Pro;
}

#container {
    height:100px;
    width:98%;
    background-color:#eeeeee;
    padding:1%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container"><span>This is my text</span></div>

Answer 4

You can use $(window).resize event:

$(window).resize(function() {
    var fontSize = parseInt($("#container").width()/4)+"px";
    $("#container span").css('font-size', fontSize);
});

* {
    font-family:Myriad Pro;
}

#container {
    height:100px;
    width:98%;
    background-color:#eeeeee;
    padding:1%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container"><span>This is my text</span></div>

Answer 5

function resizeFont() {
    var fontSize = parseInt($("#container").width()/4)+"px";
    $("#container span").css('font-size', fontSize);
}
$(document).ready(function() {
    resizeFont();
});
$( window ).resize(function() {
    resizeFont();
});

Try this code.

Answer 6

Since events on-resize result in a heavy overhead on webpage, i would recommend using +value instead of parseInt() in this case and caching the DOM elements not to select them again and again like in this fiddle: http://jsfiddle.net/8TrTU/1631/

Answer 7

Try using .resize function of jQuery

var resizeFunction = function() {
    var fontSize = parseInt($("#container").width()/4)+"px";
    $("#container span").css('font-size', fontSize);
}
$(document).ready(function() {
   resizeFunction(); 
});

$( window ).resize(function() {
    resizeFunction();
});

* {
    font-family:Myriad Pro;
}

#container {
    height:100px;
    width:98%;
    background-color:#eeeeee;
    padding:1%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"><span>This is my text</span></div>

Answer 8

This can be done using plain CSS, Take a look at this article:

https://css-tricks.com/viewport-sized-typography/

Also, look into using em or rem as font-sizes vs. px.

https://j.eremy.net/confused-about-rem-and-em/