Why my text is not responsive?

Question

I use responsiveslides library to have responsive scrolling image. So, I wish to utilise the same library to also obtain responsive scrolling text and I wrote this JS code to calculate font height, but it doesn't works:

function responsiveText()
{
    $('#footer').css('font-size', $('#footer').css('height'));
}

You can see my failed result in action here

Answer 1

There are some things you may want to think about:

1) Your code that's setting the font-size will only be called once

2) You're setting the font-size for the hole container, why not just do it in css?

<style>
.rslides li {
    font-size: 30px;
}
</style>

3) But you want it to be responsive, right? Then, you'll have to take the number of characters and width of the container into account, multiply that with something, set that value to the font-size of the text-element, and do this for every text-element you have. Or not exactly, take a look at this code instead:

So something like this:

 function responsiveText() {

    var ratio = 1/2; // character width/height
    var padding = 10;
    var width = $("#newsSlider").outerWidth()-padding*2;
    var height = $("#footer").outerHeight()-padding*2;

    $("#newsSlider").children().each(function () {
        var li = $(this); // one text element/list item
        var len = li.text().length; // number of characters
        var fw = width/len; // maximal character width = width/number of characters
        var fh = height; // maximal character height

        // We want fw/fh be so close to ratio as possible by changeing nr of lines
        var nrofl = 1;
        for (; nrofl<5; nrofl++) {
            var nnrofl = nrofl+1;
            var newRatio = (width/(len/nnrofl)) / (height/nnrofl);
            if (Math.abs(newRatio-ratio)<Math.abs(fw/fh-ratio)) {
                nrofl = nnrofl;
                fw = (width/(len/nrofl));
                fh = (height/nrofl);
            } else break;
        }

        // One thing's missing if you want a perfect result:
        // Go through the text and insert new lines to make sure
        // there will be nrofl lines. Not going to do it here though.

        // Fontsize is min of fw/ratio and fh
        var fs = Math.min(fw/ratio, fh);

        // For testing only
        //console.log(Math.round(fs), ratio, Math.round(fw), fh, width, height, nrofl, len);

        // Do not forget to round it up to integer value
        li.css('font-size', Math.round(fs)+'px');
    });

}

$(function() {

    // image slideshow
    $("#imageSlider").responsiveSlides({
        timeout: 20*1000,
    });

    // news slideshow
    $("#newsSlider").responsiveSlides({
        timeout: 5*1000,
    });


    // resposive news 
    $(window).resize(function(){
        responsiveText();   
    });
    responsiveText();

});

Try to replace your old code with this one. (Edit) Now it should work pretty well! Tested it for a while, try resizing your browser! Only thing left (not critical though) is to make sure there'll be the right amount of lines. Good luck!