Develop Reference

How do I index unhidden element on top, instead of whatever is next in the DOM?

I am trying to code a card drawing emulation and I have run into a problem. After I've flipped a random card I cannot get that exact card to stay on top - instead whatever is furthest down in the DOM stays on top, and the other cards just falls below it.
I have tried with Z-index (which did nothing), and I believe this might be the answer, but I think I'm overseeing something. Also tried to hide the element with a timer, which still causes overlapping issues.
Anyone who could point me in the direction of how to make the pulled card stay on top regardless of it's placement within the DOM? I've even tried to give DOM element further up higher z-index which does nothing to the order. So I have a hard time finding the problem!
JSFiddle
Full code:
// Functions for displaying the random content when card is clicked
var backgroundImage = document.getElementById("bg");
function first_function(){
console.log("test1");
document.getElementById("a").classList.remove("hide");
document.getElementById("a2").classList.remove("hide");
document.getElementById("a").style.color = "white";
}
function second_function(){
console.log("test2");
document.getElementById("b").classList.remove("hide");
document.getElementById("b2").classList.remove("hide");
document.getElementById("b").style.color = "white";
}
function third_function(){
console.log("test3");
document.getElementById("c").classList.remove("hide");
document.getElementById("c2").classList.remove("hide");
document.getElementById("c").style.color = "white";
}
function last_card(){
console.log("last one");
document.getElementById("last").classList.remove("hide");
document.getElementById("last2").classList.remove("hide");
document.getElementById("last").style.color = "white";
}
// Splice array 1 item at a time
Array.prototype.randsplice = function () {
var randomnbr = Math.floor(Math.random() * this.length);
// Removed extra variable
return this.splice(randomnbr, 1);
};
// Use an eventlistener to wait for the DOM to load so that we can depend on DOM elements being available
window.addEventListener("load",function(){
// Setup the array we will use for this example
var my_array = [
first_function,
second_function,
third_function,
];
// Attach a click event handler to our button
backgroundImage.onclick = function(){
// Hide content after each click
var list = document.getElementsByClassName("hide-all");
for(var i=0;i<list.length;i++){
list[i].classList.add("hide");
}
// Modify my_array and display result
if(my_array.length > 0){
var new_numb = my_array.randsplice();
new_numb[0].apply(null);
// Animation making card unclickable until animation is complete
backgroundImage.classList.add("animstart");
backgroundImage.addEventListener( "animationend", function() {
backgroundImage.classList.remove("animstart");
} );
// Check if the array is empty and if so, perhaps display a message
}else{
last_card();
backgroundImage.classList.add("no-click");
}
}
});
body, html{
height: 100%;
margin: 0;
background-color: #333;
}
/* Background card */
.bgcard{
width:9.4vw;
display: inline-block;
position:absolute;
left:35.4%;
top:66.2%;
cursor: pointer;
}
/* Animation making card unclickable start */
.animstart{
animation-name: examples;
animation-duration: 1s;
}
#keyframes examples {
0% { pointer-events: none;}
100% { pointer-events: none;}
}
.cards{
z-index: 100;
transform: rotateY(180deg);
width: 14vw;
font-size: 1.2vw;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
animation-name: flip;
animation-duration: 0.6s;
animation-fill-mode: forwards;
animation-delay: 0s;
}
#keyframes flip {
from { transform: rotateY(180deg); left: -10vw; }
to { transform: rotateY(0deg); left: 0vw; }
}
#keyframes flips {
from { transform: rotateY(0deg); left: -10vw; }
to { transform: rotateY(180deg); left: 0vw; }
}
.frontcard {
width: 14vw;
z-index: 200;
transform: rotateY(0deg);
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
animation-name: flips;
animation-duration: 0.6s;
animation-fill-mode: forwards;
animation-delay: 0s;
}
.frontcard, .back {
backface-visibility: hidden;
position: absolute;
}
.text-wrap{
padding-left: 200px;
width: 50vw;
position: absolute;
}
p{
top: 10%;
animation-name: hidden;
animation-duration: 0.6s;
}
h2{
top: 5%;
animation-name: hidden;
animation-duration: 0.6s;
}
.pulled-card-container{
position: absolute;
right: 24%;
top:66.2%;;
display: inline-block;
z-index: 100;
perspective: 1000;
}
.pulled-card-container-done{
position: absolute;
right: 24%;
top:66.2%;;
display: inline-block;
}
#keyframes example {
0% { left:-10vw;}
25% { left:0px;}
50% { left:0px;}
75% { left:0px;}
100% { left:0px;}
}
#keyframes hidden {
0% {opacity: 0;}
25% {opacity: 0;}
50% {opacity: 0;}
75% {opacity: 0;}
100% {opacity: 1;}
}
.no-click{
pointer-events: none;
cursor: none;
}
.hide{
display: none;
}
.hideanim{
opacity: 1;
-webkit-animation-delay: 1s;
-webkit-animation-name: fadein;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
animation-name: fadein;
animation-duration: 1s;
animation-timing-function: linear;
}
#-webkit-keyframes fadein {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes fadein {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<div class="all-wrap">
<!-- Containers with information -->
<div id="a" class="aa hide ">
<div id="a2" class="text-wrap hide hide-all">
<h2>X of Cards</h2>
<p>First Displayed Text</p>
</div>
<div class="pulled-card-container">
<img class="cards lol1"src="https://cdn2.bigcommerce.com/n-d57o0b/1kujmu/products/297/images/924/2D__57497.1440113502.1280.1280.png?c=2" width="200px" height="300px">
<img src="https://st.depositphotos.com/1363007/1810/i/950/depositphotos_18105995-stock-photo-card-back.jpg" alt="" width="200px" height="300px" alt="" class="frontcard">
</div>
</div>
<div id="b" class="ab hide">
<div id="b2" class="text-wrap hide hide-all">
<h2>Y of Cards</h2>
<p>Second displayed text</p>
</div>
<div class="pulled-card-container">
<img class="cards lol2"src="https://cdn2.bigcommerce.com/n-d57o0b/1kujmu/products/297/images/928/6D__92916.1440113530.1280.1280.png?c=2" width="200px" height="300px">
<img src="https://st.depositphotos.com/1363007/1810/i/950/depositphotos_18105995-stock-photo-card-back.jpg" alt="" width="200px" height="300px" alt="" class="frontcard">
</div>
</div>
<div id="c" class="ac hide">
<div id="c2" class="text-wrap hide hide-all">
<h2>Z of Cards</h2>
<p>Third displayed text</p>
</div>
<div class="pulled-card-container">
<img class="cards lol3"src="https://cdn2.bigcommerce.com/n-d57o0b/1kujmu/products/297/images/932/10H__11470.1440113568.1280.1280.png?c=2" width="200px" height="300px">
<img src="https://st.depositphotos.com/1363007/1810/i/950/depositphotos_18105995-stock-photo-card-back.jpg" alt="" width="200px" height="300px" alt="" class="frontcard">
</div>
</div>
<div id="last" class="hide">
<div id="last2" class="text-wrap hide hide-all">
<h2>Last of Cards</h2>
<p>The last card in the deck</p>
</div>
<div class="pulled-card-container">
<img class="cards" src="https://cdn2.bigcommerce.com/n-d57o0b/1kujmu/products/297/images/932/10H__11470.1440113568.1280.1280.png?c=2" alt="" width="200px" height="300px">
<img src="https://st.depositphotos.com/1363007/1810/i/950/depositphotos_18105995-stock-photo-card-back.jpg" alt="" width="200px" height="300px" alt="" class="frontcard">
</div>
</div>
<!-- Background card -->
<div class="bgcard" id="bg">
<img src="https://st.depositphotos.com/1363007/1810/i/950/depositphotos_18105995-stock-photo-card-back.jpg" alt="" width="200px" height="300px">
</div>
</div>
Any help is greatly appreciated!

When using z-index, you will need to set the position to relative or absolute ... pretty sure, like 90% sure.

After fidgeting around some more I found my grave error. Here's the answer, in case anyone ever wonders:
I had z-index on pulled-card-container that conflicted. After removing that, and doing a
var zNumb = 300;
zNumb++;
document.getElementById("imgOne").style.zIndex = zNumb;
on each function it worked like a charm!

After pressing button the animation does not repeat

What am I doing wrong, that after pressing the button the animation does not repeat? Thanks for help.
var abox = document.getElementsByClassName("box")[0];
function allmove(){
abox.classList.toggle("move");
}
.vector img {
width: 20%;
height: 20%;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 1;
}
#-webkit-keyframes example{
0%{left:0px; top:0px;}
25%{left:200px; top:0px;}
100%{left:0px; top:0px;}
}
<div class="box"></div>
<div class="vector">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSqYooppFTzO8AydhbeZtjnrWpeZS5b7Gbi9EnwEPuuPW_t6ycn" />
</div>
<button class="button" onclick="allmove()">Click Me</button>

You can use something like this to refresh animation on click.
I added .animation class to separate it from vector class.This way you can easly toggle it.
the setTimeout is to wait a moment before adding the class after removing it.
var abox = document.getElementsByClassName("animation")[0];
function allmove(){
abox.classList.remove("animation");
setTimeout(function(){ abox.classList.add('animation') }, 100);
}
.vector img {
width: 20%;
height: 20%;
position: relative;
}
.animation img {
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 1;
}
#-webkit-keyframes example{
0%{left:0px; top:0px;}
25%{left:200px; top:0px;}
100%{left:0px; top:0px;}
}
<div class="box"></div>
<div class="vector animation">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSqYooppFTzO8AydhbeZtjnrWpeZS5b7Gbi9EnwEPuuPW_t6ycn" />
</div>
<button class="button" onclick="allmove()">Click Me</button>

That's it, but I think addEventListener is better than onclick()
I modify a bit your code
You can find jsfiddle example Here
const bike = document.querySelector(".bike");
const button = document.querySelector(".button");
function allMove(){
bike.classList.toggle("move");
}
button.addEventListener('click', allMove);
.vector img {
width: 20%;
height: 20%;
position: relative;
}
.move{
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 1;
}
#-webkit-keyframes example{
0%{left:0px; top:0px;}
25%{left:200px; top:0px;}
100%{left:0px; top:0px;}
}
<div class="box"></div>
<div class="vector">
<img class="bike" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSqYooppFTzO8AydhbeZtjnrWpeZS5b7Gbi9EnwEPuuPW_t6ycn" />
</div>
<button class="button">Click Me</button>

Inspired by Mehdi Ayari's answer, but I think using requestAnimationFrame is better than using a timeout.
var abox = document.querySelector(".animation");
function allmove() {
requestAnimationFrame(() => {
abox.classList.remove("animation");
requestAnimationFrame(() => abox.classList.add("animation"));
});
}
.vector img {
width: 20%;
height: 20%;
position: relative;
}
.animation img {
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 1;
}
#-webkit-keyframes example{
0%{left:0px; top:0px;}
25%{left:200px; top:0px;}
100%{left:0px; top:0px;}
}
<div class="box"></div>
<div class="vector animation">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSqYooppFTzO8AydhbeZtjnrWpeZS5b7Gbi9EnwEPuuPW_t6ycn" />
</div>
<button class="button" onclick="allmove()">Click Me</button>

How to make font icon be full of a block element?

I want to make a rotated animation of a font icon, but I can not let the center be the right place, The rotation is always offset a little.
Here is the example:
#keyframes circle {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
div {
padding:0;
margin:0;
}
.container {
position:absolute;
top:50px;
left:50px;
border:1px solid red;
font-size:20px;
}
.inner {
line-height:0;
animation-name:circle;
animation-duration: 1s;
animation-iteration-count: infinite;
}
<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet"/>
<div class="container"><div class="inner"><i class="fas fa-adjust"></i></div></div>
JSFiddle : https://jsfiddle.net/217z69sm/2/

It seems like font-awesome are aware of this, and there suggestion seems to be to switch to the svg version, or to use display: block:
Icon Animation + Wobbles
We’ve worked hard to keep icons perfectly
centered when they are spinning or pulsing. However, we’ve seen issues
with several browsers and the web fonts + CSS version of Font Awesome.
Through a lot of investigation this appears to be an issue with web
fonts in general and not something we can directly fix. We do have a
couple of ways you might be able to work around this:
Switch Frameworks - Switch to the SVG with JavaScript version, it’s
working a lot better for this. Set the display of the animating icon -
Use display: block; where you can. This seems to help a lot with this
issue.
Taken from https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons
I can't say that I can see the difference which using display: block gives here, perhaps others can spot it or add an explanation of why it might help:
#keyframes circle {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
div {
padding:0;
margin:0;
}
.container {
position:absolute;
top:50px;
left:50px;
border:1px solid red;
font-size:20px;
}
.inner {
line-height:0;
animation-name:circle;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#block {
display: block;
}
.two {
left: 75px;
}
<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet"/>
<div class="container"><div class="inner"><i class="fas fa-adjust"></i></div></div>
<div class="container two"><div class="inner"><i class="fas fa-adjust" id="block"></i></div></div>

I analysis that the icon has some unbalance margins, which is creating a little offset when we try to rotate it.
here, I remake the same icon,
check if it works for you.
#keyframes circle {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
.container {
position:absolute;
top:50px;
left:50px;
border:1px solid red;
font-size:300px;
}
.inner {
padding: 2px;
animation-timing-function: linear;
animation-name:circle;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.rot{
border: 10px solid black;
width: 100px;
height: 100px;
border-radius: 50%;
background-image: linear-gradient(to left,black 0%, black 50%, white 50%,white 100%);
}
<div class="container">
<div class="inner">
<div class="rot">
</div>
</div>
</div>

trying to fix my bug [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
im making a slide text from right to left , but when goes on left side stop moving and start again ...i want it to never stop moving from right to left .. here is my code ..
function change_left() {
$('#slide12').removeClass('slide-right').addClass('slide-left');
}
function change_right() {
$('#slide12').removeClass('slide-left').addClass('slide-right');
}
function to_left() {
setInterval(change_left, 5000);
};
function to_right() {
setInterval(change_right, 5000);
};
to_left();
to_right()

You can use css. no need jquery.
body { margin: 20px; }
.marquee {
height: 25px;
width: 420px;
overflow: hidden;
position: relative;
}
.marquee div {
display: block;
width: 200%;
height: 30px;
position: absolute;
overflow: hidden;
animation: marquee 5s linear infinite;
}
.marquee span {
float: left;
width: 50%;
}
#keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
<div class="marquee">
<div>
<span>You spin me right round, baby. Like a record, baby.</span>
<span>You spin me right round, baby. Like a record, baby.</span>
</div>
</div>

You can do this using css.
HTML
<div class="display">
<div class="moving-text">
Moving...
</div>
</div>
CSS
.display{
width:100%;
height:100px;
background:#000000;
position:relative;
overflow:hidden;
}
.display .moving-text{
display:inline-block;
font-size:40px;
padding:25px;
color:green;
position:absolute;
-webkit-animation: leftright 5s infinite; /* Safari 4.0 - 8.0 */
animation: leftright 5s infinite;
}
#keyframes leftright {
0% {left: 0;}
100% {left: 100%;}
}
#keyframes rightleft {
0% {left: 100%;}
100% {left: 0;}
}
#keyframes both {
0% {left: 0;}
49% {left: 100%;}
100% {left: 0;}
}
You can change animation: leftright 5s infinite; with 'rightleft' or 'both'
This is JsFiddle here

Element doesn't disappear for some browsers

Put simply, loading animation (with white background) should appear as the homepage loads. It should then disappear following loading completion. Working fine for Chrome, but not IE and Firefox (animation works but does not disappear, which may be JS related).
***EDIT - I've temporarily removed the html as the website is active and needed by our customers.
Take a look here: www.championfreight.co.nz
HTML
<div id="backgroundcolor" style="position:fixed; width:100%; height:100%; left:0%; top:0%; z-index:1997">
<div id="followingBallsG" style="left:50%; margin-left:-50px; top:50%; z-index:1998">
<div id="followingBallsG_1" class="followingBallsG">
</div>
<div id="followingBallsG_2" class="followingBallsG">
</div>
<div id="followingBallsG_3" class="followingBallsG">
</div>
<div id="followingBallsG_4" class="followingBallsG">
</div>
</div>
</div>
JS
window.onload = function()
{
document.getElementById("followingBallsG").style.visibility = "hidden"
document.getElementById("backgroundcolor").style.visibility = "hidden"
}
CSS
#backgroundcolor{
background-color:white
}
#followingBallsG{
position:relative;
width:100px;
height:8px;
}
.followingBallsG{
background-color:#000000;
position:absolute;
top:0;
left:0;
width:8px;
height:8px;
-moz-border-radius:4px;
-moz-animation-name:bounce_followingBallsG;
-moz-animation-duration:1.4s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:4px;
-webkit-animation-name:bounce_followingBallsG;
-webkit-animation-duration:1.4s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:4px;
-ms-animation-name:bounce_followingBallsG;
-ms-animation-duration:1.4s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:4px;
-o-animation-name:bounce_followingBallsG;
-o-animation-duration:1.4s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:4px;
animation-name:bounce_followingBallsG;
animation-duration:1.4s;
animation-iteration-count:infinite;
animation-direction:linear;
}
#followingBallsG_1{
-moz-animation-delay:0s;
}
#followingBallsG_1{
-webkit-animation-delay:0s;
}
#followingBallsG_1{
-ms-animation-delay:0s;
}
#followingBallsG_1{
-o-animation-delay:0s;
}
#followingBallsG_1{
animation-delay:0s;
}
#followingBallsG_2{
-moz-animation-delay:0.14s;
-webkit-animation-delay:0.14s;
-ms-animation-delay:0.14s;
-o-animation-delay:0.14s;
animation-delay:0.14s;
}
#followingBallsG_3{
-moz-animation-delay:0.28s;
-webkit-animation-delay:0.28s;
-ms-animation-delay:0.28s;
-o-animation-delay:0.28s;
animation-delay:0.28s;
}
#followingBallsG_4{
-moz-animation-delay:0.42s;
-webkit-animation-delay:0.42s;
-ms-animation-delay:0.42s;
-o-animation-delay:0.42s;
animation-delay:0.42s;
}
#-moz-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
#-webkit-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
#-ms-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
#-o-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
#keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}

Ah! I get it. But that is likely to not work in Firefox because they turn off animations while "loading another page". The only way to have an animation working is to use AJAX to do the loading. That's a bit of work and you may have a problem with search engines if you do that because AJAX won't be run by search engines and you will not get any clicks from search engines, so bad idea...