Linking to a named anchor in a closed jquery ui tab (drupal)

Question

So, this is one of those things where the goal is simple enough, but after all day I'm still stumped. Using drupal, I am trying to link to a named anchor inside of a jquery ui tab. The most promising thing I could find was here: Link to an anchor within JQuery tabbed content, but I haven't been able to get it to work. History is on, and I am using the "goto" parameter in the link.

The javascript I am using is as follows:

UPDATED, new jquery below. I am now navigating to the appropriate tab when clicking the link, however the page is staying in he same location instead of scrolling to the anchor

jQuery(document).ready(function($) {

$('a[goto]').click(function(evt) {
evt.preventDefault();
var whereTo = $(this).attr('goto');
$tabs = $("ul.ui-tabs-nav li");
$tabs.find('a[href=#' + whereTo + ']').trigger('click');
//alert(attr('name'));
//alert( $('#'+whereTo+' a').offset().top );
$('html, body').animate({
    scrollTop: $('#'+whereTo+' a').offset().top
});

});


});

The relevant html structure is:

<div id="quicktabs-event" class="quicktabs-ui-wrapper qt-ui-tabs-processed-processed     ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top">
<li class="ui-state-default ui-corner-top">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active ui-state-focus">
<a href="#qt-event-ui-tabs3" tabindex="2">Classes</a>
</li>
<li class="ui-state-default ui-corner-top">
<::after>
</ul>
<div id="qt-event-ui-tabs1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<div id="qt-event-ui-tabs2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<div id="qt-event-ui-tabs3" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<div id="qt-event-ui-tabs4" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
</div>
</div> 
<::after>
</div>
</div>

I appreciate any help.

Answer 1

The question is how to scroll down to the anchor when the tab is actually activated.

There is an event tabsactivate on which you can bind an event listener in order to let you know that you're actually on the active tab, and all remain to scroll.

1. You click the link for selecting the tab selectedIndex, let's say (Windows background ;-))
2. The tab is then activating on the click of your link
3. Your tab is now selected, so this is where you want to scroll
4. Actually scrolling...

From the top of my head, I would guess something like:

Binding on the tab tabsactivate event listener as per jQuery UI API Documentation

$( ".selector" ).on( "tabsactivate", function( event, ui ) {
    // This is here you want to scroll to your anchor.
});

To subscribe to a link click event so that you can change the tab selectedIndex, you can do the following, which I find pretty easier.

$(".linkSelector").click(function( event, ui ) {
    $(".tabSelector").tabs( 'option', 'active', selectedIndex);
    return false; // actually preventing default behaviour.
});

Where the value of the selectedIndex variable shall change with the tab you want to be selected to scroll in.

So first, handle your lick click event which is where you want to change the selected tab.

Second, handle the tabsactivate event with scrolling to your anchor.

This is no tested code taken from my fast understanding without deeper analysis of your requirement. I hope I did understand correctly. Otherwise, please let me know.

Answer 2

The final answer:

• Set a "goto" attribute on your links that references the target tab.
• Ensure that the target element has an id set to match the anchor. THIS WILL NOT WORK WITH JUST THE "NAME" ATTRIBUTE ON THE TARGET ELEMENT OR LINK.

Code:

jQuery(document).ready(function ($) {
 var $tabs = $("ul.ui-tabs-nav li");
 $('a[goto]').click(function (evt) {
  evt.preventDefault();
  var whereTo = $(this).attr('goto');
  var anchor = this.hash;
  $tabs.find('a[href=#' + whereTo + ']').trigger('click');
  setTimeout(function(){
     $('html,body').animate({
      scrollTop: $(anchor).offset().top
     }, 500);
    }, 250)
  });
});

Answer 3

You are not binding the hash change event so your function to update the client will never be called.

window.onhashchange = function(evt){
  console.log(evt);
  // Logic for opening tab and navigating to child anchor
}