CODEWITHSUNDEEP
jqueryhtmlcss
gruber
gruber

Reputation: 29789

change font size based on original size

How can I do functionality that for example i have input in which I type in value from 1 to 10 and if value is set to 1 all font-size is original and if 10 then font-size for each element changes to 10 * original size ?

please notice that there can me thousands of elements (words) on the site.

performance is crucial

Upvotes: 1

Views: 1705

Answers (4)

damo_inc
damo_inc

Reputation: 653

Here's my fiddle:http://jsfiddle.net/digitalpunch/A6V6e/4/

Basically, select all required elements first, so that you only traverse DOM once and then have a keyup event on your input text box. Tested in Chrome. Works pretty fast - I used lots of text in the fiddle.

Good luck, Damo

[EDIT:] Due to public demand here is the code from the fiddle:

Size: <input type="text" id="size_var"></input>
<p>Lorem ipsum dolor sit amet, consectetur adipi</p>

$(function() {
    var $p = $('p');
    var origSize = $p.css('font-size');
    origSize = origSize.substr(0, origSize.length - 2);                  
    $('#size_var').keyup(function() {
        var multiplier = $(this).val();
        var size = origSize;
        size *= multiplier;
        $p.css({
            'font-size': size + 'px'
        });
    });
});​

[EDIT 2:]

Instead of selecting the p, you can select body or even html tags and change font-size on that. This will cascade down (inheritance) to all children. Just make sure no other children elements override font-size. This way you don't have to iterate across many elements.

Upvotes: 0

mekwall
mekwall

Reputation: 28974

I built a small script for you that should do what you ask. Performance shouldn't really be a problem unless you have hundreds of different elements that need to have their font-size changed. How many words that are inside these elements doesn't really matter though.

Here's the script:

// Store elements that should change font size
var $changeElements = $(".change-font-size");
// Hook into the keyup event of your input
$("input").keyup(function(){
    // Let's get the multiplier
    var multiplier = parseFloat($(this).val(), 10);
    // Loop through elements
    $changeElements.each(function(){
        var $this = $(this);
        // Get saved font size from dataset
        var fontSize = $this.data("font-size");
        if (!fontSize) {
            // Get original font size from css and save it to dataset
            // parseInt automagically removes "px"
            fontSize = parseInt($this.css("fontSize"), 10);
            $this.data("font-size", fontSize);
        }
        // Calculate and set the new font size
        $this.css("fontSize", fontSize * multiplier);
    });
});​

See test case on jsFiddle

Upvotes: 0

Kedume
Kedume

Reputation: 335

You must create a rutine that redefine the size depending on the value of the input, it should be like this:

$(document).ready(function(){
  // Increase Font Size
  $("#increaseFont").change(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*$("#increaseFont").val();
    $('html').css('font-size', newFontSize);
    return false;
  });
});

Upvotes: 0

Quentin
Quentin

Reputation: 944429

document.body.style.fontSize = document.getElementById('myInput').value + 'em';

You will need to use relative font sizes throughout the page for this to work.

You should also add some error checking on the value before using it in your CSS.

Upvotes: 1

Related Questions