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?
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>