disable Bootstrap's Collapse open/close animation [duplicate] - javascript

This question already has answers here:
Turning off Twitter Bootstrap Navbar Transition animation
(6 answers)
Closed 7 years ago.
Any trick to disable the open/close animation of Collapse groups ?

For Bootstrap 3 and 4 it's
.collapsing {
-webkit-transition: none;
transition: none;
display: none;
}

Bootstrap 2 CSS solution:
.collapse { transition: height 0.01s; }
NB: setting transition: none disables the collapse functionnality.
Bootstrap 4 solution:
.collapsing {
transition: none !important;
}

If you find the 1px jump before expanding and after collapsing when using the CSS solution a bit annoying, here's a simple JavaScript solution for Bootstrap 3...
Just add this somewhere in your code:
$(document).ready(
$('.collapse').on('show.bs.collapse hide.bs.collapse', function(e) {
e.preventDefault();
}),
$('[data-toggle="collapse"]').on('click', function(e) {
e.preventDefault();
$($(this).data('target')).toggleClass('in');
})
);

Maybe not a direct answer to the question, but a recent addition to the official documentation describes how jQuery can be used to disable transitions entirely just by:
$.support.transition = false
Setting the .collapsing CSS transitions to none as mentioned in the accepted answer removed the animation. But this — in Firefox and Chromium for me — creates an unwanted visual issue on collapse of the navbar.
For instance, visit the Bootstrap navbar example and add the CSS from the accepted answer:
.collapsing {
-webkit-transition: none;
transition: none;
}
What I currently see is when the navbar collapses, the bottom border of the navbar momentarily becomes two pixels instead of one, then disconcertingly jumps back to one. Using jQuery, this artifact doesn't appear.

Related

Calling a function on bootstrap modal open - js additional code

its not dublicated question because I didnt understand the smilar
question's answer.may I can delete after solved my question, if the answer so easy.
When bootstrap 3 modal is opened, my mega menu appear upon it.to solve this, while bootstrap modals are opened, I must reduce z-index of mega menu.mega menu's z-index is maximum now for all time.
I found this question:
Calling a function on bootstrap modal open
it says:
$('#code').on('shown.bs.modal', function (e) {
// do something...
})
for bootstap 3.
how can I write this code with jquery or javasicript?
edit: to give specific request, I want to determine bootstrap class to use it instead of #code word and then, write changing z-index value of a spesific class via jquery.
https://resimli.yedek.deniz-tasarim.site/
website is this.
bootstrap modals open with sign up/login buttons on header. ( top-right )
I am foreign to bootstap 3 and there are many classes for modals.So, it confused me.
Your menu overlaps the modal due to the default maximum z-index.
Here's what the css rules for the menu look like now:
#wp-megamenu-header-menu {
z-index: 9999; <=== /*the problem is here*/
text-align: left;
height: 90px;
background-color: #fff;
padding-top: 20px;
padding-right: -20px;
padding-bottom: 40px;
padding-left: 0;
}
And this is most likely written by you:
.wp-megamenu-wrap {
z-index: 99999;
}
To solve this problem, it is sufficient to override the z-index with the !important rule. Insert this rule into your css:
#wp-megamenu-header-menu {
z-index: 1000!important;
}
And your overlap problem will go away!

Not sure where to apply transition CSS for element [duplicate]

This question already has answers here:
JavaScript - add transition between display:none and display:block
(8 answers)
Closed 2 years ago.
I thought this would be nice and simple; however, I cannot seem to get it to work.
I am trying to get a DIV element to fade in and out depending on if a checkbox is selected, instead of just appearing and disappearing in an instant.
Here is my code:
HTML -
<div id="logPad" name="logPad" class="buttonZ logPad" onclick="remfunc2();"></div>
<div class="logSlider">
<input type="checkbox" name="logSlider" class="logSlider-checkbox"
id="logSlider" tabindex="0" onclick="sliderJS();" />
<label class="logSlider-label" for="logSlider">
<span class="logSlider-inner"></span>
<span class="logSlider-switch"></span>
</label>
</div>
CSS for the 'logPad'-
.logPad {
min-width: 225px;
display: none;
max-height: 200px;
min-height: 15px;
transition: 10s;
}
Now I'm not sure where the transition should be applied, I was thinking through JavaScript most likely, so I have tried a few things, but I am still learning JS and not that great at it.
This is my JS for hiding and showing the logPad div on 'checkbox' toggle, the toggle has been converted into a slider rather than a checkbox, this is done through CSS but I'm not sure this is relevant here as im sure the CSS for the slider is not where the transition for the logPad div will go.
function sliderJS() {
var checkBox = document.getElementById("logSlider");
if (checkBox.checked == true) {
document.getElementById('logPad').style.display = "block";
} else {
document.getElementById('logPad').style.display = "none";
}
}
Please can someone explain where this would be applied? the current transition in the class does not have an effect.
Short answer: you can't transition display.
You can, however transition opacity.
Also, it would be nice to use a class for a hidden state with opacity: 0 and then you can do something like:
document.getElementById('logPad').classList.toggle('hidden', !checkBox.checked);

Delay in sidebar animation

I do not know if I can link to the theme that has the problem that I
want to solve. If it is not allowed, please tell me to delete the
question
I'm using this theme:
here
And as you can see, whenever the cursor is on the sidebar, it expands. How can I make the sidebar only get bigger when the cursor is on the sidebar for at least 2 seconds? That a delay occurs before the animation.
Is there any part in the javascripts used by the theme where I can define this delay?
A bit of CSS will do it.
To delay only the opening:
.sidebar-visible .icon-thumbnail,
.sidebar-visible .page-sidebar,
body.sidebar-visible .page-sidebar .sidebar-header .sidebar-header-controls {
transition-delay: 2s;
}
To delay both opening and closing:
.icon-thumbnail,
.page-sidebar,
.page-sidebar .sidebar-header .sidebar-header-controls,
body.sidebar-visible .page-sidebar .sidebar-header .sidebar-header-controls {
transition-delay: 2s;
}
Note this CSS has to be loaded after theme's to work properly.
You can do so using setTimeout.
When the user hovers the sidebar, start a timeout, at the end of the timeout, check if they are still hovering the sidebar. If so, call the function to pop out the menu.
Try use jquery
.mouseout();
for example:
$("p").mouseout(function(){
$("p").delay(5000).hide(1000);
});

Menu hover effect - how to reproduce this effect?

Here is a nice hover effect applyied on main menu (red rectangles above menu): http://www.templatemonster.com/demo/37841.html
I'd like to use this effect on my website. There is no any css for that effect, so it must be some javascript used. How could I reproduce this or where could I find the javascript that can do that on my website? Simply, how could I achieve that?
There is no need to use javascript, you can achieve it via CSS, try toggling the hover state on any of those links and you will see the effect.
The relevant CSS there is
#superfish-1 > li > a {
-webkit-transition: all .3s ease;
padding: 98px 10px 0 10px !important;
background: url(../images/menu_hover.gif) 0 -100px repeat-x;
}
#superfish-1 a:hover {
background-position: 0 0;
}
So, basically, there is a background image (the red rectangle) with a 100px offset; when you hover the link, the background offset disappears (with a 0.3s transition)
The best language to use would be javascript and the library JQuery. Use the command .toggleSlide and .hover() I put some code down below as an example. Research more into it to get more advanced.
$(document).ready(function(){
$('.home').hover(function(){
$('#home_div').toggleSlide('slow');
});
});
".home would" be the menu tab that say "Home"
"#home_div" would be the red box that appears.
to summarize all the code: You are basically saying that when you hover over the html element with the class "home" (in the case the menu item) to have the html element with the id "home_div" to slide down slow. and then slide back once you stop hovering your mouse.
Good luck. If you want to know more about jquery just research it.

Bootstrap 3 Dropdown Animate/ Easing

I spent hours to figure out what JavaScript function or CSS3 rules is making the smooth Dropdown function in This Demo but I couldnt figiure it out.
Then I tried to create my own slideToggle as:
$(function() {
$('.selectopt').click(function() {
$(this).next('.dropdown-menu').slideToggle(500);
});
});
which is not as good as the above mentioned demo and there are some issue with it as it just slide down and up the .dropdown-menu ONLY if user clicks on the top of .selectopt and it doesn't care about losing focus or selected options!.
Considering all of these can you please let me know what is making the smooth slide and fade presentation of the .dropdown-menu in the demo? Thanks
It's "fancy" fading using transition of 0.25s. on
dropdown-menuclass.
The demo you mentioned is using external resources
looking at the code
$("select[name='herolist']").selectpicker({style: 'btn-primary', menuStyle: 'dropdown-inverse'});
you can see that it's using .selectpicker() which is coming from Bootstrap select plugin. The object passed {style: 'btn-primary', menuStyle: 'dropdown-inverse'} contains only css classes to style the dropdown menu which are contained in Flat UI CSS. When the code is executed the underlying HTML is changed to
Class dropdown-menu contains the following rules
.dropdown-menu {
background-color: #f3f4f5;
border: none;
display: block;
margin-top: 8px;
opacity: 0;
padding: 0;
visibility: hidden;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: 0.25s;
transition: 0.25s;
}
Conclusion: It's "fancy" fading using transition of 0.25s.
There's a whole bunch of external resources in the fiddle:
bootstrap.min.css
bootstrap.min.js
flat-ui.css
bootstrap-select.min.css
bootstrap-select.js
As far as I can see, flat-ui.css is responsible for the fancyness.
I'd recommend adding all the external resources from the fiddle and when you're done with the dropdowns, try removing each one to see if any of them aren't used. In the fiddle they are all requered.

Categories