jQuery Move a fixed or absolutely positioned element to the left or right

Question

I am playing with an idea, where I want to mimic the facebook mobile app where the main container element physically moves either left or right. However I have tried this a few ways and the element I want to move seems to resize rather than move and I am not sure what or why its doing that instead of moving the way I would expect.

Note I have tried the main element as a fixed element and an absolute element. I have also tried with just 'left' or just 'right' instead of 'marginLeft' or 'marginRight' in the javascript as well.

So I am wondering what I am doing wrong?

http://jsfiddle.net/4GF8c/

the css:

html, body{margin:0;padding:0;width:100%;height:100%;}
#wrap_main{background-color:gray;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;}
#wrap_bottom_left{background-color:aqua;width:50%;float:left;}
#wrap_bottom_right{background-color:green;width:50%;float:right;}​

the javascript:

    var isMenuOpen = false;
    $(document).ready(function()
    {
    //code
    });
    $('#menu_left_trigger').click(function(e)
    {
        e.preventDefault();
        var $mainEle = $('#wrap_main');
        if(isMenuOpen == false)
        {
            isMenuOpen = true;
            $mainEle.animate({marginLeft:"10%"}, 1000);
        }
        else
        {
            isMenuOpen = false;
            $mainEle.animate({marginLeft:"0"}, 1000);
        }
    });
    $('#menu_right_trigger').click(function(e)
    {
        e.preventDefault();
        var $mainEle = $('#wrap_main');
        if(isMenuOpen == false)
        {
            isMenuOpen = true;
            $mainEle.animate({marginRight:"10%"}, 1000);
        }
        else
        {
            isMenuOpen = false;
            $mainEle.animate({marginRight:"0"}, 1000);
        }
    });
​

the html:

<div id="wrap_main">
    <a href="javascript:void(0);" id="menu_left_trigger">Menu</a><br>
    <a href="javascript:void(0);" id="menu_right_trigger">Sub Menu</a>
</div>
<div id="wrap_bottom_left">
    <ul>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
    </ul>
</div>
<div id="wrap_bottom_right">
    <ul>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
    </ul>
</div>​

Answer 1

Ah, well. I just resolved my own problem. So I will break it down here for those who are trying similar.

So first logic. My Content Containing "Master" element if you will call it that, is absolute/fixed position. Which essentially detaches it from the DOM. Meaning percent based heights and widths don't work. So to create the effect of a full height, full width element that is fixed/absolute. I needed to tell the elements properties that left:, right:, top:, bottom: (css) to be all set to zero so the 4 points will touch "0" on all sides essentially stretching it out to make it fit.

So. In that there was my problem. Normally moving a fixed element or absolutely positioned element you would do it exactly as I was attempting. However in almost all causes when you set absolute or fixed, chances are you are only setting left top, or right top, or respectively the same but with bottom.

So since the element was styled to stay at all four points, When I want to move the element x% or so many pixels in either direction. I have to compensate for both directions, so if I want to go right with the element I would need to do left:10%;right-10% to compensate the move on both sides.

Ultimately what I ended up doing is making changes to have a positive and negative in either direction now the whole element moves, rather than inadvertently resizing cause Im only telling one side to move and not the other

Hope that makes sense for future players

Answer 2

You need to fix your "isMenuOpen" status. It's not a binary test, but a 3-way test. It could be open-left, open-right, or closed. Your function needs to be able to account for that, otherwise it is animating one side of the wrap_main div without setting the other side. You'll need to check the current offset and use that to calculate where the position should be. See here: using jQuery .animate to animate a div from right to left?

With absolutely positioned elements, I would recommend animating the Left/Right positioning rather than the margins, as margins can be interpreted as part of the box model (in certain browsers) and affect the layout of other items on the page. When you do this, be sure to make sure that the links do not animate out of view.

edit: I fired off my answer without playing with the fiddle enough. This should set you in the right direction. Sorry!