Develop Reference

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

Right-side Menu Not Working

I was hoping to pick your brains about why my right-side menu won’t open. It used to but after I’ve been fiddling about adding scrolling lightboxes it’s not any more. I am unable to identify if this is a html / css / js problem as have tried to revert to previously used html / css and js when the menu does pop-up and this hasn't resolved. I have also tried cleaning up the HTML and CSS and neither has worked so I have reverted back to what I find tidier working with.
This particular site is for fun and is adapted from HTML5UP's examples, for which this particular site is available here: HTML5 UP Phantom with a working menu - which is how mine was prior to adding in the lightboxes.
I will attempt to include my code and css and would be very grateful for any ideas about what has gone wrong. I have tried to include a JSFiddle but cannot see how to add multiple different javascripts in - but would be happy to if someone can let me know how to do this! I am wondering if this is a problem of the new JS scripts I've added conflicting with those that the menu would use.
<!-- Header -->
<header id="header">
<div class="inner">
<!-- Logo -->
<a href="index.dwt" class="logo">
<span class="symbol"><img src="../images/logo1.jpg" alt="" /></span><span class="title">Single in Brisbane</span>
</a>
<!-- Nav -->
<nav>
<ul>
<li>Menu</li>
</ul>
</nav>
</div>
</header>
<!-- Menu -->
<nav id="menu">
<h2>Menu</h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Subscribe</li>
<li>Giveaways</li>
<li>Advertise</li>
<li>Contact</li>
</ul>
</nav>
Thank you kindly.

Anchor link in Bootstrap 3.7 not Working

<ul style="font-family:'Ralway', Serif;" class="nav navbar-nav">
<li>HOME</li>
<li>ABOUT</li>
<li>EVENTS</li>
<li>SURRENDER STORIES</li>
<li><a href="http://www.reachoutcelebration.com/#globalstrategy" >GLOBAL STRATEGY</a></li>
<li>CONTACT</li>
<li>DONATE</li>
</ul>
I want to click on "donate" or "contact" links that are from the reachoutcelebration.com/tommy-barnett page and go to the "donate" or "contact" section of this webpage: http://www.reachoutcelebration.com. PLEASE ONLY CLICK THE CONTACT AND DONATE BUTTONS. I have verified they do not work. Clicking donate and contact it seemed to throw me in the middle of the http://www.reachoutcelebration.com site no matter where I but the anchor tags or the id attributes. The above code is revised.
The code on the reachoutcelebration.com page reads as follows:
<!-- Section Header -->
<div class="section-header container-fluid"><a name="donate"></a><!-- SEE ANCHOR HERE -->
<h3>GRAND TOTAL : $521,000</h3>
<div class="section-separator"><i class="fa fa-stop"></i></div>
<p style="text-align:center;">"Multiply" begins with you.</br>Own a piece of the ROC and join us in reaching our city, our region, and our world.</p>
</div><!-- Section Header /- -->
I already tried Expression Engine Stack over flow:
https://expressionengine.stackexchange.com/questions/38480/expression-engine-and-anchor-tags/38481#38481
Any ideas as to why it not working?

I think all you have to do is match names and URL's for <a name="donate"></a> and <a name="contact"></a> respectively:
<li>CONTACT</li>
<li>DONATE</li>

After much stress and tinkering, the anchors work, but I have to put them in ackward positions at the bottom of the viewport to "kinda" "sorta" go where I want them to go. It works, but it's cumbersome. Not sure what else to do here. guess we can close this.
FYI, the anchor tags I used just have the name in it, hence <a name="donate"> or <a name="contactus">

Add id attr to the div and test and it should work. I saw that anchor tag for donate has the href pointing to #donate but I think there's no div or section on the page with id donate.
<!-- donate id added to this div -->
<div class="section-header container-fluid" id="donate"><a name="donate"></a><!-- SEE ANCHOR HERE -->
<h3>GRAND TOTAL : $521,000</h3>
<div class="section-separator"><i class="fa fa-stop"></i></div>
<p style="text-align:center;">"Multiply" begins with you.</br>Own a piece of the ROC and join us in reaching our city, our region, and our world.</p>
</div><!-- Section Header /- -->

Off-canvas menu turn off animation on slide based on condition

Currently I am working on a project that is similar to this example:
Off Canvas Menu Example
HTML:
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<a class="left-off-canvas-toggle" href="#" >Menu</a>
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu">
<!-- whatever you want goes here -->
<ul>
<li>Item 1</li>
...
</ul>
</aside>
<!-- main content goes here -->
<p>Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.</p>
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
</div>
</div>
CSS:
.left-off-canvas-menu {
height: 100vh;
}
JS:
$(document).foundation();
$('.off-canvas-wrap').foundation('offcanvas', 'show', 'move-right');
$('.off-canvas-wrap').foundation('offcanvas', 'hide', 'move-right');
$('.off-canvas-wrap').foundation('offcanvas', 'toggle', 'move-right');
I am using off-canvas to show a menu on page. however based on some condition I like to turn off animation and just the menu pops in without any animation and then turn the animation on later based on some other conditions?
Would that be possible ?

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!