jquery ui tabs - screen jumps to top when clicked

[Ed]

I have jquery ui tabs at the bottom of my page.

When a tab is clicked, the screen jumps/scrolls to top.

How can I prevent this?

[Klaus Hartl]

That doesn't happen for me. Do you use the latest version? Which
browser does that happen in? Could you post a demo or show us some
code?

--Klaus

Post by Ed
I have jquery ui tabs at the bottom of my page.
When a tab is clicked, the screen jumps/scrolls to top.
How can I prevent this?

[Ed]

Thanks Klaus,

I see the issue in FireFox 3 and Internet Explorer 7 (screen jumps up
when tab is clicked).

Here is an example that shows the issue:
http://5bosses.com/examples/tabs/sample_tabs.html

I'm using the following parts of Jquery:
http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js
http://dev.jquery.com/view/tags/ui/latest/ui/ui.tabs.js

In a previous version, I also tried:
jquery-ui-personalized-1.6rc2.min.js

My goal is for the screen not to jump/scroll when the user clicks a
tab.

Here is a code sample (from the above linked page):

<script>
$(document).ready(function(){
$("#example > ul").tabs();
});
</script>

<table>
<tr>
<td valign="top" style="height: 400px; background-color: #ccc;">The
tabs are located beneath this table</td>
</tr>
</table>

<div id="example" class="flora">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
</div>
</div>

Thanks for your help.

Post by Klaus Hartl
That doesn't happen for me. Do you use the latest version? Which
browser does that happen in? Could you post a demo or show us some
code?
--Klaus

Post by Ed
I have jquery ui tabs at the bottom of my page.
When a tab is clicked, the screen jumps/scrolls to top.
How can I prevent this?

[JustGiz]

i dont know anything about jquery ui, but i think i might know your
problem.

are you using <a> for each tab?
are you using a href="#"?
are you making sure the click is returning false?

Post by Ed
I have jquery ui tabs at the bottom of my page.
When a tab is clicked, the screen jumps/scrolls to top.
How can I prevent this?

[Nicky]

I have the exact same problem as Ed: When clicking a tab the screen
jumps to the top.

See this for an example: http://www.sandstream.se/tabs_test2.html
Scroll down so the tabs is on top of the screen and click tab "Two".
The screen jumps to the top.

//Sandstream

I have jquery uitabsat the bottom of my page.
When a tab is clicked, the screen jumps/scrolls to top.
How can I prevent this?

[Nicky]

I think I know what's wrong with the Tabs-script, but not where and
what needs to be done.

The problem seems to be tabs that contains less text and doesn't need
the vertical scrollbar.
When you have both large and small tabs the error occurs.

See this page for more info: http://www.sandstream.se/tabs_test3.html

[Klaus Hartl]

Well, that doesn't seem to be an error but standard browser behavior.
If you switch to a tab that causes the page to not have a scrollbar,
the tabs appear to jump because the browser must rerender the page in
a way as if the scrollbar were moved to the top. The browser just
can't do anything else.

The only way to solve this is to give all tab panels the same height.
This is not always desirable though, thus it won't become standard
behavior but could be solved by yourself. Here's a little tabs
extension that does it:

$.extend($.ui.tabs.prototype, {
equalize: function() {
var heights = this.$panels.map(function() {
return $(this).height();
})
.get()
.sort(function(a, b) {
return b - a;
});
// set all panels to highest height
this.$panels.css('height', heights[0]);
}
});

Usage:

$('#container-1 > ul').tabs().tabs('equalize');


--Klaus

Post by Nicky
I think I know what's wrong with the Tabs-script, but not where and
what needs to be done.
The problem seems to be tabs that contains less text and doesn't need
the vertical scrollbar.
When you have both large and small tabs the error occurs.
See this page for more info:http://www.sandstream.se/tabs_test3.html

[Ed]

Thanks Klaus,

I added your code to my example and I still can't make it work as I
want.

The screen is scrolling to the top when a tab is clicked.

I have equal content inside each tab.

Here is my simple example. Please take a look.
http://5bosses.com/examples/tabs/sample_tabs.html

Am I doing something wrong?

Nicky's works, so I must have made some error.

Post by Klaus Hartl
Well, that doesn't seem to be an error but standard browser behavior.
If you switch to a tab that causes the page to not have a scrollbar,
the tabs appear to jump because the browser must rerender the page in
a way as if the scrollbar were moved to the top. The browser just
can't do anything else.
The only way to solve this is to give all tab panels the same height.
This is not always desirable though, thus it won't become standard
behavior but could be solved by yourself. Here's a little tabs
$.extend($.ui.tabs.prototype, {
    equalize: function() {
        var heights = this.$panels.map(function() {
            return $(this).height();
        })
        .get()
        .sort(function(a, b) {
            return b - a;
        });
        // set all panels to highest height
        this.$panels.css('height', heights[0]);
    }
});
$('#container-1 > ul').tabs().tabs('equalize');
--Klaus

Post by Nicky
I think I know what's wrong with the Tabs-script, but not where and
what needs to be done.
The problem seems to be tabs that contains less text and doesn't need
the vertical scrollbar.
When you have both large and small tabs the error occurs.
See this page for more info:http://www.sandstream.se/tabs_test3.html

[Klaus Hartl]

Well, you copied that stuff into the wrong place producing a syntax
error, thus the tabs don't work at all. Just append what I posted to
the end of the ui.tabs.js file or paste it into a separate file and
include it after the ui.tabs.js.

You should use Firebug - or at least the error console - to get
informed of such JavaScript errors.

--Klaus

Thanks Klaus!
It didn't fix the problem for me, my example still jumps to the top:http://www.sandstream.se/tabs_test3.html
As you say one solution might be to make the tabs the same hight by
putting content of the same size in them.
If you find another solution please let me know.
//Sandstream

[Ed]

Klaus,

Do you see any errors in my example? I added your code and double
checked everything (w/ firebug).

Clicking the tabs still causes the page to jump to top.

Can you take a look? What am I doing wrong?

http://5bosses.com/examples/tabs/sample_tabs.html

-Ed

Post by Klaus Hartl
Well, you copied that stuff into the wrong place producing a syntax
error, thus the tabs don't work at all. Just append what I posted to
the end of the ui.tabs.js file or paste it into a separate file and
include it after the ui.tabs.js.
You should use Firebug - or at least the error console - to get
informed of such JavaScript errors.
--Klaus

Thanks Klaus!
It didn't fix the problem for me, my example still jumps to the top:http://www.sandstream.se/tabs_test3.html
As you say one solution might be to make the tabs the same hight by
putting content of the same size in them.
If you find another solution please let me know.
//Sandstream

[Ed]

XS emailed me a solution. It worked!!!

How to stop screen from jumping up when tab is clicked:

Wrap the div that contains the tabs in a div with a fixed height.

See example here: http://5bosses.com/examples/tabs/sample_tabs.html

Post by Ed
Klaus,
Do you see any errors in my example? I added your code and double
checked everything (w/ firebug).
Clicking the tabs still causes the page to jump to top.
Can you take a look?  What am I doing wrong?
http://5bosses.com/examples/tabs/sample_tabs.html
-Ed

Post by Klaus Hartl
Well, you copied that stuff into the wrong place producing a syntax
error, thus the tabs don't work at all. Just append what I posted to
the end of the ui.tabs.js file or paste it into a separate file and
include it after the ui.tabs.js.
You should use Firebug - or at least the error console - to get
informed of such JavaScript errors.
--Klaus

Thanks Klaus!
It didn't fix the problem for me, my example still jumps to the top:http://www.sandstream.se/tabs_test3.html
As you say one solution might be to make the tabs the same hight by
putting content of the same size in them.
If you find another solution please let me know.
//Sandstream

[Kai-Bone]

I was having this problem with jquery-ui-1.8rc1.custom.min but found a
quickfix solution and the cause of the problem, but I'm not quite sure what
the real fix is.

The problem:
The fx: calls inside the .tabs call: $().tabs({ fx: { opacity: 'toggle' }
});

The solution:
Remove all fx: calls so your tabs call may look something like:
$('#foo').tabs(); where #foo is your tab div id

This immediately solve the page "jumping to top" issue for me.

So... the fx somehow are manipulating too much of the DOM and are causing
the page to want to semi-refresh, thus causing the browser the jump back to
the top. The trouble is, I like the effects! jQuery's fadeIn and fadeOut
functions do not cause this same issue, so something is a little messed up.
I took a look at the code (in a minified version) and didn't have the time
to start messing with it to find a solution. If anyone comes up with one,
it would be much appreciated.

But at least there is a simple, quick solution.

Hope it helps!

-Kai

[Nicky]

Thanks Klaus!

It didn't fix the problem for me, my example still jumps to the top:
http://www.sandstream.se/tabs_test3.html

As you say one solution might be to make the tabs the same hight by
putting content of the same size in them.

If you find another solution please let me know.

//Sandstream