T
So if anyone's interested. He handled most of his mistakes.jQuery.noise = 15; //погрешность ресайза в пикс
jQuery.step = 100; //шаг размера шрифта в пикс
jQuery.startFontSize = 200; //стартовый размер шрифта
jQuery.currentFontSize = 200; //текущий размер шрифта
jQuery.stepper = 1; //множитель
jQuery.stopper = false; //стоппер
function changeSize(he1, block) { //he1 - необходимая высота //block - div с текстом
//если мы находимся в пределах допустимой погрешности, то все ок, завершаем работу или если поступила команда стопера
if(he1 - jQuery.noise < block.height() && block.height() < he1 + jQuery.noise || jQuery.stopper == true) {
block.css('line-height', jQuery.currentFontSize + (jQuery.currentFontSize/10) + 'px'); //высота строки (настройте под себя)
var padding = (he1 - block.height())/2 + "px"; // т.к. у нас есть погрешность, остатки я выравниваю за счет отступов
block.css('padding-top', padding);
block.css('padding-bottom', padding);
//тут и была моя первая ошибка. Я не обнулял счетчики =))
jQuery.stopper = false;
jQuery.stepCounter = 0;
jQuery.stepper = 1;
return 1;
}
//если высота блока больше чем необходимая, уменьшаем
else if(block.height() > he1) {
//уменьшаем размер шрифта на шаг / множитель
jQuery.currentFontSize -= Math.ceil(jQuery.step/jQuery.stepper);
block.css("font-size", jQuery.currentFontSize + "px");
return changeSizeDown(he1, block); //рекурсия
}
//если высота блока меньше чем необходимая, увеличиваем (и увеличиваем вдвое stepper)
else if(block.height() < he1) {
//тут ограничитель множителя. Методом проб и ошибок выяснилось, что для моих нужд множитель более 50 - излишне. Когда множитель больше 50 мы уже очень близки к нужному размеру, потому тормозим скрипт. Иначе умножаем вдвое
if(jQuery.stepper < 50)
jQuery.stepper = jQuery.stepper*2;
else{
jQuery.stopper = true;
return changeSizeDown(he1, block);
}
jQuery.currentFontSize += Math.ceil(jQuery.step/jQuery.stepper);
block.css("font-size", jQuery.currentFontSize + "px");
return changeSizeDown(he1, block); //рекурсия
} }
Before the crisis strikes, it is necessary to: Apply the initial size of the block. The height of the line is normal. line-height:normalTake it away. paddingMy example is://при загрузке страницы
$(window).load(function() {
updateAdvice();
});
//при ресайзе страницы. Выполняем только, когда ресайз закончил. За это отвечает функция debouncer
function debouncer(func, timeout) {
var timeoutID, timeout = timeout || 200;
return function() {
var scope = this,
args = arguments;
clearTimeout(timeoutID);
timeoutID = setTimeout(function() {
func.apply(scope, Array.prototype.slice.call(args));
}, timeout);
}
}
$(window).resize(debouncer(function(e) {
adapt();
}));
//Переменные
jQuery.noise = 15; //погрешность ресайза в пикс
jQuery.step = 100; //шаг
jQuery.startFontSize = 200; //стартовый размер шрифта
jQuery.currentFontSize = 200; //текущий размер шрифта
jQuery.stepper = 1; //множитель
jQuery.lastAd = 0;
jQuery.stopper = false;
//ТЕКСТ (для примера взят с http://fucking-great-advice.ru/ )
jQuery.adv = ['Не опускай руки!', 'Не делай плохого!', 'Упал — отряхнись!', 'Соблюдай режим!', 'Группируй задачи!', 'Не срывай сроки!', 'Мысли масштабнее!', 'Учись готовить!', 'Признавай свои ошибки!'];
//Замена текста
function updateAdvice() {
$('.text').text(jQuery.adv[rand(jQuery.adv.length)]);
adapt();
}
//ФУНКЦИЯ РАНДОМНОГО ЧИСЛА//
function rand(max) {
var rand = jQuery.lastAd;
while (rand == jQuery.lastAd) {
rand = Math.random() * (max - 1);
rand = Math.round(rand);
}
jQuery.lastAd = rand;
return rand;
}
//АДАПТАЦИЯ
function adapt() {
//Обнуляем все
$('.text').css('opacity', '0');
$('.text').css('padding-top', '0px');
$('.text').css('padding-bottom', '0px');
$('.text').css("font-size", jQuery.startFontSize + "px");
$('.text').css('line-height', 'normal');
jQuery.currentFontSize = jQuery.startFontSize;
//стартуем
changeSizeDown($('.text-wrap').height(), $('.text'))
}
function changeSizeDown(he1, block) {
jQuery.stepCounter++; //счетчик действий
if (jQuery.stepCounter > 50) {
updateAdvice();
return 0;
};
//если мы находимся в пределах допустимой погрешности, то все ок, завершаем работу
if (he1 - jQuery.noise < block.height() && block.height() < he1 + jQuery.noise || jQuery.stopper == true) {
block.css('line-height', jQuery.currentFontSize + (jQuery.currentFontSize / 10) + 'px');
var padding = (he1 - block.height()) / 2 + "px";
block.css('padding-top', padding);
block.css('padding-bottom', padding);
block.animate({
opacity: 1,
}, 300);
jQuery.stopper = false;
jQuery.stepCounter = 0;
jQuery.stepper = 1;
return 1;
}
//если высота блока больше чем необходимая, уменьшаем
else if (block.height() > he1) {
jQuery.currentFontSize -= Math.ceil(jQuery.step / jQuery.stepper);
block.css("font-size", jQuery.currentFontSize + "px");
return changeSizeDown(he1, block);
}
//если высота блока меньше чем необходимая, увеличиваем (и увеличиваем вдвое stepper)
else if (block.height() < he1) {
if (jQuery.stepper < 50)
jQuery.stepper = jQuery.stepper * 2;
else {
jQuery.stopper = true;
return changeSizeDown(he1, block);
}
jQuery.currentFontSize += Math.ceil(jQuery.step / jQuery.stepper);
block.css("font-size", jQuery.currentFontSize + "px");
return changeSizeDown(he1, block);
}
}
//КНОПКА//
$('.button').on('click', function() {
updateAdvice();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='text-wrap' style="width: 400px; height: 300px; background-color: #d8d8d8;">
<div class='text'>
sdfsdfef
</div>
</div>
<div class='button'>Поменять</div>
