Menu
I have a situation where I think using the 'em' metric would be perfect. I have a container with several elements inside. These elements all use em for dimensions, font-size, borders.. everything. I want to be able to grow or shrink all of these elements dynamically by simply changing the em value of the parent container.
At least that's my theory. I tried to implement something like this using jquery but it appears that everything is converted to px and changing the em has no effect on the child elements.
Here is an example:
<div id="parent">
<div class="child">Text</div>
<div class="child">Text</div>
<div class="child">Text</div>
</div>
<style>
#parent { font-size: 1em; }
.child { width: 10em; height: 10em; font-size: 5em; }
</style>
With javascript (jquery for this example), I would like to be able to do something like this:
$('#parent').css('font-size', '2em') // This would make everything grow
$('#parent').css('font-size', '.5em') // This would make everything shrink
This line does not produce an error. However, after inspecting further it appears that everything has been converted to px value. Thus, parent em values lose their power. Here is what I mean:
After the page renders, I run these commands through the firebug console
$('#parent').css('font-size'); // Returns 100px (for example's sake)
$('.child:first').css('font-size'); // Returns 50px
$('#parent').css('font-size', '2em'); // This should affect all children
$('#parent').css('font-size'); // Returns 20px
$('.child:first').css('font-size'); // STILL Returns 50px
As you can see, all the children remain at 50px.
Am I going about this the right way? What am I missing? Is this really a lot harder than I think it is? In a sense, I'm trying to duplicate the effect that browser-zoom has.
Thanks for any help.
268
You try resizing the text using percentage.
$('#parent').css('font-size', '200%')// This would make everything grow
$('#parent').css('font-size', '50%') // This would make everything shrink
edit after comment - using FF2.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<style type="text/css">
body {font-size:10px;}
#parent { font-size: 1em; }
.child { width: 10em; height: 10em; font-size: 5em; }
</style>
<script type="text/javascript">
$(document).ready(function(){
alert($('#parent').css('font-size')); // Returns 10px (for example's sake)
alert($('.child:first').css('font-size')); // Returns 50px
$('#parent').css('font-size', '200%'); // or you can use 2em here
alert($('#parent').css('font-size')); // Returns 20px
alert($('.child:first').css('font-size')); // Returns 100px
});
</script>
</head>
<body>
<div id="parent">
<div class="child">Text</div>
<div class="child">Text</div>
<div class="child">Text</div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
