For my project I wrote a pure CSS hover menu. When the page loads the menu (#drop) waits for a few seconds before moving up, out of view. You can get the menu back by hovering over a different element (#hover) at the top of the page.
It works perfectly for me, but there is one issue. When you load the page, and you remain hovered over #hover, #drop moves up for a moment after it has finished waiting and moves back down in a glitchy manner.
You can experience it yourself here: https://jsfiddle.net/27mbnpwk/
Just run the script and put your cursor on the text, wait a couple of seconds and see it jump.
Is there a way to make the menu only go up if you're not hovering over #drop with pure CSS? Or, otherwise, with js?
I could not find a way with pure CSS, but there is an easy solution with jquery (thanks to #LinkinTED):
Two CSS classes, one for the menu being down, one for the menu being up:
.down{
transform: translate(0,00%);
}
.up{
transform: translate(0,-175%);
}
Then in javascript you create a function that initiates after the page is loaded. This function waits 3 seconds and subsequently adds the up class to the element, pushing it up, out of view. And a function that changes the class each time #hover is hovered over:
window.onload = function() {
setTimeout(
function(){
$('#drop').removeClass('down').addClass('up');},
3000);
};
$('#hover').hover(
function() {
// mouse in
$('#drop').removeClass('up').addClass('down');
},
function() {
// mouse out
$('#drop').removeClass('down').addClass('up');
}
);
Test it here:
https://jsfiddle.net/g9oq0124/1/
I would love to hear it if anyone does find a pure css, or cleaner way to do this!
Related
I'm trying to use CSS transforms to make the center object in a carousel have more focus/attention. (Carousel is Slick.js)
Everything works great, except when I go from the last item back to the first item, there is a pause and a jump before the change appears.
What is causing this? How do I fix it?
https://jsfiddle.net/6d91cqoq/1/
//pseudo code
EDIT: It also happens going from the first to the last.
EDIT 2:
It's worth noting I took the idea from the Slick.js website: http://kenwheeler.github.io/slick/
On the page with the 'Center Mode' example, it is using transforms to do this exact thing. I cannot for the life of me figure out what is different, other than the target element.
EDIT 3: I did attempt to change my elements to H3 elements, as is in the sample. No change.
The cause for this is that Slick changes the DOM order of the slide elements when switching from "first to last". The transition doesn't kick in when dom elements are removed and added back... You can work around this by playing around with javascript and Slicks beforeChange and afterChange events instead of a pure CSS solution. I have made an example, although the example I made also slightly changes the effect (the center slide won't widen until it is in the center, e.g. afterChange). Maybe with Slicks, next and previous slide parameters you can make it work like your example, didn't have time to investigate it more.
https://jsfiddle.net/6d91cqoq/2/
Changes made to your example:
//Added my own "active" class, so it does not to interfere with slicks active class
.slick-slide.active {
opacity: 1;
transform: scale(1.50);
}
JS
//make current center active after initialization
$('.slick-center').addClass('active');
//before slide change, make all "inactive"
$('.center').on('beforeChange', function(event, slick, index){
$('.slick-slide').removeClass('active');
});
//after change make the center one "active"
$('.center').on('afterChange', function(event, slick, index){
$(slick.$slides[index]).addClass('active');
});
I'm using animate.css for doing some animations. If an error occurs, the element should bounce:
$target.addClass('animated bounce');
That's working well. But if the user is doing the same thing, there won't be a second animation, as the classes are already added.
So I try to remove the classes after the animation like this:
$target.addClass('animated bounce');
setTimeout(function(){
$target.removeClass('animated bounce');
}, 1000);
My question is, if this is how it should be done (I don't know how long the animation is exactly), or is there another solution for repeating animations?
You need to do this:
$('#target').removeClass().addClass('bounce animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});
$('#target') is in this case the ID of your element, change this to your needs.
there is a shorter solution , you have to 'refresh' the animated element each time
function refreshElement(id){
var el = $(id);
el.before( el.clone(true) ).remove();
}
and that way you can run an animation on that element again
Run on mouse enter AND exit:
$target.stop().toggleClass('animated bounce');
the animation class is added & removed based on the mouse's hover (enter/exit) action. The class will not be left active after exiting the item.
The .stop() will stop the animation from repeating multiple times if someone hovers/exits many times before an animation is complete.
I have an image at the bottom of my page (or actually, window) and it is like a rising building.
However, sometimes it overlaps page and/or footer content.
This isn't a really big problem since I just added pointer-events: none;.
But I wanted to, when hovered over the image fade it out a bit so it's more obvious you can click through. But because pointer-events: none; it doesn't even register the hover action...
Is there any way I can make it click through, but actually catching the hover-trigger?
Thanks in advance!
JSFiddle
P.S. Just wondering, is there any way to actually detect hover on only the non-transparant parts of the PNG image?
Here's my go at it: http://jsfiddle.net/tZqQc/7/
I did the hover events on the <p> tag instead, but I think I got the same effect you wanted.
The key is the jQuery code:
$("p").mouseenter(function() {
$( "#theimg" ).fadeTo( "slow" , 0.2, function() {});
});
$("p").mouseleave(function() {
$( "#theimg" ).fadeTo( "slow" , 1.0, function() {});
});
and as for the transparent hover question, you technically can do it with imagemapping.. but that's a lot of work for this picture (it's probably not worth it)!
I'd like to show a modal dialog using a 3D flip effect, exactly like the "3D flip (horizontal)" example in the Effeckt.css library.
However I really don't need the whole Effeckt library, since I just want this one effect. So I've tried to strip out the relevant bits of the library into free-standing CSS and JavaScript.
This is my attempt, but it's not working: http://jsfiddle.net/eJsZx/
As the JSFiddle demonstrates, it's only showing the overlap - not the modal itself. This is odd, because the element inspector suggests that the modal should be visible - it has display: block, visibility: visible and zindex: 2000 (higher than the overlay element).
This is the JavaScript:
$('button').on('click', function() {
$("#effeckt-modal-wrap").show();
$("#effeckt-modal-wrap").addClass('md-effect-8');
$("#effeckt-modal-wrap").addClass("effeckt-show");
$('#effeckt-overlay').addClass("effeckt-show");
$(".effeckt-modal-close, .effeckt-overlay").on("click", function() {
$("#effeckt-modal-wrap").fadeOut();
$('#effeckt-modal-wrap').removeClass("effeckt-show");
$("#effeckt-modal-wrap").removeClass('md-effect-8');
$('#effeckt-overlay').removeClass("effeckt-show");
});
});
What am I doing wrong?
There were a couple of issues in the code.
First, your styles were missing the following:
.effeckt-show .effeckt-modal {
visibility: visible;
}
This was causing the modal to remain invisible.
Once the dialog was visible, the dialog would rotate in just fine, however when being dismissed it would not rotate out. This was due to the following line:
$("#effeckt-modal-wrap").removeClass('md-effect-8');
If you want to remove this class, it would need to be done after the animation is complete otherwise the 3d effect is lost. It doesn't necessarily need to be removed, but that depends on what the rest of your content needs.
The final issue was that the wrapper, on completion of the fadeout, was getting its local style set to display: none. Because of this, the second time showing the dialog would cause it to simply appear because it was moving from display: none to display: block. There are a couple of options here.
Use CSS to animate the fade in/out.
Use window.setTimeout after calling $.show on the element to give the dom a chance to update.
The final result: Working Fiddle
I've been building a photography website here but i'm having an issue with the :hover transitions in the gallery pages. It loads two links that lay over the thumbnails, one opens the image in fancybox and the other sets the image as the background.
Everything works fine, but if you hover off of the thumbnail before the transition is finished, it animates back to its original state.
Is there a way to let the transition play out before reverting to its idle state?
Assuming JavaScript isn't out of the question, jQuery will certainly let you have this behaviour using the .hover() method's ability to accept two callbacks, one for the hover, one for when the hover stops.
$("div.thumb").hover(function(){
// show the magnifying glasses
$(this).animate({ top: "0", opacity: 1 });
}, function() {
// hide the magnifying glasses
$(this).animate({ top: "-100px", opacity: 0 });
});