bootstrap collapse does not animate when opened programmatically - javascript

I have a site with a bootstrap collapse in it. I am trying to make it open programatically when the user selects a certain radio button, its working but the collapse does not animate in it just pops in.
The code I'm using is:
$("#RadioBtn").on('change', function(){
$("#RadioCollapse").addClass('in');
})
I suspect I may have to do something involving the collapsing class, but I try applying that class to the element and it didn't animate either.

Just found bootstrap has its own built in function .collapse(); so all I had to do was
$("#RadioCollapse").collapse();

Related

Prevent Bootstrap 4 Dropdown from closing onClick using React without jQuery

I'm having trouble to get things right with the Bootstrap Dropdown. I can't use react-strap and reactbootstrap is not supporting bs4 yet.
What I want is that a dropdown doesn't close if if select an element and only if I click outside of the dropdown menu. I don't want to use jQuery and would like to stick to react. I was thinking of removing data-toggle="dropdown" form the dropdown element, as this seems to be the one that adds the show class to the dropdown-menu. After that I would try to implement my own logic, so that it follows my rules.
But still, because I hope that there is an easier/better way, I wanted to asked if anyone has any experience with that?

Bootstrap multiple targets - parent toggle all?

I think it's better to show what I mean: if you go to boostrap docs (https://getbootstrap.com/docs/4.0/components/collapse/) and see the "multiple targets section". There are three buttons, toggle first element, toggle second and toggle both.
When you click toggle first, and then toggle BOTH what I want it to do is to either hide all or show all.
But it does just switches individual toggles, so it shows second and hides the first element.
Can it be done with bootstrap or do I have add js for this behavior?
After reading their documentation i didn't found anything about doing exactly what you told without diving in into javascript for example

JQuery Mobile destroyed my layout: how to disable autostyling?

I'm develping a website and I made all the design and the styling upon bootstrap and it is working fine. Then I wanted to add a panel for the mobile menu.
the panel is the one on the right of this example:jQuery Mobile panels, click on the plus sign
I took the panel that comes out clicking on the plus, and I worked to add it to my website (with my menu instead of the form inside the panel).
It works fine, but adding the jQuery Mobile JS completely destroyed my layout, adding lot of ui-* classes around my code and the styles attached to them.
I've tried those things:
disabling the css whole (but the panel does not work anymore)
renaming selectively only the classes that makes more mess, but it is
way too much work, just to fix a checkbox I had to rename several ui
classes.
fiddling with the js (the panel stopped working)
I just need the panel. I don't need all the creepy styling on the forms or other unwanted stuff.
Now I don't know what to do. There is another way to get this panel working withour all the mess? Why they did this js so intrusive?
You can use :
data-role="none"
If you also want to disable mobile use in mobileinit event:
$.mobile.autoInitializePage = false;
If you have several elements use a function on start load page:
$(document).on('pagebeforecreate', function( event ) {
// add the data-role="none" to desired elements...
$( "input, select", event.target ).attr( "data-role", "none" );
});

Show and Hide overlay using jquery

I am using JQuery for showing and hiding my overlay and it works just great. Now I also wanted to add some animations, hence I went ahead and check out the jq docs and got some nifty animations which can be applied to the show and hide functions directly.
What though I am looking for is on clicking, the overlay should appear to come up from the from the div which I clicked on, and on closing the overlay, it should hide by minimizing into the div which was used to open it.
Thanks
Fiddle URL if you can show it here
Check this fiddle: http://jsfiddle.net/HfKTA/1/ - Guess this is what you are looking for.
Updated fiddle with multiple triggers: http://jsfiddle.net/HfKTA/2/

How do I create a "sticky" dropdown menu in pure CSS?

Effect I'm trying to achieve:
In Twitter's new redesign, they implemented a "sticky" dropdown menu for the account settings area.
Basically, when you click on your username in the black global nav bar at the top, a menu is toggled open and stays open until you click on one of the links or on your username name again to toggle it closed.
I'd like to achieve the exact same effect of a sticky menu with just CSS and HTML. I'm okay with using CSS3 features, but if this can be achieved without relying on CSS3, that's even better.
What I've tried so far
I can create the basic navigation menu with dropdown working with pure CSS and HTML, but only using the :hover pseudoclass. I tried out the :active pseudoclass, but unfortunately it doesn't "stick" and stay open.
Is this "sticky" dropdown effect even possible without relying on javascript? If it is not possible without relying on javascript, how should I handle this so it degrades gracefully?
I'm going off memory here as I cannot access Twitter from work. If I recall correctly, the same script is used on the main page to login. It creates a little popup type window that stays there even after moving the mouse.
If that's what you're talking about you can't achieve that with just CSS; it's a styling language, not a scripting language. The :hover/:active pseudo-class styles will all un-apply themselves as soon as that event stops.
The alternative with Javascript involved would be to make the button a link that leads you to an actual page. Then bind it's onclick to popup an absolutely positioned div that's hidden by default (return false within the onclick to prevent following the link). This div isn't hidden until whatever condition you want to hide it with, and it starts off hidden, so if they don't have Javascript they won't know what they're missing.
Use the pseudo class :focus instead of :active. You might also need to use tabindex="" in your HTML to make an element accept focus.
However, iOS touchscreens don't seem to recognize tabindex="".
It's possible to achieve with help of CSS use label in combination with input[type="checkbox"] and :checked pseudoselector to store state
See example at https://developer.mozilla.org/en/CSS/%3achecked

Categories