jQueryUI tabs - deeplinking into tab content

Question

I am not sure if this is possible at the moment, and the testing ive done seems to offer odd results.

I have on one page a section of 4 tabs, inside these tabs are several sections of text that i have each given a unique anchor name.

What i am trying to do is link from another page to say the 4th block of content in tab 3...

the tabs are all working great, and if i link to content sections on the first tab it works great.. its when i want to link to the tabs that arent the first that it gets tricky..

i have tried

<a href="http://example.com#tab-3#content-4" ></a>

but this doesnt work at all

and when i use just

<a href="http://example.com#tab-3"></a>

i have also seen this being implemented - however it seems to have the same functionality as just using the above piece of code regardless of if this is in my jquery call

$(function(){
  $('tabs').tabs();
  var hash = location.hash;
  $('tabs').tabs( "select" , hash );
});

With either of the above 2 options while the third tab is selected i am pushed all the way to the bottom of the page. I assume this is because all the tabs are placed in list items and then jqueryui turns them into tabs.. in effect moving the tab content for number 3 from the bottom back up to the top of the tabs section..

if anyone knows how i could link to the 4th block of content on the 3rd tab i would be extremely greatful.

someone the solution might lie in $_post and $_get data.. but im not sure if thats really the case, and even then im not sure how to implement it with jqueryui

Thank you in advance

Answer 1

Try this:

As a link use

<a href="http://example.com#content-4" ></a>

And the script

    $(function(){
        $tabs = $('#tabs').tabs();

        var hash = location.hash.substring(1),

        $anchor = $tabs
            .find('a[name="' + hash + '"]'),

        tabId = $anchor.closest('.ui-tabs-panel')
            .attr('id');

        $tabs.find('ul:first a').each(
            function(i){
                    if($(this).attr('href') === '#' + tabId){
                        $tabs.tabs('select', i);
                        window.scrollTo(0, $anchor.position().top);
                        // Stop searching if we found it
                        return false;
                    }
            }
        );
    });

Answer 2

Depending on what server-side scripting language you're using, if any, you could pass the tab you want selected in the url, $_GET[] it, then echo it as the selected option in your call to the tabs(); widget. Then using a nifty function I found in another stack thread, you can get the coordinates of your selected element and scroll to it.

e.g. using PHP

<!--- link on another page -->
<a href="yourtabspage.php?tab=2&ctntid=content4">Your Link to Fourth Piece of Content in Second Tab</a>

Then on your tabs page:

<?php 
  $your_tab = $_GET['tab']; 
  $your_selected_element = $_GET['ctntid'];
?>

<script type="text/javascript">

// this function is from another post on stackoverflow, I didn't write it.

function getOffset( el ) {
  var _x = 0;
  var _y = 0;
  while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
    _x += el.offsetLeft - el.scrollLeft;
    _y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }
  return { top: _y, left: _x };
}

jQuery(document).ready(function () {
  $("#tabs").tabs({
    selected: "<?php echo $your_tab; ?>"
  });


});

jQuery(window).load(function() {
  var x = getOffset( document.getElementById('<?php echo $your_selected_element;?>') ).left;
  var y = getOffset( document.getElementById('<?php echo $your_selected_element;?>') ).top;
  window.scrollTo(x,y)
});

</script>