Accordion - scrolls up instead of down

36 views
Skip to first unread message

jbmoore

unread,
Dec 9, 2008, 9:13:49 PM12/9/08
to MooTools Users
New to MooTools and really was attracted to the accordion plugin. I
used the exact code in the demo and just replaced the "text" with a
table. (and some color styles) Otherwise did not change any code.
(downloaded the latest core and more. The tables vary from about 6
to 20 rows so some tables do bleed below the fold of the browser
viewport.

The problem I'm seeing and think will be disconcerting to a user is
that under certain conditions, when you click certain accordion
elements, the table "scrolls up" so the clicked element (which is a
statement) scrolls out of sight..

You can see the effect here.. (tested in FireFox 3 on Mac OSX -
1440x900 resolution and IE7 on Windows XP)

http://www.sonicwebtech.com/paypalestimate.html

As a demo click the following statements after it loads..

1) Scroll down so you can see all of the lower statements after the
"Company and ..."
2) CLICK the statement "We are not sure what PayPal solution is best
for our needs."
3) For me the statement now scrolls "UP" off the browser viewport.

I would have expected the statement to stay in it's current location
and the table to open "down" .

Hopefully you see what I mean..

If so, any suggestions on how to prevent this behavior..

Thank you...

John..

nutron

unread,
Dec 9, 2008, 9:17:54 PM12/9/08
to mootool...@googlegroups.com
The problem is that some of your content is longer than others and the bottom of the window gets pulled up when the longer content closes. Try adding a bit of padding below your content (a couple hundred pixels).
The MooTools Tutorial: www.mootorial.com CNET Clientside: clientside.cnet.com


View this message in context: Re: Accordion - scrolls up instead of down
Sent from the MooTools Users mailing list archive at Nabble.com.

jbmoore

unread,
Dec 10, 2008, 2:34:43 PM12/10/08
to MooTools Users
Thanks for the reply...

I thought I posted this already, but I guess not...

I added a LOT of space where I thought you indicated and that does not
seem to help.. If you wouldn't mind checking that link again you can
see my changes and that the effect remains..

John...

nutron

unread,
Dec 10, 2008, 2:45:31 PM12/10/08
to mootool...@googlegroups.com
er, fine.

On Wed, Dec 10, 2008 at 11:45 AM, Aaron Newton <aaron@...> wrote:
It looks find to me (FF3, OSX).

nutron

unread,
Dec 10, 2008, 2:46:41 PM12/10/08
to mootool...@googlegroups.com
It looks find to me (FF3, OSX).

jbmoore

unread,
Dec 11, 2008, 4:44:19 PM12/11/08
to MooTools Users
Hmm... ok... It is still behaving strange for me..

Let me be clear on the correct sequence to produce the effect.

1) Load the page fresh.
2) Scroll down so that the "Company Information" statement and table
has scrolled UP out of view and you can only see the "checkbox"
statements. (This is important, and IMO would be very likely because
the user will want to see all of the statements to review)
3) Click the FIRST statement "We are not sure what PayPal solution is
best for our needs."
4) For me it now scrolls UP leaving me to see only to see the bottom
of the exposed table.

The user has to now scroll up to see the beginning of that table and
that clicked statement.

I "think" what is happening is that the clicked statement scrolls UP
to the previously active statement which is UP out of view. This is
fine as a start, and makes sense, but I think there needs to be a
check that the "active" toggler element is moved INTO the viewport
at some point in the process.

If you have a chance to try this again, that would be appreciated..

Thanks for replying..

John..

On Dec 10, 11:46 am, nutron <anut...@gmail.com> wrote:
> It looks find to me (FF3, OSX).
>
> On Wed, Dec 10, 2008 at 11:35 AM, jbmoore (via Nabble) <
> ml-user+135638-1797090...@n2.nabble.com<ml-user%2B135638-1797090...@n2.nabble.com>
>
>
>
> > wrote:
>
> > Thanks for the reply...
>
> > I thought I posted this already, but I guess not...
>
> > I added a LOT of space where I thought you indicated and that does not
> > seem to help.. If you wouldn't mind checking that link again you can
> > see my changes and that the effect remains..
>
> > John...
>
> > ------------------------------
> >  View message @
> >http://n2.nabble.com/Accordion---scrolls-up-instead-of-down-tp1636986...
> > To start a new topic under MooTools Users, email
> > ml-node+660466-1583815...@n2.nabble.com<ml-node%2B660466-1583815...@n2.nabble.com>
> > To unsubscribe from MooTools Users, click here< (link removed) >.
>
> -----
> The MooTools Tutorial:  http://www.mootorial.comwww.mootorial.com
> CNET Clientside:  http://clientside.cnet.comclientside.cnet.com
> --
> View this message in context:http://n2.nabble.com/Accordion---scrolls-up-instead-of-down-tp1636986...

nutron

unread,
Dec 11, 2008, 6:58:28 PM12/11/08
to mootool...@googlegroups.com
This is how accordion works. If you have a big item open and you expose a smaller one, the page size shrinks:

item 1: 20px high
item 2: 100px

page height excluding either one: 200px.

state 1: item 2 is hidden: page height: 220px
state 2: item 1 is hidden: page height: 300px

Because the page height changes if you are all the way at the bottom of the page it will appear to scroll up, though really what is happening is that the page is getting shorter.

On Thu, Dec 11, 2008 at 1:44 PM, jbmoore (via Nabble) <ml-user%2B135638-1797090524@...> wrote:

Hmm... ok... It is still behaving strange for me..

Let me be clear on the correct sequence to produce the effect.

1) Load the page fresh.
2) Scroll down so that the "Company Information" statement and table
has scrolled UP out of view and you can only see the "checkbox"
statements. (This is important, and IMO would be very likely because
the user will want to see all of the statements to review)
3) Click the FIRST statement "We are not sure what PayPal solution is
best for our needs."
4) For me it now scrolls UP leaving me to see only to see the bottom
of the exposed table.

The user has to now scroll up to see the beginning of that table and
that clicked statement.

I "think" what is happening is that the clicked statement scrolls UP
to the previously active statement which is UP out of view. This is
fine as a start, and makes sense, but I think there needs to be a
check that the "active" toggler  element is moved  INTO  the viewport
at some point in the process.

If you have a chance to try this again, that would be appreciated..

Thanks for replying..

John..

On Dec 10, 11:46 am, nutron <anut...@...> wrote:

> It looks find to me (FF3, OSX).
>
> On Wed, Dec 10, 2008 at 11:35 AM, jbmoore (via Nabble) <
>

>
>
> > wrote:
>
> > Thanks for the reply...
>
> > I thought I posted this already, but I guess not...
>
> > I added a LOT of space where I thought you indicated and that does not
> > seem to help.. If you wouldn't mind checking that link again you can
> > see my changes and that the effect remains..
>
> > John...
>
> > ------------------------------
> >  View message @
> >http://n2.nabble.com/Accordion---scrolls-up-instead-of-down-tp1636986...
> > To start a new topic under MooTools Users, email
> > To unsubscribe from MooTools Users, click here< (link removed) >.
>
> -----
> The MooTools Tutorial:  http://www.mootorial.comwww.mootorial.com
> CNET Clientside:  http://clientside.cnet.comclientside.cnet.com
> --
> View this message in context:http://n2.nabble.com/Accordion---scrolls-up-instead-of-down-tp1636986...
> Sent from the MooTools Users mailing list archive at Nabble.com.
The MooTools Tutorial: www.mootorial.com CNET Clientside: clientside.cnet.com


View this message in context: Re: Accordion - scrolls up instead of down

jbmoore

unread,
Dec 13, 2008, 6:28:47 PM12/13/08
to MooTools Users
Ok.. I understand what you are saying..

But..<smile>

The question still is, but now reworded: How does one fix the
situation where of the page height changing (increasing) causes the
undesirable "effect" that the selected statement is scrolling up out
of sight?

Idea: Is there a way to place an "anchor" above each statement
(toggler) and have the function like:

function jumpToAnchor(arg_sAnchor) {
window.location.hash= arg_sAnchor;
}

triggered.. where "arg_sAnchor" is dynamically set for each
statement..??

(Not familiar enough with MooTools to understand how to hack this
in...)

Or.. do you have another suggestion..??

Thank you for your help..

John...

On Dec 11, 3:58 pm, nutron <anut...@gmail.com> wrote:
> This is how accordion works. If you have a big item open and you expose a
> smaller one, the page size shrinks:
> item 1: 20px high
> item 2: 100px
>
> page height excluding either one: 200px.
>
> state 1: item 2 is hidden: page height: 220px
> state 2: item 1 is hidden: page height: 300px
>
> Because the page height changes if you are all the way at the bottom of the
> page it will appear to scroll up, though really what is happening is that
> the page is getting shorter.
>
> On Thu, Dec 11, 2008 at 1:44 PM, jbmoore (via Nabble) <
> ml-user+135638-1797090...@n2.nabble.com<ml-user%2B135638-1797090...@n2.nabble.com>
>
>
>
> > wrote:
>
> > Hmm... ok... It is still behaving strange for me..
>
> > Let me be clear on the correct sequence to produce the effect.
>
> > 1) Load the page fresh.
> > 2) Scroll down so that the "Company Information" statement and table
> > has scrolled UP out of view and you can only see the "checkbox"
> > statements. (This is important, and IMO would be very likely because
> > the user will want to see all of the statements to review)
> > 3) Click the FIRST statement "We are not sure what PayPal solution is
> > best for our needs."
> > 4) For me it now scrolls UP leaving me to see only to see the bottom
> > of the exposed table.
>
> > The user has to now scroll up to see the beginning of that table and
> > that clicked statement.
>
> > I "think" what is happening is that the clicked statement scrolls UP
> > to the previously active statement which is UP out of view. This is
> > fine as a start, and makes sense, but I think there needs to be a
> > check that the "active" toggler  element is moved  INTO  the viewport
> > at some point in the process.
>
> > If you have a chance to try this again, that would be appreciated..
>
> > Thanks for replying..
>
> > John..
>
> > On Dec 10, 11:46 am, nutron <anut...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=1645334&i=0>>
> > wrote:
>
> > > It looks find to me (FF3, OSX).
>
> > > On Wed, Dec 10, 2008 at 11:35 AM, jbmoore (via Nabble) <
> > > ml-user+135638-1797090...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=1645334&i=1>
> > <ml-user%2B135638-1797090...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=1645334&i=2>>
>
> > > > wrote:
>
> > > > Thanks for the reply...
>
> > > > I thought I posted this already, but I guess not...
>
> > > > I added a LOT of space where I thought you indicated and that does not
> > > > seem to help.. If you wouldn't mind checking that link again you can
> > > > see my changes and that the effect remains..
>
> > > > John...
>
> > > > ------------------------------
> > > >  View message @
> > > >http://n2.nabble.com/Accordion---scrolls-up-instead-of-down-tp1636986...
>
> > > > To start a new topic under MooTools Users, email
> > > > ml-node+660466-1583815...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=1645334&i=3>
> > <ml-node%2B660466-1583815...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=1645334&i=4>>
>
> > > > To unsubscribe from MooTools Users, click here< (link removed) >.
>
> > > -----
> > > The MooTools Tutorial:  http://www.mootorial.comwww.mootorial.com
> > > CNET Clientside:  http://clientside.cnet.comclientside.cnet.com
> > > --
> > > View this message in context:
> >http://n2.nabble.com/Accordion---scrolls-up-instead-of-down-tp1636986...
> > > Sent from the MooTools Users mailing list archive at Nabble.com.
>
> > ------------------------------
> >  View message @
> >http://n2.nabble.com/Accordion---scrolls-up-instead-of-down-tp1636986...
> > To start a new topic under MooTools Users, email
> > ml-node+660466-1583815...@n2.nabble.com<ml-node%2B660466-1583815...@n2.nabble.com>

nutron

unread,
Dec 13, 2008, 6:30:38 PM12/13/08
to mootool...@googlegroups.com
Put the accordion in a container with a fixed height that is greater than the height of the tallest item in the accordion.

On Sat, Dec 13, 2008 at 3:29 PM, jbmoore (via Nabble) <ml-user%2B135638-1797090524@...> wrote:

Ok.. I understand what you are saying..

But..<smile>

The question still is, but now reworded:  How does one fix the
situation where of the page height changing (increasing) causes the
undesirable "effect" that the selected statement is scrolling up out
of sight?

Idea: Is there a way to place an "anchor" above each statement
(toggler) and have the function like:

function jumpToAnchor(arg_sAnchor) {
      window.location.hash= arg_sAnchor;
}

triggered.. where "arg_sAnchor" is dynamically set for each
statement..??

(Not familiar enough with MooTools to understand how to hack this
in...)

Or.. do you have another suggestion..??

Thank you for your help..

John...

On Dec 11, 3:58 pm, nutron <anut...@...> wrote:

> This is how accordion works. If you have a big item open and you expose a
> smaller one, the page size shrinks:
> item 1: 20px high
> item 2: 100px
>
> page height excluding either one: 200px.
>
> state 1: item 2 is hidden: page height: 220px
> state 2: item 1 is hidden: page height: 300px
>
> Because the page height changes if you are all the way at the bottom of the
> page it will appear to scroll up, though really what is happening is that
> the page is getting shorter.
>
> On Thu, Dec 11, 2008 at 1:44 PM, jbmoore (via Nabble) <
> > To unsubscribe from MooTools Users, click here< (link removed) >.
>
> -----
> The MooTools Tutorial:  http://www.mootorial.comwww.mootorial.com
> CNET Clientside:  http://clientside.cnet.comclientside.cnet.com
> --
> View this message in context:http://n2.nabble.com/Accordion---scrolls-up-instead-of-down-tp1636986...
> Sent from the MooTools Users mailing list archive at Nabble.com.

The MooTools Tutorial: www.mootorial.com Clientcide: www.clientcide.com


View this message in context: Re: Accordion - scrolls up instead of down
Message has been deleted
Message has been deleted
Message has been deleted

jbmoore

unread,
Dec 13, 2008, 7:19:00 PM12/13/08
to MooTools Users
Sorry to be such a PITA...

I did what I thought you suggested and wrapped a <div
id="fromwrapper"> around the <form> in which the accordion is
embedded. I gave that div a fixed height to 3000px (which for testing
is about twice the height of the longest statement/table combination)

Sadly, I either am completely missing the point and clueless, or that
is not working as you expected. (I hope the former and you enlighten
me..)

John...

On Dec 13, 3:30 pm, nutron <anut...@gmail.com> wrote:
> Put the accordion in a container with a fixed height that is greater than
> the height of the tallest item in the accordion.
>
> On Sat, Dec 13, 2008 at 3:29 PM, jbmoore (via Nabble) <
> ml-user+135638-1797090...@n2.nabble.com<ml-user%2B135638-1797090...@n2.nabble.com>
>
>
>
> > wrote:
>
> > Ok.. I understand what you are saying..
>
> > But..<smile>
>
> > The question still is, but now reworded:  How does one fix the
> > situation where of the page height changing (increasing) causes the
> > undesirable "effect" that the selected statement is scrolling up out
> > of sight?
>
> > Idea: Is there a way to place an "anchor" above each statement
> > (toggler) and have the function like:
>
> > function jumpToAnchor(arg_sAnchor) {
> >       window.location.hash= arg_sAnchor;
> > }
>
> > triggered.. where "arg_sAnchor" is dynamically set for each
> > statement..??
>
> > (Not familiar enough with MooTools to understand how to hack this
> > in...)
>
> > Or.. do you have another suggestion..??
>
> > Thank you for your help..
>
> > John...
>
> > On Dec 11, 3:58 pm, nutron <anut...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=1653126&i=0>>
> > wrote:
>
> > > This is how accordion works. If you have a big item open and you expose a
>
> > > smaller one, the page size shrinks:
> > > item 1: 20px high
> > > item 2: 100px
>
> > > page height excluding either one: 200px.
>
> > > state 1: item 2 is hidden: page height: 220px
> > > state 2: item 1 is hidden: page height: 300px
>
> > > Because the page height changes if you are all the way at the bottom of
> > the
> > > page it will appear to scroll up, though really what is happening is that
>
> > > the page is getting shorter.
>
> > > On Thu, Dec 11, 2008 at 1:44 PM, jbmoore (via Nabble) <
> > > ml-user+135638-1797090...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=1653126&i=1>
> > <ml-user%2B135638-1797090...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=1653126&i=2>>
> > > > ml-node+660466-1583815...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=1653126&i=3>
> > <ml-node%2B660466-1583815...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=1653126&i=4>>
>
> > > > To unsubscribe from MooTools Users, click here< (link removed) >.
>
> > > -----
> > > The MooTools Tutorial:  http://www.mootorial.comwww.mootorial.com
> > > CNET Clientside:  http://clientside.cnet.comclientside.cnet.com
> > > --
> > > View this message in context:
> >http://n2.nabble.com/Accordion---scrolls-up-instead-of-down-tp1636986...
> > > Sent from the MooTools Users mailing list archive at Nabble.com.
>
> > ------------------------------
> >  View message @
> >http://n2.nabble.com/Accordion---scrolls-up-instead-of-down-tp1636986...
> > To start a new topic under MooTools Users, email
> > ml-node+660466-1583815...@n2.nabble.com<ml-node%2B660466-1583815...@n2.nabble.com>
> > To unsubscribe from MooTools Users, click here< (link removed) >.
>
> -----
> The MooTools Tutorial:  http://www.mootorial.comwww.mootorial.com
> Clientcide:  http://www.clientcide.comwww.clientcide.com

cesarcesar

unread,
Dec 15, 2008, 5:44:52 AM12/15/08
to mootool...@googlegroups.com

I too am looking for a fix to this issue right away. You can also my demo
page with issue http://cesarvillaca.com/temp/accordion_top_scroll here .


-----

Cesar Villaca
http://www.cesarvillaca.com http://www.cesarvillaca.com
--
View this message in context: http://n2.nabble.com/Accordion---scrolls-up-instead-of-down-tp1636986p1657671.html

cesarcesar

unread,
Dec 15, 2008, 6:21:10 AM12/15/08
to mootool...@googlegroups.com

@jbmoore -

I have posted my own topic at
http://www.mooforum.net/help12/accordion-sliding-screen-top-open-t918.html#p2941
if you want to follow it also. I will report anything i find as well.


-----

View this message in context: http://n2.nabble.com/Accordion---scrolls-up-instead-of-down-tp1636986p1657792.html

cesarcesar

unread,
Dec 15, 2008, 7:38:34 AM12/15/08
to mootool...@googlegroups.com

Check http://www.programmingtalk.com/showthread.php?p=163088#post163088 this
solution out . Its not the solution i was exactly wanting, but it does
"work" for now. I really am looking for a solution built into the Moo code.


-----

View this message in context: http://n2.nabble.com/Accordion---scrolls-up-instead-of-down-tp1636986p1657973.html

rpflo

unread,
Dec 15, 2008, 12:23:13 PM12/15/08
to MooTools Users
An accordion that has content from 2000px to 200px should probably
take a backseat to using Fx.Slide (slide out on check, slide in on
uncheck) for each checkbox.

1) This solves your concerns and won't throw the <h3> they clicked on
out of view, it will just slide on down and

2) Solves my issue of having a form that hides stuff I've filled out,
as a user I'd want to see the stuff in the form I've filled out
instead of an accordion hiding it.

I have to uncheck the section of the form I've already filled out to
see what I siad, and then check it again to make sure I've got it
checked. Bad usability.

But if you disagree, a second solution is to add a Fx.Scroll to the
window. Then when they toggle the accordion by clicking the <h3> you
can throw in a line to scroll to that <h3>. That's probably exactly
what you're looking for.

var myScroll = new Fx.Scroll(window);

click a checkbox (<h3>):

myScroll.toElement('myElement');

But I'd still recommend using Fx.Slide on the elements instead of the
accordion. It's still sexy-animated how you love it, but more
importantly, more usable.

Merry Christmas!

On Dec 15, 5:38 am, cesarcesar <ce...@cesarvillaca.com> wrote:
> Check  http://www.programmingtalk.com/showthread.php?p=163088#post163088this
> solution out . Its not the solution i was exactly wanting, but it does
> "work" for now. I really am looking for a solution built into the Moo code.
>
>
>
>
>
> cesarcesar wrote:
>
> > @jbmoore -
>
> > I have posted my own topic at
> >http://www.mooforum.net/help12/accordion-sliding-screen-top-open-t918...
> Cesar Villacahttp://www.cesarvillaca.comhttp://www.cesarvillaca.com
> --
> View this message in context:http://n2.nabble.com/Accordion---scrolls-up-instead-of-down-tp1636986...

cesarcesar

unread,
Dec 15, 2008, 1:52:01 PM12/15/08
to mootool...@googlegroups.com

jbmoore

unread,
Dec 15, 2008, 8:27:21 PM12/15/08
to MooTools Users
Perfect... Thank You!

I'm posting my code here so that whomever revises the demo can add
this...

var myAccordion = new Accordion($('accordion'), 'h3.toggler',
'div.element', {
opacity: false,
onActive: function(toggler, element){
toggler.setStyle('color', '#FF0000');
},
onBackground: function(toggler, element){
toggler.setStyle('color', '#663333');
},
onComplete: function(element){
if(element.getSize().y>0){
element.setStyle('height','auto');
}
element.scrollIntoView(true);
},
});


On Dec 15, 10:52 am, cesarcesar <ce...@cesarvillaca.com> wrote:
> @jbmoore -
>
> Here's the solution. Happy Coding!http://www.webdeveloper.com/forum/showthread.php?p=960200#post960200
> Cesar Villacahttp://www.cesarvillaca.comhttp://www.cesarvillaca.com
> --
> View this message in context:http://n2.nabble.com/Accordion---scrolls-up-instead-of-down-tp1636986...
Reply all
Reply to author
Forward
0 new messages