I have a Bootstrap navbar.
clicking on the hamburger icon will open a menu.
One of the menu item is a button for another collapsable div.
i added this to this button:
$('.nav a').on('click', function(){
$(".navbar-toggle").click()
});
This will close the navbar menu and will show another div.
What i want is clicking on the hamburger icon again will CLOSE the new div and will NOT open the menu.
Basically what is need is the navbar-toggle to close all collapsable div and will open the menu only if there isn't any other div open.
This is my example: http://www.bootply.com/FqZYHFSWrh
Scroll down to get 770px page width
click on login, you will see that the menu disappear.
The next click on the hamburger icon i want to close the login container.
The second click (after the login container is close) i want to open the menu again.
You could add an event handler such as:
$('button.navbar-toggle').on('click', function(event){
if ($('.login-collapse').hasClass('in')) {
event.stopPropagation();
$('.login-collapse').collapse('hide');
}
});
Related
In a Vue app, the close button on the markers popup change the URL by adding #close, making the page change.
Can I remove it?
Marker popup example
I recommended you to read leaflet doc for marker
you will see that you can hide button close by set option closeButton: false
, I am playing with a new vuetify project. I've implemented sign in and signup using a v-dialog and I'm calling those v-dialogs from multiple components. Basically it works for me but I want the previous dialog box to be closed when I click a button to pop up the next v-dialog.
Current Working:
1)A sign in button is placed in navbar. when that button is clicked Sign in v-dialog pops up.
On sign in page there's another button which will open a v-dialog where the user can choose type of account. And on choose of a button another v-dialog opens as sign in page.
Solution I need:
A method or logic with which i can close the previous dialog box while new dialog box pops up
Kindly looking forward for some ideas
Cheers
If those dialogs are in different components, eventBus maybe the best way to communicate between non-parent-child components:
in "main.js":
new Vue({
data: {
eventHub: new Vue()
},
...
}).$mount("#app")
in your dialog component, or the component that contain the dialog:
created() {
this.$root.eventHub.$on("close-dialog", () => {
do something to close your dialog, such as this.visible = false
})
}
before open your new dialog:
this.$root.eventHub.$emit("close-dialog")
Is there a way to close the mobile hamburger menu when you click on a menu link? We have a menu link that launches a modal window, but the menu is still showing behind it when I close the modal.
The state of the hamburger menu is kept in HamburgerMenuService. You can inject this service in your modal for example you can call the toggle(false) method in this component's onInit hook.
This way when the modal initializes the menu will close.
Thanks for the pointers. This is how I achieved the task:
Inject the HamburgerMenuService into the component:
import { HamburgerMenuService } from ‘#spartacus/storefront’;
Add my constructor:
constructor(private hamburger: HamburgerMenuService) {}
Access the toggle method in my modal function:
this.hamburger.toggle(true); // force close
here my problem:
I open a modal popup and I can scroll it properly, then when I open a new model popup from this one if I try to scroll down this popup the scroll is on the main webpage in background. How can I focus the scroll on the active modal popup?
thank you
We have a colorbox modal popup which we don't want to close unless the user clicks the "X" at the top right of the popup. Currently, it is closing if you click anywhere outside the popup area.
Many thanks!
Paul
Colorbox has options to modify that functionality. Just add this to your colorbox instantiation:
$("#selector").colorbox({
//your other colorbox options
//...
escKey: false,
overlayClose: false
});