ansaurus

Question

Resize all containing elements with javascript utilizing em

Answer 1

+1 A:

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"&gt;
<html>
<head>
    <title>test</title>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"&gt;&lt;/script&gt;
    <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>

Emily 2009-06-29 00:15:23

But is a domino effect not possible? I'd have to use this technique for all the children with every style rule that I need (width, height, font-size, border, etc). I suppose dom traversal with recursion is possible but I was hoping to avoid something like that.

Mike B 2009-06-29 00:24:23

It is affecting the children in my tests (ems and %). Maybe it has something to do with running the jquery in the the firebug console. I will paste the code I used above.

Emily 2009-06-29 00:29:49

Well I feel foolish... When I wrote my code into the page itself instead of the firebug console it worked exactly as I hoped. Thanks for your help Emily and jitter.

Mike B 2009-06-29 00:54:01

Answer 2

A:

The above works just fine for me in Opera, FF and IE6 (can't test others). Using these two calls do grow and shrink the text.

$('#parent').css('font-size', '2em');    // grows
$('#parent').css('font-size', '0.5em'); //  shrinks

Before I call either of those

alert($('#parent').css('fontSize'));      // 16px in Opera,FF,IE6
alert($('.child:first').css('fontSize')); // 80px in Opera&FF, 400px in IE6

After a call to say

$('#parent').css('font-size', '0.5em');   // shrinks
alert($('#parent').css('fontSize'));       // 0.5em in Opera,FF,IE6
alert($('.child:first').css('fontSize')); //  45px Opera, 40 px FF, 200px in IE6

So what browsers (version) and jQuery version are you using?

jitter 2009-06-29 00:33:09

Answer 3

A:

Hi thanks, it's great stuff, I have just switched to em-s, and was strugling to set proper heights for divs in case of font change. thanks to this post I did something like that (ps. I don't really know javascript):

  $(document).ready(function(){
     s=$('#parent').css('font-size');    
     s=(s.substring(0,s.length-2));
     x=s*1; //the only way I know to convert string to number
     height1=document.getElementById('div-a').offsetHeight/x;
     height2=document.getElementById('div-b').offsetHeight/x;
     if (height1>height2) {
        document.getElementById('div-b').style.height=height1+"em";
        //(...)
  }});

2009-07-16 17:16:16

ansaurus

tags:

views:

answers:

Resize all containing elements with javascript utilizing em

related questions