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.
Related
I've been trying to change image source on hover, however i can use mousehover function with class name and do this. The challenge here is i'm going to dynamically call more divs with same class name so i'm trying to achieve this using the this method. for some unknown reason i couldn't execute my below code. can anyone suggest what seems to be the problem? Pasting my code below
$(".img_staff").mouseover(function() {
alert(2);
$(this).find('.staffimg:first-child').css("display","none");
$(this).find('.staffimg:nth-child(2)').css("display","block");
alert(3);
});
Both the alerts are working fine just the inbetween 2 lines are not working. i want to achieve this effect like moca tucson site's contact page
https://moca-tucson.org/contact/
I'm trying to recreate the same effect using Jquery
Apart from changing the image, the link that your provided also uses CSS transitions to bring that "image transition" effect.
Here's the similar effect with just CSS, without any javascript.
HTML:
<div>
<img src="https://moca-tucson.org/wp-content/uploads/2017/05/Ginger_Staff_Photos_001-800x800.jpg">
<img src="https://moca-tucson.org/wp-content/uploads/2017/05/Ginger_Staff_Photos_002-800x800.jpg">
</div>
CSS:
div img:last-child { opacity: 0 }
div:hover img:first-child { opacity: 0 }
div:hover img:last-child { opacity: 1 }
img {
position: absolute;
transition: 0.3s;
}
I'm trying to get an element to change its class to one with a different height attribute to make a reveal effect. I'm just getting an error which says uncaught type error undefined is not a function.
html -
<div id="rollup" class="header-container">
<header class="wrapper clearfix">
<h1 class="title"></h1>
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>
</header>
<p class="btnRetract">
see more
</p><!--end div retract -->
</div><!--end div rollup-->
Javascript -
$(".btnRetract").on("click", function() {
var $content = $("#rollup");
switchClasses($content);
return false;
function switchClasses($content){
if($content.hasClass("header-container")){
$content.switchClass("header-container", "header-container-retracted");
}
else {
$content.switchClass("header-container-retracted", "header-container");
}
}
CSS -
.header-container {
border-bottom: 20px solid #e44d26;
height: 90vh;
position:relative;
}
.header-container-retracted {
border-bottom: 20px solid #e44d26;
height: 20vh;
position:relative;
}
That's because switchClass is not a function defined by the jQuery plugin. It is actually part of the jQuery UI framework. However, if you need to "switch" classes using the jQuery plugin you can use either toggleClass, removeClass and addClass. Furthermore, you can even use animate to customise the transitions between property values
You dont need a switchClass function (doesnt exist anyway and is causing your error)
You can use answer from squint or.if you dont want to check.for the existence of one of the classes you can do this all in one line:
$content.removeClass('header-container').addClas('header-container-retracted');
As others have pointed out, it would be easier to use the jQuery toggle method, but there are other issues as well with your Javascript and CSS. Here's a working demo that you can use as an example.
Demo
Javascript:
$(".btnRetract").on("click", function() {
$("#rollup").toggleClass('header-container-retracted');
});
That's all you need for the click handler if you're using the built in toggleClass method. It accepts one string as an argument, which is the name of the class that you want to toggle. You can also have a comma separated list of two class names, wherein it will toggle between the two classes, but in this case, you don't need to swap the classes. You simply want to add or remove your .header-container-retracted class, because your .header-container class has all of your base styles in it. The .header-container-retracted class only has to contain the properties you want to override in the base styles and as long as it is AFTER your base .header-container class in your stylesheet, the normal cascading behavior of CSS will ensure that its properties will override the base properties.
CSS:
.header-container {
position: relative;
border-bottom: 1.5em solid #e44d26;
height: 85vh;
overflow: hidden;
margin: 0;
padding: 0;
-webkit-transition: height 1s ease;
transition: height 1s ease;
background-color: white;
padding: 1em;
}
.header-container-retracted {
height: 3.5em;
}
So, in your CSS, you don't need to repeat any of your styles in the .header-container-retracted. Note also, that I added overflow: hidden to the base styles. Without this, your content "inside" the header-container element would just spill out and be visible when the header-container was "retracted". Also, I add some transitions to give the opening and closing a nice smooth animation. The transitions will not be supported in IE8 or IE9, but they will not prevent the opening/closing of the element. As #Leo pointed out, if the animation is important to you in IE8/IE9 browsers, you can use jQuery's animate method to handle the transitions instead.
Finally, you'll note in the demo that I set your .btnRetractelement absolute positioning. Because you're using relative heights, you need to ensure that your toggle button is always visible. On a very small viewport, 20vh would be so small that it would obscure the button and make it impossible to expand the header-container.
i have multiple images, on hover on particular image i want to apply on that image only, it should not effect on other image.
More Explanation:
In this example(http://codepen.io/anon/pen/AnsqI), suppose i have multiple images & want to apply the certain effect on only on that image where i hove my mouse.
I am using class attribute...
<script>
$(function() {
//For grid view hover effect
$('.grid_content').hide()
$('.grid_container').hover(
// Over
function() {
$('.grid_content').fadeIn();
}
,
// Out
function() {
$('.grid_content').fadeOut();
}
);
//--js for grid view hover effect ends here
});
</script>
Something i have to apply like $this , i tried like($this.$('.grid_content').fadeOut();)but it did not work.
Somebody please help me.
Use this:
$('.container').hover(function(){
$('.content',this).fadeToggle();
});
Check this Demo http://codepen.io/anon/pen/BxbID
You could consider using CSS and the opacity attribute (or display). You could progressively enhance the hover effect with CSS3's transition property as well. There isn't necessarily a need for JS here, and I only added five lines of CSS (unprefixed) to achieve the same effect.
.content {
width: 100%;
height: 100%;
background: rgb(255,255,255,0.9);
padding: 5px 15px 10px 15px;
box-sizing: border-box;
opacity: 0;
transition: opacity .2s linear; /* CSS3 progressive enhancement */
}
.content:hover {
opacity: 1;
}
Depending on how you organize your HTML, you may need to make modifications, but the concept is the same.
Check out the demo: http://jsfiddle.net/NeEuP/1/
There are 2 ways to do this. You can either reference it using the this javascript keyword and surrounding it in a jQuery function:
$('.grid_container').hover(function(){
$(this).fadeIn();
, function(){
$(this).fadeOut();
});
Or you can:
$('.grid_container').hover(function(e){
$(e.currentTarget).fadeIn();
, function(e){
$(e.currentTarget)$(this).fadeOut();
});
... basically you're getting element through the event object. I personally prefer this method, because it's more flexible it doesn't depend on the actual scope (this depends on scope).
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.
I just built my first mootools accordion, but it is adding a lot of inline styles which is just ruining my UI. I can set up a inline style with !important keyword but it will just make my css maintenance a nightmare. any ideas how to get rid of the inline styles
It is just this
<script language="javascript">
window.addEvent('domready', function() {
//create our Accordion instance
var myAccordion = new Accordion($('accordion'), 'div.subTreeHeader', 'div.accordionElement', {
opacity: false, fixedHeight:400
});
});
</script>
Well this is quite old question, I answer it because I run to it when looking for the same problem.
Actually Mootools Acordion adds this much inline CSS:
padding-top: 0px; border-top-style:
none; padding-bottom: 0px; border-bottom-style: none;
overflow: hidden; opacity: 1;
The solutions I found for this are fixes that have to be applied after calling the new Fx.Accordion. I also agree that feels wrong to fix with !important CSS fixing. So I also looked for other options.
Option 1, set back the css as you want:
$$('.acordion3_content').setStyles({
border: '3px solid #0F0',
'overflow-y': 'auto',
});
Option 2, create one more div inside or outside it. I did this option to get a scroll div I could have events connected to. Like this I could have a scroll inside the accordion's content without it being affected of Fx.Acordion's CSS.