JavaScript/jQuery problem, driving me crazy, please help!!

The code looks long, but please don't feel daunted. The problem is at the very bottom of the whole thing which consists of only a handful of lines. I apologize for having to include a lengthy function, but it is needed to demonstrate the problem.

When you jump all the way to the bottom of this whole thing, you will see my remarks within /* comments */, numbered 1 thru 4.

In a nutshell, I am creating a constructor function with a show() and hide() method in it. The show() (numbered 1 in my comments) makes a green square with a Cancel button come up when you run the code on the browser. Clicking the Cancel button (numbered 2 in my comments) works in hiding the green square. Clicking the "Show Green Square" button (numbered 3 in my comments) will bring back the green square. The problem is the hide() method (numbered 4 in my comments) which NEVER works, and I don't know why! It's code is just one line, very similar to the show() function's one-liner. I am baffled why the show() would work but not the hide()!

Thank you in advance for being willing to help.

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--<script src="../../_scripts/utils.js"></script>-->
<style>
    html {
        height: 100%;
    }
    body {
        height: 100%;
    }
    #frmSearchCustomer {
        width: 600px;
        height: 400px;
        background: green;
        display: none;
    }
</style>
<script>
$(function() {
    function Overlay(sectionId, options)
    {
        var arrContents;
        var arrClickablesIds;
        var fnCallback;
        var _iFadeInTime;
        var _iFadeOutTime;
        var _sRGBAColor;
        var _zIndex;
        var _sOverflow;

        if (sectionId === undefined || sectionId === null || sectionId.trim().length === 0) {
            throw new Error("From Overlay(): First parameter sectionId is required.");
        } else {
            if ($(sectionId).length === 0) { 
                sectionId = validateId(sectionId); 
                if ($(sectionId).length === 0) { 
                    throw new Error("From Overlay(): '" + sectionId + "' selector provided not found.");
                }
            }
        } // END if

        if (options === undefined || options === null) {
            arrContents = [];
            arrClickablesIds = [];
            fnCallback = null;
            _iFadeInTime = 0;
            _iFadeOutTime = 0;
            _sRGBAColor = "rgba(0, 0, 0, 0)";
            _zIndex = 2;
            _sOverflow = "hidden";
        } else {
            arrContents = (options.contents === undefined || options.contents === null) ? [] : options.contents;
            for (var i=0; i<arrContents.length; i++) {
                var _temp = arrContents[i];
                if (_temp.contentId === undefined || 
                    _temp.contentId === null || 
                    _temp.contentId.trim().length === 0) {
                    throw new Error("From Overlay(): Every 'content' element must have a valid contentId");
                } else {
                    /* Make sure there's a # before the id */
                    _temp.contentId = validateId(_temp.contentId);
                    var _test = $(_temp.contentId);
                    if (_test.attr("id") === undefined) {
                            throw new Error("From Overlay(): Every 'content' element must have a valid contentId");
                    }// END if
                }// END if
            } // END for i

            arrClickablesIds = (options.clickables === undefined || options.clickables === null) ? [] : options.clickables;

            if (arrClickablesIds.length > 0) {
                for (var c=0; c<arrClickablesIds.length; c++) {
                    arrClickablesIds[c] = validateId(arrClickablesIds[c]);
                    // Create click events for these clickables using
                    // the fnCallback as the handler.
                    $(arrClickablesIds[c]).click(function() {
                        // We pass the clickable's id to fnCallback
                        fnCallback($(this).attr("id"));
                    });
                }
            }

            fnCallback = (options.callback === undefined) ? null : options.callback;
            if (arrClickablesIds.length > 0) {
                if (!(fnCallback instanceof Function)) {
                    throw new Error("From Overlay(): 'clickables' detected, 'callback' function is required.");
                }
            }
            _iFadeInTime = (options.fadeInTime === undefined || options.fadeInTime === null ||
                            isNaN(options.fadeInTime)) ? 0 : parseInt(options.fadeInTime);
            _iFadeOutTime = (options.fadeOutTime === undefined || options.fadeOutTime === null ||
                             isNaN(options.fadeOutTime)) ? 0 : parseInt(options.fadeOutTime);
            _sRGBAColor = (options.rgbaColor === undefined || options.rgbaColor === null ||
                           options.rgbaColor.length === 0) ? "rgbaColor(0, 0, 0, 0)" : options.rgbaColor;
            _zIndex = (options.zIndex === undefined || options.zIndex === null ||
                       isNaN(options.zIndex)) ? 2 : parseInt(options.zIndex);
            _sOverflow = (options.overflow === undefined || options.overflow === null ||
                          options.overflow.length === 0) ? "visible" : options.overflow;
        }

        var TOPLEFT = "topleft";
        var TOPCENTER = "topcenter";
        var TOPRIGHT = "topright";
        var MIDDLELEFT = "middleLeft";
        var CENTER = "center";
        var MIDDLERIGHT = "middleRight";
        var BOTTOMLEFT = "bottomleft";
        var BOTTOMCENTER = "bottomcenter";
        var BOTTOMRIGHT = "bottomright";
        var MANUAL = "manual";
        var O = "|topleft|topcenter|topright|middleLeft|center|" +
                "middleRight|bottomleft|bottomcenter|bottomright|" +
                "manual|";

        var _sSectionId = sectionId;
        var _bShowing = false;
        var _bAdded = false;

        for (var j=0; j<arrContents.length; j++) {
            var _temp = arrContents[j];
            if (_temp.orientation === undefined ||
                _temp.orientation === null ||
                _temp.orientation.trim().length === 0) {
                _temp.orientation = CENTER;
            } else {
                if (O.toLowerCase().indexOf("|" + _temp.orientation + "|") === -1)
                        _temp.orientation = CENTER;
            } // END if
            if (_temp.x === undefined || _temp.x === null || isNaN(_temp.x)) {
                _temp.x = 0;
            } // END if
            if (_temp.y === undefined || _temp.y === null || isNaN(_temp.y)) {
                _temp.y = 0;
            } // END if
        } // END for j

        var _section = $(_sSectionId);
        var _arrContentRefs = new Array();
        for (var m=0; m<arrContents.length; m++) {
            var _sContentIdTemp = arrContents[m].contentId;
            _arrContentRefs.push($(_sContentIdTemp));
        } // END for m

        var _resizeHandler;
        var _createResizeHandler = function() {
            _resizeHandler = function() {
                /* Resize the _divWrapper */
                _divWrapper.css({
                    width : "100%",
                    height : "100%",
                    top    : "0px",
                    left   : "0px"
                });
                for (var q=0; q<_arrContentRefs.length; q++) {
                    var _iDivWrapperWidth = _divWrapper.width();
                    var _iDivWrapperHeight = _divWrapper.height();
                    var _iContentWidth = _arrContentRefs[q].width();
                    var _iContentHeight = _arrContentRefs[q].height();
                    var _iX = arrContents[q].x;
                    var _iY = arrContents[q].y;
                    var _iCalculatedX;
                    var _iCalculatedY;

                    var _tempOrientation = arrContents[q].orientation;

                    switch(_tempOrientation) {
                        case TOPLEFT:
                            _iCalculatedX = _iX;
                            _iCalculatedY = _iY;
                            break;
                        case TOPCENTER:
                            _iCalculatedX = ((_iDivWrapperWidth - _iContentWidth) / 2) + _iX;
                            _iCalculatedY = _iY;
                            break;
                        case TOPRIGHT:
                            _iCalculatedX = (_iDivWrapperWidth - _iContentWidth) - 1 + _iX;
                            _iCalculatedY = _iY;
                            break;
                        case MIDDLELEFT:
                            _iCalculatedX = _iX;
                            _iCalculatedY = (_iDivWrapperHeight - _iContentHeight) / 2 + _iY;
                            break;
                        case CENTER:
                            _iCalculatedX = ((_iDivWrapperWidth - _iContentWidth) / 2) + _iX;
                            _iCalculatedY = (_iDivWrapperHeight - _iContentHeight) / 2 + _iY;
                            break;
                        case MIDDLERIGHT:
                            _iCalculatedX = (_iDivWrapperWidth - _iContentWidth) - 1 + _iX;
                            _iCalculatedY = (_iDivWrapperHeight - _iContentHeight) / 2 + _iY;
                            break;
                        case BOTTOMLEFT:
                            _iCalculatedX = _iX;
                            _iCalculatedY = (_iDivWrapperHeight - _iContentHeight) - 1 + _iY;
                            break;
                        case BOTTOMCENTER:
                            _iCalculatedX = ((_iDivWrapperWidth - _iContentWidth) / 2) + _iX;
                            _iCalculatedY = (_iDivWrapperHeight - _iContentHeight) + _iY;
                            break;
                        case BOTTOMRIGHT:
                            _iCalculatedX = (_iDivWrapperWidth - _iContentWidth) - 1 + _iX;
                            _iCalculatedY = (_iDivWrapperHeight - _iContentHeight) + _iY;
                            break;
                        case MANUAL:
                            _iCalculatedX = _iX;
                            _iCalculatedY = _iY;
                            break;
                        default:
                                throw new Error("Overlay(): FATAL ERROR! Orientation-related!");
                    } // END switch

                    _arrContentRefs[q].css({
                        left : _iCalculatedX,
                        top  : _iCalculatedY
                    });
                }
            };
            $(window).resize(_resizeHandler);
        }; // END: _createResizeHandler()
        var _divWrapper = $("<div></div>");

        _divWrapper.css({
            position   : "absolute",
            background : _sRGBAColor,
            opacity    : 1,
            zIndex    : _zIndex,
            display    : "none"
        }); // END _divWrapper.css()
        for (var n=0; n<_arrContentRefs.length; n++) {
            _divWrapper.append(_arrContentRefs[n]);
        } // END for n

        this.show = function() {
            if (!_bShowing) {
                _createResizeHandler();

                if (!_bAdded) {
                    _section.css({
                        position : "relative"
                    });
                   $(_section).append(_divWrapper);
                    _divWrapper.css({
                        display  : "block",
                        position : "absolute",
                        opacity  : 0,
                        overflow : _sOverflow
                    });
                    _bAdded = true;
                } else {
                    _divWrapper.css("display", "block");
                }

                _divWrapper.stop().animate({ opacity: 1}, { duration: _iFadeInTime });

                for (var o=0; o<_arrContentRefs.length; o++) {
                    _arrContentRefs[o].css({
                            display  : "block",
                            position : "absolute",
                            opacity  : 1
                    });
                }

                _resizeHandler();
                _bShowing = true;
            }
        }; // END show()

        this.hide = function() {
            if (_bShowing) {
                $(window).unbind("resize", _resizeHandler);
                _resizeHandler = null;
                _divWrapper.stop().animate({ opacity: 0 }, 
                    { 
                        duration: _iFadeOutTime, 
                        queue: false,
                        complete: function() {
                            _divWrapper.css("display", "none");
                            _bShowing = false;
                        }
                    });
            }
        }; // END hide()

        function validateId(sId) {
            return sId.charAt(0) === '#' ? sId : '#' + sId;
        }
    }; // END: function Overlay()
    
    $("#btnShowGreenSquare").click(function() {
        sc.show();
    });
    $("btnHideGreenSquare").click(function() {
        sc.hide();
    });

    /** PLEASE IGNORE EVERYTHING ABOVE, THE PROBLEM IS BELOW. **/

    function SearchCustForm(sSectionID, fnCallBack, zIndex) {
        var self = this;
        
        var ovSCF = new Overlay(sSectionID,
                             { 
                                 contents : [{ contentId : "frmSearchCustomer", orientation : "center" }],
                                 zIndex: zIndex
                             });
        /* 1. This is what makes the green square show upon initially running
         *    this page. No problem with this. */
        ovSCF.show();

        /* 2. This is the Cancel button INSIDE the green square that makes it
         *    hide. This works all the time. */
        $("#btnSCCancel").click(function() {
            self.hide(); 
        });
        
        /* 3. This is the Show Green Square button handler and will make the 
         * green square show again when clicked. This works all the time */
        this.show = function() {
            ovSCF.show();
        };
        
        /* 4. THIS IS THE PROBLEM! THIS NEVER WORKS!! CAN SOMEONE PLEASE TELL ME WHY???? */
        this.hide = function() {
            ovSCF.hide();
        };
    }
    
    var sc = new SearchCustForm("container", null, 5);
});
</script>
</head>
<body>
    <div id="container" style="height: 80%;">
        <div id="frmSearchCustomer"><input id="btnSCCancel" type="button" value="Cancel" /></div>
    </div>
    <input id="btnShowGreenSquare" type="button" value="Show Green Square" />
    <input id="btnHideGreenSquare" type="button" value="Hide Green Square" />
</body>
</html>

Open in new window

elepilAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

F PCommented:
To better optimize use the var declaration once and separate by commas so it's one fluid motion ( var arrContents, arrClickablesIds, fnCallback; [and so on before the semicolon] )... but that's whatever. Your issue....

You declare the function anonymously, but where do you invoke the actual function? Saying this.hide is equal to a function doesn't say perform the function. The .click is the event which kicks off from the user's end, but you'd need to invoke this.hide function you create through an event. Just by declaring the sc variable which invokes the function creation, doesn't kick the function.you need to invoke it through an event somehow. Do you understand kinda?
0
F PCommented:
I thought it might have to be with the fact you forgot the # id tag on this:

$("btnHideGreenSquare").click(function() {
        sc.hide();
    });

Open in new window


... but it still doesn't work after fixing.
0
F PCommented:
No. That was it. You just forgot that. I put it in wrong. Add the # ID tag to that line and you're good.

 $("#btnShowGreenSquare").click(function() {
        sc.show();
    });
    $("#btnHideGreenSquare").click(function() {
        sc.hide();
    });

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

elepilAuthor Commented:
To Frank Pennock,

The this.show = function() {...} are the definitions of the methods. These methods are being invoked by the button handlers.
0
elepilAuthor Commented:
Lol, I was so tired when I posted this on the forum. I kept looking at this over and over till my eyes were dropping. It's always good to have a second pair of eyes go through it.

Thanks for your help!
0
F PCommented:
Happens to us all. I didn't see it at first where you invoked it cause you said, look here down.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.