www.webdeveloper.com
Results 1 to 4 of 4

Thread: Modernizr.load()/yepnope : Error when loading JQuery before JS plugins

  1. #1
    Join Date
    May 2014
    Posts
    3

    Modernizr.load()/yepnope : Error when loading JQuery before JS plugins

    Hi,

    I'm using Modernizr to load all of my JS and CSS scripts in a specific order with callbacks functions to manage the dependences.
    But I meet a problem with the loading of Bootstrap witch need JQuery.

    I have 3 levels of loading :

    1) JQuery lib
    2) scripts using JQuery but not needing that the document is loaded
    3) scripts using JQuery AND needing document loaded

    I get the following error in Firbug : TypeError: l is not a function bootstrap.min.js (ligne 4)

    It seems that JQuery does not have time to load before Bootstrap.

    Does anybody have an idea please? (to resolve this problem or to purpose another solution to make the same thing) Thanks for your help.

    The code in head :

    Code:
    <script type="text/javascript" src="js/modernizr-2.6.1.min.js"></script>
    
    <script type="text/javascript">
    
        Modernizr.load([{
            load: 'http://code.jquery.com/jquery-1.10.2.min.js',
            complete: function(){
    
                Modernizr.load([
                    //scripts using JQuery but not needing that the document is loaded
                    'bootstrap/js/bootstrap.min.js',
                    'js/plugins/respond/respond.min.js',
                    'js/plugins/jquery-ui/jquery-ui-1.8.23.custom.min.js',
                    'js/plugins/easing/jquery.easing.1.3.js',
                    'js/plugins/parallax/js/jquery.stellar.min.js'
                ]);
    
                $(function(){
                    //scripts using JQuery AND needing document loaded
                    Modernizr.load([
                        {
                            test : Modernizr.touch,
                            yep : 'js/plugins/toucheeffect/toucheffects.js'
                        },{
                            test : $('.camera_wrap').length,
                            yep : {
                                'js':'js/plugins/camera/camera.min.js',
                                'css':'js/plugins/camera/css/camera.css'
                            },
                            complete : {
                                'js': function(){
                                    $('.camera_wrap').camera();
                                    console.log("plugin loaded!");
                                }
                            }
                        }
                    ]);
                });
            }
        }]);
    </script>

  2. #2
    Join Date
    May 2014
    Posts
    3
    alert(jQuery) at the beginning of the first callback function is OK so I don't understand why Bootrstarp don't run correctly...

  3. #3
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    Why are you using modernizr with jQuery and bootstrap?!

    Load toucheffects.js unconditionally. Set mouse and touch events together as recommended here.

  4. #4
    Join Date
    May 2014
    Posts
    3
    Thank you for your response.

    Quote Originally Posted by ShrineDesigns View Post
    Why are you using modernizr with jQuery and bootstrap?!
    Modernizr reduces the load speed of my page by respecting the dependences between the scripts and detects the different screen sizes and browser features.
    Bootstrap makes my website responsive.

    Quote Originally Posted by ShrineDesigns View Post
    Load toucheffects.js unconditionally. Set mouse and touch events together as recommended here.
    Thank you for the link. It was very useful !

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles