Results 1 to 4 of 4

Thread: Page location jump when clicking tabs

  1. #1
    Join Date
    Oct 2005
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Page location jump when clicking tabs

    1) Script Title: Ajax Tabs Content script

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tent/index.htm

    3) Describe problem:

    RE: http://www.equinox.ca/CathayUSAv5/new_product/index.htm

    My tabbed content is about a half way down the page and beyond the "first fold". When I click on different tabs, the new content loads in the right new tabs, but the page always returns to the top forcing you to have to scroll back down to the tabbed content each time. This is annoying to say the least.

    Is there any way of preventing this that people know of?

    Thanks in advance...

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Your problem is that the height of the page is changing. If you give the content display area a height that is as high as the highest content that will be displayed in it:

    Code:
    .contentstyle{
    width: 530px;
    margin-bottom: 1em;
    height:500px;
    }
    that should take care of it. I just guessed at 500px, seemed about right. Experiment, it may need to be a little more than that.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2005
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    That's a pretty clunky hack, but thanks for the help... I appreciate it!

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Clunky hack? Well a hack usually applies to only one browser but, I get your drift. However, I don't see what is so clunky about it. Let's say you had other content below that. To prevent that from jumping around, you would need something similar. If a certain amount of jumpiness is OK or even desirable, you could use a min-height but, that does require a hack to work in IE 6 and earlier:

    Code:
    min-height:450px;
    height:auto!important;
    height:450px;
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •