[SOLVED] Make text height follow parent div

[lundahldaniel]

Hi!

I have a little problem. I have a menu ul with a height of 4% of the whole page.
I now want the font-size to follow the height of the ul. It looks like this:

Menu1

The ul changes size according to the browserwindow’s size, but the text is always the same size.

The li.item font-size is set to 100% at the moment.

Best regards,
Daniel Lundahl

[joshuanhibbert]

Perhaps something like this: http://fittextjs.com/

[lundahldaniel]

I’ve tried the fittextjs, but since I’m a rookie at javascript, I didn’t know exactly how to use it, so I didn’t achive what I wanted using it. You know some guide or something like that? I tried to follow the readme at thier github but I didn’t get it to work.

[joshuanhibbert]

Didn’t read your original question properly. If you want to match up the height, try something like this: http://jsfiddle.net/joshnh/8KBe3/

[lundahldaniel]

Does it matter if it is a ul/li that I want to change the font size of? Or does it have to be a div?

Thanks for your help!

[lundahldaniel]

Now, I got it to work, kind of.

The thing is, if I write the code you gave me:

// Cache the div so that the browser doesn’t have to find it every time the window is resized.
var $div = $(‘ul.menu’);

// Run the following when the window is resized, and also trigger it once to begin with.
$(window).resize(function () {
// Get the current height of the div and save it as a variable.
var height = $div.height();
// Set the font-size and line-height of the text within the div according to the current height.
$div.css({
‘font-size’: (height/2) + ‘px’,
‘line-height’: height + ‘px’
})
}).trigger(‘resize’);​

It doesn’t work. If I put the var $div = $(‘ul.menu’); inside the function, it kind of works, but it doesn’t really follow the div, it just resizes and then stay there. And the text OUTSIDE of the ul.menu does also resize.

[lundahldaniel]

To get the result I wanted, I had to use this code:

// Cache the div so that the browser doesn't have to find it every time the window is resized.





// Run the following when the window is resized, and also trigger it once to begin with.

$(window).resize(function () {

var $div = $('li.leaf.item');

// Get the current height of the div and save it as a variable.

var height = $div.height();

// Set the font-size and line-height of the text within the div according to the current height.

$div.css({

'font-size': (height/2) + 'px',

'line-height': height + 'px'

})

}).trigger('resize');​

Thank you joshuanhibbert for the help!

[Author]

Posts