Develop Reference

How to use intro.js in phpfox 4.7.7

I'm building a website with phpfox and want to use intro.js to provide a guided tour of the website.
How can I do that, please?
This is for Phpfox 4.7.7 . I already tried extracting the downloaded intro.js folder to my project and adding the dependencies to the HTML code as shown on the website via AdminCp/themes/material/Edit/html
The bottom of the HTML code looked like this after linking the JavaScript:
</footer>
{{ js }}
<div class="nav-mask-modal"></div>
<script type="text/javascript" src="intro.js"></script>
</body>
</html>
I also created a button via AdminCp/Blocks/add block and input the below code in the php/html edit box:
<a class="btn btn-large btn-primary" href="javascript:introJs().setOption('showProgress',true).start;">Get a demo tour</a>
and finally, I added the below to an element in the HTML:
<div id="section-header" data-step="1" data-intro="Welcome">
<div class="sticky-bar">
<div class="container sticky-bar-inner h-6 {% if setting('user.hide_main_menu') == true %}setting-hide-menu{% endif %}">
<div class="mr-2 site-logo-block">
{{ logo }}
</div>
...
</div> <!-- Added by edit! -->
</div> <!-- Added by edit! -->
</div> <!-- Added by edit! -->
I expected a guided tour to start after clicking the button, but instead was redirected to a page with the message
Page not found

Why does ng-include break my collapse menu?

I recently bought a template to start pulling an application I am building into it. The navigation will have a lot of dynamic menus based on the user's roles so I would like to keep it in a separate file and pull it in versus putting it on every page and updating each one. When I do use ng-include, it seems like Jquery breaks or bootstrap.min.js doesn't recognize the menus.
<div ng-include="'/partials/structure/navigation.html'"></div>
When I do the above it pulls in the navigation, just the mobile menu of it's not clickable. No errors in the console either. On a full view, the menus are there and all the dropdowns work. When I don't use ng-include both full menu and mobile menu function as you would expect. So it seems like something with jQuery, but I am stumped where to look for this and Google didn't yield much to go off of.
<div class="menu-extras topbar-custom">
<ul class="list-inline float-right mb-0">
<li class="menu-item list-inline-item">
<!-- Mobile menu toggle-->
<a class="navbar-toggle nav-link">
<div class="lines">
<span></span>
<span></span>
<span></span>
</div>
</a>
<!-- End mobile menu toggle-->
</li>
<!-- Removed code to shorten things for you guys -->
</ul>
</div>
<!-- end menu-extras -->
Shortening this up as well.
<div class="navbar-custom">
<div class="container-fluid">
<div id="navigation">
<!-- Navigation Menu-->
<ul class="navigation-menu">
<li class="has-submenu">
<i class="ti-home"></i>Dashboard
</li>
<li class="has-submenu">
<i class="ti-paint-bucket"></i>UI Kit
<ul class="submenu">
<li>Buttons</li>
<li>Cards</li>
<li>Portlets</li>
<li>Checkboxs-Radios</li>
<li>Tabs & Accordions</li>
<li>Modals</li>
<li>Progress Bars</li>
<li>Notification</li>
<li>BS Elements</li>
<li>Typography</li>
</ul>
</li>
</ul>
</div>
Here is how I include everything before the tag.
<!-- jQuery -->
<script src="../js/jquery.min.js"></script>
<script src="../js/popper.min.js"></script><!-- Popper for Bootstrap --><!-- Tether for Bootstrap -->
<script src="../js/waves.js"></script>
<script src="../js/jquery.slimscroll.js"></script>
<script src="../js/jquery.scrollTo.min.js"></script>
<!-- App js -->
<script src="../js/jquery.core.js"></script>
<script src="../js/jquery.app.js"></script>
<!-- Angular -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<!-- Controllers -->
<script src="../js/controllers/main.js"></script>
<!-- Bootstrap Javascript -->
<script src="../js/bootstrap.min.js"></script>

If you include ng-include it means after only the Angular application initialization directive will render the HTML content into the DOM. After that only the bootstrap.min.js can see the rendered menu HTML inside DOM. Therefore you need to add bootstrap.min.js after the angular code. Otherwise it won't see the HTML.
Therefore make sure you include js in following order
jquery.js
angular.js
angular application js code
bootstrap.min.js

Using Google Material Design Lite tabs with href attributes

I'm using Google's MDL tabs in navigation. But - instead of the tabs revealing content already in view, I want to simply put an href attribute and send user's the appropriate route (using ngRoute).
MDL's library throws this error (since it's trying to find that tab's content on the page):
Uncaught SyntaxError: Failed to execute 'querySelector' on 'Element': '#/url1' is not a valid selector.
Is there any way around this? or a better way to accomplish this? I don't want to make a new class copying a tab's CSS, because then i'd have to synchronize it as MDL updates.
angular.module('app', ['ngRoute'])
.controller('controller', function($scope){
$scope.urls = ['#/url1', '#/url2', '#/url3', '#/url4'];
});
<link href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css" rel="stylesheet"/>
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
<div ng-app="app" ng-controller="controller" class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a ng-repeat="url in urls" ng-href="{{url}}" class="mdl-layout__tab">{{url}}</a>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
</div>
<main class="mdl-layout__content">
asdf
</main>
</div>

Trying to add ASP.NET controls to a tabbed jQuery module

I have a page in my ASP.NET & C# website and i want it to have 3 different ASP.NET Repeaters, in the same page, and show each one in a different tab.
I got this snippet for tabbed content:
Tabulous.js
I implemented it in my page and it works well.
Now i tried to add a repeater inside it and it shows nothing, when i took the repeater out of the div of this module it was seen...
Later i tried adding a regular ASP.NET Button and it shows it but about half of it is unclickable.....
Here is my code:
<div>
<div id="tabs">
<ul>
<li>My Requests</li>
<li>Idan Gay</li>
<li>Idan Koks</li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
Content for tab 1
</div>
<div id="tabs-2">
<p>
Content for tab 2
</p>
</div>
<div id="tabs-3">
Content for tab 3
</div>
</div>
<!--End tabs container-->
</div>
<!--End tabs-->
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="Tabs/tabulous.js"></script>
<script type="text/javascript" src="Tabs/js.js"></script>
Like i said with only text it works fine, when i try to add some controls, that's where the problems are starting...
Thank you!

Nested Accordions within tabs

New to this forum so please be gentle! I have been having issues with jQuery Accordions which are inside a set of tabs. The tabs work fine and so does the Accordion, but... what I really would like is to be able to use a link from within part of the Accordion to go to another part of the Accordion. The Accordion will be used as an instruction manual so therefore in certain sections there will be a bit that basically says to the user to "see this section".
I have checked on here at certain answers such as: jquery ui accordions within tabs and http://jsfiddle.net/9nKZp/1/show/#1| and have checked all over the internet searching for Accordions with anchors as well as Nested Accordions in tabs but I have YET to come across this being done!! Can't really believe that no one has done this!
Here is the code I have so far:
<!-- tabs -->
<link rel="stylesheet" href="/resources/css/tabs.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="/resources/js/tabs.js"></script>
<!-- ENDS tabs -->
<!-- accordion -->
<link rel="stylesheet" href="/resources/css/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- ENDS accordion -->
<script>
$(function () {
$(".accordion").accordion({
collapsible: true,
heightStyle: "content",
active: false,
});
});
</script>
<!-- TABS START -->
<div class="tabs_wrapper">
<!-- 1st new tab design START -->
<div id="new_tabs">
<ul>
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>
<div id="new_tabs_content">
<div id="tab1" class="tab_content" style="display: block;">
<p>
Data on first tab
</p>
</div>
<div id="tab2" class="tab_content">
<h1>Tab2</h1>
<div class="accordion">
<h3><a id="#1">1</a></h3>
<div>
Content of 1
<div class="accordion">
<h3><a id="#1.1">1.1</a></h3>
<div>
Content of 1.1
<div class="accordion">
<h3><a id="#1.1.1">1.1.1</a></h3>
<div>
Content of 1.1.1, please see 2.1.2
</div>
<h3><a id="#1.1.2">1.1.2</a></h3>
<div>
Content of 1.1.2
</div>
<h3><a id="#1.1.3">1.1.3</a></h3>
<div>
Content of 1.1.3
</div>
</div>
</div>
</div>
</div>
<h3><a id="#2">2</a></h3>
<div>
Content of 2
<div class="accordion">
<h3><a id="#2.1.1">2.1.1</a></h3>
<div>
Content of 2.1.1
</div>
<h3><a id="#2.1.2">2.1.2</a></h3>
<div>
Content of 2.1.2
</div>
<h3><a id="#2.1.3">2.1.3</a></h3>
<div>
Content of 2.1.3
</div>
</div>
</div>
</div>
</div>
<div id="tab3" class="tab_content">
<h1>Tab3</h1>
<p>another load of data</p>
</div>
</div>
<!-- 1st new tab design END -->
</div>
<!-- TABS END -->
Please let me know if you require any further code that I am using such as the tabs.js etc.
Please help me! Is this at all possible?!
Many thanks and big hugs if you can help!!:-)

Here is the idea of how to get this one to work.
In the example http://jsfiddle.net/9nKZp/1/show/#1|1 it seems like the tabs linking works, but it only works when you load the page in a new tab, not from link.
You need your own jsfiddle (you already have one v.1), where you should place some example content WITH links from one tab/question to another pair tab/question (or there may have links to the same tab, but another question)! You also should implement the code from the semi-working example to your code.
Then the logic is as follows (examples using jQuery):
(1) Create on click event for each link you place inside the tabs, something like that:
$('#all_tabs_container a').click( function(){
checkInternalLinks();
});
In the function checkInternalLinks()...:
(2) You should check if the link is internal (#...) and if it is in a know format (like: #x|x or #x|x|x or both)
(3) When you validate this link you'll need to make the specific functionality to switch tabs and accordeons.
(4) The needed functionality already exists(!), but on page load, so you'll need to take some time on it and realize what is hapenning, so you can copy the same code to the onclick event function.
If you like the idea, you can start! Even if you can't complete it, I'm sure someone else will help :-)