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.

Answer 1

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

}