Using vanilla js, I am trying to target all elements with the class headingScroll, so when I scroll 100px from the top, it fades away. When I make the function access the DOM as getelementbyid, and then give say, my name the id name, it works, but not with classes.
Anyone have any workarounds or notice that this code is ineffective with what I am trying to do?
window.onload = function() {
const EFFECT = document.querySelectorAll('.headingScroll');
window.addEventListener('scroll', scrollEffect);
function scrollEffect() {
if(window.scrollY>100) {
EFFECT.classList.add('show');
}
else {
EFFECT.classList.remove('show')
}
}
scrollEffect('.headingScroll');
}
/*Header*/
.header-img {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 140, 255, 0.5)), url("../images/coding-on-laptop.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 100vh;
}
.header-text {
text-align: center;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
color: white;
}
#headingName {
font-size: 4rem;
text-shadow: 1px 1px 2px rgba(0,0,0,.5);
opacity: 1;
transition: 1s ease-in-out;
}
.headingScroll.remove {
opacity: 1;
transition: 1s ease-in-out;
}
.headingScroll.show {
opacity: 0;
}
.header-social {
position: absolute;
top: 58%;
left: 50%;
transform: translate(-50%, -50%);
}
.fa {
color: white;
font-size: 2rem;
text-align: center;
text-decoration: none;
margin: 5px;
}
.fa:hover {
color:#0779e4;
transition: ease-in-out .3s;
transform: translateY(-2px);
}
.scroll_down {
position: absolute;
bottom: 20%;
left: 50%;
font-size: 2em;
transform: translate(-50%, -20%);
color: white;
padding-bottom: 20px;
text-shadow: 1px 1px 2px rgba(0,0,0,.5)
}
<!--Header-->
<header class="header-img" id="home">
<div class="triangle_1"></div>
<div class="triangle_2"></div>
<div class="header-text">
<h1 id='headingName' class="headingScroll">Alex Schmidt</h1>
</div>
<div class="header-social">
</div>
<div class='scroll_down'>
<p>Scroll</p>
<span></span>
</div>
</header>
<!--End Header-->
<!--About-->
<div class="about-wrapper" id="about">
<div class="triangle_3"></div>
<div class="triangle_4"></div>
<div class="about">
<div class="inner-about">
<h1>About</h1>
<h2>Front-end Engineer</h2>
<h3>Located in Portland, OR</h3>
</div>
</div>
You have to loop through each one to apply.
window.onload = function() {
const effects = document.querySelectorAll('.headingScroll');
window.addEventListener('scroll', scrollEffect);
function scrollEffect() {
effects.forEach(function(el){
if(window.scrollY>100) {
el.classList.add('show');
}
else {
el.classList.remove('show')
}
});
}
scrollEffect();
}
Related
I built a blackjack game. Now I want the cards of the dealer, when they appear, to flip from back to the front. I built the keyframes in CSS but I can't apply it on the JS file.
JAVASCRIPT
function deal() {
if (newgame == true) {
var random = Math.floor((Math.random() * 13));
var UserCards = document.getElementById('user');
var card = document.createElement('img');
card.setAttribute("width", 450);
card.setAttribute("src", images[random]);
UserCards.appendChild(card);
UserCards.className ='myDIV';
checkUserScore += cards[random];
if (checkUserScore > 21)
{
UserCards.appendChild(card);
alert("you hit more than 21");
}
}
EDIT: Did the OP leave out the function closing brace when pasting the code, or is that an actual error?
CSS
<style>
.myDIV {
margin: auto;
border: 1px solid black;
width: 500px;
height: 500px;
background-image:url(media/cards/UpsideDown.jpg);
color: white;
animation: mymove 5s infinite;
}
#keyframes mymove {
50% {
transform: rotate(360deg);
background-image:url(media/cards/QC.jpg);
}
}
</style>
Have you searched the web?
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
I'm trying to create multiple flip cards with HTML and CSS, that flip using jQuery. The problem I'm running into is that currently I'm only able to flip the very first card.
Any advice to make the jQuery more global and able to click/flip each card would be greatly appreciated.
Here's the example I've been using: https://codepen.io/marcwilk/pen/JjdwKZR
HTML:
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<p>Click card to flip.</p>
CSS:
body { font-family: sans-serif; }
.scene {
width: 200px;
height: 260px;
border: 1px solid #CCC;
margin: 40px 0;
perspective: 600px;
}
.card {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
transform-style: preserve-3d;
transform-origin: center right;
transition: transform 1s;
}
.card.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
}
.card__face--front {
background: red;
}
.card__face--back {
background: blue;
transform: rotateY(180deg);
}
JS:
var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});
Thanks!
Firstly, your code is pure JavaScript, and not using jQuery.
Second, the problem is that you use document.querySelector('.card') which selects the first .card element.
Your solution is to use document.querySelectorAll('.card'); and loop through it to add the click event listener:
var cards = document.querySelectorAll('.card');
cards.forEach(card => {
card.addEventListener('click', function() {
card.classList.toggle('is-flipped');
})
})
body {
font-family: sans-serif;
}
.scene {
width: 200px;
height: 260px;
border: 1px solid #CCC;
margin: 40px 0;
perspective: 600px;
}
.card {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
transform-style: preserve-3d;
transform-origin: center right;
transition: transform 1s;
}
.card.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
}
.card__face--front {
background: red;
}
.card__face--back {
background: blue;
transform: rotateY(180deg);
}
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<p>Click card to flip.</p>
So I use fontawesome icons for social media links and also for some visual pieces on my skills page. But when my website loads and I click on a tab and the animations finish, some of the icons pop in. For example, 2 out of my four icons used as visual representation of my skills (ie. 'Sound Design' has a picture of a headphones) pop in once it gets to the 'Skills' part of my site. Could this be a loading issue where it just reads the scripts too slow?
Here is my html (every tab is contained on my index.html document, and I use animations to move 'pages' out of the way to display different pages.)
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:400,900&display=swap" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/c124511129.js" crossorigin="anonymous"></script>
<!--JQUERY-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src='js/transit.js'></script>
<title>Ben Lusted | Portfolio</title>
</head>
<body>
<script src="js/javascript.js"></script>
<div class="container">
<div id="contact-tab">
<div class="contact-info">
<h1>get in touch!</h1>
<p>Email me: blustedaudio#gmail.com</p>
<i class="fab fa-twitter"></i>
<i class="fab fa-vimeo-v"></i>
<i class="fab fa-dribbble"></i>
<i class="fab fa-facebook"></i>
</div>
</div>
<div id="my-work-tab">
my work
<div class="my-work-content">
<h1>my work</h1>
<h2 id="work-tagline">Here is what I am good at</h2>
<div class="skill-card-cont">
<div class="skill-category-card" id="web-des-skills">
<i class="far fa-eye" id="eye-hover"></i>
<i class="fas fa-pencil-alt" style="font-size:110px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
<h3 style="line-height:24px;">Web<br />Design</h3>
<div class="content-webdes"><br />
<p>
I can do this, that, these, those. Oh! And this: \o/
</p>
</div>
</div>
<div class="skill-category-card" id="web-dev-skills">
<i class="far fa-eye" id="eye-hover"></i>
<i class="far fa-file-code" style="font-size:110px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
<h3 style="line-height:24px;">Web<br />Development</h3>
<div class="content-webdev"><br />
<p>
I can code a dancing monkey for your website
</p>
</div>
</div>
<div class="skill-category-card" id="gfx-skills">
<i class="far fa-eye" id="eye-hover"></i>
<i class="far fa-image" style="font-size:110px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
<h3 style="line-height:24px;">Graphic<br />Design</h3>
<div class="content-gfx"><br />
<p>
I can make shapes and give them color!
</p>
</div>
</div>
<div class="skill-category-card" id="sfx-skills">
<i class="far fa-eye" id="eye-hover"></i>
<i class="fas fa-volume-up" style="font-size:110px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
<h3 style="line-height:24px;">Audio<br />Design</h3>
<div class="content-sfx"><br />
<p>
Studied Sound Design for Visual Media at the Vancouver Film School in 2017/18.
</p>
</div>
</div>
</div>
<div class="recent-projects">
<h2 style="font-size:32px;">recent projects</h2>
<table>
<tr>
<th>Shotgun Farmers</th>
<th>JS Authenticator</th>
<th>Audio Imgur</th>
</tr>
<tr>
<th>Shotgun Farmers</th>
<th>Shotgun Farmers</th>
<th>Shotgun Farmers</th>
</tr>
</table>
</div>
</div>
</div>
<div id="about-tab">
about
<div class="about-text">
<h1>who am I?</h1><br>
<div class="abt-tagline">
<h2>My name is Ben Lusted, <br>and I am a web developer.<h2><br>
<h3>I am a Canadian currently living in Vancouver and looking for
the next big thing.</h3>
</div>
<div class="cont">
<img src="images/me.png" alt="ME" class="about-img">
</div>
</div>
</div>
<div id="home-tab">
home
<div class="landing-info-text">
<h1>Ben<br>Lusted,</h1><br>
<h2>Web Developer.</h2>
</div>
</div>
<div id="landing-info">
contact
</div>
</div>
</body>
Also some jQuery stuff to handle page transitions
$(document).ready(function() {
$('.about-text').hide();
$('.contact-info').hide();
$('.my-work-content').hide();
$('#landing-info').animate({
width: "100%"
}, 450);
$('#my-work-tab').animate({
width: "96%"
}, 600);
$('#about-tab').animate({
width: "92%"
}, 750);
$('#home-tab').animate({
width: "88%"
}, 900);
});
$(function() {
$('.skill-category-card').mouseenter(function() {
if(this.id === 'web-des-skills') {
$('.content-webdes').animate({top:'70%',opacity:'1'},20);
$('#web-des-skills').animate({paddingTop:'20px'},20);
}
if(this.id === 'web-dev-skills') {
$('.content-webdev').animate({top:'65%',opacity:'1'},20);
$('#web-dev-skills').animate({paddingTop:'20px'},20);
}
if(this.id === 'gfx-skills') {
$('.content-gfx').animate({top:'65%',opacity:'1'},20);
$('#gfx-skills').animate({paddingTop:'20px'},20);
}
if(this.id === 'sfx-skills') {
$('.content-sfx').animate({top:'65%', opacity:'1'},20);
$('#sfx-skills').animate({paddingTop:'20px'},20);
}
});
$('.skill-category-card').mouseleave(function() {
if(this.id === 'web-des-skills') {
$('.content-webdes').animate({top:'-20%',opacity:'0'},25);
$('#web-des-skills').animate({paddingTop:'0px'},25);
}
if(this.id === 'web-dev-skills') {
$('.content-webdev').animate({top:'-20%',opacity:'0'},25);
$('#web-dev-skills').animate({paddingTop:'0px'},25);
}
if(this.id === 'gfx-skills') {
$('.content-gfx').animate({top:'-20%',opacity:'0'},25);
$('#gfx-skills').animate({paddingTop:'0px'},25);
}
if(this.id === 'sfx-skills') {
$('.content-sfx').animate({top:'-20%',opacity:'0'},25);
$('#sfx-skills').animate({paddingTop: '0px'},25);
}
});
});
$(function() {
let active = "slide-3";
$('#home-btn').click(function() {
$('#home-tab').animate({
width: '88%'
});
$('.landing-info-text h1').animate({
left: '0'
});
$('.landing-info-text h2').animate({
left: '0'
});
$('#about-tab').animate({
width: '92%'
});
$('.about-text').animate({
left: '0px'
});
$('#my-work-tab').animate({
width: '96%'
});
$('.my-work-content').animate({
left: '0px'
});
});
$('#about-btn').click(function() {
$('#home-tab').animate({
width: '60'
});
$('.landing-info-text h1').animate({
left: '-1000px'
});
$('.landing-info-text h2').animate({
left: '-1000px'
});
$('#about-tab').animate({
width: '92%'
});
$('.about-text').animate({
left: '0px'
});
$('.about-text').show();
$('#my-work-tab').animate({ width: '96%' });
$('.my-work-content').animate({
left: '0px'
});
});
$('#my-work-btn').click(function() {
$('.my-work-content').show();
$('#home-tab').animate({
width: '60'
});
$('.landing-info-text h1').animate({
left: '-1000px'
});
$('.landing-info-text h2').animate({
left: '-1000px'
});
$('#about-tab').animate({
width: '120'
});
$('.about-text').animate({
left: '-1500px'
});
$('#my-work-tab').animate({
width: '96%'
});
$('.my-work-content').show();
$('.my-work-content').animate({
left: '0px'
});
});
$('#contact-btn').click(function() {
$('#home-tab').animate({
width: '60'
});
$('.landing-info-text h1').animate({
left: '-1000px'
});
$('.landing-info-text h2').animate({
left: '-1000px'
});
$('#my-work-tab').animate({
width: '180'
});
$('.my-work-content').animate({
left: '-1500px'
});
$('#about-tab').animate({
width: '120'
});
$('.about-text').animate({
left: '-1500px'
});
$('.contact-info').show();
});
});
Finally the css (if necessary):
html {
overflow:hidden;
}
body {
background-color: #1E1E5D;
margin: 0;
padding: 0;
}
/* CONTACT */
#landing-info {
padding: 0;
margin: 0;
background-color: #587FFC;
height: 100vh;
width: 0;
}
.landing-info-text {
margin-left: 40px;
padding-top: 300px;
}
.landing-info-text h1 {
position: relative;
font-family: 'Poppins', sans-serif;
font-size: 800%;
color: white;
padding: 0;
margin: 0;
line-height: 100px;
animation: slide-up-fade-in ease 1.4s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
text-shadow: 6px 10px 10px rgba(0, 0, 0, 0.4);
}
.landing-info-text h2 {
position: relative;
width: 600px;
font-family: 'Poppins', sans-serif;
font-size: 28px;
padding: 0;
margin: 0;
color: white;
animation: slide-up-fade-in ease 2s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
text-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
}
.nav-link {
position: relative;
color: white;
text-decoration: none;
font-family: 'Poppins';
font-size: 24px;
writing-mode: vertical-rl;
float: right;
vertical-align: middle;
display: table-cell;
top: 50%;
right: 18px;
text-decoration: none;
}
.nav-link:after {
border-left: 3px solid white;
content: "";
display: block;
margin: 0;
transition: height 250ms ease-in-out 0s;
height: 0;
}
.nav-link:hover:after {
transition: height 100ms ease-in-out 0s;
height: 100%;
}
/* MY WORK */
#my-work-tab {
position: absolute;
display: inline-block;
height: 100%;
background-color: #92A5FD;
padding: 0;
margin: 0;
width: 0;
}
.my-work-content {
width:85%;
height:100vh;
display: none;
position: absolute;
margin:0;
transform:translateX(12%);
padding: 0;
font-family: 'Poppins';
color: white;
}
.my-work-content h1 {
position: relative;
font-size: 85px;
text-shadow: 10px 10px 15px rgba(0, 0, 0, 0.15);
margin: 0;
padding: 0;
top: 20px;
}
#work-tagline {
font-size: 38px;
}
.skill-category-card {
background-color: rgb(68, 79, 83);
width:220px;
height:220px;
float:left;
text-align: center;
display:inline;
border-radius: 5%;
margin-right:20px;
padding:0;
transition: all 0.4s ease-in-out;
animation: slide-up-fade-in ease 0.8s;
animation-iteration-count: 1;
box-shadow:5px 10px 20px 5px rgba(0,0,0,0.25);
}
.skill-card-cont {
position:absolute;
}
.skill-category-card h3 {
font-size:22px;
position: relative;
margin:0;
padding:0;
top:75%;
}
#eye-hover {
position:absolute;
text-align:center;
top:6px;
}
.content-webdes, .content-webdev, .content-gfx, .content-sfx {
background-color:white;
width:220px;
height:220px;
position:relative;
top:-20%;
border-bottom-left-radius: 5%;
border-bottom-right-radius: 5%;
pointer-events:none;
transition:all 0.4s ease-in-out;
color:black;
font-size:16px;
opacity:0;
z-index: -1;
}
.recent-projects {
width:100%;
height:400px;
position:absolute;
bottom:10%;
margin:0;
padding:0;
animation: slide-up-fade-in ease-in-out 0.8s;
z-index: -2;
}
.recent-projects h2 {
position: relative;
color:white;
}
.recent-projects table {
width:100%;
height:100px;
font-size:22px;
border:4px solid white;
}
.recent-projects a {
text-decoration:underline;
color:white;
}
/* ABOUT */
#about-tab {
position: absolute;
height: 100%;
background-color: #FF8692;
width: 0;
color: white;
font-family: 'Poppins';
}
#about-tab .about-text {
display: none;
position: absolute;
padding: 0;
margin-left: 100px;
}
.about-text h1 {
position: relative;
font-size: 85px;
text-shadow: 10px 10px 15px rgba(0, 0, 0, 0.15);
margin: 0;
padding: 0;
top: 20px;
}
.abt-tagline {
width: 75%;
}
.abt-tagline h2 {
position: relative;
font-size: 42px;
}
.abt-tagline h3 {
position: relative;
font-size: 28px;
}
.cont {
width: 50%;
position: absolute;
top: 30%;
left: 60%;
}
.cont img {
width: 30%;
border-radius: 50%;
border-style: solid;
border-color: white;
border-width: medium;
}
/* HOME */
#home-tab {
position: absolute;
height: 100%;
background-color: #FF1D58;
width: 0;
}
#contact-tab {
padding: 0;
margin: 0;
}
#contact-tab .contact-info {
display: none;
position: absolute;
margin: 20px 0 0 210px;
padding: 0;
color: white;
font-family: 'Poppins';
}
.contact-info h1 {
padding: 0;
margin: 0;
position: relative;
font-size: 85px;
text-shadow: 10px 10px 15px rgba(0, 0, 0, 0.15);
}
.contact-info p {
font-size:24px;
}
.contact-info i {
font-size:42px;
border-style: solid;
border-color:white;
border-width: thin;
border-radius:50%;
padding:8px;
color:white;
margin-right:20px;
}
footer {
color:white;
bottom:0;
margin:0;
padding:0;
width:100%;
}
footer h1 {
font-size:20px;
font-family:'Poppins';
opacity: 0.6;
margin-left:50%;
position:absolute;
bottom:0;
transform:translateX(-50%);
}
/* ELEMENT SLIDE UP AND FADE IN */
#keyframes slide-up-fade-in {
from {
opacity: 0;
transform: translate(0px, 30px);
}
to {
opacity: 1;
transform: translate(0px, 0px);
}
}
#-webkit-keyframes slide-up-fade-in {
from {
opacity: 0;
transform: translate(0px, 40px);
}
to {
opacity: 1;
transform: translate(0px, 0px);
}
}
#-o-keyframes slide-up-fade-in {
from {
opacity: 0;
transform: translate(0px, 40px);
}
to {
opacity: 1;
transform: translate(0px, 0px);
}
}
#-moz-keyframes slide-up-fade-in {
from {
opacity: 0;
transform: translate(0px, 40px);
}
to {
opacity: 1;
transform: translate(0px, 0px);
}
}
#-ms-keyframes slide-up-fade-in {
from {
opacity: 0;
transform: translate(0px, 40px);
}
to {
opacity: 1;
transform: translate(0px, 0px);
}
}
#media screen and (max-width: 766px) {}
Tried to reproduce on codepen and everything seems to be fine except for a visual adjustments not related to the question, check it out here CodePen Reproduction
I'll say you check for any speed, caching and browser issues. Try another browser.
Dont forget the closing html tag thats missing
</html>
i have multiple divs that contain custom css toastr notification,
what i need help with is displaying random div each time page loads or using toastr by codeseven how to do it in same way, any help is appreciated either css or js, this is what i've been trying but no luck, and i have tried also to use math() for it but its either showing all divs at the same time or not even working... is there anyway it can select specific div and show only him while hiding other divs that are there?
#toastr {
font-size: 21px;
text-align: center;
transition: opacity 1s 1s;
position: fixed;
z-index: 999999;
pointer-events: none;
z-index: 1;
bottom: 12px;
left: 12px;
font-size: 17px;
animation: fadeins 5s linear forwards;
opacity: 0;
}
#toastr a {
color: white;
text-decoration: none;
}
#toastr>div {
position: relative;
pointer-events: auto;
overflow: hidden;
margin: 0 0 6px;
padding: 15px 15px 15px 15px;
width: 300px;
border-radius: 3px 3px 3px 3px;
background-position: 15px center;
background-repeat: no-repeat;
box-shadow: 0 0 12px #999999;
color: #FFFFFF;
opacity: 1;
}
.toastr-success {
background-color: #51A351;
}
#keyframes fadeins {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#keyframes fadein {
from {
opacity: 0;
bottom: -5px;
}
to {
opacity: 1;
bottom: 12px;
}
}
#keyframes fadeout {
from {
opacity: 1;
bottom: 12px;
}
to {
opacity: 0;
bottom: 0;
}
}
<div class="views-row views-row-2 views-row-even random-popup">
<div class="views-field views-field-nothing">
<span class="field-content">
<div id="toastr" class="toastr">
<div class="toast toastr-success" aria-live="polite">
<div class="toast-message">message1.</div>
</div>
</div>
</span>
</div>
</div>
<div class="views-row views-row-3 views-row-even random-popup">
<div class="views-field views-field-nothing">
<span class="field-content">
<div id="toastr" class="toastr">
<div class="toast toastr-success" aria-live="polite">
<div class="toast-message">message2.</div>
</div>
</div>
</span>
</div>
</div>
Seen as you have a class called random-popup, you can set them to initially be display none, and then using another class maybe called active, set the display to block..
.random-popup {
display: none;
}
.random-popup.active {
display: block;
}
Then with a bit of simple Javascript to set one of them randomly visible by adding the active class..
var popups = document.querySelectorAll(".random-popup");
popups[Math.trunc(Math.random() * popups.length)].classList.add("active");
eg..
var popups = document.querySelectorAll(".random-popup");
popups[Math.trunc(Math.random() * popups.length)]
.classList.add("active");
#toastr {
font-size: 21px;
text-align: center;
transition: opacity 1s 1s;
position: fixed;
z-index: 999999;
pointer-events: none;
z-index: 1;
bottom: 12px;
left: 12px;
font-size: 17px;
animation: fadeins 5s linear forwards;
opacity: 0;
}
#toastr a {
color: white;
text-decoration: none;
}
#toastr>div {
position: relative;
pointer-events: auto;
overflow: hidden;
margin: 0 0 6px;
padding: 15px 15px 15px 15px;
width: 300px;
border-radius: 3px 3px 3px 3px;
background-position: 15px center;
background-repeat: no-repeat;
box-shadow: 0 0 12px #999999;
color: #FFFFFF;
opacity: 1;
}
.toastr-success {
background-color: #51A351;
}
#keyframes fadeins {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#keyframes fadein {
from {
opacity: 0;
bottom: -5px;
}
to {
opacity: 1;
bottom: 12px;
}
}
#keyframes fadeout {
from {
opacity: 1;
bottom: 12px;
}
to {
opacity: 0;
bottom: 0;
}
}
.random-popup {
display: none;
}
.random-popup.active {
display: block;
}
<div class="views-row views-row-2 views-row-even random-popup">
<div class="views-field views-field-nothing">
<span class="field-content">
<div id="toastr" class="toastr">
<div class="toast toastr-success" aria-live="polite">
<div class="toast-message">message1.</div>
</div>
</div>
</span>
</div>
</div>
<div class="views-row views-row-3 views-row-even random-popup">
<div class="views-field views-field-nothing">
<span class="field-content">
<div id="toastr" class="toastr">
<div class="toast toastr-success" aria-live="polite">
<div class="toast-message">message2.</div>
</div>
</div>
</span>
</div>
</div>
first can you look on those two image so you understand.
When not hover: http://s15.postimg.org/sn6rk45rf/not_Hover.png
When hover: http://s16.postimg.org/yk6beg1ad/on_Hover.png
Right now when I have my mouse over a image, both image get buttons.
But I just want each image have theve own buttons on mouse over and the other image hide the buttons.
I don't really know how to fix it, and I'm very beginner with Javascript.
Here is my HTML/CSS/Javascript codes.
var buttonNew = document.getElementsByClassName('buttonNewest');
var buttonRan = document.getElementsByClassName('buttonRandom');
function imageOver() {
for(var i = 0; i < buttonNew.length; i++) {
buttonNew[i].style.display = "block";
buttonNew[i].style.animation = "moveButtonsRight 2s";
}
for(var i = 0; i < buttonRan.length; i++) {
buttonRan[i].style.display = "block";
buttonRan[i].style.animation = "moveButtonsLeft 2s";
}
}
function imageLeave() {
for(var i = 0; i < buttonNew.length; i++) {
buttonNew[i].style.display = "none";
}
for(var i = 0; i < buttonRan.length; i++) {
buttonRan[i].style.display = "none";
}
}
.charSelect[role="Background"] {
width: 1600px;
min-height: 600px;
margin: 25px auto;
}
.charSelect[role="Background"] > h1 {
width: 300px;
margin: 0 auto;
border: dashed 2px rgba(255, 207, 0, 0.75);
text-align: center;
text-transform: uppercase;
font-size: 2.6em;
text-shadow: 2px 2px 3px rgb(0, 0, 0);
}
.charSelect[role="Characters"] {
position: relative;
display: inline-block;
width: 250px;
height: auto;
background: rgba(42, 42, 42, 0.7);
border: dashed 2px rgba(255, 207, 0, 0.4);
color: rgba(255, 207, 0, 1);
opacity: 0.6;
-webkit-transition: opacity 1s;
margin-left: 250px;
}
.charSelect[role="Characters"]:hover {
opacity: 1;
transform: scale(1.05);
}
.charSelect[role="Names"] {
width: 100%;
font-size: 1.8em;
}
.charSelect[role="Names"] > p {
margin: 0 !important;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgb(0, 0, 0);
}
/* Buttons */
.charSelect[role="LatestVid"], .charSelect[role="RandomVid"] {
width: 170px;
height: 45px;
background: -webkit-linear-gradient(top, rgb(255, 207, 0), rgba(255, 207, 0, 0));
text-align: center;
line-height: 45px;
color: black;
-webkit-transition: background 1s;
transition: background 1s;
box-shadow: 0px 0px 3px;
}
.charSelect[role="LatestVid"] {
display: none;
position: absolute;
top:50%;
right: 70%;
}
.charSelect[role="RandomVid"] {
display: none;
position: absolute;
top:50%;
left: 70%;
}
.charSelect[role="RandomVid"]:hover , .charSelect[role="LatestVid"]:hover {
background: rgb(255, 207, 0);
}
/* Animation */
#-webkit-keyframes moveButtonsLeft {
0% {
left: 50%;
}
100% {
left: 70%;
}
}
#-webkit-keyframes moveButtonsRight {
0% {
right: 50%;
}
100% {
right: 70%;
}
}
<!-- Character one -->
<div onmouseover="imageOver()" onmouseleave="imageLeave()" class="charSelect" role="Characters">
<img src="chars/Dekker.gif" width="250"/>
<div class="charSelect buttonNewest" role="LatestVid">Newest Videos</div>
<div class="charSelect buttonRandom" role="RandomVid">Random Videos</div>
<div class="charSelect" role="Names"><p>Dekker</p></div>
</div>
<!-- Character two -->
<div onmouseover="imageOver()" onmouseleave="imageLeave()" class="charSelect" role="Characters">
<img src="chars/Dekker.gif" width="250"/>
<div class="charSelect buttonNewest" role="LatestVid">Newest Videos</div>
<div class="charSelect buttonRandom" role="RandomVid">Random Videos</div>
<div class="charSelect" role="Names"><p>Dekker</p></div>
</div>
You're calling an imageOver() that loops all your elements.
Instead of using JS (at all) I'd go with pure CSS:
*{font: 14px/1 sans-serif;}
.charSelect{
position: relative;
display: inline-block;
vertical-align: top;
}
.charButtons{
position: absolute;
bottom: 40px;
width: 100%;
text-align:center;
opacity: 0;
visibility: hidden;
transition: 0.4s;
-webkit-transition: 0.4s;
}
.charButtons a{
display: block;
margin-top: 1px;
text-align: center;
color: #fff;
background: #444;
padding: 10px;
opacity: 0.9;
transition: 0.3s;
-webkit-transition: 0.3s;
}
.charButtons a:hover{ opacity:1; }
.charSelect:hover .charButtons{
visibility: visible;
opacity: 1;
}
<div class="charSelect">
<img src="http://placehold.it/180x150/4af/&text=Hero+1">
<div class="charButtons">
Newest Videos
Random Videos
</div>
<h2>HERO 1</h2>
</div>
<div class="charSelect">
<img src="http://placehold.it/180x150/fa4/&text=Hero+2">
<div class="charButtons">
Newest Videos
Random Videos
</div>
<h2>HERO 2</h2>
</div>
The problem is that you're not reffering tot the current object that you have cursor on. If you go with with cursor over and image, your function will apply those changes for all buttonNew and buttonRan that can be found on page.