Странные результаты при использовании FitText.js

Выполнение нескольких проблем с использованием FitText.js - Я запускаю сценарий в своем <head> со следующим кодом (я включил все для справки, и план состоит в том, чтобы свести к минимуму это, м закончил с дизайном и планировкой кода)Странные результаты при использовании FitText.js

<script type="text/javascript"> 
      $(document).ready(function() { 

      var $container = $('#thumbnail-array'); 

       $container.imagesLoaded(function() { 
        $container.masonry({ 
         itemSelector: '.video-thumbnail', 
         columnWidth: '.grid-sizer', 
         gutter: '.gutter-sizer', 
         percentPosition: true 
        }); 
       }); 
      }); 

      jQuery(document).ready(function() { 
       jQuery('.mobile-close').click(function(e) { 
        jQuery(this).toggleClass('active'); 
        jQuery('.mobile-nav').toggleClass('active'); 

        e.preventDefault(); 
       }); 
       jQuery('.dropdown').click(function(e) { 
        jQuery(this).toggleClass('active'); 
        jQuery('.mobile-nav').toggleClass('active'); 

        e.preventDefault(); 
       }); 
       $(".fittext1").fitText(1.1); 
       $(".fittext2").fitText(0.75); 
      }); 

      $(document).ready(function() { 
       $('.overlay').hover(function(){ 
        $(this).parent().find('video').get(0).play(); 
       }, function() { 
        var video = $(this).parent().find('video').get(0); 
        video.pause(); 
        video.currentTime = 0; 
       }); 
      }); 

     </script>

Основная достопримечательность есть, вероятно, следующее:

$(".fittext1").fitText(1.1); 
$(".fittext2").fitText(0.75);

Отсюда я применяю его к двум элементам, и которые определены в мой CSS выглядит следующим образом:

h5 { 
    display:inline; 
    font-size: 2em; 
    margin-bottom: 0px; 
    padding-bottom: 0px; 
} 

h6 { 
    display:inline; 
    font-size: 0.75em; 
    letter-spacing: 0.3em; 
    padding-top: 0px; 
    margin-top: 0px; 
    font-weight: 100; 
}

, а затем ссылки в моем HTML следующим образом:

<h5 class="fittext1">Title</h5> 
<hr> 
<h6 class="fittext2">Subtitle</h6>

Теперь я понимаю, что они должны масштабироваться с их родительским элементом - однако что-то происходит, и я не могу разобраться, что это является! Вы можете взглянуть на то, что здесь происходит (наиболее заметно при изменении размера) - http://jameshenry.info/test/test.php

Я пробовал пару разных вещей, но, похоже, не мог заставить весь текст на опрокидывании быть последовательным, пусть самостоятельно увеличивайте или уменьшайте пропорции!

Я изначально предназначался для элементов , используя #ID, но переключился на класс из-за нескольких экземпляров, однако переключение между ними не решило проблему.

Кто-нибудь знает, что может вызвать такое поведение?

источник

2015-10-02 hj8ag

... И причина в том, что FtText.js (как указано в GitHub для проекта) не работает с элементами inline или span - элементом, к которому применяется FitText.js (не обертка или ! контейнер) должен быть либо absolute, block или inline-block

Я решил проблему, изменив мои> теги <h5> и <h6 на дисплее: inline-block;

источник

2015-10-05 17:22:14 hj8ag

Странные результаты при использовании FitText.js

ответ

Смежные вопросы