Question

ok so im having a hard time hiding some layout sections (divs in my layout page and im using mvc3).

I have this js fragment which is basically the main logic:

$('.contentExpand').bind('click', function () {
            $.cookie('right_container_visible', "false");
        });

        //Cookies Functions========================================================
        //Cookie for showing the right container
        if ($.cookie('right_container_visible') === 'false') {
            if ($('#RightContainer:visible')) {
                $('#RightContainer').hide();
            }
            $.cookie('right_container_visible', null);
        } else {
            if ($('#RightContainer:hidden')) {
                $('#RightContainer').show();
            }
        }

as you can see, im hidding the container whenever i click into some links that have a specific css. This seems to work fine for simple tests. But when i start testing it like

.contentExpand click –> detail button click –> .contentExpand click –> [here unexpected issue: the line $.cookie(‘right_container_visible’, null); is read but it doesnt set the vaule to null as if its ignoring it]

Im trying to understand whats the right logic to implement this. Anyone knows how i can solve this?

Answer 1

The best thing that worked for me was to create an event that can catch the resize of an element. I got this from another post but I dont remember which one. Anyway here is the code for the event:

//Event to catch rezising============================================================================
(function () {
var interval;
jQuery.event.special.contentchange = {
    setup: function () {
        var self = this,
        $this = $(this),
        $originalContent = $this.text();
        interval = setInterval(function () {
            if ($originalContent != $this.text()) {
                $originalContent = $this.text();
                jQuery.event.handle.call(self, { type: 'contentchange' });
            }
        }, 100);
    },
    teardown: function () {
        clearInterval(interval);
    }
};
})();
//=========================================================================================

//Function  to resize the right container============================================================
(function ($) {
$.fn.fixRightContainer = function () {

    this.each(function () {

        var width = $(this).width();
        var parentWidth = $(this).offsetParent().width();
        var percent = Math.round(100 * width / parentWidth);
        if (percent > 62) {
            $('#RightContainer').remove();
        }
    });
};
})(jQuery);
//===================================================================================================