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.
Related
I'm working on this app that allows you to add people from an API to a list in the app. Every time a person is added, a new Bootstrap card is created. I'm trying to figure out how to make the button to click "Watch Stream" disabled under certain circumstances. If the user is "LIVE" then the class .popover_status_on is added to the parent element. If the user is "OFFLINE" then the class .popover_status_off is added instead.
I thought this was going to be a quick fix issue but I'm seeming to have much more trouble with it than I expected. Right now this is what I'm looking at with my code that isn't working which I definitely thought it would have:
if($('.card > .card-body > h2').hasClass('popover_status_off')) {
$('.card > .card-body > button').prop('disabled', true);
} else {
return;
}
I realize that when it gets disabled, it disables all the buttons, even "LIVE" ones. So I'm trying to figure out if there's a way without specifying by class/id that I can have it change the state of the button. I thought maybe using "this" would work but I'm unsure what code would work for that.
Thanks for any feedback.
The problem is that inside your if statement, the jQuery selector isn't constrained to THAT card, it's finding all buttons inside all cards.
What your code literally says:
If there is card containing an h2 with class popover_status_off
Then find all cards that have buttons and disable them
Else do nothing
Try this:
$('.card h2.popover_status_off').parents('.card').find('button').prop('disabled', true);
You don't need the if statement. One of the great powers of jQuery is that you can identify an element and change it all in a single statement.
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
I have a working toggle me code except for one small issue and I am not sure what to do to fix it. Can some one please help me. I have duplicated the code in jsfiddle... http://jsfiddle.net/ydvuN/10/
Issue: If you click on Tab 1 or Tab 3 as your initial click, then the menu hides and then you must click on Tab 2 in order for it to show back up. After the initial click the script works like it should, switching between the tabs showing and hiding the menus appropriately.
Now, reload the page and click on Tab 2 as your initial click, the menu works like it should right off the bat, toggling between the different tabs showing their appropriate menus.
I don't ever want to hide the menu completely... I always want one menu to show at all times, however never want more than one menu to show. The menus should toggle with each other no matter what Tab you click on first.
I understand that this may be happening because I have display: none on Tab 1 and Tab 3 and a display: block on Tab 2. I did this because I want Tab 2 to display as the default when the page loads.
Any help on correcting my issue would be greatly appreciated. Thanks!
.style.display is different from just checking whether the item is displayed. It's actually checking the style="something" attribute on the HTML - which overrides the CSS you've setup in the stylesheet.
So - when you start out, your elements do not have style.display = 'none'. In fact, style.display is not set.
To solve this, I'd just set the selected tab to style.display='block' regardless of what it's already set to:
...
for (var i = 0; i < allIds.length; i++) {
if (allIds[i] != a) {
document.getElementById(allIds[i]).style.display="none";
}
}
e.style.display="block";
return true;
}
I have some weird behavior with jQuery paginate plug-in (jPaginate). I need to have top and bottom pagination and I want to sync them - whenever one is clicked, the second one should be properly changed as well.
I have two divs with number_pagination class and they are initialized the same way:
$(".number_pagination").paginate(options);
Now, here where it gets weird. Whenever I click on the top div, everything works as supposed to, but if I click on the bottom one, it changes the bottom one and does the pagination, but the top one stays the same. I cannot figure out why that could be happening.
Here's the onChange function that is supposed to change both pagination divs. Note the jQuery.fn.draw function that is a part of jPaginate. This is where it applies classes and style.
var opts=jQuery.extend({},jQuery.fn.paginate.defaults,options);
var o=jQuery.meta?jQuery.extend({},opts,jQuery(this).data()):opts;
jQuery(".number_pagination").each(function(){
var obj=jQuery(this);
jQuery.fn.draw(o,obj,page);
});
Found another solution that works perfectly.
It may even work for other pagination plug-ins. It checks the class that has the currently selected page number and checks if the content matches the selected NOW page, and if it doesn't, it looks for siblings that have the correctly selected page and triggers the click event.
jQuery(".jPag-current").each(function(){
if(jQuery(this).html() != page){
jQuery(this).parent().siblings().children().each(function(){
if(jQuery(this).html() == page){
jQuery(this).trigger("click");
}
});
}
});
You should probably look at using the onChange event to redraw the other pager that didn't incur the change
A bit background:
I've got a page with a table and a number of checkboxes. The page is generated in asp.net.
Each row has a checkbox, there's a checkbox in the header, and in certain cells there will be groups of check boxes (you get the picure lots of checkboxes).
Each of these check boxes currently works fine with a little bit of javascript magic in their onclick events.
so you have something like:
<td><input type="checkbox" id="sellRow1" onclick="javascript:highlightRow(this, 'AlternateRowStyle1');"/></td>
Not much of a surprise there then.
Ok so the here's the problem:
So this works fine however I need each of the check boxes to reflect the states of other checkboxes. So for example: the checkbox in the header changes the values of the row checkboxes, changes to the row checkboxes can change the header check box etc.
I know what you're thinking: easy just call that Javascript function highlightRow.
But if I did how would I get the parameters (ok the this is easy but where on earth could I get that 'AlternateRowStyle1'?)
So I guess the question is: Where do I put those parameters so I can get at them with JS in a nice cross browser way. (<PossibleRedHerring>tried putting custom attributes on each checkbox but wasn't sure that was the correct way to go</PossibleRedHerring>), also I'd prefer not having to keep calling back to the server if that's at all avoidable.
(btw sorry if this is a bit badly formatted / written, I'm extraordinarily tired!)
Update:
Ok so in the end I managed to dodge the custom attributes as noticed that there was a hierarchy to the check boxes. This meant I was able to trigger the click event of the child checkboxes (which inturn would call it's childrens' click event etc) luckily in this case the flow will never go in the opposite direction causing an infinite loop (there are a lot of comments / documentation to point this out!)
The only interesting thing with this is the difference between click events in IE and in firefox, chrome and safari. IE allows anything to have a click where as the others limit click to INPUT elements of type button, checkbox, radio, reset or submit. I kind of wanted to use event bubbling to attach the click events to an element that contained a group of checkboxes.
In the end went with a bit of a hack:
// In IE every element supports Click wilst Firefox (also chrome and safari) only supports INPUT elements of type button, checkbox, radio, reset or submit
// https://developer.mozilla.org/en/DOM/element.click
// this function allows both browers to support click on all elements
function FireClickEvent(element)
{
if (element.click)
{
element.click();
}
else
{
// We don't have a click on this element, so add our own.
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
element.dispatchEvent(evt);
}
}
Think that could be somewhat improved but it does the business for now.
Should also admit this was my first shot at proper javascript. It's a bit of a scary language (esp when hitting the dom!) interesting though, am looking forward to spending a bit of time delving in further.
you can do this quite easily by using jquery. you can define some custom attributes on the checkboxes depending upon their position and pick up the value of attributes on click and manipulate the css of rows, checkbox the way you want.
thats how you can define alternate row color for the table using jquery
$("table tr:nth-child(even)").addClass("striped");
<style>
.striped{
background-color:#efefef;
}
</style>
I think custom attributes is indeed your solution, can't see any problem with that. Although I would put something like an alternate-row-style as an attribute of the row, and not as an attribute of the checkbox.
If I understand you correctly; you want to be able to klick on the header and all the checkboxes in that same row will be checked?
I would set a cssclass for the "th"-element and use that same class on each of the "td"-elements.
I would place the alternating class on every second "tr" element. That way you can style differently if it's an alternating item or not.
I would also use jQuery to easily create the js-code.
I would NOT add custom attributes since... well you can't just add your own imaginary attributes, that's why we have html-standards.