Search code examples
jquerylayoutviewportgalleria

jquery to update viewport?


I am trouble shooting a layout issue I am having and was hoping to get some insight.

I have, on the left, a menu panel that opens and collapses and on the right I have Galleria which is set to responsive mode which means it resizes if the window size is changed.

The goal I am setting out to achieve is that when my menu panel collapses I want the responsive Galleria to resize and vice-a-versa.

right now, if the panel begins in the collapsed position and is expanded, the document width increases by the width of the menu panel and the Galleria is not resized. From here if I manually resize my browser even a single pixel the layout refreshes and all is good.

So I began looking for ways I could update the viewport, without actually changing the size just so the Galleria reacts as if the viewport changed. The below is my code for toggling my menu. I am at the point of trying to force the document size to the original size but even this fails to produce result.

Thanks for the help

var documentWidth = $(document).width();
    var documentHeight = $(document).height();
    function hideMenu() {
        $('#User_Menu').hide("slide", { direction: "left" }, 1000, function () {
            showOpenMenu();
            $.cookie('pj-userMenuTab', 'block')
            $(document).width(documentWidth);
        });
    }
    function showOpenMenu() {
        $('#Open_User_Menu').show("slide", { direction: "left" }, 500);
        $.cookie('pj-userMenu', 'none')
    }
    function showMenu() {
        $('#Open_User_Menu').hide("slide", { direction: "left" }, 500, function () {
            hideOpenMenu();
            $.cookie('pj-userMenu', 'block');
        });
    }
    function hideOpenMenu() {
        $('#User_Menu').show("slide", { direction: "left" }, 1000);
        $.cookie('pj-userMenuTab', 'none')
        alert('...' + documentWidth);
        $(document).width(documentWidth);
        alert($(document).width());
    }

Solution

  • Per the comments, what was necessary was to trigger the resize event so the Galleria plugin will resize.

    The following code (when added to the open/close functions) should work:

    $(window).trigger("resize");