CODEWITHSUNDEEP
jquerycsscountcharacterstring-length
Juárez
Juárez

Reputation: 141

Change Font Size dynamically based on Character count

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');
        }
    });
});

Upvotes: 0

Views: 12945

Answers (4)

Yaron Bit
Yaron Bit

Reputation: 56

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');
        }
});

Upvotes: 4

Nimmagadda Gowtham
Nimmagadda Gowtham

Reputation: 270

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');

Upvotes: 0

Ju&#225;rez
Ju&#225;rez

Reputation: 141

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.

Upvotes: 0

hari
hari

Reputation: 1963

try this,Demo use html instead of using val 

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

Upvotes: 0

Related Questions