CODEWITHSUNDEEP
jqueryhtmlcss
user2146493
user2146493

Reputation: 23

Scaling Text Size Within Div / iframe

I'm putting together a site, of which one of the pages is a book.

I have a content div, which has the page paper as it's background. Inside of this I have an iframe to pull up the different pages of text. I've got the div's width and height set to a %, however I'm having trouble with the text size. Due to the nature of a book the content has to be very static, but at the same time it has to scale to match the screen size.

I've tried messing around with jQuery, but couldn't pull it off. Would appreciate any tips on either how scale the text with jQuery, or if anyone has an all round better idea of how to display a book.

Upvotes: 2

Views: 334

Answers (3)

Barney
Barney

Reputation: 1848

This jQuery function I had for resizing text in responsive web layout, don't know if it's what you're looking for.

$(document).ready(function(){
function scale_text(body, scaleFactor, maxScale, minScale) {
    var scaleSource = body.width();

    var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:
    if (fontSize > maxScale) fontSize = maxScale;
    if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums

    body.css('font-size', fontSize + '%');
    }

function window_resize() {
    scale_text($('#intromsg'), 1, 500, 150); // example re sizing element
     scale_text($('#introsub'), 5, 150, 100); // example re sizing element

    }


$(window).resize(function () {
    window_resize();
});

//Fire it when the page first loads:
window_resize();

});

Upvotes: 0

soyuka
soyuka

Reputation: 9105

As Brbcoding has commented, you should have a look at the fittext library. I have use it before, and it's awesome, give it a try ;).

Upvotes: 0

Adam K Dean
Adam K Dean

Reputation: 7475

I know this isn't a jQuery solution, but have you thought about using CSS Media queries?

http://css-tricks.com/css-media-queries/

.somediv { font-size: 100%; }

@media all and (max-width: 500px) {
    .somediv { font-size: 80%; }
}

@media all and (max-width: 800px) and (min-width: 501px) {
    .somediv { font-size: 90%; }
}

This would change the font-size depending on the current width, and would have it lower for smaller resolutions. Under 500 px? 80%. Between 800 and 501 px? 90%. Else the standard 100%.

Not sure if this will work with iframes but it's worth a try.

Upvotes: 2

Related Questions