I am looking to create a feature where the user can click a button to reveal a new div to the right of an existing one. Check out this Fiddle for reference: http://jsfiddle.net/AV2mZ/.
While the functionality works fine when both divs are visible, resizing the window causes layout issues. I have been trying to address this problem myself but could use some expert advice.
Any detailed help on this matter would be greatly appreciated.
Thank you!
<div id="change">
<div style="width:56px;height:56px;position:absolute;background:#999;left:0;top:0;">Stay?</div>
<div style="width:56px;height:56px;position:absolute;background:#999;right:0;top:0;">Stay?</div>
</div>
<div id="right" style="width:300px;height:100%;background:#000;position:fixed;right:-300px;">
</div>
<br><br><br><br><br><br><br><br>
<button id="toggle">slide it</button>
$('button').live("click",function() {
$('#change').animate({
width: $('#change').width()-$('#right').width()
}, 300);
$('#right').animate({
right: "0"
}, 300);
return false;
});
$(window).resize(function() {alert($('#change').width()-$('#right').width());
$('#change').animate({
width: $('#change').width()-$('#right').width()
}, 300);
});