css z-index changes during opacity animation - javascript

I have a very simple page, there are a few stacks of divs and each div has and image inside of it.
Each stack will fadeIn depending on the scroll position, the top stack has an object that overlaps the bottom stack and for some reason during the animation, the z-index changes.
here's the JSBIN, try clicking the fadeIn/fadeOut button and notice how the plate briefly went behind the bottom stack when it's transitioned.
http://jsbin.com/wefediti/1/
please help.

Since your jQuery.each() and therefore the fading animation will be processed synchronously, it is not possible with your approach to make them fade at the very same time.
I suggest you combine those images in the same div and fade them if it is possible for you:
DEMO

function fadePages(num) {
$(".page").animate({
opacity: num
}, 1000*(num+1));
}
do same at same time. It works.

It's a thing of positioning of your divs
I edited. All you need to do is stack your divs right and then re-edit your absolute position. But it works
EDITED CODE
Let me be more specific.
change the order of your divs liek so:
<div class="page1">
<img src="http://i.imgur.com/BleOC.jpg">
</div>
<div class="page">
<div class="bg"></div>
</div>
and that will fix you z-index problem. I made a different call for each div from the JS as well, But that was for testing purposes. I think you're fine with one call
I made the positioning edits as well HERE
But it seems like everyone is modifying it, so hurry up before someone else messes it up lol

Related

How to get this glass shatter effect to work on multiple divs?

Situation
I have this glass shatter effect simulation that involves some basic javacsript code and right now it works fine; When you click on the logo, the glass shatters accordingly and then a new unshattered logo re-appears in its place.
Take a look at the jSFiddle here:
https://fiddle.jshell.net/9n9ft9ks/3/
Problem
Right now, there's only one logo on the page. I need there to be more than one logo, probably like five (of the same Floyd's autoglass logos) all on the same page, all with the same onClick glass shatter effect. But when I try to do this myself - put more than one (of the same logo) on the page, the code just breaks.
How I tried to fix it
The logo with the glass shatter effect is a div called "#container". So since I want more than one of these logo's on the page, I tried just duplacting "<div id="container"></div>" a bunch of times in the HTML code. That didn't work:
https://fiddle.jshell.net/9n9ft9ks/5/
So I tried changing the div id into a div class and I edited all the appropriate javascript & CSS lines that needed to be changed like:
document.getElementById('container');
to:
document.getElementsByClassName('container');
and
#container: {} to .container{}
But that didn't seem to work for me either. The logo doesn't even show up on the page anymore after making these changes, take a look here: https://fiddle.jshell.net/9n9ft9ks/4/
Summary
I have a logo with an onClick glass shatter effect. There is only one logo on the page. I need there to be more than one on the page, but can't seem to get it to work myself... If anyone could take a look at the code and try to get it to work so there is more than one logo on the page, i would appreciate it so much! Here is the original jSfiddle one more time: https://fiddle.jshell.net/9n9ft9ks/3/
You cannot use a single ID multiple times on the same page.
Use a class instead:
CSS:
.className {
/* attributes: values; */
}
HTML:
<div class="className"></div>
In your attempt, try changing the getElementByClassName for $('.container') and then replace the appendChild by append.
I made it work, but it was a bit messy, it would need more CSS to make the logos not overlap one over each others.
(You can add a style on the second div to see the multiple logos, ex: <div class="container" style="left: 50px;"></div>)
Here's the jsfiddle: https://fiddle.jshell.net/9n9ft9ks/7/

jquery animate doesnt work properly

im trying to animate the width of a table, so the content gets "closed" and "opened". So I manipulate the right and left gap:
$(".gaps").animate({width:"35%"},'slow', function(){
$(".gaps").animate({width: "10%"},'slow');
$("#content").fadeIn();
});
but somehow, its not animating linear. First 10% to 35% works fine, but the width jumps to over 100 at the start of the 10%-animation, so the content is jumping around. I tried some things like "width: "-=25%"", but even that didnt work. Am i having some other problems, dont i just see the obvious?
Thanks!
To finish this i will add the answer from the comments:
Sorry, but tables just do not behave nicely when it comes to animating sizes. Depending on what you are trying to do you might want to wrap your table with to divs: the inner one with static size and the outer one width overflow:hidden and then try to animate the outer one.
<div style="overflow:hidden; background:red;" class="animateMe">
<div style="width:300px;">
<table>...</table>
</div>
</div>
http://jsfiddle.net/mgwo9axL

I need someone to ELI5 this Skrollr.js feature

Pausing. I essentially need to use skrollr.js to pause on a div i have, that contains an image. I know this probably isn't that difficult but I just can't seem to get it right. So could someone please just explain briefly how to make this happen?
<div> Something </div>
<div> <img> </div> <-----div to pause on for a little while
<div> Something else </div>
taken from this tutorial.
Pausing a scrolling animation
Lets say we want to freeze each of the slides for 50% of the viewport height.
In other words we don’t want the Slide 2 and 3 move for a while and then scroll to the next slide.
We can include empty data attributes to create a keyframe and change the animation offsets.
The updated data-attributes would like this:
<div id="slides"
data-0="transform:translate(0%,0%);"
data-50p=""
data-150p="transform:translate(0%,-50%);"
data-200p=""
data-300p="transform:translate(-50%,-50%);"
data-350p=""
data-450p="transform:translate(-50%,0%);"
>
Now every slide stays fixed for a while before scrolling to the next one.

Content box on image hover?

I have a bunch of images in a gallery on a new website im building and Im wanting to have content displayed when a user hovers over an image.
For example if a user hovered over a picture of a car in my gallery then a low opacity content div would fade over the entire image to show text and maybe a link.
I presume this effect could be done with a bit of JS or even CSS Transitions to give the fade.
I just need to know how to make a content box appear over the image on hover, possibly at 80% opacity.
Heres an example of what I have in mind:
Thanks for the help, if anyone could point me in the right direction it would be appreciated.
I can post more information if needed.
This is somewhat simple way of implementing a hover show and hide with jquery.
Working example: http://jsfiddle.net/va2B8/2/
jQuery ( http://jquery.com/ ):
$(document).ready(function() {
$("#Invisible").hide()
$("#hoverElement").hover(
function () {
$('#Invisible').stop().fadeTo("slow", 0.33);
},
function () {
$('#Invisible').stop().fadeOut("slow");
}
);
});
html:
<p id="hoverElement">This little piggy will show the invisible div.</p>
<div id="Invisible">This is the content of invisible div.</div>
css:
#Invisible { background: #222; color: #fff; }
Edit: I changed url for the working example cause i forgot to fade out on mouse out.
Edit2: Changed url again and changed the code cause i had some extra code there.. plus i thought that i might as well add those two .stop() in there so that it stops the animation If the mouse over or mouse out occurs while animation is going on.
( Without the stops one could hover in and out several times and then when he would stop, the animation would still keep going till it has done each animation as many times as he triggered it. You can test that in here http://jsfiddle.net/va2B8/1/ )
You can start using this fiddle :
http://jsfiddle.net/Christophe/2RN6E/3/
1 div containing image and span like :
<div class="image-hover">
<img src="" />
<span class="desc">text to be displayed when imae hover</span>
</div>
Update
All can be done with CSS...
http://jsfiddle.net/Christophe/2RN6E/4/
Here's an easy jQuery plugin you can implement: http://file.urin.take-uma.net/jquery.balloon.js-Demo.html
It works like this:
$(function() {
$('img').balloon(options);
});
This jQuery applied the balloon function to all images on the page. Here's your HTML:
<img src="example.png" alt="Here's your caption." />
The text in the balloon is going to be whatever is in the alt attribute for images and whatever is in the title attribute for other tags.
I've just done this:
http://twostepmedia.co.uk
It uses hoverintent jquery plugin so there is a delay of 250ms after the user hovers over to avoid erratic hover behaviour.

HTML "overlay" which allows clicks to fall through to elements behind it [duplicate]

This question already has answers here:
HTML/CSS: Make a div "invisible" to clicks?
(5 answers)
Closed 7 years ago.
I'm trying to overlay a element on top of a webpage (to draw arbitrary graphics), and I've come to the point where I can stack it inside of a element on top of everything, but this prevents the user from clicking on any links/buttons/etc.
Is there a way to have its content float on top of everything (it's semi-transparent, so you can still see what is behind) and have the user interact with the layer below it?
I've found a lot of information on the DOM event model, but none of it addresses the problem where the buttons and other "native" controls never seem to get the clicks in the first place.
A silly hack I did was to set the height of the element to zero but overflow:visible; combining this with pointer-events:none; seems to cover all the bases.
.overlay {
height:0px;
overflow:visible;
pointer-events:none;
background:none !important;
}
Add pointer-events: none; to the overlay.
Original answer: My suggestion would be that you could capture the click event with the overlay, hide the overlay, then refire the click event, then display the overlay again. I'm not sure if you'd get a flicker effect though.
[Update] Exactly this problem and exactly my solution just appeared in this post: "Forwarding Mouse Events Through Layers". I know its probably a little late for the OP, but for the sake of somebody having this problem in the future, I though I would include it.
For the record an alternative approach might be to make the clickable layer the overlay: you make it semi-transparent and then place the "overlay" image behind it (somewhat counterintuitively, the "overlay" image could then be opaque). Depending on what you're trying to do, you might well be able to get the exact same visual effect (of an image and a clickable layer semi-transparently superimposed on top of each other), while avoiding clickability problems (because the "overlay" is in fact in the background).
In case anyone else is running in to the same problem, the only solution I could find that satisfied me was to have the canvas cover everything and then to raise the Z-index of all clickable elements. You can't draw on them, but at least they are clickable...
My team ran into this issue and resolved it very nicely.
add a class "passthrough" or something to each element you want clickable and which is under the overlay.
for each ".passthrough" element append a div and position it exactly on top of its parent. add class "element-overlay" to this new div.
The ".element-overlay" css should have a high z-index (above the page's overlay), and the elements should be transparent.
This should resolve your problem as the events on the ".element-overlay" should bubble up to ".passthrough". If you still have problems (we did not see any so far) you can play around with the binding.
This is an enhancement to #jvenema's solution.
The nice thing about this is that
you don't pass through ALL events to ALL elements. Just the ones you want. (resolved #jvenema's argument)
All events will work properly. (hover for example).
If you have any problems please let me know so I can elaborate.
You can use an overlay with opacity set in order to the buttons/anchors in the back stay visible, but once you have that overlay over an element, you can't click it.
Generally, this isn't a great idea. Taking your scenario, if you had evil intentions, you could hide everything underneath your "overlay". Then, when a user clicks on a link they think should take them to bankofamerica.com, instead it triggers the hidden link which takes them to myevilsite.com.
That said, event bubbling works, and if it's within an application, it's not a big deal. The following code is an example. Clicking the blue area pops up an alert, even though the alert is set on the red area. Note that the orange area does NOT work, because the event will propagate through the PARENT elements, so your overlay needs to be inside whatever element you're observing the clicks on. In your scenario, you may be out of luck.
<html>
<head>
</head>
<body>
<div id="outer" style="position:absolute;height:50px;width:60px;z-index:1;background-color:red;top:5px;left:5px;" onclick="alert('outer')">
<div id="nested" style="position:absolute;height:50px;width:60px;z-index:2;background-color:blue;top:15px;left:15px;">
</div>
</div>
<div id="separate" style="position:absolute;height:50px;width:60px;z-index:3;background-color:orange;top:25px;left:25px;">
</div>
</body>
</html>
How about this for IE?:
onmousedown: Hide all elements which could overlay the event. Because display:none visibility:hidden not realy works, push the overlaying div out of the screen for a fixed number of pixels. After a delay push back the overlaying div with the same number of pixels.
onmouseup: Meanwhile this is the event you like to fire.
//script
var allclickthrough=[];
function hidedivover(){
if(allclickthrough.length==0){
allclickthrough=getElementsByClassName(document.body,"clickthrough");// if so .parentNode
}
for(var i=0;i<allclickthrough.length;i++){
allclickthrough[i].style.left=parseInt(allclickthrough[i].style.left)+2000+"px";
}
setTimeout(function(){showdivover()},1000);
}
function showdivover(){
for(var i=0;i<allclickthrough.length;i++){
allclickthrough[i].style.left=parseInt(allclickthrough[i].style.left)-2000+"px";
}
}
//html
<span onmouseup="Dreck_he_got_me()">Click me if you can.</span>
<div onmousedown="hidedivover()" style="position:absolute" class="clickthrough">You'll don't get through!</div>
I was having this issue when viewing my website on a phone. While I was trying to close the overlay, I was pretty much clicking on anything under the overlay. A solution that I found working for myself is to just add a tag around the entire overlay

Categories