Change Font Size dynamically based on Character count

Question

I'm trying to adjust title sizes depending on character length. (wordpress)

This is what I have so far. It doesn't return any error but it doesn't work.

jQuery(function ($) {
    $(window).load(function () {
        var textLength = $('.autotitle').val().length;
        if (textLength < 20) {
            // Do noting 
        } else if (textLength > 20) {
            $('.autotitle').css('font-size', '16px');
        }
    });
});

why do you have if condition if you do nothing .. put else condition directly. — Bhushan Kawadkar, Jul 14 '14 at 12:38
What kind of html element is `.autotitle` ? If it's not `input` try `.html()` instead of `.val()` but note that it may include inner tags and whitespaces. — Viktor Bahtev, Jul 14 '14 at 12:39
.autotitle refers to a class. I changed it into this. Now it changes every .autotitle class div without counting characters — Juárez, Jul 14 '14 at 12:51
`code`jQuery(function ($) { $(window).load(function() { var textLength = $(".autotitle").val().length; if(textLength < 20) { $(".autotitle").css('font-size', '12px'); } }); }); `code` — Juárez, Jul 14 '14 at 12:51
actually, it counts and works, but it applies css to all the elements with that class. How can I apply it only to the ones that fit into the count? — Juárez, Jul 14 '14 at 12:55

score 4 · Answer 1 · answered Apr 08 '15 at 09:43

Many times one would like to decrease font size (make it smaller) when text is long based on letter count (text might have been entered through some CMS or translated text)

http://jsfiddle.net/jfbrLjt2/

 $('.text').each(function(){
     var el= $(this);
       var textLength = el.html().length;
        if (textLength > 20) {
            el.css('font-size', '0.8em');
        }
});

score 0 · Answer 2 · answered Jul 14 '14 at 12:49

0

try this,Demo use html instead of using val

       var textLength = $('.autotitle').html().length;

answered Jul 14 '14 at 12:49

hari

1,874
1
16
10

both .val and .html work now, but it changes all the .autotitle elements instead of only the ones that fit into the count – Juárez Jul 14 '14 at 13:04
use this , `$(".autotitle:first").html()` – hari Jul 14 '14 at 13:34

Juárez · Answer 3 · 2014-07-14T17:31:50.053

0

solved it with a php function

function trim_title() {
$title = get_the_title();
$limit = "14";

if(strlen($title) <= $limit) {
echo $title;
} else {
echo '<span class="longtitle">'; echo $title; echo '</span>';
}
}

thanks to everyone.

edited Jul 14 '14 at 17:31

answered Jul 14 '14 at 17:09

Juárez

121
1
1
10

score 0 · Answer 4 · answered Dec 04 '14 at 10:10

0

If u use .autotitle then changes will be applied to every element where u use .autotitle as class attribute ...

Instead that u can use id attribute of particular element to apply changes to only that element

Ex :

$('#id').css('font-size','16px');

answered Dec 04 '14 at 10:10

Nimmagadda Gowtham

270
4
19

Change Font Size dynamically based on Character count

4 Answers4

Linked