RequireJS: execute jQuery code domReady

Question

My main.js file looks like this:

require.config({    
    paths: {
        "jquery": "3rd_party/jquery-2.0.3.min",
        "bootstrap": "3rd_party/bootstrap.min",
        "handlebars":"3rd_party/handlebars",
        "html5shiv":"3rd_party/html5shiv",
        "modernizr":"3rd_party/modernizr",
        "respond":"3rd_party/respond.min",
        "jquery-ui":"3rd_party/jquery-ui-1.10.3.custom.min",
        'fancybox':'3rd_party/jquery.fancybox.pack'
    },

    shim: {
        "bootstrap": {
            deps: ["jquery"]
        },
        "jquery-ui": {
            deps: ["jquery"]
        },
        "fancybox": {
            deps: ["jquery"]
        }
    }
})

requirejs(["jquery", "fancybox","controllers/" + controller,'modules/login','bootstrap','handlebars','html5shiv','modernizr','respond', 'jquery-ui'],function($,fancybox,controller,handleLogin) {
    $(document).ready(function() {

        if ($(window).width()>991) {
            $(".sidebar").height($(".maincontent").height());   
        }

        $(".searchresults .greencol").height($(".searchresults .article").first().height()-100);
        $('.login').click(function() {
            handleLogin();
            return false;
        })
        $('.fancybox-inline').fancybox({
            maxWidth    : 800,
            maxHeight   : 600
        });
        $('.fancybox-document').fancybox({
            width: 660,
            height: 440
        });


        $('.fancybox-close-button').click(function() {
            $.fancybox.close();    
            return false;
        })



    });
    controller.init();
})

Now with everything happening, it actually takes some time to execute this bit:

if ($(window).width()>991) {
    $(".sidebar").height($(".maincontent").height());   
}

And the page results in a little flicker. My only idea is to include jQuery separately in index.html and put this bit in <script>tags. But then my RequireJS setup broke.

Do you have any suggestions how to achieve this?

Answer 1

So you want the resizing to happen as early as possible. It's not completely clear to me how you tried to do it earlier but doing this is the way to make it happen as early as possible, and not break or bypass RequireJS:

1. Take the following out of your current requirejs callback:

   if ($(window).width()>991) {
       $(".sidebar").height($(".maincontent").height());   
   }
   

2. Add the following call to requirejs in front of your current call:

   requirejs(["jquery"], function($) {
       $(document).ready(function() {
          if ($(window).width()>991) {
               $(".sidebar").height($(".maincontent").height());   
           }
       });
   });
   

By the way, this does not need to be in a different <script> element. You can just put the new call to requirejs right in front of the one you already have. Done this way, the resizing will happen as soon as jQuery is loaded.