function not defined when calling from outside of document ready

Question

I did have a look at this quesiton although I could work out how I could implement this.

The basic code overlay is:

jQuery.noConflict();
jQuery(document).ready(function($){ 

    $("button").click(function(e){  
        popupOverlay();
        popupDisplay();
        e.preventDefault();
    });

function popupOverlay() {
        var overlayCss = {
            "width" : $(document).width(),
            "height" : $(document).height(),
            "display" : 'block'
        }
        $("#popupOverlay").css(overlayCss);
    }


function popupDisplay() {   

    var popup = $("#popup");

    etc etc code to work out the central position for popup

    $(popup).css({
        'top': yPosition + 'px',
        'left': xPosition + 'px',
        'display' : 'block'
    });

}

});

They above works fine, although I want to re-call the above function if the window is resized by adding this below the above:

jQuery(window).resize(function() {
    popupOverlay();
    popupDisplay();
});

Error I am getting is: popupOverlay is not defined

I have tried moving the popup functions out of the document ready but then I get the error: $ is not a function

I have to be really careful with this code that it does not cause any conflict with other JavaScript libraries that are already used on the website.

"I have tried moving the popup functions would of the document ready by then I get the error" - sorry, what? I think there are a couple typos or bad spelling auto-corrections in there... — Karl Knechtel, Jul 09 '11 at 13:15
Why don't you move `jQuery(window).resize(function() {` inside the ready handler then? — Felix Kling, Jul 09 '11 at 13:27
I have another new problem related to the window resize. If I close the popup, then resize the window, the popup re-opens again. I tried to add a if("#popup:visible") but this doesn't work — John Magnolia, Jul 09 '11 at 14:06
Got around the above comment by adding/remove a popup-open class inside the open/close function. I am able to test for this inside the resize — John Magnolia, Jul 09 '11 at 14:13

naveen · Accepted Answer · 2011-07-09T13:44:13.507

It does not work because the functions popupOverlay and popupDisplay are inside $(document).ready and you are trying to access it outside the scope of the declaration.

Rearrange your code like this.

jQuery.noConflict();
// DOM Ready event
jQuery(document).ready(function ($) {

    $("button").click(function (e) {
        popupOverlay();
        popupDisplay();
        e.preventDefault();
    });
});
//window resize event
jQuery(window).resize(function () {
    popupOverlay();
    popupDisplay();
});

//custom functions
function popupOverlay() {
    var overlayCss = {
        "width": $(document).width(),
        "height": $(document).height(),
        "display": 'block'
    }
    jQuery("#popupOverlay").css(overlayCss);
}


function popupDisplay() {

    var popup = jQuery("#popup");

    //etc etc code to work out the central position
    //for popup

    jQuery(popup).css({
        'top': yPosition + 'px',
        'left': xPosition + 'px',
        'display': 'block'
    });

}

I do prefer your answer because it keeps the document ready cleaner — John Magnolia, Jul 09 '11 at 14:08

score 1 · Answer 2 · answered Jul 09 '11 at 13:15

This should work.

jQuery.noConflict();
jQuery(document).ready(function(){ 
    var $ = jQuery;
    $("button").click(function(e){  
        popupOverlay();
        popupDisplay();
        e.preventDefault();
    });

function popupOverlay() {
        var overlayCss = {
            "width" : $(document).width(),
            "height" : $(document).height(),
            "display" : 'block'
        }
        $("#popupOverlay").css(overlayCss);
    }


function popupDisplay() {   

    var popup = $("#popup");

    etc etc code to work out the central position for popup

    $(popup).css({
        'top': yPosition + 'px',
        'left': xPosition + 'px',
        'display' : 'block'
    });

}

jQuery(window).resize(function() {
    popupOverlay();
    popupDisplay();
});


});

score 0 · Answer 3 · answered Jul 09 '11 at 13:15

0

declare functions outside of document.ready() no reason to declare them there,

the "not working" is due to the function belong other namespace you can still use them if you will add handles to your events also in $(function() {});

answered Jul 09 '11 at 13:15

zb'

8,071
4
41
68

function not defined when calling from outside of document ready

3 Answers3