Rails spinoffs - Oct 2007 - css overflow:hidden attribute breaking on scriptaculous side scrolling animation?

Hi,

This may be a simple question but here goes:

I am trying to build a side scrolling animation like the one on
panic.com/coda and on
http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/
(from which I am using a modified code base)

My mock up so far: http://470teamusa.com/sidescroll.html

The scrolling works ok but on windows IE 7 and mozilla 2, the
overflow: hidden attribute seems to break whenever I start clicking
and scrolling - on IE 7 you can see the entire div instead of the
inactive parts being hidden by overflow.  in Mozilla, you see the
hidden elements whenever you scroll to the left but not to the
right.

Everything seems to work ok in Safari 3.0/Mac OS X and Safari 3.0/
windows, and Camino on the Mac....

Is there something I am missing here?  I''ve tried futzing around with
element widths, and changing around different versions of
scriptaculous and prototype but nothing seems to fix it.  I suspect
maybe something is off with my CSS...

Thanks,,

Tyler


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

did you notice that if you go from erin to isabelle the div shows, if you go
from isabelle to Olympics its still showing, however if you go from Olympics
to Schedule however, the div to the immediate right does not show as it did
before.

this tells me there is something "off" about the code invoked when
isabelle
and Olympics are activated. - perhaps a div id/name change or something like
that



On 10/4/07, tyler <tylercheungpub-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
>
> Hi,
>
> This may be a simple question but here goes:
>
> I am trying to build a side scrolling animation like the one on
> panic.com/coda and on
>
>
http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling-page-effect-with-scriptaculous/
> (from which I am using a modified code base)
>
> My mock up so far: http://470teamusa.com/sidescroll.html
>
> The scrolling works ok but on windows IE 7 and mozilla 2, the
> overflow: hidden attribute seems to break whenever I start clicking
> and scrolling - on IE 7 you can see the entire div instead of the
> inactive parts being hidden by overflow.  in Mozilla, you see the
> hidden elements whenever you scroll to the left but not to the
> right.
>
> Everything seems to work ok in Safari 3.0/Mac OS X and Safari 3.0/
> windows, and Camino on the Mac....
>
> Is there something I am missing here?  I''ve tried futzing around
with
> element widths, and changing around different versions of
> scriptaculous and prototype but nothing seems to fix it.  I suspect
> maybe something is off with my CSS...
>
> Thanks,,
>
> Tyler
>
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Looking at it more, I think there is an issue with the nested divs
inside each div block especially ones where transparency/opacity is
involved - these don''t hide all that well.

the way it works per the creative ui implementation of this is - there
is a "scrollbox" div that is set to the expected width and height -
1000px across, 500-ish px height, then there is a long horizontal div
nested in that which is the width of all the sections end to end.

Each content block is then fitted in into the long box end to end w/ a
float: left attribute and the script as far as i can tell scrolls them
across.

i''ve put into the content blocks for the 1st set, erin, and isabelle
sections a nested div set w/ particular widths and opacity
settings...i suspect this is what is screwing them up...schedule and
gallery have placeholders and no nested divs and thus seem to work ok.



.On Oct 4, 10:41 am, "Brian Williams"
<brianw1...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> did you notice that if you go from erin to isabelle the div shows, if you
go
> from isabelle to Olympics its still showing, however if you go from
Olympics
> to Schedule however, the div to the immediate right does not show as it did
> before.
>
> this tells me there is something "off" about the code invoked
when isabelle
> and Olympics are activated. - perhaps a div id/name change or something
like
> that
>
> On 10/4/07, tyler
<tylercheung...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
>
>
> > Hi,
>
> > This may be a simple question but here goes:
>
> > I am trying to build a side scrolling animation like the one on
> > panic.com/coda and on
>
>
>http://www.creativeui.com/2007/08/13/building-a-robust-side-scrolling...
> > (from which I am using a modified code base)
>
> > My mock up so far:http://470teamusa.com/sidescroll.html
>
> > The scrolling works ok but on windows IE 7 and mozilla 2, the
> > overflow: hidden attribute seems to break whenever I start clicking
> > and scrolling - on IE 7 you can see the entire div instead of the
> > inactive parts being hidden by overflow.  in Mozilla, you see the
> > hidden elements whenever you scroll to the left but not to the
> > right.
>
> > Everything seems to work ok in Safari 3.0/Mac OS X and Safari 3.0/
> > windows, and Camino on the Mac....
>
> > Is there something I am missing here?  I''ve tried futzing
around with
> > element widths, and changing around different versions of
> > scriptaculous and prototype but nothing seems to fix it.  I suspect
> > maybe something is off with my CSS...
>
> > Thanks,,
>
> > Tyler

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---