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?

Louis · Accepted Answer · 2013-11-14 17:43:43Z

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:

Take the following out of your current requirejs callback:

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

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.

answered Nov 14, 2013 at 17:43

Louis

152k28 gold badges288 silver badges332 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michal Holub Over a year ago

Thanks for the suggestion that works perfectly. I always stuck with the "1 require per file" rule and didn't realize I could have more :)

Michal Holub Over a year ago

Marked as accepted, but I don't have enough reputation to upvote, sorry

Collectives™ on Stack Overflow

RequireJS: execute jQuery code domReady

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related