How can I found the trigger codes if there is a button which can do an event but it seems like has no set event handler?
For example widget toolbox buttons in bootsrap templates. The buttons have just a class but they are working well.
Where are the codes of this collapse function?
The actual code to animate the collapse is in this scss collapse transition
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
#include transition($transition-collapse);
}
...and the actual transition is set here.
There is javascript that toggles the class states between the following states as documented here:
.collapse - Closed state of the "dropdown" component and the query to know what elements to apply collapse toggle logic to.
.collapsing - Interim state between closed and open in which the css transition is applied.
.collapse.show - Open state of the "dropdown"
I assume that javascript logic is here for showing the "dropdown" when the [data-toggle]=collapse element is clicked in open state. Then the logic for hiding the "dropdown" is here. The show/hide logic is only toggling the css classes to correspond to the states above, which then triggers the css transition above.
Notice the toggle of class on the "dropdown" between clicks
As #A. Wolff said, the default action of a button is to submit a form, which will lead you to another web page, specified on that form.
Have a look at the form element described at W3Schools, you can basically
reach the same behaviour using the button element.
If you want to inspect what events are attached to your button, you can right click it and see the elements inspector.
If there are no events attached then nothing will be shown, also, if this button belongs to a form, the default action is not considered as a Javascript Event.
If you want to remove all listeners maybe you should take a look to this answer
Related
I have a react component, which I am using as Modal and also as element in a page. It has radio buttons.
The problem is When the user is top of the page and modal is open. If the user selects anything in modal, the page is scrolled to another element (same component) in that page which will distract the user.
Since both elements are same, selecting in one will also selects in another. Thats understandable.
I tried, onChange for radio and e.preventDefault, but did not work.
Any suggestions would be helpful.
Closest i can reproduce is https://jsfiddle.net/3tbkLxcu/
Here, preventDefault works but not in my application.
When you click on label, it will scroll to the bottom.
<label htmlFor="test-id" onClick={this.handleClick.bind(this)}>Test radio</label>
handleClick(e) {
e.preventDefault();
}
I found a solution to you problem, just add the following css :)
.ReactModal__Body--open {
overflow: hidden;
}
JSFiddle Live Demo
Script Explanation
My script is to sort and/or filter a mailbox whereas you can select one of each options and the sort option upon clicking, if it's active it'll switch the icon indicating going from A-Z to Z-A and visa-versa.
The filter option changes the button text and upon clicking on the button it'll animate the button width to the drop down width and then slide down the drop down. Upon clicking again, it'll reverse the process, checking to see if the text has been changed to adjust for the width.
What I Wish To Implement
Upon clicking one of the options apart from the .Active filter/view options, I wish to trigger the click event to reverse the show progress. I have tried to trigger this click hover with using e.target, I'm not sure how to trigger this correctly as my attempts have been doing nothing.
Your trigger event seems to be working fine, you're only triggering it on the wrong element. This seems to be working:
$('.dropdown-toggle').trigger("click");
I've updated the plunker
You can trigger the click this way.
if ($(e.target).closest('.Sort').length) {
if ($(e.target).hasClass('Active')) {
$(e.target).parent().find('i').toggleClass("fa-arrow-down fa-arrow-up");
} else {
$('.dropdown-menu .Sort').find('.Active').removeClass('Active');
$('.dropdown-menu .Sort').find('i').remove();
$(e.target).addClass('Active');
$(e.target).prepend('<i class="fa fa-arrow-down" aria-hidden="true"></i> ');
}
//Here.
//Ideally add another unique class to the main dropdown button and use that instead, otherwise you will have problems when there are multiple elements with dropdown-toggle class.
$('.dropdown-toggle').click();
}
I have a scenario where a dropdown launcher menu should appear on every row in a list page. I have tweaked the code here.
I want the popover (open) behavior be restricted for the click on the particular launcher-icon, though close action is perfect here.
the problem is when any icon is clicked, it shows all menus. My page has rows inflated from a database and every row has three such launcher icons.
I guess this block of code needs some tweaks:
// Click event handler to toggle dropdown
$(".button").click(function(event){
event.stopPropagation();
// How can I call toggle for the specific div element?
$(".app-launcher").toggle();
});
How can it be done?
You need to traverse the DOM to find the .app-launcher instance which is related to the clicked .button element, to do that use closest() and find(), like this:
$(".button").click(function(event){
event.stopPropagation();
$(this).closest('.launcher').find(".app-launcher").toggle();
});
Updated CodePen
I would also suggest looking in to using a single instance of .app-launcher and moving it around the DOM as required to DRY up your HTML code.
JSFIDDLE LINK
I got hidden-input with display: none and opacity: 0. The animation happens as planned on label click.
However, I need it to function as toggle actually, so that it can also hide with the same animation if checkbox is unchecked.
I thought my commented code will work but if you uncomment it, the input is never shown at all.
How can I modify the JS/CSS in a way that CSS opacity animation happens both on show & hide and also toggles properly between hidden and visible states?
EDIT: having display: none in a hidden state is obligatory here.
See this working version: http://jsfiddle.net/n4Lep9jf/
There are two changes:
1) You are making the various CSS changes and setting the class to active before even checking whether it is already active. Therefore, the if statement in your code will always return true, thus removing those CSS changes. Instead, the class should be set to active (along with the accompanying lines of JS) in the else block of the if statement.
2) I set $toggler to refer to the checkbox itself, and changed the click handler to change. I found that the click event on the label was firing twice, and this solves that issue. I was surprised by the fact that the click handler was firing twice, but my guess is that's standard for behavior for labels that are linked to checkboxes.
I've been trying to figure this out for awhile, but I'm just going in circles.
Essentially, I have an input field with 2 options that one can select. This isn't a normal <select> option, rather an <ul> with 2 <li>'s. Which is fine for what I'm doing.
In state 1: it's just a normal input form.
In state 2: the user hovers over it and can choose the (currently inactive state which in the example below is "exclude").
In state 3: The inactive (exclude) option is clicked, and toggled with the currently active (include) state, resulting in exclude now being the active state.
I put this on jsfiddle : http://jsfiddle.net/ULafm/13/ -- My text toggle isn't working properly on jsfiddle, although it does on my local server where I'm developing).
The biggest problem is getting rid of the popup from .form-filter .link a:hover and .form-filter .link:hover after the inactive state is clicked like in state 2 of the image above.
I tried doing $(".form-filter ul li").removeClass("hover") and some other variants, like
$(".form-filter ul .li:hover").css("display", "none") or
$(".form-filter ul li a:hover").css("display", "none") but to no avail.
LinkedIn's search is a similar example to what I'm doing:
To sum it up in one question: how can I make it so after the text toggles, the hover state disappears to look like state 3?
Any help would be greatly appreciated.
If you want the list to hide after certain events, I would probably control its visibility directly through JS instead of through :hover CSS selectors. Example:
http://jsfiddle.net/ULafm/16/