CODEWITHSUNDEEP
javascriptjquery
Justin
Justin

Reputation: 13

I have two javascript files that do not work together

I have looked at many other answers to this question, but cannot find one that works for my situation. I have two .js files that I want to use, but only one of them works. I figure there must be some sort of conflict, but I can't figure out what it is.

This is my head section.

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap.min.js"></script>
    <script type="text/javascript" src="bower_components/FlowType.js/flowtype.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
    <link rel="stylesheet" href="bootstrap.min.css">
    <link href="main.css" rel="stylesheet">
</head>

Then I call these scripts before the closing body tag.

<script type="text/javascript">
    $j = jQuery.noConflict();
    $j(document).ready(function() {
        $j("body").flowtype({
            minimum: 300,
            minFont: 12,
            maxFont: 40,
            fontRatio: 30
        });
        $j("nav").flowtype({
            minFont:8,
            maxFont: 14,
            fontRatio: 23
        });
        $j(".jumbotron").flowtype({
            fontRatio:100
        });
        $j(".established h5").flowtype({
            minFont: 16,
            maxFont: 45,
            fontRatio: 16
        });
        $j("h1").flowtype({
            minFont: 16,
            maxFont: 45,
            fontRatio: 12
        });
        $j("h2").flowtype({
            minFont:16,
            maxFont:40,
            fontRatio:15
        });
        $j("h3").flowtype({
            minFont:12,
            maxFont:35,
            fontRatio:20
        });
        $j("h4").flowtype({
            minFont:12,
            maxFont:35,
            fontRatio:20
        });
        $j("h5").flowtype({
            minFont:12,
            maxFont:20,
            fontRatio:20
        });
        $j("h6").flowtype({
            minFont:12,
            maxFont:20,
            fontRatio:20
        });
        $j("p").flowtype({
            minFont: 8,
            maxFont: 14,
            fontRatio: 20
        });
        $j(".overview").flowtype({
            minFont:12,
            maxFont:20,
            fontRatio:30
        });
         $j(".slideshow").flowtype({
            minFont:12,
            maxFont:20,
            fontRatio:30
        });
        $j(".slide img").flowtype({
            minFont:12,
            maxFont:20,
            fontRatio:30
        });
        $j(".slider-nav").flowtype({
            minFont:12,
            maxFont:20,
            fontRatio:30
        });
        $j(".info").flowtype({
            minFont:12,
            maxFont:20,
            fontRatio:30
        });
        $j(".copyright").flowtype({
            minFont:12,
            maxFont:20,
            fontRatio:30
        });
    });
</script>
<script type="text/javascript" src="app.js"></script>
</body>

The flowtype.js file looks like this:

(function($){
       $.fn.flowtype = function(options) {
         .....................
         .....................
       };
 } (jQuery));

And the app.js file looks like this:

var main = function(){
        ..............................
        ................................
        ..............................
}
$(document).ready(main);

I think I have dealt with the jQuery.noConflict() problem that some people have. And I am only using one jquery file. So what am I doing wrong? Hopefully it is something stupid that I just didn't catch.

All help is appreciated!

Upvotes: 0

Views: 307

Answers (1)

Quentin
Quentin

Reputation: 943142

So what am I doing wrong?

You are using jQuery.noConflict(). It un-defines $, so $(document).ready(main); won't work.

Upvotes: 1

Related Questions