Can changes in an element's width modify another element's font-size using jQuery?

Question

Hi folks,

I have a container whose width is fluid (depending on the size of the browser window), though it has a max-width of 950px. The container has a nested header h1 element which has some text as a strapline.

I want to somehow make this header text get smaller as the container gets narrower (using jQuery).

I think it'll work something like this:

• Get current container width
• Divide current container width by 950 to get a modifier number (e.g. will be something like 0.78)
• Get current CSS font size of h1 (convert from string to num?)
• Multiply this by the modifier number
• Pass the result back to the CSS font size of h1

I'd like it to work dynamically during the browser resize if possible.

Any ideas?

Cheers, James

Answer 1

The method you've outlined should work just fine. The conversion from string to number should be handled using parseFloat, since the font size is returned in (IIRC) em, e.g.:

var hText = $("#hText").css("font-size");
var textSize = parseFloat(hText);

Yes, it is possible to do this during the browser resize, using

(window).bind('resize', function () {
    // Your implementation
});

Answer 2

$(window).resize(function(){
    var widthRatio =  $('#container').width()/950; 
    $('#header1').css('font-size', 24 * widthRatio);
    });

• 'container' is the id of the container
• 'header1' is the id of the inner h1 element
• 24 is the default font size for H1 elements