CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Marcin Doliwa
Marcin Doliwa

Reputation: 3659

Change font size based on container height/width

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/

Upvotes: 2

Views: 2861

Answers (8)

Benneb10
Benneb10

Reputation: 1489

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/

Upvotes: 0

Sarjan Desai
Sarjan Desai

Reputation: 3733

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>

Upvotes: 0

guramidev
guramidev

Reputation: 2238

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/

Upvotes: 0

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

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');
});

Upvotes: 1

Germano Plebani
Germano Plebani

Reputation: 3625

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.

Upvotes: 0

Buzinas
Buzinas

Reputation: 11725

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>

Upvotes: 0

Omidam81
Omidam81

Reputation: 1917

$(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>

Upvotes: 0

Thariama
Thariama

Reputation: 50832

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();
});

Upvotes: 2

Related Questions