function not defined when calling from outside of document ready

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.

---

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'
    });

}

---

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();
});


});

---

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() {});