I've been trying for hours to get this working. Looked at several examples on starkoverflow. But I can't solve it. Some suggested that this should be added:
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
$(this).collapse('hide');
}
});
But I have no idea where to add it. I tried adding it to bootstrap.js but it didn't work. I'm a novice, trying to put up a first website by learning to piece together one. This is the website that I'm editing: fotroviciliji.si. The bootstrap menu that appears on smaller devices won't close after a link has been clicked. I've looked at examples, even at those here that should be working, but don't. It stil doesn't close after clicking on a link in the menu. A user posted this fiddle of it supposedly working but when I try in Chrome, it just doesn't. The menu does not collapse after something has been selected. What am I doing wrong? This fiddle works but I'm too stupid to apply it to my website.
Please help!
It may not have worked because you included it in bootstrap.js but not in bootstrap.min.js which seems to take over on small screen sizes like mobile phones. Include your code at the bottom of the bootstrap.js and bootstrap.min.js files and the navbar should collapse after clicking/pressing a link to an internal anchor (whether you perform the action on a phone (bootstrap.min.js) or reduced window size on a tablet/desktop (bootstrap.js).
+function ($) {
'use strict';
$(document).on('click', 'navbar-collapse.in', function (e) {
if ($(e.target).is('a')) {
$(this).collapse('toggle');
}
});
}(jQuery);
The above code worked for me. I retrieved lines 2-7 from another forum and I can't remember where. The premise, as far as I understand from searching the net, is that the internal links don't refresh the page (in a one page website, for example) and the navbar will only collapse when it arrives at a new page. The above javascript code was created to fix the issue.
I've honesly been trying for a couple of hours. This is what works for me now, I added:
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a class="scroll hidden" href="#home" data-toggle="collapse" data-target=".navbar-collapse"></a></li>
<li class="dropdown">
PONUDBA<i class="fa fa-caret-down"></i>
<ul class="dropdown-menu">
<li><a class="scroll" href="#ponudba" data-toggle="collapse" data-target=".navbar-collapse">Čili omake</a></li>
<li><a class="scroll" href="#paste" data-toggle="collapse" data-target=".navbar-collapse">Čili paste</a></li>
<li><a class="scroll" href="#vlozeni" data-toggle="collapse" data-target=".navbar-collapse">Vloženi čiliji</a></li>
<li><a class="scroll" href="#ostalo" data-toggle="collapse" data-target=".navbar-collapse">Ostalo</a></li>
</ul>
</li>
<li><a class="scroll" href="#cenik" data-toggle="collapse" data-target=".navbar-collapse">CENIK</a></li>
<li><a class="scroll" href="#mesta" data-toggle="collapse" data-target=".navbar-collapse">PRODAJNA MESTA</a></li>
<li><a class="scroll" href="#kontakt" data-toggle="collapse" data-target=".navbar-collapse">KONTAKT</a></li>
<!-- <li><a class="scroll" href="#obrazec">OBRAZEC</a></li> -->
</ul>
</div><!--/.nav-collapse -->
To each menu item. The menu now colapses back on it's own after something is selected.
Related
I'm using this little jQuery-Plugin in order to enable a smooth scroll to a specific place on the page and also to mark the currently active menu item, so when you scroll down, you see where you are in the menu.
Now I do basically have the exact same code (at least I can't find the difference) as on the GitHub page, but its not working, although on the original template (which I'm using) it's working, so the plugin itself is working fine it seems, but I just can't seem to find the problem.
Basically I have my menu:
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="navbar-nav mr-auto w-100 justify-content-end clearfix">
<li class="nav-item active"><a class="nav-link" href="#sliders"> Home </a></li>
<li class="nav-item"><a class="nav-link" href="#feature"> Features </a></li>
<li class="nav-item"><a class="nav-link" href="#pricing"> Kosten </a></li>
<li class="nav-item"><a class="nav-link" href="#contact"> Kontakt </a></li>
</ul>
</div>
and then I have the different sections/divs, just like so:
<div id="sliders">
<div class="full-width">
<!-- light slider -->
<div id="light-slider" class="carousel slide"><div id="carousel-area">//some content</div></div>
</div>
</div>
Now the really weird thing is, that scrolling through the navbar works fine, so if I click on contact, for example, it scrolls to the right place.
But when I scroll myself, then wrong items are marked, it's always one behind, so if I'm on top, then "Features" is marked, if I've actually scrolled to the features, then the costs are marked, and so on...
You can see this in action here.
Please ignore any faults on not appearing icons, typos or whatever, I'm just testing or just started to develop.
On there, you can perfectly check the behavior and also check the ids of the sections/divs, which seem to perfectly fit through (otherwise, the scrolling through navbar shouldn't work).
Anybody can tell about the problem? I don't get it...
I have a navigation menu that I created using Bootstrap 3. The menu has two dropdowns. Here is how I want it to behave:
Click menu 1 > dropdown menu appears
Click menu 2 > menu 1 closes > menu 2 dropdown appears
Here is what is actually happening:
Click menu 1 > dropdown menu appears
Click menu 1 again to close it
Click menu 2 to open it
What I have tried:
There is a similar question here: Avoid having to double-click to toggle Bootstrap dropdown. The solutions seemed specific to using angular with bootstrap, but I tried them anyway. Here is what happened:
One solution mentions getting rid of bootstrap.min.js. That solution is for Bootstrap 4.
A second solution includes stopping default behavior of the dropdown this way:
$('.dropdown-toggle').click(function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
But if I add that, the dropdowns don't work at all. When I click them, nothing happens.
The last solution I tried included removing data-toggle="dropdown". That resulted in the dropdowns not showing up at all as well.
Question:
Does anyone have a solution for how to remove the double click functionality so that I don't have to double click to close one menu before I can open another? I am just using Bootstrap (not angular and bootstrap), and I am using Bootstrap 3.
My code:
Don't know if this is helpful, but here is my navigation bar code:
<nav>
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Option 1<span class="caret"></span></a>
<ul class="dropdown-menu" style="position:relative;width:100%;" id="option1menu">
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" >Option 2<span class="caret"></span></a>
<ul class="dropdown-menu" style="position:relative;width:100%;" id="option2menu">
<li>Link</li>
<li>Link</li>
</ul>
</li>
</ul>
</nav>
I have a basic setup of Materialize running and everything seems to be fine, except for the slide out side-nav.
Here's my code. Menu:
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-button" data-constrainwidth="false" data-beloworigin="true" data-activates="about-drop" href="#!">About<i class="material-icons left">arrow_drop_down</i></a></li>
<li><a class="modal-trigger" href="#signup">Signup</a></li>
<li><a class="modal-trigger" href="#sign-in">Sign In</a></li>
</ul>
<ul id="slide-out" class="side-nav">
<li>About</li>
<li>Signup</li>
<li>Sign In</li>
</ul>
<i class="material-icons">menu</i>
JS:
<script>
$(".dropdown-button").dropdown();
$(".button-collapse").sideNav();
$(document).ready(function(){
$('.modal-trigger').leanModal();
});
</script>
I get the appropriate hamburger menu when reducing the screen size, however, clicking the hamburger does not expand out a menu. The URL updates with a hash # and that's it. There are no errors reported in my JS output.
With the other JS functions, the dropdown menu works and the modal works. Stumped as to why Mr. sideNav is not cooperating.
Any ideas?
I found a solution. I grabbed the init hack from Materialize: http://materializecss.com/templates/starter-template/js/init.js and then made sure it was last called in my JS. (Putting it before the rest of the JS causes it to fail.)
So I've spent the last 48 hours trying everything I found under the sun and cannot get anywhere, so I'm leaving it up to all of your fantastic, smart brains.
I just started using bootstrap not too long ago, I have a NAV bar that has 4 items: Home, Services, Download, and Contact.
The Services item is the only one that will have a dropdown.
The dropdown works perfectly on desktop/laptop browsers, but on my phone (android using chrome browser) it doesn't work so great.
On mobile, because of screen size, Bootstrap turns the whole nav bar into a dropdown menu, so the "services" dropdown is inside a parent dropdown. When I click "services" to get the dropdown menu with all the services, I see for a split second that the dropdown is opening because i see a glimpse of the text, then immediately the parent and services div will close.
<!-- start navigation -->
<script type="text/javascript">
$('body').on('touchstart.dropdown'.'.dropdown-menu', function(e){e.stopPrpagation(); })
</script>
<nav class="navbar navbar-default navbar-fixed-top templatemo-nav" role="navigation">
<div class="container">
<div class="navbar-header">
<img src="images/Logo-banner.jpg" height="auto" width="auto" />
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li>Home</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu">
<li>Computer, Tablet & Phone Services</li>
<li>On Site Services</li>
<li>Remote Services</li>
<li>Managed Services</li>
<li>New & Used Computer Sales</li>
<li>Custom Built Computers</li>
</ul>
</li>
<!--<li>About</li>-->
<li>Download</li>
<!--<li>Contact</li>-->
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<!-- end navigation -->
I've looked up many problems on here, some say to use a javascript function similar to this one:
<script type="text/javascript">
$('.dropdown li, .dropdown a').click(function(e) {
e.stopPropagation();
});
</script>
Others say you need to manually show/hide the dropdown.
So far nothing has worked for me. I'm self taught programmer so as detailed as you can put it would be greatly appreciated. If you need anything else let me know,
Thanks,
Am bit new to angularjs and bootstrap.
Am trying to add a simple dropdown. But it is not working.
Tried out the suggestion # Bootstrap 3 simple dropdown not working. That is also not working.
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" ui-sref="a">a<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ui-sref="a">a</a></li>
<li><a ui-sref="b">b</a></li>
<li><a ui-sref="c">c</a></li>
<li><a ui-sref="d">d</a></li>
<li><a ui-sref="e">e</a></li>
<li><a ui-sref="f">f</a></li>
<li><a ui-sref="g">g</a></li>
<li><a ui-sref="h">h</a></li>
<li><a ui-sref="i">i</a></li>
<li><a ui-sref="j">j</a></li>
<li><a ui-sref="k">k</a></li>
</ul>
</li>
Complete code # http://plnkr.co/edit/uFDFOJfHjL5qY9nVEykq?p=preview
Hope someone would help me out.
NOTE: Most answers here are outdated! The main issue is that the dropdown directive is not available as a class anymore, but only as an attribute, and that it has been renamed to uib-dropdown.
I was stuck here for a while, but changing the class into an attribute worked as a charm.
Also, you need to use the 'uib-' prefix for each directive instead of plain names.
<li uib-dropdown>
<a uib-dropdown-toggle>a<span class="caret"></span></a>
<ul uib-dropdown-menu>
<li><a ui-sref="a">a</a></li>
<li><a ui-sref="b">b</a></li>
<li><a ui-sref="c">c</a></li>
<li><a ui-sref="d">d</a></li>
</ul>
</li>
(And of course, make sure you did not forget to include the ui.bootstrap module in your app.)
var app = angular.module('App', ['ui.router','ui.bootstrap']);
You need to include ui.bootstrap module in your app.
var app = angular.module('App', ['ui.router','ui.bootstrap']);
and also remove ui-sref from the dropdown trigger.
<a class="dropdown-toggle" data-toggle="dropdown" >a<span class="caret"></span></a>
Plnkr
data-toggle="dropdown" should be removed. I guess it creates some conflict with ui.bootstrap
<li class="dropdown" uib-dropdown>
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" uib-dropdown-toggle href="" role="button">
<span class="glyphicon glyphicon-flag"></span>
Events
<span class="caret"></span>
</a>
<ul class="uib-dropdown-menu" role="menu">
<li>
Event 1
</li>
<li>
Event 2
</li>
</ul>
Hope this helps.
You need to add on-toggle to your anchor tag, to avoid conflicts between bootstrap dropdown angular dropdown class, this issue is a closed on angular-ui(https://github.com/angular-ui/bootstrap/issues/2156)
I found a great resource from here regarding the subject, as I had the same issue. I'll outline what I did below.
Download ui bootstrap
Move zipped file to target directory for app, and unzip
locate the latest edition of the ui bootstrap release, which in my case, is located at "bootstrap-gh-pages/ui-bootstrap-tpls-0.13.0.min.js"
Include the minified js file in your main .html file:
<script src='stylesheets/bootstrap-gh-pages/ui-bootstrap-tpls-0.13.0.min.js'></script>
Go back to Angular directives and scroll down to the dropdown section. Copy their javascript into your primary js file and html samples and customize as usual
That's what did it for me. Hope that helps anyone else with the same issue.
First make sure you included ui.bootstrap module in your app
var app = angular.module('App', ['other inclusions','ui.bootstrap']);
Then if the problem still persists don't use dropdown-toggle and dropdown as directives. Instead use as class. i.e. class = 'dropdown-toggle' etc.
For Example :
<div class="dropdown dropdown-append-to-body">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle = "dropdown">Dropdown on Body <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div>
Refer this issue.
https://github.com/angular-ui/bootstrap/issues/2156
Worked out pretty simple the solution (after trying to find it for ages) Simply add "dropdown-toggle" directive to your button
<button class="btn btn-primary " dropdown-toggle type="button">Drop Me Down<span class="caret"></span></button>
Well, I noticed that the attribute "dropdown" need to be added to the li element, once that is added, everything will be fine.
<li class="dropdown" dropdown>
... <span class="caret"></span>
<ul class="dropdown-menu">
...
</ul>
</li>
for Angular 2:
add npm install ng2-bootstrap --save
then follow the example from GITHUB:
https://github.com/valor-software/ng2-bootstrap/tree/development/demo/components/dropdown