4

I'm trying to activate a resize event on the following function:

$(function() {
if (Modernizr.mq('only screen and (min-width: 1140px)')) {
$('div#ss1').html('<div>[snip]</div>');
$('div#ss1').append('<div><gcse:searchbox-only></gcse:searchbox-only></div>');
  } 
if (Modernizr.mq('only screen and (max-width: 1139px)')) {
$('div#ss2').html('<div>[snip]</div>');
$('div#ss2').append('<div><gcse:searchbox-only></gcse:searchbox-only></div>');
  } 
});

I wanted to add a resize listener to it. Based on http://api.jquery.com/resize/ I changed the first line to $(window).resize(function() but then the whole function stopped working.

What am I doing wrong? Thanks.

UPDATE: Based on this Paul Irish post I added smartresize to my plugins.js. I changed the function call from $(function() to $(window).smartresize(function() and it stopped working. Changing it back to $(function() and it worked again. Why can't I add a resize event listener of any type to this sucker? :-)

Ian
  • 509
  • 12
  • 36

1 Answers1

9

The key point to understand here is what $(function() {}) is doing. The code inside of it isn't executing until the document is ready. Putting code in it is equivalent to putting code in this:

$(document).ready(function () { 
    //here 
})

You want to put your resize event inside of $(function() {}), like this:

function checkMq() {
    if (Modernizr.mq('only screen and (min-width: 1140px)')) {
        $('div#ss1').html('<div>[snip]</div>');
        $('div#ss1').append('<div><gcse:searchbox-only></gcse:searchbox-only></div>');
    } 
    if (Modernizr.mq('only screen and (max-width: 1139px)')) {
        $('div#ss2').html('<div>[snip]</div>');
        $('div#ss2').append('<div><gcse:searchbox-only></gcse:searchbox-only></div>');
    } 
}

$(function() {
    // the call to checkMq here will execute after the document has loaded
    checkMq();

    $(window).resize(function() {
        // the call to checkMq here will execute every time the window is resized
        checkMq();
    });

    // you can add other listeners here click, hover, etc.  
});

If you just have the $(window).resize(function() {}) without using $(function() {}), it won't work because the document isn't ready to be worked on yet, nor is it ready to have any event listeners added.

natchiketa
  • 5,867
  • 2
  • 28
  • 25
  • thanks for the tip. One obvious issue...it doesn't change the div's on the initial load, just when it's resized. Should I create a named function (I think that's the terminology) that contains the div changing stuff and call that within both of the areas above of the initial load and resizing function? And do I have to do anything special when creating the named function to make it available within the scope of the jQuery function? – Ian May 01 '13 at 07:25
  • Sorry if I wasn't clear about that part. If you want it to do stuff on resize, put that code inside of the function in `$(window).resize(function() {})`. I'll update my answer to clarify how you would do this based on the code you posted. – natchiketa May 01 '13 at 07:36
  • No apologies...it was clear. But I need the media query to be run at initial load as well as when a resize occurs. I'm assuming I need to do something like: `$(function() { // call a named function $(window).resize(function() { // call the same named function }); });` And secondly...is there a special way to create a named function so it's available in jQuery? I figure a named function will reduce code duplication. Complete noob here. :-) – Ian May 01 '13 at 07:47
  • Gotcha—yes, that's the correct term and that's what you want to do, for that exact reason. Your instincts are doing pretty well for a 'noob'! Updating my answer to demonstrate. – natchiketa May 01 '13 at 07:53
  • To answer the question about jQuery having access to the named function—it will. Putting the function outside of the jQuery closure means that it is in the global namespace (e.g. `window.checkMq()`), so jQuery will have access to it. – natchiketa May 01 '13 at 08:04
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/29264/discussion-between-natchiketa-and-ian) – natchiketa May 01 '13 at 18:58
  • No need. All's good. System says I have to wait 9 more hrs before I can award the bounty. – Ian May 01 '13 at 21:07