Utilize fancybox to target and display related content through external links within tabs

My website features a stylish box with tabbed inline content, allowing users to navigate between different views by clicking on tab names. However, I want the tabbed content to be accessible when a user clicks on a navigation link to launch the box. For example, clicking on the news link should take them directly to the news content within the box rather than the default view.

I am wondering how I can target a specific id, such as #news within the main fancybox id #menu. How can 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 believe changing the hashes on click could be the solution, as it would allow me to target a specific ID by giving a class a target hash. How can I link the sources tab to #sources, topics tab to #topics, and so on?

This is my initial attempt:

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

EDIT 2

Is there a way to target the tab index on click so that the tab becomes active?

javascriptjquerycssfancybox-2

Answer №1

My approach yielded the desired results by effectively utilizing data-target and choosing the tabs directly.

Below 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 });
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is the term 'Literal' in Javascript Arrays simply referring to its dynamic nature, allowing it to be modified at any time?

I'm confused why Mozilla refers to this as an Array 'Literal' when it's declared using the VARIABLE keyword and its content can be modified... var drinks = ["Espresso", "Latte", "Cappuccino"]; Could someone shed some light on this for ...

javascriptliterals

Modifying the appearance of Bootstrap button colors

I recently came across this code on the Bootstrap website. I am curious about how to change the text color from blue to black in this specific code snippet. Currently, the text is appearing as blue by default. For reference and a live example, you can vis ...

javascriptjqueryhtmlcsstwitter-bootstrap

Maximizing PUT Methods in HTTP RESTful Services

I've been playing around with my routes file and I'm looking to switch up the method being called (delete instead of update). Code Snippets: # User management API GET /users @controllers.Users.findUsers POST /user ...

javascriptangularjsscalarest

Accessing the name attribute of the TextField component, displayed as a Select Box in Material-UI, by utilizing the event object received from the onFocus prop

Utilizing the "@material-ui/core": "4.11.2" library along with "react": "16.8.6", I've encountered an issue with the TextField component where the select prop is set to true. Specifically, I am unable to access ...

javascriptreactjsmaterial-ui

What is the best way to dynamically search and retrieve data from a JSON object in Angular?

I am facing a challenge with my Angular (v. 1.6.3) app where I have fetched a JSON object containing stock price data. The structure of the JSON object only allows querying using brackets, with each key being a string that may include spaces, parentheses, ...

javascriptangularjsjson

The attempt to install "expo-cli" with the command "npm install -g expo-cli" was unsuccessful

Encountered an issue while trying to install expo-cli for creating android applications using npm install -g expo-cli. NPM version: 7.19.1 Node version: v15.14.0 Upon running npm install -g expo-cli, the installation failed with the following error mess ...

javascriptreact-nativenpmexpo

Converting integer data to string in CodeIgniter's Datatables: a step-by-step guide

I am working on an application using the CodeIgniter framework with Ignited Datatables as the table libraries for server-side functionality. I want to create a table and have written the code in the CodeIgniter controller, like this: $this->datatables- ...

jquerycodeigniterdatatables

Events in d3.js are properly registered, however they are not being triggered as

After creating an enter section that transitions to set the opacity to 1, I encountered an issue where the 'click' event on the circle worked but not on the text. Interestingly, when I replaced the 'text' with a 'rect' and se ...

javascriptd3.jsdom-events

The expected result is not obtained when making an Ajax request to a PHP variable

I recently encountered an issue with my AJAX GET request. The response I received was unexpected as the PHP variable appeared to be empty. Here is the snippet of jQuery code that I used: jQuery(document).ready(function($) { $.ajax({ url: '/wp ...

javascriptphpjqueryajaxwordpress

Challenges in displaying a preview of the cart following a successful ajax request

I'm trying to display a cart preview when hovering over a specific shopbag div. To achieve this, I've created another div called livebag where I run a query to fetch and preview the cart items stored in the database. Initially, the livebag div is ...

phpjqueryajax

Issue with Twitter Bootstrap 3 Sticky Footer functionality in IE11 and IE Edge

My website works perfectly on Chrome, but I'm having issues on Internet Explorer. I would really appreciate your help. The website I am working on is: I am trying to implement a sticky footer on IE, but for some reason, it's not working as expe ...

htmlcsstwitter-bootstraptwitter-bootstrap-3sticky-footer

On smaller device screens, the full-height sidebar and content area experience some disruption

How can I resolve the height issue with sidebar and content area on smaller devices, maintaining 100% height for both? I'm having trouble fixing it with the current code. I am aiming to create a fixed-width sidebar that expands to full width on small ...

htmlcsssidebar

Trouble with document updates in MongoDB/Mongoose causing a delay?

I am currently working on updating an object nested in an array in my application. When I test this functionality using Postman, I am experiencing a delay that requires me to make two requests in order to see the updated value. if (taskStatus) { cons ...

javascriptnode.jsmongodbexpressmongoose

Struggling to make dynamically created SVG 'use' elements function properly

SVG offers a unique system with symbol and use where icons can be defined once and reused throughout the SVG using use. However, I am having trouble getting it to work from JavaScript. You can view an example on this JSFiddle link. When programmatically ...

javascriptsvg

Translating from JavaScript to Objective-C using JSON

Can someone help me figure out how to correctly 'return' this JSON object in JavaScript? function getJSONData() { var points = '{\"points\": ['; var params = polyline.getLatLngs(); ...

javascriptobjective-cjson

A helpful tip for dynamically adjusting the canvas size is to utilize its height and width attributes to resize it whenever it undergoes a change

I am encountering an issue with the canvas element in my code. The canvas is supposed to update whenever its containing div is resized. window.addEventListener('resize',function() { let mapwidth = $('.canvas').attr("width") l ...

javascripthtmljquerycsscanvas

Resolving Typescript custom path problem: module missing

While working on my TypeScript project with Express.js, I decided to customize the paths in my express tsconfig.json file. I followed this setup: https://i.stack.imgur.com/zhRpk.png Next, I proceeded to import my files using absolute custom paths without ...

javascripttypescriptexpress

Is there a way to have two SVG files displayed on a single HTML page at the same time

Currently, I am facing an issue with my graphs. I have a line graph and a boxplot, but the boxplot is appearing below the line graph when I want it to be next to it. Any suggestions on how I can achieve this layout? Thank you! I attempted to use 2 differe ...

javascripthtmlcssd3.jssvg

Is there a way to produce random colors using this SCSS function?

The current function is returning an output in the color #ff0063, but my goal is to create a variety of colorful pixel dots on the screen. Could someone provide an explanation of what this code is doing? @function multiple-box-shadow ($n) { $value: &apos ...

htmljquerycsssass

Processing .dat files using JavaScript

Currently, I am attempting to utilize JavaScript to upload a file named example.dat. Initially, I believed that the correct approach would be using fileReader; however, it appears that this method is unable to process this specific format. The objective i ...

javascripthtmldataviewphaser-framework