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
Related
I am not quite sure if I can achieve what I have in mind with the MaterializeCSS Framework. But if it is possible I would like to see if someone can help me with it.
For information; I am working in laravel 5.6. Maybe that helps to find a solution a little quicker.
So; I have a menu with dropdowns. But in stead of dropdowns I just want to have tabs. As seen in the Extended Navbar with Tabs.
There are 2 things that would need changing.
The Tabs need to change upon a clicking on a menu item. I am not sure how and if this will and can work.
The Tabs need to redirect to a page upon click. And not load the internal (on page) content.
Is there any way I can achieve this?
Depending on how you would like to have your Blade templates, you have 2 options you could go for.
Option 1 would be to use a yield-section combo. This would allow you to define the tabs on the page where they need to be shown in the template itself:
<!-- /resources/path/to/view.blade.php -->
#section('nav-tabs')
<div class="nav-content">
<ul class="tabs tabs-transparent">
<li class="tab">Test 1</li>
<li class="tab"><a class="active" href="#test2">Test 2</a></li>
<li class="tab disabled">Disabled Tab</li>
<li class="tab">Test 4</li>
</ul>
</div>
#endsection
<!-- /resourcs/path/to/navbar.blade.php -->
<nav class="nav-extended">
<div class="nav-wrapper">
<!-- your nav bar -->
</div>
#yield('nav-tabs')
</nav>
Option 2 would be to use a new parameter coming from the controller. This then can be parsed in the template and will show tabs when you pass the data from the controller:
<!-- /resourcs/path/to/navbar.blade.php -->
<nav class="nav-extended">
<div class="nav-wrapper">
<!-- your nav bar -->
</div>
#isset($tabs)
<div class="nav-content">
<ul class="tabs tabs-transparent">
#foreach($tabs as $tab)
<li class="tab {{$tab['classes']}}">{{$tab['label']}}</li>
#endforeach
</ul>
</div>
#endisset
</nav>
// PageController#action
...
return view("blade/template", [
'tabs' => [
[
'title' => 'Tab title',
'href' => '/go/to/this/page',
'classes' => '', // Add additional classes to tabs if you need them
],
...
]
])
As for the external page point, since the tabs are filled with <a href=''></a> elements, can you not use those to link to the other pages?
I am enjoying learning to code but have a frustrating issue I know little about.
I used the following code to support the site including a scrolling nav bar:
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
.........
<div class="container navbar-container">
<h2>Scroll to a specific <br>restaurant:</h2>
<nav class="navbar navbar-default">
<ul class="nav nav-pills nav-stacked">
<li>2 WEST</li>
<li>13 NORTH</li>
<li>15 CHURCH</li>
<li><h5>BAILEY'S CAFE-$Deal!</h5></li>
<li>THE BARRELHOUSE</li>
<li><h5>BEEKMAN BAR & EATERY-$Deal!</h5></li>
.....
</ul>
</nav>
</div>
</body>
</div>
Then, to add popup box I added:
...
Hours
<div data-role="popup" id="westhours">
<h2>Monday-Thursday 11:00am - 11:00pm<br>
Friday & Saturday 11:00am - 12:00am<br>
Sunday 10:30am - 10:00pm<br>
Please note: Kitchen closes 1 hour prior to closing.</h2>
</div>
</li>
</ul>
With both code segments, the scrolling nav bar doesn't link to sections.
If I delete the nav bar code, the popup box works.
If I delete the original section, the popbox doesn't work.
I know I must have conflicting source and script code, but I can't find the right ones to delete so both the popup box and navbar function!
Please help!
take this working code from author of pluggin. Then add new tabs, rename them.
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.
I'm quite new to Angular/Bootstrap and I downloaded a template that I'm trying to modify and add features to go about learning.
I'm trying to have a collapsible sub-menu as such
<ul class="nav nav-sidebar">
<li ng-class="{active: $state.includes('overview')}"><a ui-sref="overview">Overview <span class="sr-only">(current)</span></a></li>
<li>Products</li> <!-- a click on this should expand the div below... -->
<div class="collapse" id="products">
<ul>
<div ng-repeat="itemType in itemTypes">
<li>{{itemType.Description}}</li>
</div>
</ul>
</div>
</ul>
My attempt is from this example.
Instead of a button, I want the animation to be triggered by a click on an anchor.
I read a version of Bootstrap had problems with animation so I upgraded to bootstrap#3.3.6
Any ideas ?
Thanks.
EDIT: By not working I mean, nothing is happening. I can use an ng-show directive, but there's no smooth animation.
As the docs says,
You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle="collapse" is required.
Change the anchor tag to use the href attribute instead of data-target.
Products
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul class="nav nav-sidebar">
<li ng-class="{active: $state.includes('overview')}"><a ui-sref="overview">Overview <span class="sr-only">(current)</span></a></li>
<li>Products</li> <!-- a click on this should expand the div below... -->
<div class="collapse" id="products">
<ul>
<div ng-repeat="itemType in itemTypes">
<li>{{itemType.Description}}</li>
</div>
</ul>
</div>
</ul>
I ended up adding jQuery and bootstrap to my 'serve' gulp task and this works, without changing the view's code at all.
I am trying to follow the instructions on this site: http://sathomas.me/acc-wizard/
I have followed the instructions, and even copied and pasted the exact code. Can you tell me what's going wrong? I have verified that all the code is located in the proper directory. Here is an image of what's displaying on my site: http://i.imgur.com/BSmrFZQ.png
Here's my code, the CSS is added in the header and is not in the code below:
<div id="body">
<div class="row-fluid breadcrumbs margin-bottom-30">
<div class="container">
<h1 class="pull-left">Book Now!</h1>
</div><!--/container-->
</div><!--/breadcrumbs-->
<div class="container">
<div class="row-fluid">
<div class="span9">
<div class="row-fluid acc-wizard">
<div class="span3" style="padding-left: 2em;">
<p style="margin-bottom: 2em;">
Follow the steps below to add an accordion wizard to your web page.
</p>
<ol class="acc-wizard-sidebar">
<li class="acc-wizard-todo">Prerequisites</li>
<li class="acc-wizard-todo">Add Wizard</li>
<li class="acc-wizard-todo">Adjust HTML</li>
<li class="acc-wizard-todo">Release</li>
</ol>
</div>
<div class="span9">
<div class="accordion" id="accordion-demo">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#prerequisites">
Install Bootstrap and jQuery
</a>
</div>
<div id="prerequisites" class="accordion-body collapse in">
<div class="accordion-inner">
<form id="form-prerequisites">
<p>
The accordion wizard depends on two other open source packages:
<ul>
<li>The Bootstrap framework, available here.
<li>The jQuery javascript library, available here.
</ul>
Note that Bootstrap itself depends on jQuery for its interactive
components, so if you're using Bootstrap you probably already have
jQuery as well.
</p>
<p>
You'll include the CSS styles for Bootstrap in the
<code><head></code> of your HTML file, for example:
</p>
<pre><!--
--><link href="css/bootstrap.min.css" rel="stylesheet">
<!-- --><link href="css/bootstrap-responsive.min.css" rel="stylesheet"><!--
--></pre>
<p>
and you'll include jQuery and Bootstrap javascript files at the
end of your <code><body></code> section, for example:
</p>
<pre><!--
--><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<!-- --><script src="js/bootstrap.min.js"></script><!--
--></pre>
</form>
</div> <!--/.accordion-inner -->
</div> <!-- /#prerequisites -->
</div> <!-- /.accordion-group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#addwizard">
Add Accordion Wizard
</a>
</div>
<div id="addwizard" class="accordion-body collapse in">
<div class="accordion-inner">
<form id="form-addwizard">
<p>
If you haven't already found it, the source code for the
accordion wizard is available on github
here.
There are two main folders, <code>/src</code> and
<code>/release</code>.
</p>
<p>
There are two different ways to add the accordion wizard to
your pages. The simplest approach is just to add the CSS and
javascript files from the <code>/release</code> folder
directly in your HTML without modifying them:
</p>
<pre><!--
--><link href="css/bootstrap.min.css" rel="stylesheet">
<!-- --><link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<!-- --><link href="css/acc-wizard.min.css" rel="stylesheet"><!--
--></pre>
<p>
and
</p>
<pre><!--
--><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<!-- --><script src="js/bootstrap.min.js"></script>
<!-- --><script src="js/acc-wizard.min.js"></script><!--
--></pre>
<p>
The release styles for the accordion wizard are based on
Bootstrap's default styles. If you've tweaked the Bootstrap
styles (e.g. by changing the link color), you'll want to
make corresponding tweaks to <code>acc-wizard.min.css</code>.
</p>
<p>
Alternatively, if you're building custom CSS and javascript,
then you might want to start with the files in the <code>/src</code>
folder and adapt them to your source code. The <code>/src</code>
folder contains a LESS file and uncompressed (and commented)
javascript. Note that the <code>acc-wizard.less</code> file
depends on variables defined in Bootstrap's <code>variables.less</code>
file.
</form>
</div> <!--/.accordion-inner -->
</div> <!-- /#addwizard -->
</div> <!-- /.accordion-group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#adjusthtml">
Adjust Your HTML Markup
</a>
</div>
<div id="adjusthtml" class="accordion-body collapse in">
<div class="accordion-inner">
<form id="form-adjusthtml">
<p>
Now you can modify your HTML markup to activate the accordion
wizard. There are two parts to the markup—the collapsible
accordion itself and the task list. I prefer putting both in
the same <code>.row</code> with the task list taking up a
<code>.span3</code> and the accordion panels in a <code>.span9</code>,
but that's not a requirement.
</p>
<p>
The accordion panel can be exactly as documented in the
Bootstrap example,
but I think there's a problem with the Bootstrap implementation.
Specifically, the Bootstrap example only adds the class
<code>.in</code> to one of the accordion panels. That class
marks the panel as visible by default. The problem with only
having one panel visible by default is that users without
javascript will <strong>never</strong> be able to see the other
panels. Sure, that's a minority of users, but why make your
pages unworkable even for a small minority. Instead, I suggest
adding <code>.in</code> to all your <code>.collapse</code>
elements and have javascript code select only one to make
visible when it runs. The accordion wizard javascript will handle
that for you if you choose to use that approach.
</p>
<p>
The sidebar task list is nothing but a standard HTML ordered
list. The only required additions are adding the
<code>.acc-wizard-sidebar</code> class to the <code><ol></code>
element and <code>.acc-wizard-todo</code> to the individual list
items. If you want to indicate that some steps are already
complete, you can instead add the <code>.acc-wizard-completed</code>
class to the corresponding <code><li></code> elements.
</p>
<pre><!--
--><ol class="acc-wizard-sidebar">
<!-- --> <li class="acc-wizard-todo"><a href="#prerequisites">Install Bootstrap and jQuery</a></li>
<!-- --> <li class="acc-wizard-todo"><a href="#addwizard">Add Accordion Wizard</a></li>
<!-- --> <li class="acc-wizard-todo"><a href="#adjusthtml">Adjust Your HTML Markup</a></li>
<!-- --> <li class="acc-wizard-todo"><a href="#viewpage">Test Your Page</a></li>
<!-- --></ol><!--
--></pre>
<p>
Finally, you'll want to active the wizard in your javascript.
That's nothing more than simply calling the plugin on an
appropriate selection.
</p>
<pre><!--
--><script>
<!-- --> $(window).load(function() {
<!-- --> $(".acc-wizard").accwizard();
<!-- --> });
<!-- --></script><!--
--></pre>
<p>
The default options are probably fine for most uses, but
there are many customizations you can use when you activate
the wizard. Check out the documentation on
github
for the details.
</p>
</form>
</div> <!--/.accordion-inner -->
</div> <!-- /#adjusthtml -->
</div> <!-- /.accordion-group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#viewpage">
Test Your Page
</a>
</div>
<div id="viewpage" class="accordion-body collapse in">
<div class="accordion-inner">
<form id="viewpage">
<p>
Naturally, the last thing you'll want to do is test your
page with the accordion wizard. Once you've confirmed that
it's working as expected, release it on the world. Your
users will definitely appreciate the feedback and guidance
it gives to multi-step and complex tasks on your web site.
</p>
</form>
</div> <!--/.accordion-inner -->
</div> <!-- /#viewpage -->
</div> <!-- /.accordion-group -->
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="assets/js/acc-wizard.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
function onNext(parent, panel) {
hash = "#" + panel.id;
$(".acc-wizard-sidebar",$(parent))
.children("li")
.children("a[href='" + hash + "']")
.parent("li")
.removeClass("acc-wizard-todo")
.addClass("acc-wizard-completed");
}
$(window).load(function() {
$(".acc-wizard").accwizard({onNext: onNext});
})
</script>
Are you not forgot about this?
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
Order is important! You add these libraries but in wrong order. Here is correct:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/acc-wizard.min.js"></script>
And fix that errors first!:
GET http://shield.sitelock.com/shield/maidsinmemphis.com 403 (Forbidden) index.php:363
GET http://www.maidsinmemphis.com/assets/elasticslides/css/style.css 404 (Not Found) index.php:25
GET http://www.maidsinmemphis.com/assets/css/acc-wizard.min.css 404 (Not Found) index.php:31
GET http://www.maidsinmemphis.com/assets/elasticslides/js/jquery.easing.1.3.js 404 (Not Found) index.php:387
GET http://www.maidsinmemphis.com/assets/elasticslides/js/jquery.eislideshow.js 404 (Not Found) index.php:387
GET http://www.maidsinmemphis.com/assets/js/acc-wizard.min.js 404 (Not Found) index.php:387
Uncaught TypeError: Object [object Object] has no method 'accwizard'