Hi,
Try this.
Add overflow:hidden to #box and then animate the left of #innerbox:
#box{
width:800px;
height:400px;
border:1px solid #444;
overflow:hidden;
}
$("#toggle").toggle(function(){
$("#innerbox").animate({ left: '180px' }, 'slow');
},function(){
$("#innerbox").animate({ left: '0px' }, 'slow');
});
Paul
On Jul 21, 10:38 pm, Simon <svansint...@gmail.com> wrote:
> Hey, so there might be a simple solution to my problem, but here is my
> question:
>
> I have a box:
>
> ====html====
>
> <div id="box">
> <div id="innerbox">
> <a href="" id="toggle"></a>
> There is some text inside this box. It spans the entire width blah
> blah blah.
> </div>
> </div>
>
> ====styles===
>
> #box{
> width:800px;
> height:400px;
> border:1px solid #444;
>
> }
>
> #innerbox{
> position:relative;
>
> width:200px;
> float:right;
>
> }
>
> #toggle{
> width:20px;
> background-color:grey;
> height:400px;
> float:left;
>
> }
>
> ====
>
> Now this innerbox needs to move to the side to reveal whatever is
> below it when the toggle is clicked. As the the innerbox moves out of
> the main box the parts of it that leave main box should become
> invisible.
>
> Now there is a simple solution in which I make the background of the
> innerbox an image and decrease the width using jQuery's .animate().
> This isn't ideal however, since I kinda need there to be text users
> can interact with in the innerbox.
>
> ====javascript====
> $(document).ready(function(){
>
> $("#toggle").toggle(function(){
> $("#innerbox").animate({ width: '75px' }, 'slow');
>
> },function(){
> $("#innerbox").animate({ width: '200px' }, 'slow');
> });
>
> });
> ======
>
> On the other hand, shifting the innerbox to the right (instead of
> decreasing the width of the image) means that it extends the reach of
> the encompassing box.
>
> ====javascript====
>
> $(document).ready(function(){
>
> $("#toggle").toggle(function(){
> $("#innerbox").animate({ right: "-=125" }, 'slow');
>
> },function(){
> $("#innerbox").animate({ right: '-=125' }, 'slow');
> });
>
> });
> ====
>
> Does anyone have any ideas how I can solve this? I've thought of
> placing divs with a higher z-index next the main box but this isn't
> really an option, since it would make the website too large.
>
> Any help would be much appreciated.
>
> Thanks,
>
> Simon
