FlowType.JS无法正常工作

Question

I'm attempting to use FlowType.JS on this site .

I have the following in the head:

<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>   

However, the #content P, H1, and the #menu A, p.bookings, div.opening-hours do not scale downward when I make the viewport smaller.

Does anyone have an idea why? Thanks.

Answer 1

Please enter this code, and make sure flowtype.js is called before the code.

    <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>

Also, please note the following lines mentioned on the plugin website.

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; 

If you have further issue, then please mention the link to your jsfiddle code.

Answer 2

It is because you are including 2 jquery versions jquery-2.1 and jquery 1.6.4 and ther is confliction in both versions. You can see it in console.

Use jquery.noConflict() for no confliction