Search jQuery

jQuery Forum

Using jQuery UI

Michael W..

Accordion - centering display on active div content panel?

in Using jQuery UI • 8 years ago

I have accordion working fine It really helps me organize a lot of data on a subject.

The "problem" I have is I want the active div content panel to be centered or moved to the top of the display.

If I have a long winded set of details on a subject in one div content panel then the next may have an image of the subject then the next div content panel may have some reference material on the subject. And this all works great, except when I open the first long winded div content panel I scroll down to the next accordion div header (again fine and dandy) but when I open that next div content panel the formerly displayed div content panel closes then the next one opens (as expected) but now my display window is at the bottom of the file and the second div content panel is "way up" in the display due to the former size of the last div content panel.

So if you have accordion working on 20 content panels it would be nice to not have to scroll all over the place to see the active div content panel.

So is there a way to establish a point in any given div content panel to be the "top" so that when div content panel are opened and closed that the "top" is positioned at the top of the display or any other specified location?

Thanks in advance!

Michael

Replies(6)

jakecigar

Re: Accordion - centering display on active div content panel?

8 years ago

Which accordion? jQuery UI?

Can you share a link to your page or a demo thereof?

Michael W..

Re: Accordion - centering display on active div content panel?

8 years ago

Accordion jQuery UI

The page requires registration and login credentials but I can attempt to re-sumarize or see if I can generate an open example at a future date.

For demonstration say you have accordion running well and as predicted but you are displaying several groups of large lists, images, maps etc.

On the top div you have a map that takes up 90% of you page. At the bottom of the page you see the <h3> name and div divider. If you click on it, the accordion closes the top div and opens the next, as expected.

But now the next div is slightly lower than the first div and the next <h3> name and div divider is not visible as the image/display is as big as the first. You have to scroll down to see the next <h3> name and divider. Now when you click on that one, again you need to scroll down to see the next div.

If when you open a <h3> namespace div it could be positioned at a specific spot in the display this would be fantastic. That way I could position not only the displayed accordion div but also be able to display the div namespace for both above and below the current displayed namespace.

And that is what my question is, if I can not do this with accordion, how else could I establish a relative anchor or positioning location in an accordion div and them position the div where I want to, after the accordion div has been opened?

The other option I suppose is to either make the images, maps etc smaller which is not really practical or just not use accordion and display individual pages that I can control the positioning but have a less than optimized really cool interface to page or cycle through the data.

Thanks!

Michael

jakecigar

Re: Re: Accordion - centering display on active div content panel?

8 years ago

There is a special area for jQuery UI questions. I’ll move the post.

JΛ̊KE

Michael W..

Re: Accordion - centering display on active div content panel?

8 years ago

Another potential solution is setting a point in an accordion div that when first opened moves to a fixed position in the display then allows the user to freely scroll around, releasing the fixed position.

ie.

<style>

div.pos_fixed {

position: fixed;

top: 30px;

left: 5px;

}

</style>

then release the css styling after the div has been opened. But I don't know how I could set the next opened div to that fixed position style as I won't know which accordion div the user may choose to open.

So if someone knows a trigger and release method that could position these div's that would be awesome.

TIA

Michael

kbwood.au

Re: Accordion - centering display on active div content panel?

8 years ago

Use the activate callback on the Accordion to be notified when the new panel has finished animating, and then scroll the page to the top of that panel.

Michael W..

Re: Accordion - centering display on active div content panel?

8 years ago

A little help would be great. I'm kind of new to this stuff so any help could be appreciated.

Check out :http://www.got-rv.com/maps.php

and you can see maybe what I am trying to accomplish by "centering the div".

I have accordion coming in as an included file and most of the pages are built with php via a database that is nit yet completed. Once I finish of the states info then I am on to the mapping itself where I have about 16,000 camping and rv parks to add to my database.

Top Reply

Response title

Attachments

jQuery Forum

Accordion - centering display on active div content panel?

Replies(6)

Re: Accordion - centering display on active div content panel?

Re: Accordion - centering display on active div content panel?

Re: Re: Accordion - centering display on active div content panel?

Re: Accordion - centering display on active div content panel?

Re: Accordion - centering display on active div content panel?

Re: Accordion - centering display on active div content panel?

Statistics

Tags

Actions