Тип потока.JS не работает

#javascript #jquery #plugins #jquery-plugins

#javascript #jquery #Плагины #jquery-плагины

Вопрос:

Я пытаюсь использовать FlowType.JS на этом сайте.

У меня в голове следующее:

 <script type='text/javascript' src='http://www.bibandtucker.net.au/test/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
<script type="text/javascript" src="http://www.bibandtucker.net.au/test/wp-content/themes/blueduck3/js/flowtype.js"></script>
<script type="text/javascript">
  $('body').flowtype({
    minimum   : 500,
    maximum   : 1200,
    minFont   : 12,
    maxFont   : 40,
    fontRatio : 30
  });
</script>

Однако #content P, H1 и #menu A, p.bookings, div.часы работы не уменьшаются, когда я уменьшаю область просмотра.

У кого-нибудь есть идеи, почему? Спасибо.

1. пожалуйста, поделитесь jsfiddle с вашим кодом.

2. Попробуйте внутри document.ready

3. @Sudharsan: Я попробовал внутри document.ready, но проблема осталась. Я думаю, что проблема вызвана наличием двух версий jQuery, но я не могу это решить — смотрите Мой комментарий к ответу Рохана Кумара ниже.

Ответ №1:

Пожалуйста, введите этот код и убедитесь, что flowtype.js вызывается перед кодом.

     <script type="text/javascript"> 
        $j = jQuery.noConflict();
        $j(document).ready(function() {
            /*$j('body').flowtype({
                minimum   : 500,
                maximum   : 1200,
                minFont   : 12,
                maxFont   : 20
              });
              */
            $j("body").flowtype({
                minFont: 16,
                maxFont: 40,
                fontRatio: 65
            });
            $j("#heading").flowtype({
                fontRatio: 36
            });
            $j("#content p").flowtype({
                minFont: 12,
                maxFont : 22,
                fontRatio: 20
            });
            $j("#menu a").flowtype({
                minFont: 16,
                fontRatio: 5                    
            });
            $j("p.bookings").flowtype({
                minFont: 11,
                fontRatio: 30
            });
            $j("div.opening-hours").flowtype({
                minFont: 18,
                fontRatio: 30
            });
        });
    </script>

Также, пожалуйста, обратите внимание на следующие строки, упомянутые на веб-сайте плагина.

 Line-height

 In v1.0 of FlowType, we made the plugin set a specific line-height in pixels. We received many statements that setting a specific line-height is very dangerous. So, what did we do? We removed support for line-height in v1.1.

What do I do now? It's quite simple: use unitless line-height in your CSS. It will make automatically make changes based on whatever the font-size. Here's an example of what we suggest for line-height:
fontRatio : 30;

Если у вас возникнут дополнительные проблемы, пожалуйста, укажите ссылку на ваш код jsfiddle.

1. Спасибо Devang. У меня в голове не укладывалось, что мне пришлось вызывать flowtype для рассматриваемых элементов.

2. Да, это не проблема. И да, высота строки является основной проблемой для разных браузеров, поэтому они намеренно удалили параметр высоты строки из последней версии flowtype.js

3. Привет. Я не могу уменьшить масштаб навигационного меню слева при уменьшении ширины порта просмотра. У меня есть $j("#nav ul li a").flowtype({ minFont: 10, maxFont: 18; fontRatio: 30 });

4. Привет, не могли бы вы, пожалуйста, предоставить мне скриншот веб-сайта, которого вы хотите добиться при уменьшении ширины порта просмотра. Меня смущает то, чего вы хотите достичь.

5. Привет. Конечно. Здесь .

Ответ №2:

Это потому, что вы включаете 2 версии jquery jquery-2.1 и jquery 1.6.4 , и в обеих версиях есть конфликт. Вы можете увидеть это в консоли.

Используйте jquery.noConflict() без конфликтов

1. Спасибо за вашу помощь, Рохан. Я добавил $.noConflict(); раньше $('body').flowtype({ , и проблема остается. Это правильное место для его размещения?

2. Это должно произойти сразу после добавления версии jquery.

3. Я в замешательстве, Рохан. У меня нет большого контроля над тем, где плагины WordPress размещают свои вызовы для включения jquery. Не могли бы вы взглянуть на мой сайт , пожалуйста?