4

So on the site STVPlus we use bootstrap and the tabs script to show episodes and articles lists for various tv shows. I am having an issue where once the page has loaded (usually) it works fine, you can select a tab and the appropriate div will show. However if you select an already active div the page jumps down.Also when loading the page with a hash tag like so episodes hash tag link, then it automatically jumps down when page is fully loaded. I have tried stepping through the JS code using chrome dev tools, however I could not find anything obvious.

Any help would be appreciated.

Sample code:

$(function()
{
    $('.sidebar').jScrollPane();

  // Bind an event to window.onhashchange that, when the hash changes, gets the
  // hash and adds the class "selected" to any matching nav link.
  $(window).hashchange( function(){
    var hash = location.hash;


    if ( hash == '#episodes'){
        //e.preventDefault();
        $('.nav-pills a:last').tab('show');
    }else{
        //e.preventDefault();
        $('.nav-pills a:first').tab('show');
    }

  })

  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).hashchange();
  return false;
});

the episodes div container is like so

<div class="tab-pane" id="episodes">    ..... </div>

and the tab you click is like so

<ul class="nav nav-pills pull-right" data-tabs="tabs">
   <li class="active"><a href="<?php echo current_url(); ?>#articles">Latest Articles</a></li>
   <li><a href="<?php echo current_url(); ?>#episodes">Upcoming Episodes</a></li>
   </ul>

I use the latest jquery, with http://benalman.com/projects/jquery-hashchange-plugin/

4
  • You should post a minimalistic version of the code you are using. Why don't you use the proper initialization instead of binding on the hashtag ? That way you could intercept the clicks. Page jumps are a feature of HTML, either choose directness (IDs in hash) or put your own hashtag <-> tab matcher.
    – Sherbrow
    Jul 5, 2012 at 17:30
  • Thanks I have added sample code. If its a feature, then jquery would be able to prevent that right? I have tried preventdefault in places, no luck yet. How would I go about doing it so it prevents the page jump?
    – viperfx
    Jul 6, 2012 at 13:21
  • I don't think you can prevent that. As far as I know it's a browser thing, maybe too low for JS. Do you need to listen on the hashchange for something other than the tab pills ?
    – Sherbrow
    Jul 6, 2012 at 16:51
  • Nope its just the tab pills for now.
    – viperfx
    Jul 6, 2012 at 19:44

4 Answers 4

4

This is what would be my approach concerning your problem :

I'm not sure that you need the hashchange plugin - except for some document.location.hash fallback (if there's any).

The following code uses the classic bootstrap tabs, manually activated, and a bit of onready code that will show the tab matching the hash.

var hasHash = false;
var hash = document.location.hash;
if(hash) {
    hasHash = true;
    var $toggleTab = $('a[href='+hash+']');
    if($toggleTab.length) $toggleTab.tab('show');
}

Tab activation :

$('.nav > li > a').click(function(event) {
    event.stopPropagation();
    var $this = $(this);
    $this.tab('show');
    if(hasHash) document.location.hash = $this.attr('href');
});

Based on the HTML :

<ul class="nav nav-pills" data-tabs="tabs">
    <li class="active"><a href="#articles" data-target="#articles-tab">Latest Articles</a></li>
    <li><a href="#episodes" data-target="#episodes-tab">Upcoming Episodes</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane" id="episodes-tab">episodes</div>
    <div class="tab-pane active" id="articles-tab">articles</div>
</div>

Demo (jsfiddle) and Hash demo (jsfiddle)

4
  • 1
    Hi, thanks for the code. I gave that a try and it still jumps down, even more so than before :)
    – viperfx
    Jul 10, 2012 at 20:57
  • @viperfx did you change the html too (IDs) and do you have the page where it is not working ?
    – Sherbrow
    Jul 10, 2012 at 21:10
  • oh you are right, I did not notice that change. Thank you. It is working well now! Just having an issue with this line var $toggleTab = $('a[href='+hash+']'); I append the current url before the hashtag to make sure it stays on same page. so the only issue is the switching of tags on page load when a hash tag exists.
    – viperfx
    Jul 10, 2012 at 22:02
  • 1
    @viperfx you should keep the hashtag only, because you do not need the url in front of it. It can only be source of bugs. Anyway, you can do that : $toggleTab = $('a[href$="'+hash+'"]');.
    – Sherbrow
    Jul 10, 2012 at 23:38
4

The answer from @Sherbrow didn't work for me. But, The following code did:

$('.nav-tabs li a').click( function(e) {
    history.pushState( null, null, $(this).attr('href') );
});

Tested on Bootstrap 3.2.0.

I've got this code from Twitter Bootstrap: How To Prevent Jump When Tabs Are Clicked.

1
  • Very effective.. Works for me.. !!
    – sajalsuraj
    Feb 10, 2016 at 19:48
0

The other way to resolve this is to call 'scrollTop' after the tab is loaded. I do it this way:

$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
    var id = $(e.target).attr("href").substr(1);
    window.location.hash = id;
    setTimeout(function () { $("body").scrollTop(0); }, 50);
});
0

2022 Answer
I found that if you add preventDefault and stopPropagation then it won't move or jump.

So wherever you add your event listener code...

$(document).on("click", "#icons-tab-2", (event) => {
  event.stopPropagation();

  //insert whatever code you want in here
  //typically I have had to add code to adjust the tab content containers

  event.preventDefault();
});

But you should not need to deal with the hashes or the scrollTop as mentioned in other answers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.