Page Jump

[cavidano]

Hello,

I love the EasyTabs plug-in. Very clean and simple. I am having an issue though with the page jumping to the top (like an anchor) when clicked.

Please find the live example here:

http://unicef.milestone-creative.com/natcom-donor-toolkits/toolkit.php

Select any of the tabs (Toolkit Document, Results Matrix, Budget, etc.) you will find the issue.

Thank you in advance to your attention to this matter.

Carl

[DaAwesomeP]

@cavidano, it seems that the browser is not jumping or ignoring the anchors correctly. This isn't really a solid fix, but just a way around it. You can weave in some javascript to force the browser to keep the view on the tabs.

I found this:(http://stackoverflow.com/questions/68165/javascript-to-scroll-long-page-to-div)

document.getElementById('document-tabs').scrollIntoView();

Experiment with this with adding this snippet to the event hooks (http://os.alfajango.com/easytabs/#event-hooks). You can also change "document-tabs" to whatever id of any other element you wish for it to jump to. 😃

[wisteso]

I don't think you have to use the above solution. My own usage has some issues with the scrollbar snapping to a weird position, but that's on pages with two levels of easytabs. One level of easytabs has had no jumping issues for me and should be fine for you.

Unfortunately I don't know why that's happening to you, but I can say I'm pretty sure that you don't need a javascript workaround. Most of the "gotchyas" I figured out with EasyTabs required some heavy experimentation.

The only thing that looks different from your use of EasyTabs is that you're not wrapping the content panels in a container div. You might want to try that.

[DaAwesomeP]

@wisteso, notice how it is snapping to the top of the page. That is what is extraordinary. But yes, @cavidano, you do need to wrap the panels in a div. I notice that when in the Human Interests Materials tab, when clicking on the Story, Photo, or Video tabs, it causes it to jump to the top of the outer tabs. The container div might be the source of the problem. If not, you could use my solution.

[JangoSteve]

I would guess the container div is the issue. The issue with page jumping I've seen in the past is cause usually by one of two things (both of which easytabs takes into account when used as directed):

---

1. When enabling the URL hash to be updated which allows forward and back buttons to work, browser windows will see that the URL has changed to an anchor that matches an element's ID or name attribute on the page and will jump to that anchor target. The only way to update the URL without the browser window jumping to the target is to make sure that no matching target is visible on the page at the time the URL is updated.

This is why easytabs updates the hash right before showing the target panel, rather than after. So, this should not be an issue. If it is, then something is going wrong as there should be no target on the page for the window to jump to at the time the URL is updated.

Basically, the symptom of this case is that the browser jumps to the top of the panel. Since you're seeing the browser jump to the top of the page (and assuming it's not updating the URL with an empty hash which the browser interprets as an anchor link to the top of the page), I'm guessing it's not this that's causing your issue.

On a side note, easytabs was built before pushState was a thing, so it'd be nice at some point to update the hash-updating function in easytabs to use pushState when the browser supports it.

---

2. The second scenario is when the browser window jumps up to the top of the page when changing a tab. The reason this happens is because, when changing tabs, we're doing two things: 1) hide the active panel, then 2) show the selected panel.

This actually causes an issue if you think about it, as there is a split-second where both panels are hidden (right after the active panel is hidden but right before the selected panel is shown). At this very instant in time, the height of your panel area is zero pixels.

If your page is short enough that the entire content suddenly fits within your current browser window when the panels are hidden, this means there's no longer enough screen-height for your page to be scrolled at all, and thus the top of the visible page, where you're currently scrolled to, will shoot up because there's nothing left to scroll.

Then right after that instant, the selected panel is shown, only the browser won't know that it should re-scroll to where you were back before the page shrank.

This is why it's important to have a panel container. Easytabs actually prevents the above situation from occurring by briefly setting the panel container to have an explicit height (set to whatever its height is right before the active panel is hidden), so that it doesn't collapse in that instant where all panels are hidden.

---

Sorry if this seems complicated at all. You would think tab functionality is straight forward and easy (that's what I thought when I started easytabs anyway, hence the name). Turns out, these are the things you find out must be dealt with after maintaining a tabs library for years. In other words, there is a reason to what little madness is present in easytabs, and why seemingly unnecessary things like having a panel container div are important.

[cavidano]

Thanks Guys,

FIXED! Actually I ended using your

suggestion coupled with setting the animationSpeed: 0, which works. No tabs jump now accross the site.

http://unicef.milestone-creative.com/natcom-donor-toolkits/toolkit.php

Thank you again for your suggestions.
Carl

[LongHu]

How do you do, Mr.JangoSteve?
I like your easy-tab very much.
But I have a issue.
When page reloading, I click the tab, then the page automatically moves to the middle.
How can I fix this?
Help me!!!

[Bratzilla]

Hmm... could you provide more information? For example, do you have all your jQuery calls wraped in a document ready tag? Do you have multiple plugins running? If so, what are they? Sometimes if you are loading a lot of stuff things start rendering before the page is actually ready and weird stuff happens.

In other words, more information is needed in order to understand what's going on. :)

[iPaat]

The problem is, when you got a link with given hash like "http://test.com#tab_1" and you call it directly in your browser, the document will jump somewhere next to middle of the page.

I found a solution to prevent this:

$(document).ready(function () {
    $('html,body').animate({scrollTop: 0}, 0);
});

But! This cause the page on every page reload to scroll to top.

Better solution is maybe to use not minifyed version and add in function "setDefaultTab" after:

if ($selectedTab.length === 1) {
  $defaultTab = $selectedTab;
  settings.cycle = false;

and before:

} else {

this little line:

$('html,body').animate({scrollTop: 0}, 0);

Now the page jumps only to top if the hash "#tab_1" directly match.

EDIT:

I have to add:
This solution is not the best way I think. Because if Users scrolled down and then refreshes the page, the page automatic jumps back to top.
But I have no idea to prevent better.

[Studioactiv8]

I think I have something going that might help us figure this out..
I have a good example of the ‘quirk’ that I would like to share
and see what you think.

the tabs ‘jump’ but a link on the page doesn’t SEE page link.. 'Programs' in sidebar it uses #talk too..
http://69.195.124.87/~speaket4/speakers/dr-tasha-eurich/

PS the other interesting thing that was happening that I 'styled' out, was
when I clicked on the tabs a blue line/border would surround the text block
i.e. #talks would get a line around it's text.

[Studioactiv8]

I can see what it is now.. but I don't know exactly how to fix it.

If you click the #link more than one time the second one makes the jump happen. so it seems like the tabs are somehow sending the #tag twice on a single click.

You can see this if you just add the #tag manually in the browser. Load it twice without changing the tab and you will see the jump.

[Studioactiv8]

I just aded this to my div #ids http://css-tricks.com/hash-tag-links-padding/ it isn't a full solution but it works for getting control over the jumps.