jquery ui tabs - screen jumps to top when clicked

classic Classic list List threaded Threaded
16 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

jquery ui tabs - screen jumps to top when clicked

Ed-612

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?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: jquery ui tabs - screen jumps to top when clicked

Klaus Hartl-4

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


On 26 Okt., 03:16, Ed <[hidden email]> wrote:
> 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?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: jquery ui tabs - screen jumps to top when clicked

JustGiz
In reply to this post by Ed-612

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?

On Oct 25, 7:16 pm, Ed <[hidden email]> wrote:
> 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?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: jquery ui tabs - screen jumps to top when clicked

Ed-612
In reply to this post by Klaus Hartl-4

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.


On Oct 26, 3:20 am, Klaus Hartl <[hidden email]> wrote:

> 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
>
> On 26 Okt., 03:16, Ed <[hidden email]> wrote:
>
> > 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?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: jquery ui tabs - screen jumps to top when clicked

Nicky-4
In reply to this post by Ed-612

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

On 26 Okt, 03:16, Ed <[hidden email]> wrote:
> 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?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: jquery ui tabs - screen jumps to top when clicked

Nicky-4

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
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: jquery ui tabs - screen jumps to top when clicked

Klaus Hartl-4

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



On 30 Okt., 21:56, Nicky <[hidden email]> wrote:
> 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
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: jquery ui tabs - screen jumps to top when clicked

Ed-612

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.



On Oct 30, 5:07 pm, Klaus Hartl <[hidden email]> wrote:

> 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
>
> On 30 Okt., 21:56, Nicky <[hidden email]> wrote:
>
> > 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
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: jquery ui tabs - screen jumps to top when clicked

Nicky-4
In reply to this post by Klaus Hartl-4

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
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: jquery ui tabs - screen jumps to top when clicked

Klaus Hartl-4

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


On 31 Okt., 10:11, Nicky <[hidden email]> wrote:

> 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
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: jquery ui tabs - screen jumps to top when clicked

Ed-612

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

On Oct 31, 8:13 am, Klaus Hartl <[hidden email]> wrote:

> 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
>
> On 31 Okt., 10:11, Nicky <[hidden email]> wrote:
>
> > 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
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: jquery ui tabs - screen jumps to top when clicked

Ed-612

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


On Nov 1, 10:25 am, Ed <[hidden email]> wrote:

> 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
>
> On Oct 31, 8:13 am, Klaus Hartl <[hidden email]> wrote:
>
> > 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
>
> > On 31 Okt., 10:11, Nicky <[hidden email]> wrote:
>
> > > 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
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: jquery ui tabs - screen jumps to top when clicked

Klaus Hartl-4

I've also just committed a fix that handles the jumping - as long as
you're not using a slide effect for tabs on a scrolled down page. The
reason is that the height of the page is changed by the slide, thus
affecting the scrollbar which is not put back into its former state
after the animation is completed.

The workaround described above will still apply in that case.

--Klaus


On 2 Nov., 22:20, Ed <[hidden email]> wrote:

> 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
>
> On Nov 1, 10:25 am, Ed <[hidden email]> wrote:
>
> > 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
>
> > On Oct 31, 8:13 am, Klaus Hartl <[hidden email]> wrote:
>
> > > 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
>
> > > On 31 Okt., 10:11, Nicky <[hidden email]> wrote:
>
> > > > 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
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: jquery ui tabs - screen jumps to top when clicked

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  
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: jquery ui tabs - screen jumps to top when clicked

tedly3000
Kai-Bone wrote
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  
Have you tried implementing this:  http://api.jquery.com/event.preventDefault/ ?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: jquery ui tabs - screen jumps to top when clicked

simpalm
This post has NOT been accepted by the mailing list yet.
In reply to this post by Ed-612
you can get the help from below example:
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

In a previous version, I also tried:
jquery-ui-personalized-1.6rc2.min.js
Source: www.simpalm.com
Loading...