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.
Related
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
Faily new to the angular scene.
I have a toggle done in bootstrap below.
The toggle does not work when angular is simply added to the header with the <script src> tag
<li class="dropdown dropdown-quick-sidebar-toggler">
<a href="javascript:;" class="dropdown-toggle">
<i class="icon-logout"></i>
</a>
</li>
<div class="page-quick-sidebar-wrapper" data-close-on-body-click="false">
<div class="page-quick-sidebar">
<ul class="nav nav-tabs">
<li class="active">
Modules
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active page-quick-sidebar-chat" id="quick_sidebar_tab_1">
<div class="page-quick-sidebar-chat-users" data-rail-color="#ddd" data-wrapper-class="page-quick-sidebar-list">
<ul class="media-list list-items">
<li class="media">
<div class="media-body">
<h4 class="media-heading"><i class="fa fa-bank" aria-hidden="true"></i> Cash & Banking</h4>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Above works when angular is not introduced..but doesn't work when angular is included.
Any idea?
I also had the same problem when starting with angular, what fixed my problem was simply including a newer version of jquery.
Originally was using jquery 2.x and just changed it in my bower to 3.1.x
Apparently jquery was being loaded after angular was.
Loading jquery before angular simply corrected it.
<div class="row">
<div class="col one-whole">
<nav class="top-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Central Plumping</li>
<li>Roof</li>
<li>Drainage</li>
<li>Gallery</li>
<li>Contact</li>
<img src="img/title.png">
</ul>
</nav>
<nav class="burger-nav">
<ul>
<li><i class="fa fa-bars x3" aria-hidden="true"></i></li>
<li><img src="img/title.png"></li>
</ul>
</nav>
</div>
</div>
<div class="burger">
<div class="row menu">
<div class="col one-whole">
<ul>
<li>Home<i class="fa fa-times x3" aria-hidden="true"></i></li>
<li>About</li>
<li>Central Plumping</li>
<li>Roof</li>
<li>Drainage</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Hello all, currently trying to learn basic JQuery. I have managed to create a simple navigation bar, with responsive burger menu that hides and shows each navigation bar based on screen size. I then created a burger div that is 100% screen size fixed when displayed but is currently set it display:none. Now i have got my toggle working to display it, but when i try to close the menu bar, it doesn't seem to toggle back. Any help would be great thankyou.
My Jquery script is as follows:
<script>
$(document).ready(function(){
$("#toggleburger").click(function(){
$(".menu").toggle();
});
});
</script>
i guess your problem is that you're using an anchor tag with empty href attribute.
try chaging in
<i class="fa fa-times x3" aria-hidden="true"></i>
see example in this FIDDLE
I'm getting directed off when I click the element you're trying to tie the click event to.
Here's a working fiddle: https://jsfiddle.net/p85kazv0/
I've simply prevented the a element you're using from its default action (which is of course to direct someone to another location, dictated by whats in the href=""):
$("#toggleburger").click(function(e){
e.preventDefault();
$(".menu").toggle();
});
Reasons for unexpected behaviour:
<a> has href set to some other page. If you have to implement the menu or buttons that are only for in page activity you should set it as href="#". Meaning do not redirect me anywhere just perform the event linked with this action, which in your case is toggling of another div.
While e.preventDefault() is a workaround, it is not recommended here as the link is sitting there doing nothing. It would suit more if say you had a form that would submit itself but you wanted to do some processing/sanitation before submitting, thereby overriding default action with your logic.
There are two elements with id=toggleburger. Keep your id unique on one html page. This can give you a lot of pain while debugging.
Here is a working fiddle, I have replaced the hamburger image with text "ToggleBurger".
Set the href attribute of the <a> element equals to #:
<li><a href="#" id="toggleburger">
I have such HTML:
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class="active">TAB1</li>
<li class="">TAB2</li>
<li class="">TAB3</li>
</ul>
</div>
This is navigation for tabs. But it behaves something different: when I click on the link (for example: TAB1) - required tab is displayed. But there is not the anchor in url(#tab1 or #tab2 or #tab3). But I need it...
I am some new in fronted and I use ready template. So there are such frameworks:
jquery.js, bootstrap.min.js, js/jquery.isotope.min.js
What should I do??
Maybe it's related to this question and this (if you are using bootstrap for tabs managing).
I'm having an issue with my Bootstrap navbar button not showing the dropdown links when the screen is collapsed.
I have a navbar brand that hides on collapse but ever since i added a scrolling nav plugin my links dont show in dropdown. It is is also acting strangely in that if the page is below the level of the top section clicking the button just scrolls up to the top yet i cannot see what the conflict is.
here is a fiddle:
jsfiddle
My HTML is like so:
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<div id="twitterbootstrap">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-inner">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand hidden-desktop page-scroll" href="#page-top">BrandHidden</a>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a class="brand visible-desktop page-scroll" href="#page-top">BrandVisible</a></li>
<li><a class="page-scroll" href="#page-top">Home</a></li>
<li><a class="page-scroll" href="#about">Link 1</a></li>
<li><a class="page-scroll" href="#services">Link 2</a></li>
<li><a class="page-scroll" href="#contact">Link 3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
</body>
Any ideas would be greatly appreciated.
Edit: its complicated to me.... dont laugh im only new ;)
The problem is in your custom css. In the rule that you added for .hidden-desktop you added position: relative. I'm not sure why you need position relative anyway but what it's doing is capturing the click event for the entire navbar. You can see this by adding pointer-events: none to the rule and it will magically work.
The pointer-events property in css basically says to allow the mouse to penetrate the layers of your design and register click events on things that are otherwise obstructed by some higher layer. Although adding pointer-events: none works to demonstrate the problem here, it only has IE support in version 11, so I recommend removing the position: relative property. There is no logical reason I can think to have position set given that the display is set to none.
.hidden-desktop {
display: none !important;
position:relative; /*remove this*/
}
Here's the updated fiddle: http://jsfiddle.net/jme11/m3m99fhr/7/. I linked the Bootstrap files now in the external resources so that you can see it working in fiddle itself.
How about bootstrap.css?
Try this one:http://jsfiddle.net/iboylmz/McHUc/41/