Thanks!
I had no idea the overflow property even existed. You've saved me a
lot of head scratching.
Cheers,
Simon
On Jul 22, 4:49 am, Paul Mills <paul.f.mi...@gmail.com> wrote:
> 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
