I have this code that will hide the page-title if it is visible and the drop down menu button is clicked.
$('.site-overlay-toggle .btn').on("click", function(){
if ( $(".page-title").is(':visible') ) {
$( ".page-title" ).hide();
} else {
$( ".page-title" ).show();
}
});
This works as long as the drop down menu is manually clicked open and clicked closed. If I click on a anchor link in the menu on the same page, the page will scroll down to the correct section, and the drop-down menu will automatically close. This will however not trigger this code.
Is there a way I can detect if the menu is closed automatically?
You can use jQuery $('.site-overlay-toggle .btn').trigger('click') in the event for anchor.
If you have menu like this
<button type="btn btn-navbar" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav-collapse" aria-expanded="false"> <span class="icon-bar"></span>
This how code will loke like when menu is closed.
But if menu is open code looks like this
<button type="btn btn-navbar" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse" aria-expanded="true"> <span class="icon-bar"></span>
So you can use function .is("collapsed") or .hasClass("collapsed") for get true if menu is closed and flase if isn´t or you can get state of atribude aria-expanded.
http://api.jquery.com/is/
Related
I am using the Bootstrap library and when I click the dropdown-toggle class this will show/hide the dropdown as expected (hence why its called toggle).
If I click the the image at the bottom of the HTML snippet this will activate the ng-click angular directive found in the javascript code.
This code simply does a check to see if the dropdown menu is displayed by checking to see if the .dropdown class has a class of 'open'. If not, then it will open the url passed in a new window, otherwise it will remove the 'open' class which hides the dropdown menu.
The issue I have is if I try to click the same .dropdown class to activate the dropdown again it only appears after I click two more times??
I'm obviously not doing the correct way to destroy the dropdown by removing the 'open' class can anyone suggest what I am doing wrong? If i don't click the image (and therefore not activate the ng-click this all works fine), so the issue is related to the doInteractionBodyEvent() and somehow i'm not 'destroying' the dropdown correctly.
// HTML
<div class="dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="material-icons">more_vert</span>
</div>
<div>
<div ng-if="interaction.media[0].image" class="image">
<a ng-click="doInteractionBodyEvent(interaction.media[0].href)">
<img ng-src="{{interaction.media[0].image.replace('amp;','')}}" />
</a>
</div>
</div>
// Javascript Angular Controller
$scope.doInteractionBodyEvent = function(url) {
if (angular.element('.dropdown').hasClass('open')) {
angular.element('.dropdown').removeClass('open');
} else {
$window.open(url, '_blank');
}
}
Remove the data-toggle="dropdown" from the HTML
<div class="dropdown-toggle" type="button" id="dropdown1" aria-haspopup="true" aria-expanded="true">
<span class="material-icons">more_vert</span>
</div>
I want my bootstrap and angular app menu to collapse with animation after selection, and then let the handler do navigation. (I'm mystified why a menu wouldn't close by default on selection).
I've found how to do jquery stuff in an angular app, and how to do menu stuff in a jquery app, so I'm trying to combine the solutions to these two questions:
(menu, but not angular) Hide Twitter Bootstrap nav collapse on click
(anugular, but not menu) How to trigger ng-click [AngularJS] programmatically
My html looks like this...
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<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="#/" ng-bind="title"></a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li ng-repeat="menuItem in menuItems" ng-click="selected(menuItem)"><p ng-bind="menuItem.name"></p></li>
</ul>
</div>
And so, I think my JS should look like this...
$scope.selected = function(menuItem) {
console.log(menuItem);
$timeout(function() {
angular.element('#js-navbar-collapse').triggerHandler('click');
}, 10);
};
But after trying every selector and several jquery methods, I can't make it work. The result is the same each time: the menu stays open, and all I get on the UI is a little flash of the menu icon.
My problem is that I have a menu which I don't want to display in full-width browser window and when the window width less than 768px it can be seen by toggle bar clicking.
But I found the collapse transition doesn't work when I click the toggle bar. I have tested to remove the "full-hide" class, and it works fine, everything is normal.
I want to have the normal transition. What should I do?
I appreciate your help very much.
:>
It's my menu code
<div class="full-hide" id="navbar-collapse-2">
<?php
$args = array(
'menu' => 'all-menu',
'menu_class' => 'nav navbar-nav',
'container' => 'false'
);
wp_nav_menu( $args );
?>
</div>
And in style.css,
.full-hide{ display: none;}
toggle bar code
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar-collapse-2" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-align-justify toggle-bar" aria-hidden="true">
</span>
</button>
If i understand you right, you want the button to show at 768 (which is the max size for small screens).
Since you use bootstrap, you can apply it as well to your button.
<button type="button" class="navbar-toggle collapsed hidden-md hidden-lg" data-toggle="collapse" data-target="#navbar-collapse-2" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-align-justify toggle-bar" aria-hidden="true"></span>
</button>
apply the classes hiddden-md and hidden-lg to it. It will show only the button then when your screen goes in lower width.
Optional:
Apply this trick to your menu you want to show that way as well, if you use a seperate menu. I am not sure, cause I cant make that up out of your context if this is your main menu and apply BootStrap to it, or you seperate that (i use mostly a different kind of menu for my mobile development)
<div class="hidden-md hidden-lg" id="navbar-collapse-2">
<?php
$args = array(
'menu' => 'all-menu',
'menu_class' => 'nav navbar-nav',
'container' => 'false'
);
wp_nav_menu( $args );
?>
</div>
See for documentation http://getbootstrap.com/css/#responsive-utilities
Please forgive me if you feel that the question i am asking is little silly.
I am trying to create HTML page with Bootstrap NavBar and Off Canvas and found the page which does exactly the same i wanted. On top of the existing i need one extra feature.
http://getbootstrap.com/examples/offcanvas/
If you look at this link you will see navigation bar on top of the page and list on right hadn side. whne we reduce the size of the page navigation bar will turn into Menu icon and list will disappear. Also new button will be added to show hide list.(see below Big screen image)
What i need is to move the link/button which is visible on small screen should get added on the left side of the navbar. Simmiler kind of icon the one we have for menu on small screen.(see below small screen image)
Big screen
Small screen
You could put the toggle button into the navbar like this..
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle visible-xs pull-left" data-toggle="offcanvas">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
Codeply demo
Try using the pull-left class on the button instead of the default pull-right class.
Example: http://www.bootply.com/274FaWMbMX
The flaw with this design is that after a user clicks the button to access the menu, the button is no longer visible due to the menu expanding.
I'm using Bootstrap 3 dropdown menu in my markup. But other than the default behaviour, it should pop out if I'm hovering the elements. So I created a small script:
jQ('.dropdown').hover(function() {
jQ(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn();
}, function() {
jQ(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut();
});
which is working fine. But for some reason the Bootstrap dropdown prevents redirecting to another page when I want to have the first item (which triggers the hover) as a link. I'm clicking on the link and nothing happens, it only appends a class .open. I only can open the link if I do a right click and select open destination in new tab. How can I fix this?
Thanks
Simply remove data-toggle="dropdown" attribute from the button (I suppose it's anchor tag):
<a class="btn btn-default dropdown-toggle" href="http://somewhere" target="_blank" id="dropdownMenu1" >
Dropdown
<span class="caret"></span>
</a>
JSFiddle
data-toggle attribute is an indicator for bootstrap, that an event should be bind to the element, depends on the attribute value:
data-toggle="dropdown"
data-toggle="tooltip"
data-toggle="modal"
data-toggle="popover"
data-toggle="tab"
data-toggle="collapse"
data-toggle="button"
NOTE:
You may have a problem on mobile devices with the "click open link" scenario.