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.
Related
In my project, I used Bootstrap Nav bar for navigation and also AngularJS as the framework. In desktop view, it's working fine. But in mobile view, the Nav bar is not working properly. It's not auto collapsing when we click on a link.
This is my Nav bar code:
<nav style="padding:0;margin:0;border:0;" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/" id="mainLogo">
<img style="max-width:200px;" src="img/logo.png">
</a>
</div>
<div class="navbar-collapse" ng-class="{collapse: isCollapsed}">
<ul class="nav navbar-nav">
<li class="submenu">
Home
</li>
<li class="submenu">
Our Collection
</li>
<li class="submenu">
About us
</li>
<li class="submenu">
Contact us
</li>
</ul>
</div>
</div>
</nav>
I tried many solutions and still no good.
You can check the real example here.
I tried some Angular code samples and also JS based solutions. Nothing works for me. Can you please provide me a working NavBar sample with Angular.
My Angular version is 1.3 and Bootstrap version is 3.x
Warning: it`s a very hacky solution but it should work pretty well.
As said in the comments it's hard to combine both logics.
Just use ng-click="isCollapsed = false" event on every navbar element:
<div class="navbar-collapse" ng-class="{collapse: isCollapsed}">
<ul class="nav navbar-nav">
<li class="submenu">
Home
</li>
<li class="submenu">
Our Collection
</li>
<li class="submenu">
About us
</li>
<li class="submenu">
Contact us
</li>
</ul>
</div>
If you have trouble with the combination of href and ng-click you can have a look here href overrides ng-click in Angular.js. Basically you can also move everything inside a function like collapseAndMove(href) and doing the routing and collapse stuff there.
I'm trying to create a language bar with the jQuery bootstrap plugin, but it seems there is no option to append any action to anchor tags in drop down menu at all. They are just un-clickable.
Initialization of plugin:
<div class="bfh-selectbox bfh-languages" data-language="pl_PL" data-available="en_US,pl_PL" data-flags="true" data-blank="false">
<input type="hidden" value="">
<a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
<span class="bfh-selectbox-option input-medium" data-option=""></span>
<b class="caret"></b>
</a>
<div class="bfh-selectbox-options">
<div role="listbox">
<ul role="option">
<li>
<a href="/index.php?lang=pl_PL" data-option="pl_PL">
<i class="glyphicon bfh-flag-PL"></i>
</a>
</li>
<li>
<a href="/index.php?lang=en_US" data-option="en_US">
<i class="glyphicon bfh-flag-US"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
Commenting or uncommenting doesn't make any difference.
Another possibly related issue:
When I'm stretching out my web page, with the container overflowing the language bar completely, it becomes completely un-clickable. I don't want to change this plugin on something else in case someone will offer.
The address of the website is here.
I'm currently working on adding an accordion menu to a project and I'm getting stuck trying to get the accordion menu to expand the correct section and highlight the current selection based on the URL (the latter part I have sorted out by just changing adding class="active" to the entry matched with the page URL using some JS.
My issue is that I have two accordion sections and would like to open the one containing this entry when I navigate to the page. I've tried all sorts of hacks and I have a feeling I'm missing something here. The menu's default state is to have all sections closed on load as can be seen in my HTML here (I've simplified and sanitized it a bit):
<div class="accordion fontsome" id="leftMenu">
<div class="accordion-group">
<a class="accordion-toggle accordion-heading" data-toggle="collapse" data-parent="#leftMenu" href="#collapseTwo">
Red Products <i class="pull-right fa fa-caret-down" aria-hidden="true"></i>
</a>
<div id="collapseTwo" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
<ul>
<li>Product 1</li>
<li>Product 2</li>
<hr>
<li>Product 3</li>
<li>Product 4</li>
</ul>
</div>
</div>
</div>
<div class="accordion-group">
<a class="accordion-toggle accordion-heading" data-toggle="collapse" data-parent="#leftMenu" href="#collapseThree">
Blue Products <i class="pull-right fa fa-caret-down" aria-hidden="true"></i>
</a>
<div id="collapseThree" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
<ul>
<li>Product 5</li>
<li>Product 6</li>
<hr>
<li>Product 7</li>
<li>Product 8</li>
</ul>
</div>
</div>
</div>
</div>
Any pointers would be great. I've omitted my attempted JS hacks based on articles and my own ideas to get this to work as none were working. Can be provided if they would help.
I don't know whether this is the 'correct' way to do it, or just another hacky solution, but if I had this problem I'd probably stick the accordions into a PHP file. I could then read the value from $_SERVER['REQUEST_URI'] and amend the HTML output depending on which one should be active to display the correct accordion. I like designing all of my sites in a really modular way, so I normally use this technique to set the active class in navbars when I have them in separate PHP files from the actual page they are in.
Of course if your server isn't set up to support PHP this is no help at all, but I hope this helps.
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 using bootstrap with angularjs mainly because I want to user partials with my navbar
I have taken this template and added angularJS
http://ironsummitmedia.github.io/startbootstrap-landing-page/
Here is the navbar
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Inicio
</li>
<li>
Servicios
</li>
<li>
Contactenos
</li>
</ul>
</div>
And below that are the divs with the content of the navbar options
<a name="services"></a>
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">Death to the Stock Photo:<br>Special Thanks</h2>
<p class="lead">A special thanks to <a target="_blank" href="http://join.deathtothestockphoto.com/">Death to the Stock Photo</a> for providing the photographs that you see in this template. Visit their website to become a member.</p>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img-responsive" src="img/ipad.png" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
When I click on the Servicios (#services) is taking me to
http://localhost:8080/index.html#/services
instead of taking me to
http://localhost:8080/index.html#services
a / was added between # and services
I have nodejs installed and running http-server (npm pakckage) for testing purposes
I found the solution
When creating the links use two ## and the target="_self"
Question 1
Question 2
Question 3
And use the id attribute in your html elements like this:
<div id="faq-1">Section 1</div>
<div id="faq-2">Section 2 Content></div>
<div id="faq-3">Question 3</div>
There is no need to change any routing or anything else