I want to reduce the text font-size till text has some height (in the example 54px). But the script does this only 1 time (read height only by load and not anymore). I can not loop this.
https://jsfiddle.net/Nata_Hamster/zpvhow68/
$(document).ready(function() {
let fact1 = $('div');
let fact1_h = fact1.height();
let fact_fs = parseInt($('div').css('font-size'));
alert(fact_fs);
if (fact1_h > 54) {
fact_fs -= 1;
fact1.css({
'font-size': fact_fs + 'px'
});
alert(fact_fs);
fact_fs = parseInt($('div').css('font-size'));
}
});div {
width: 200px;
padding-left: 20px;
padding-right: 20px;
font-size: 20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div>JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. </div>You do need to loop but you also need to give the interface time to adjust
$(function() {
const fact1 = $('div');
const tID = setInterval(function() {
let fact1_h = fact1.height();
let fact_fs = parseInt($('div').css('font-size'));
if (fact1_h <= 54) {
clearInterval(tID)
return
}
fact_fs -= 1;
fact1.css({
'font-size': fact_fs + 'px'
});
}, 10);
})div {
width: 200px;
padding-left: 20px;
padding-right: 20px;
font-size: 20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div>JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. </div>You may use while statement that will execute the given statement as long as the given condition is true.
$(document).ready(function() {
let fact1 = $('div');
let fact1_h = fact1.height();
let fact_fs = parseInt($('div').css('font-size'));
console.log('Initial font size', fact_fs);
while (fact1_h > 54) {
fact_fs -= 1;
fact1.css({
'font-size': fact_fs + 'px'
});
fact1_h = fact1.height();
console.log('New Font - ', fact_fs);
console.log('New Height - ', fact1_h);
}
});div {
width: 200px;
padding-left: 20px;
padding-right: 20px;
font-size: 20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div>JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. </div>