CODEWITHSUNDEEP
jqueryfontsresize
dennisterrey
dennisterrey

Reputation: 183

Set Font Size Based On Word Count Jquery

I have multiple articles, but they all need to fit in the same space. Characters are limited to 140. What I'm looking to do is resize the font size based on characters in my paragraph. So if the paragraph has less characters, I would like the font size to get bigger & vise versa.

My code below doesn't seem to be working and was wondering if someone would be able to help me?

What's happening at the moment, it seems to be taking the last else, because the font size from all paragraphs are 8em :(

Very much appreciate any help & thanks in advance!

Here is the code:

    $(function(){
    var $quote = $(".question p");
    var $numWords = $quote.text().split("").length;     
    if (($numWords >= 1) && ($numWords < 20)) {
        $quote.css("font-size", "2.2em");
    }
    else if (($numWords >= 20) && ($numWords < 60)) {
        $quote.css("font-size", "1.8em");
    }
    else if (($numWords >= 60) && ($numWords < 100)) {
        $quote.css("font-size", "1.2em");
    }
    else if (($numWords >= 100) && ($numWords < 140)) {
        $quote.css("font-size", "0.9em");
    }
    else {
        $quote.css("font-size", "0.8em");
    }           
});

Upvotes: 4

Views: 2206

Answers (2)

ChrisC
ChrisC

Reputation: 2469

Your problem is you're not treating each paragraph individually: see http://jsfiddle.net/wkEMK/1/

$(function(){
    $(".question p").each(function () {
        var numChars = $(this).text().length;     
        if ((numChars >= 1) && (numChars < 20)) {
            $(this).css("font-size", "2.2em");
        }
        else if ((numChars >= 20) && (numChars < 60)) {
            $(this).css("font-size", "1.8em");
        }
        else if ((numChars >= 60) && (numChars < 100)) {
            $(this).css("font-size", "1.2em");
        }
        else if ((numChars >= 100) && (numChars < 140)) {
            $(this).css("font-size", "0.9em");
        }
        else {
            $(this).css("font-size", "0.8em");
        }           
    });
});

Your original code was getting the character count for ALL paragraphs that matched '.question p'. e.g. If you had two paragraphs, one with ten characters, the other with twenty characters, your JS would run once with a total of thirty, rather than processing each paragraph in turn.

Upvotes: 5

wirey00
wirey00

Reputation: 33661

Do it like this using the .css function.. This way it will change each p elements font-size according to the number of chars inside each p element

$(function(){         
    $(".question p").css('font-size',function(){
        var $numWords = $(this).text().length; // get length of text for current p element
        if (($numWords >= 1) && ($numWords < 20)) {
            return "2.2em";
        }
        else if (($numWords >= 20) && ($numWords < 60)) {
            return "1.8em";
        }
        else if (($numWords >= 60) && ($numWords < 100)) {
            return "1.2em";
        }
        else if (($numWords >= 100) && ($numWords < 140)) {
            return "0.9em";
        }
        else {
            return "0.8em";
        }           
    });    
});

FIDDLE

Upvotes: 3

Related Questions