Target tabed inline content using external links fancybox

Question

I have a fancy box with tabbed inline content (multiple divs) the user can navigate different "views" by clicking on the tab name once already in the fancybox.

I would like the tabbed content to be accessible when a user clicks the link in the navigation to launch the fancybox.

So for instance if the user clicks the news link (or any link in the .nav-primary or .nav-secondary menu) it will take them directly to the news (or related link) inline content (view) in the fancybox instead of the default view.

How would I target an id i.e. #news within the main fancybox id #menu? How do I achieve this?

HTML

<nav class="navigation">
  <ul class="nav-primary">
    <li class="nav-primary-item"><a class="menu" href="#menu"><i class="ico plus-yellow">+</i> Sources</a></li>
    <li class="nav-primary-item"><a class="menu" href="#menu"><i class="ico plus-yellow">+</i> Topics</a></li>
    <li class="nav-primary-item"><a class="menu" href="#menu"><i class="ico plus-yellow">+</i> Geography</a></li>
  </ul>

  <ul class="nav-secondary">
    <li class="nav-secondary-item"><a class="menu" href="#menu"><i class="ico plus-greyishblue">+</i> Tools</a></li>
    <li class="nav-secondary-item"><a class="menu" href="#menu"><i class="ico plus-greyishblue">+</i> Learn</a></li>
    <li class="nav-secondary-item"><a class="menu" href="#menu"><i class="ico plus-greyishblue">+</i> News</a></li>
  </ul>

  <div class="nav-menu" style="display: none">
    <div class="nav-tabs page_tabs" id="menu">
      <ul class="ui-tabs-nav" role="tablist">
        <li role="tab"><a href="#sources">Sources</a></li>
        <li role="tab"><a href="#topics">Topics</a></li>
        <li role="tab"><a href="#geography">Geography</a></li>
        <li role="tab"><a href="#tools">Tools</a></li>
        <li role="tab"><a href="#learn">Learn</a></li>
        <li role="tab"><a href="#news">News</a></li>
      </ul>
      <!--Sources and Uses-->
      <div id="sources">
        Content here
      </div>

      <!--Topics-->

      <div id="topics">
        Content Here
      </div>

      <!--Geography-->

      <div id="geography">
        Content Here
      </div>

      <!--Tools-->
      <div id="tools">
        Content Here
      </div>

      <!--Learn-->
      <div id="learn">
        Content Here
      </div>

      <!--News-->
      <div id="news">
        Content Here
      </div>
  </div>
 </div>
</div>

JS

<script type="text/javascript">
$('.menu').fancybox({
   type: 'inline',
   scrolling: 'auto',
   width: 940,
   height: 'auto',
   padding: 0,
   autoSize: false,
   tpl: {
           closeBtn: '<a title="Close" class="fancybox-item fancybox-close fancyboxBtn" href="javascript:;"></a>'
       },
   helpers: {
       overlay: {
           locked: false
       }
   }
});

EDIT

I think the solution lies with changing the hashes on click I can change one broadly by targeting a class and giving it a target hash. How would I be able to apply the sources link to #sources, topics link to #topics etc.

This is my general attempt

$('ul.nav-primary li a').click(function(e){
 event.preventDefault();
 window.location.hash = '#sources'
});

EDIT 2

On click is there a way I can target the tab index so that that tab is active?

Can you edit the html of your navigation (eg the href and class) or do you have limited access to it? Also, are you using fancybox on `#menu` as mentioned, or on `.menu` like in your code? — yezzz, Aug 31 '16 at 18:21
@yezzz .menu is used to fire the fancybox #menu is the div that opens. I can edit hrefs and classes what do you suggest? — gwar9, Aug 31 '16 at 18:25
Does fancybox need the href="#menu" to work? Can you also put in other attributes if needed? — yezzz, Aug 31 '16 at 18:29
@yezzz yes thats the container div its launching with all the inline content. I have tried data-hrefs and different solutions on SO so far with no luck. looking to see how I can target individual inline content ids but still keep the dynamic content in the container like the tabs themselves. — gwar9, Aug 31 '16 at 18:47
so, you tried data-href and use that as a target selector to trigger a click on the tab button? — yezzz, Aug 31 '16 at 18:56
@yezzz yes what happens with that is, for instance if I targeted #news the content would show however the tab navigation would be lost as well as the styling from the container of #menu. In the fancybox docs there is always a wrapping container around inline content, i want to preserve that but load the different views from external links (i can navigate as I wish once the fancybox is already loaded) — gwar9, Aug 31 '16 at 18:59
Do you have a fiddle with what you tried? What do you mean by load the different views from external links? Insert external content? Or you mean link to your example.com/page#news would immediately bring up the correct view? — yezzz, Aug 31 '16 at 19:10
@yezzz I just tried putting it in a fiddle. I tried added the fb CDNs but was met with a lot of errors (im behind a security network of hell so I suspect thats what it is) does it work for you? https://jsfiddle.net/gward90/h3xthyzr/ — gwar9, Aug 31 '16 at 19:19
it worked after removing jquery source and let jsfiddle add it. But I'm not seeing anything you tried. Also, it needs fully functional tabs (styling) to see which one is active — yezzz, Aug 31 '16 at 19:35
js fiddle wont let me load the custom script/css we use (security) to answer your previous question I want this Or you mean link to your example.com/page#news would immediately bring up the correct view? — gwar9, Aug 31 '16 at 19:53
This question seemed to be closely related but it used images http://stackoverflow.com/questions/10657713/jquery-fancybox-multiple-inline-instances — gwar9, Aug 31 '16 at 19:56
Hmmm ok then it will be very hard to test functionality. I don't really know fancybox api, but I saw fancybox afterLoad option. You could look into storing the clicked target, then use afterLoad to call a function that will take care of setting the correct tab. — yezzz, Aug 31 '16 at 20:02
@yezzz this answer is the closest yet http://stackoverflow.com/questions/9028310/how-to-create-a-direct-link-to-any-fancybox-box/9030970#9030970 I know how to point directly to the inline content but how can I retain the tab structure that is within the containing div? — gwar9, Aug 31 '16 at 20:25
Clicking a tab should display the associated div and hide it's siblings. — yezzz, Aug 31 '16 at 22:36
Yes. @yezzz but as you can see in the markup the tabs in the fancybox itself is part of the containing div. If I link to an anchor with the associated inline content like #news I will lose those tabs. I'm trying to figure a way not to. — gwar9, Sep 01 '16 at 13:05
What I see is that the tab divs are children of the fancybox div#menu and the buttons are children of an ul. In what way are you losing the tabs? Do they get removed or something? — yezzz, Sep 01 '16 at 15:24
if I change one the .nav-primary/.nav-seconday anchors to somethings specific like #news instead of #menu the tabs will not show. — gwar9, Sep 01 '16 at 15:27
I was looking into changing hashes on click that seems to work but Im not sure how to apply to every single link. I will show the start of my solution in an update. 2 secs — gwar9, Sep 01 '16 at 15:28
@yezzz actually on click is there a way I can target the tab index, I think thats the solution not hashes — gwar9, Sep 01 '16 at 15:43
@yezzz I posted a more clear question http://stackoverflow.com/questions/39276560/ui-tabs-in-fancybox-2-with-inline-content-how-to-go-directly-to-tab-on-click-wh — gwar9, Sep 01 '16 at 16:27
maybe I'll read it later but here's a proof of concept... using data attributes. It adds active class to the matching li > a and the div inside the fancybox (show/hide didn't work), so you can add css to make it work: https://jsfiddle.net/h3xthyzr/9/ — yezzz, Sep 01 '16 at 16:40
forgot to change something with the li "buttons": https://jsfiddle.net/h3xthyzr/10/ — yezzz, Sep 01 '16 at 18:47

score 0 · Answer 1 · answered Sep 01 '16 at 18:50

I got the desired results by combining data-target and selecting the tabs directly.

Here is the script

$(document).on("click", ".menu", function() {
    var target = $(this).data("target");

    if (target == 'sources') {
        jQuery('.page_tabs').tabs({ active: 0 });
    }
    if (target == 'topics') {
        jQuery('.page_tabs').tabs({ active: 1 });
    }
    if (target == 'geography') {
        jQuery('.page_tabs').tabs({ active: 2 });
    }
    if (target == 'tools') {
        jQuery('.page_tabs').tabs({ active: 3 });
    }
    if (target == 'learn') {
        jQuery('.page_tabs').tabs({ active: 4 });
    }
    if (target == 'news') {
        jQuery('.page_tabs').tabs({ active: 5 });
    }
});

Target tabed inline content using external links fancybox

1 Answers1