When a form submitted the modal box appears. This box contains a text with a link. Click on this link should close this box and toggle dropdown (auth form). The problem is that I can't handle toggling the dropdown by clicking this link.
Here is the code of click-handler of this link
$(function() {
$('#open_auth_form').click(function(e) {
e.preventDefault();
$('#participate_modal').modal('hide');
$('#auth_link').dropdown('toggle');
});
});
Why doesn't it work? I tried also to move dropdown toggling inside the 'hide.bs.modal', tried .trigger('click'). Nothing helped. But simple running
$('#auth_link').dropdown('toggle');
from console works well.
Check out this stack overflow question on How to open Bootstrap dropdown programmatically. There are a number of solutions you can try such as:
Triggering the click.bs.dropdown event:
$('#dropdown').trigger('click.bs.dropdown');
Or manually adding/removing the classes:
$('.dropdown').addClass('open'); // Opens the dropdown
$('.dropdown').removeClass('open'); // Closes it
In my case it was enough to add
e.stopPropagation();
Related
Here is the link to the codepen.
https://codepen.io/Cerebros/pen/VwMzdgR
What i am trying to achieve :
Currently when someone clicks on any part of the accordion tab it opens up the dropdown menu which is how it should be .
I would like it so that if someone clicks on the actual name of the accordion tab it would go to that respective page and also open the accordion on that page appropriately.
For example the first tab is Badminton. It has a dropdown of Event Images.
If i click Badminton it will go to the badminton page and also expand the dropdown below it to show the Event Image link.
If i click on Event image it would go to the event images page and keep the Badminton Tab expanded.
The accordion uses checkboxes to open and collapse it so what i tried was adding the following code :
$("#idoflink").click(function(e) {
if((e.target).tagName == 'INPUT') return true;
e.preventDefault();
$("#idofcheckbox").prop("checked", !$("#idofcheckbox").prop("checked"));
});
</script>
What it would do is check if the link is clicked, then for that checkbox it would set the it to checked.
however the prevent Default sets it so that the link cant be clicked.
Any guidance on this would be appreciated.
Thank you,
I am using Materialize.css for current project, and I have dropdown with some input forms inside it.
Dropdown has option to close by:
clicking outside of .dropdown-content
clicking inside of .dropdown-content
clicking on .dropdown-button
What I need is to not close when clicking inside of it, because i need to be able to fill in input forms and other actions.
Here is simple example
Quick solution would be to stopPropagation on click on content wrapper.
$('.dropdown-button + .dropdown-content').on('click', function(event) {
event.stopPropagation();
});
I would avoid using 'dropdown' for this particular use-case.
But if you want to stick to it just apply the snippet above.
You can use for example:
$('#first_name').click(function (event) {
event.stopPropagation();
//Do whatever you want
});
to avoid the event generated by the input first_name from propagating. The dropdown will not detect it so it will not be closed.
use this "closeOnClick : false" on dropdown initializing
$(".dropdown-trigger").dropdown({
closeOnClick : false
});
I have five buttons, for each button, if you mouseover it, it will popup the dropdown menu (The default setting in bootstrap for dropdown is to click, but I need the button to achieve some other purposes when click the button, so I use a e.stopPropagation() to prevent the click popup action). In the css file, I set
.dropup:hover .dropdown-menu {
display: block;
}
My question is that, when I click the item in the dropdown menu, it will not hide anymore. Is there anyway to solve this issue?
Could you do something like this in place of your css so you don't have to rewrite functionality?
$(function() {
$(".dropdown").hover(
function(){ $(this).addClass('open') },
function(){ $(this).removeClass('open') }
);
});
Reference: https://stackoverflow.com/a/21486327/1585362
I am using a jquery plugin called mmenu to load a side menu when a button has been clicked.
That works fine, but Im also trying to get a hamburger style image going at the same time. I start off with the three lines and then when the menu button pressed it changes into a cross, this seems to work.
my issue comes when trying to close the menu, I want it to return back to a cross. The mmenu allows you to click anywhere to close the menu but I cant get the jquery right to change it back.
I added a class when the button (.menuvate) is clicked, called "active" which displays the cross but no matter how I try I cant get it to check that the class is active when anywhere on the page is clicked after the menu has been opened.
This is my code so far
$('.menuvate').click(function(){
$("#my-menu").trigger("open.mm");
$("#mm-0").addClass("menu-opened");
$("#nav-toggle").addClass("active");
});
$(document).click(function() {
alert("me");
});
I just put an alert in to tell me when this is being fired which of course it does everytime the page is clicked.
How do I get it to check for the active class after the menu has been opened when the page is clicked again so I can remove the class and change it back?
Thank you.
You will want to listen on the custom events to know if the menu is closing or closed.
Basically, what you want is:
$("#my-menu")
.on( "closing.mm", function() {
alert( "The menu has started closing." );
})
.on( "closed.mm", function() {
alert( "The menu has been closed." );
});
Read more on the ones fired by mmenu at http://mmenu.frebsite.nl/documentation/custom-events.html
You can use the jQuery hasClass attribute.
$("#mm-0").hasClass("menu-opened");
This SAPUI5 application that I am developing uses a Panel control that has some buttons on it. Now I have to hide those buttons whenever a user collapses the panel and show them back upon expanding. I tried using the getCollapsed() method but to no effect. What I am basically looking for is a collapse event for the panel which is not available by default.
Any helping hand out there?
Thanks.
Hmmm, seems like there are no event handlers for the Panel control indeed...
As a workaround, you could add your own expand/collapse toggle button in the panel tray, and upon clicking that button you could grab the getCollapsed() state and show/hide your other buttons accordingly
You could use the sap.m.Panel https://openui5.hana.ondemand.com/docs/api/symbols/sap.m.Panel.html#event:expand
which has an expanded property and you can just use
setExpanded(true) ;
to expand the panel and let the control retain its state without you having to track it.
I am sure this has all changed since you asked the question and this answer is related to 1.24.2
Perhaps the only solution here is to replace the default collapse icon with a button of your own and attach the press event to it. Like:
1. Declare a `Panel` with `showCollapseIcon` set to false.
var oPanel = new sap.ui.commons.Panel({
showCollapseIcon: false
});
2. Add your own button. I prefer a `lite` button.
var oCollapseButton = new sap.ui.commons.Button({
icon: '<your icon>',
lite: true,
press: function (e) {
if (!oPanel.getCollapsed()) {
//If not collapsed
oPanel.setCollapsed(true);
//Code to hide panel buttons
//(and toggle collapse button image if needed) after this
} else {
//If already collapsed
oPanel.setCollapsed(false);
//Code to show panel buttons
//(and toggle collapse button image if needed) after this
}
}
});
oPanel.addButton(oCollapseButton);
P.S: You might also want to add some styling and alignment to your custom collapse button. For that, you can add a CSS3 class to your button before adding it to the panel like:
oCollapseButton.addStyleClass('<your class>');