Question

Open to using: jQuery / Javascript / PHP / CSS3 / HTML5

What I’m trying to achieve is dynamically change the font-size of a child element based on its parent div’s width & height. The parent div resizes on hover using jQuery. Now, I want the text inside it to grow & shrink along with it (imagine a zoom-in / zoom-out effect).

A little demonstration: http://jsfiddle.net/Aye4h/

The above example shows font-size changing dynamically on window resize. That shows pretty much what I’m trying to achieve, except that it will not be basing its size from the window, but from its parent div.

… Kind of like the background-size CSS3 property, except with text.

Here is some code that I found online (LINK) that I thought I could use.
The code does it for a span inside a parent #sidebar:

<script type="text/javascript">
$(document).ready(function() {
    var originalFontSize = 12;
    var sectionWidth = $('#sidebar').width();

    $('#sidebar span').each(function(){
        var spanWidth = $(this).width();
        var newFontSize = (sectionWidth/spanWidth) * originalFontSize;
        $(this).css({"font-size" : newFontSize, "line-height" : newFontSize/1.2 + "px"});
    });
});
</script>

While, here is my jQuery code for the parent DIVs :
(They are called .bubbles, and upon hover they expand in size)

$(window).bind("load", function() {

// LOAD BUBBLES
    $('.bubble').animate({
    opacity: 1,
    width: ['toggle', 'swing'],
    height: ['toggle', 'swing'],
    margin: '-75%'
  }, 400, function() {


// NOW, LOAD HOVER EFFECTS
// THIS EXPANDS BUBBLES BY 20% OF THEIR WIDTH & HEIGHT WHEN HOVERED
        $(".bubble").on('scale', function(e, s) {
            var data = $.data(this, 'size'),
                w = data.width,
                h = data.height;
            $(this).stop().animate({
                width: w * s,
                height: h * s,
                marginLeft: data.marginLeft - w * (s-1) / 2,
                marginTop: data.marginTop - h * (s-1) / 2
            });
        }).each(function() {
            var $this = $(this);
            $.data(this, 'size', {
                width: $this.width(),
                height: $this.height(),
                marginLeft: parseInt($this.css('margin-left')),
                marginTop: parseInt($this.css('margin-top'))
            });
        }).hover(function() {
            $(this).trigger('scale', [1.2])
        }, function() {
            $(this).trigger('scale', [1.0])

            });
        });

 });

LIVE DEMO : http://174.127.117.20/~interact/

Now I don’t know how to merge the two. My current code already saves the width & height of the bubble, & expands the bubble 20% from its original height & width upon hover…

Now my question is: how do I include text with this, of a child H1 element (placed inside .bubble)? I want to scale everything inside .bubble to match it when it’s resized.
I have discovered methods above, but I do not know how to implement it with my current code, since they do not exactly apply as is.

All help would be greatly appreciated, thank you so much for your time!

Answer 1

I have achieved this using CSS3 scale:

(… assuming that a.expand contains our content to scale.)

a.expand {
    transition:all .8s; 
    -moz-transition:all .8s; /* FIREFOX */
    -webkit-transition:all .8s; /* SAFARI and CHROME */
    -o-transition:all .8s; /* OPERA */


    color: #fff;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 2em;
    width: 250px; /* 2x WIDTH HERE */
    height: 250px;  /* 2x HEIGHT HERE */

    transform: scale(0.80);
    -webkit-transform: scale(0.80);
    -moz-transform: scale(0.80);
    -o-transform: scale(0.80);
    -ms-transform: scale(0.80);
}

a.expand:hover {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
}

I initially scale the content down to avoid the pixelation/blurry effect when over-scaling an element from their given size. The above code works perfectly.

---

The solution is done entirely with CSS3.