Don't collapse ExtJS Menu when clicked outside it - javascript

In my application , I show a ExtJS menu when clicked on a button. This menu gets collapsed when I click outside it.But my requirement it this menu should not collapse when clicked outside it.
I debugged in ExtJS files, there is a mousedown Event in GlobalEvents see here which gets fired and it collapse this menu. How can I change or override this behaviour.
Thanks in advance.

As fast workaround you can to return false; in your menu beforehide event handler.
Working fiddle

Related

Dropdown closes on clicking scrollbar of dropdown in a modal but works fine when used outside of a modal in React?

I created an autocomplete component and when I use it in modal, the dropdown closes on clicking scrollbar(onBlur event of input gets fired) but when I use the same component outside of modal, scrolling with scrollbar works fine.
I am not able to find the cause of the issue. So please help!!
This is the code-sandbox link
(To reproduce the issue first use scrolling with scrollbar on main page, then open add item modal and use second input field in it which is same autocomplete component).

Close menu on mobile devices with anchor link

I have been reading in this community and testing codes but I can not close the menu.
I have created a simple JSFiddle to understand it. I would like to close it using jQuery. The problem is only in mobile view. In this example, the user clicks on the "MORE" menu and a "NEWS" item appears. "NEWS" is an anchor link and when the user clicks there, the menu is still open. This is the problem. How can I close the menu?
I have tried everything.
jQuery(".item-131").css( 'pointer-events', 'none' );
jQuery(".item-131").attr('onmouseover','');
jQuery(".item-131").off('mouseenter mouseleave');
jQuery(".item-131").unbind("mouseenter mouseleave");
But I can not close the menu.
See my JSFiddle: https://jsfiddle.net/karmany/gc0ku8on/
If you could show your cursor on mobile you'd see that when you click menu the cursor is still above the menu button until you actually tap off it — now you could have an on click event that closes the menu when it's clicked?

Make navbar collapse/close on click

i have trouble making the navbar on mobile devices collapse with my website. The problem only concerns the mobile version of the website.
When I click on a menu button, the site scrolls to the correct point, but the navbar remains opened, which is annoying. I tried to give the UL LI elements the same class like the "back" button in the navbar, which can collapse the navbar, but this does not work :/..
Could anyone show me how I can make the navigation bar close whenever a menu item is clicked?
This is the website:
Thanks a lot
You could solve it with jQuery, by just triggering the action of clicking the menu icon, like this:
jQuery('.rd-navbar-nav li').click(function() {
jQuery('.rd-navbar-toggle').trigger('click');
});
This way, when you click an element in the menu, it emulates clicking the hamburger menu icon too.
You can use Jquery if you'd like, but I just use JavaScript on my sites. You can take a look on how to make a collapsible navbar menu with JavaScript here. If you want to close the menu bar whenever a menu item is clicked, just set a close() function in the onClick() attributes if the menu is active and open. The close() function will be the function in which you hide the menu once again.
EDIT: You must define the close() function with in your JavaScript and set it to hide the menu items though.

Make menu go away when an item is clicked on mobile/tablet

I have a pretty specific problem which i am hoping someone can guide me in the right direction with.
Here is the website link : http://rimowaedition.com/
When on a tablet or mobile device the menu is condensed into a button. To chose anything on the menu
1. i have to click the button and it brings a drop down list.
2. Click on the page i want to go to.
3. click the menu button to close the drop down list or else it takes up the whole screen and i cannot see the page in the back.
Here is a screenshot of how it is: http://imgur.com/aV7RHwb
Is there any way to make it so that when i click an item in the drop down it automatically closes the menu and goes to that page.
Any guidlines or clues as to how i would go about doing this would be much appreciated since as of now i am pulling my hair out .
You can set a click event on any item in the menu lists that you click.
So...
If you're using jQuery
$('list-item').click(function() {
//Remove the class that causes the menu to be open
//Perform any actions that you need after the button is clicked
//such as loading another page
});
This can also be done in vanilla javascript. Just search up click events in javascript.
Use JavaScript Use JavaScript on the click event of any of the
> <a href>'s
in the menu to hide the menu.
on the click event of any of the
> <a href>'s
in the menu to hide the meUse JavaScript on the click event of any of the
> <a href>'s
in the menu to hide the menu.
nu.

Replace superfish hover event with click event

I have used superfish module for more style of my site. It is working fine but I want to remove the mouseover effect from main menu link.
I want to just display the child menu link after clicking the main menu.
My site link is http://devel.studiesweekly.com
when you hover the mouse in main red button menu link it is showing immidiately the child menu bar bellow. I want to show only after click the main menus.
How can I do this? I have used drupal 7.x
You can change the event from the superfish library from hover to click.
Replace your current superfish library code with the code provided in this answer.

Categories