Automatic switching to overflow hidden during animation

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Automatic switching to overflow hidden during animation

kofkof

Hello all,

I have two questions regarding this portion of the animate() method
source code:
/******************************/
for ( p in prop ) {
        [...]
        if ( ( p == "height" || p == "width" ) && this.style ) {
                [...]
                // Make sure that nothing sneaks out
                opt.overflow = this.style.overflow;
        }
}

if ( opt.overflow != null )
        this.style.overflow = "hidden";
/******************************/

I might be wrong (really), but to me this means that *whenever* an
animation is executed on an element's width or height, the element wil
get overflow:"hidden", no exception (this.style.overflow can only
return "visible", "hidden" or an empty string, and the three of them
are different from null, if I'm not wrong...)

My problem today is related to this issue. I want to animate the size
of a div with a child div inside it, set to overflow in its top-left
corner, (kind of like the close button on Fancy Zoom's popups -
http://www.cabel.name/2008/02/fancyzoom-10.html). With jQuery animate
(), the parent div gets overflow:"hidden" and therefore the inside div
is clipped during the anim... If I comment "opt.overflow =
this.style.overflow" in jQuery's source code, everything runs as
expected, no clipping.

So, my two questions are:
1) what's the use of this automatic swtching to overflow:"hidden"?
2) I can't think of a way to keep my element's overflow to "visible"
during its animation (without having to comment the above mentionned
line on jQuery source...). Any idea, anyone?

Thanks!

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Development" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Automatic switching to overflow hidden during animation

ricardobeat

Usually you don't want the content's sticking out of the element
during animation. For example, you have a paragraph with some text and
a background-color. Without overflow:hidden, the background shape
would slide up while the text stays visible all the way, only
dissapearing suddenly at the end.

Can't you expand your container to fit the close button inside and use
margins?

From some quick testing you can work around that by setting the
overflow right after the animate() call:

$(myEl)
 .animate(...)
 .css('overflow', 'visible');

cheers,
- ricardo

On Apr 4, 8:13 am, kofkof <[hidden email]> wrote:

> Hello all,
>
> I have two questions regarding this portion of the animate() method
> source code:
> /******************************/
> for ( p in prop ) {
>         [...]
>         if ( ( p == "height" || p == "width" ) && this.style ) {
>                 [...]
>                 // Make sure that nothing sneaks out
>                 opt.overflow = this.style.overflow;
>         }
>
> }
>
> if ( opt.overflow != null )
>         this.style.overflow = "hidden";
> /******************************/
>
> I might be wrong (really), but to me this means that *whenever* an
> animation is executed on an element's width or height, the element wil
> get overflow:"hidden", no exception (this.style.overflow can only
> return "visible", "hidden" or an empty string, and the three of them
> are different from null, if I'm not wrong...)
>
> My problem today is related to this issue. I want to animate the size
> of a div with a child div inside it, set to overflow in its top-left
> corner, (kind of like the close button on Fancy Zoom's popups -http://www.cabel.name/2008/02/fancyzoom-10.html). With jQuery animate
> (), the parent div gets overflow:"hidden" and therefore the inside div
> is clipped during the anim... If I comment "opt.overflow =
> this.style.overflow" in jQuery's source code, everything runs as
> expected, no clipping.
>
> So, my two questions are:
> 1) what's the use of this automatic swtching to overflow:"hidden"?
> 2) I can't think of a way to keep my element's overflow to "visible"
> during its animation (without having to comment the above mentionned
> line on jQuery source...). Any idea, anyone?
>
> Thanks!
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Development" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Automatic switching to overflow hidden during animation

chrishoffman
In reply to this post by kofkof

I implemented something similar to what you describe with the same
issue.  The close image which was hanging outside the parent div would
be clipped on show and hide animation.  Looking closer at what you
posted it seems they work around the problem by only showing the close
after the div has finished animating.  Similarly the close is hidden
before animating the close of the container div.  I did that for mine
it looks much better than what it had before with the clipping.

On Apr 4, 6:13 am, kofkof <[hidden email]> wrote:

> Hello all,
>
> I have two questions regarding this portion of the animate() method
> source code:
> /******************************/
> for ( p in prop ) {
>         [...]
>         if ( ( p == "height" || p == "width" ) && this.style ) {
>                 [...]
>                 // Make sure that nothing sneaks out
>                 opt.overflow = this.style.overflow;
>         }
>
> }
>
> if ( opt.overflow != null )
>         this.style.overflow = "hidden";
> /******************************/
>
> I might be wrong (really), but to me this means that *whenever* an
> animation is executed on an element's width or height, the element wil
> get overflow:"hidden", no exception (this.style.overflow can only
> return "visible", "hidden" or an empty string, and the three of them
> are different from null, if I'm not wrong...)
>
> My problem today is related to this issue. I want to animate the size
> of a div with a child div inside it, set to overflow in its top-left
> corner, (kind of like the close button on Fancy Zoom's popups -http://www.cabel.name/2008/02/fancyzoom-10.html). With jQuery animate
> (), the parent div gets overflow:"hidden" and therefore the inside div
> is clipped during the anim... If I comment "opt.overflow =
> this.style.overflow" in jQuery's source code, everything runs as
> expected, no clipping.
>
> So, my two questions are:
> 1) what's the use of this automatic swtching to overflow:"hidden"?
> 2) I can't think of a way to keep my element's overflow to "visible"
> during its animation (without having to comment the above mentionned
> line on jQuery source...). Any idea, anyone?
>
> Thanks!

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Development" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Automatic switching to overflow hidden during animation

kofkof
In reply to this post by ricardobeat

Sorry for being late in replying. I tried Ricardo's suggestion of
setting $(elt).css('overflow', 'visible') right after the call to
animate() and it works like a charm, no more clipping.

Thanks for the tip

On Apr 5, 11:29 pm, Ricardo <[hidden email]> wrote:

> Usually you don't want the content's sticking out of the element
> during animation. For example, you have a paragraph with some text and
> a background-color. Without overflow:hidden, the background shape
> would slide up while the text stays visible all the way, only
> dissapearing suddenly at the end.
>
> Can't you expand your container to fit the close button inside and use
> margins?
>
> From some quick testing you can work around that by setting the
> overflow right after the animate() call:
>
> $(myEl)
>  .animate(...)
>  .css('overflow', 'visible');
>
> cheers,
> - ricardo
>
> On Apr 4, 8:13 am, kofkof <[hidden email]> wrote:
>
> > Hello all,
>
> > I have two questions regarding this portion of the animate() method
> > source code:
> > /******************************/
> > for ( p in prop ) {
> >         [...]
> >         if ( ( p == "height" || p == "width" ) && this.style ) {
> >                 [...]
> >                 // Make sure that nothing sneaks out
> >                 opt.overflow = this.style.overflow;
> >         }
>
> > }
>
> > if ( opt.overflow != null )
> >         this.style.overflow = "hidden";
> > /******************************/
>
> > I might be wrong (really), but to me this means that *whenever* an
> > animation is executed on an element's width or height, the element wil
> > get overflow:"hidden", no exception (this.style.overflow can only
> > return "visible", "hidden" or an empty string, and the three of them
> > are different from null, if I'm not wrong...)
>
> > My problem today is related to this issue. I want to animate the size
> > of a div with a child div inside it, set to overflow in its top-left
> > corner, (kind of like the close button on Fancy Zoom's popups -http://www.cabel.name/2008/02/fancyzoom-10.html). With jQuery animate
> > (), the parent div gets overflow:"hidden" and therefore the inside div
> > is clipped during the anim... If I comment "opt.overflow =
> > this.style.overflow" in jQuery's source code, everything runs as
> > expected, no clipping.
>
> > So, my two questions are:
> > 1) what's the use of this automatic swtching to overflow:"hidden"?
> > 2) I can't think of a way to keep my element's overflow to "visible"
> > during its animation (without having to comment the above mentionned
> > line on jQuery source...). Any idea, anyone?
>
> > Thanks!
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Development" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Automatic switching to overflow hidden during animation

Janis-13

This trick doesn`t seem to work on IE. Any other tips?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Development" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Automatic switching to overflow hidden during animation

Leonard Burton
Janis-13 wrote
This trick doesn`t seem to work on IE. Any other tips?
I know this is an old thread so sorry for resurrecting but I came here looking for a solution and so others may to so I wanted to share this.

To get round this problem what I did was go into the CSS file and for the container I was animating I  set...

overflow: visible !important ;

The !important stops it from being overridden by jQuery on animate.

This seemed to fix my issue of the element disappearing then reappearing during animation. Tested in Safari and FF, not tried IE just yet but confident it should work!

Hope this helps someone.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Automatic switching to overflow hidden during animation

Garavani
This post has NOT been accepted by the mailing list yet.
GREAT HELP!!!! THANKS!
Loading...