I am trying to implement a notification system in my app without the use of a library. Here is a gif of the issue: https://imgur.com/oRc11dM
And here is the jsfiddle of the gif: https://jsfiddle.net/w9yk7n54/
When you click on new notification button, already displayed notifications jump up to make room for the new notification and new notification slides in. I was wondering how I could make it so that they all smoothly go up together.
The notifications wont all be the same dimensions so I cant set static values for height/etc.
Thank you!
let btn = document.querySelector('button')
let container = document.querySelector('.notifications-container')
let notif_contents = [
"<p>1</p><p>1</p><p>1</p><p>1</p>",
"<p>test</p>",
"<div><h1>testtesttest</h1><p>yoloalsdfasdf</p></div>"
]
let current = 0
btn.onclick = () => {
let notif = document.createElement('div')
notif.classList.add('notif')
notif.innerHTML = notif_contents[current]
notif.addEventListener('animationend', () => {
notif.parentElement.removeChild(notif)
})
current++
container.append(notif)
}
* {
box-sizing: border-box;
}
.container {
height: 300px;
width: 400px;
border: 1px solid black;
position: absolute;
}
.notifications-container {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 200px;
background: rgba( 0, 0, 0, 0.2);
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
overflow: hidden;
}
.notif {
position: relative;
width: 100%;
padding: 10px;
border: 1px solid black;
animation: notifAnim 5s forwards;
transition: all .2s;
background: white;
}
button {
z-index: 100;
background: lightcoral;
color: white;
border: none;
padding: 10px;
font-size: 20px;
margin: 5px;
}
#keyframes notifAnim {
0% {
transform: translateY( 100%)
}
20% {
transform: translateY( 0)
}
80% {
transform: translateY( 0)
}
100% {
transform: translateY( 100%)
}
}
<div class="container">
<button>New Notification</button>
<div class="notifications-container"></div>
</div>
Your notif container has justify-content: flex-end. This means that whenever you add a new one, the previous ones will be pushed up with the height of the new one.
The "fix" is to give each element a negative margin-top equal to its height and integrate in your current transition getting margin-top back to 0.
Example:
let btn = document.querySelector('button'),
container = document.querySelector('.notifications-container'),
notif_contents = [
"<p>1</p><p>1</p><p>1</p><p>1</p>",
"<p>test</p>",
"<div><h1>testtesttest</h1><p>yoloalsdfasdf</p></div>",
"<code>another.test()</code>",
"<strong>another</strong> <i>test</i>"
]
btn.onclick = () => {
let notif = document.createElement('div'),
index = Math.floor(Math.random() * notif_contents.length)
notif.classList.add('notif')
notif.innerHTML = notif_contents[index]
notif.addEventListener('animationend', () => {
notif.parentElement.removeChild(notif)
})
container.append(notif)
notif.style.marginTop = '-' + notif.offsetHeight + 'px'
}
* {
box-sizing: border-box;
}
.container {
height: 300px;
width: 400px;
border: 1px solid #888;
position: absolute;
}
.notifications-container {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 200px;
background: rgba( 0, 0, 0, 0.2);
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
overflow: hidden;
}
.notif {
position: relative;
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-bottom: none;
animation: notifAnim 5s forwards;
background: white;
}
button {
z-index: 100;
background: lightcoral;
color: white;
border: none;
padding: 10px;
font-size: 20px;
margin: 5px;
}
#keyframes notifAnim {
0%,
100% {
transform: translateY( 100%)
}
20%,
80% {
transform: translateY( 0);
margin-top: 0
}
}
<div class="container">
<button>New Notification</button>
<div class="notifications-container"></div>
</div>
An idea is to insert new element with a height equal to 0 and you animate the height in addition to translate. Of course, you should use max-height since height are unknown and we cannot animate to auto:
let btn = document.querySelector('button')
let container = document.querySelector('.notifications-container')
let notif_contents = [
"<p>1</p><p>1</p><p>1</p><p>1</p>",
"<p>test</p>",
"<div><h1>testtesttest</h1><p>yoloalsdfasdf</p></div>"
]
let current = 0
btn.onclick = () => {
let notif = document.createElement('div')
notif.classList.add('notif')
notif.innerHTML = notif_contents[current]
notif.addEventListener('animationend', () => {
notif.parentElement.removeChild(notif)
})
current++
container.append(notif)
}
* {
box-sizing: border-box;
}
.container {
height: 300px;
width: 400px;
border: 1px solid black;
position: absolute;
}
.notifications-container {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 200px;
background: rgba( 0, 0, 0, 0.2);
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
overflow: hidden;
}
.notif {
position: relative;
width: 100%;
padding:0 10px;
max-height:0px;
border: 1px solid black;
animation: notifAnim 5s forwards;
transition: all .2s;
background: white;
}
button {
z-index: 100;
background: lightcoral;
color: white;
border: none;
padding: 10px;
font-size: 20px;
margin: 5px;
}
#keyframes notifAnim {
0% {
transform: translateY( 100%);
max-height:0;
padding:0 10px;
}
30% {
transform: translateY( 0);
max-height:300px;
padding:10px;
}
80% {
transform: translateY( 0);
max-height:300px;
padding:10px;
}
100% {
transform: translateY( 100%);
max-height:300px;
padding:10px;
}
}
<div class="container">
<button>New Notification</button>
<div class="notifications-container"></div>
</div>
Related
I'm trying to make a newsletter panel as can be seen Here, the panel will appear after scrolling about a third of the page and will remain there. The panel will be closed when the x is clicked. What I'm trying to do is after x is clicked, the panel will remain closed even after the page is refreshed, but after 10 minutes, the panel will then pop up again and so on. I have never stored a class to local storage before. Only pure HTML, CSS and Javascript are used. Any suggestions is appreciated.
The code below is only part of the panel, so it won't work properly
const panel = document.getElementById('panel');
const page = document.getElementById('main-page');
const heroContent = document.querySelector('.hero-content');
const hero = document.querySelector('.hero');
const br = document.getElementById('brCust');
const br2 = document.getElementById('brCust2');
const br3 = document.getElementById('brCust3');
const br4 = document.getElementById('brCust4');
const newsletter = document.getElementById('news');
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
var height2 = document.documentElement.scrollHeight;
var height3 = document.documentElement.clientHeight;
var reqHeight = height/3;
var reqHeight2 = height2/3;
var reqHeight3 = height3/3;
var scrollFunc = function(){
var y = window.scrollY;
if(y>reqHeight3){
newsletter.classList.add('news-animation');
}
};
let closed = localStorage.getItem('news-closed');
if(closed){
news.classList.add('news-animation2');
}
function closeNews(){
news.classList.add('news-animation2');
setTimeout(news.classList.remove('news-animation'),1000);
localStorage.setItem('news.closed',true);
}
.square{
height:1000px;
background-color:red;
}
.news{
z-index: 1;
position: fixed;
bottom: 0;
transform: translateY(1000px);
max-width: 640px;
color: white;
background-color: var(--blue);
opacity: .9;
text-align: left;
justify-content: center;
vertical-align: center;
}
.news-content{
height: 100%;
width:100%;
padding: 15px 20px 10px;
}
.news-close{
color: white;
position: absolute;
right: 2%;
top: 7%;
}
.news-header{
font-size: 25px;
width: 95%;
}
.news-text{
font-size: 16px;
padding: 5px 0 8px;
width: 95%;
}
.news-form{
padding: 5px 0;
}
.email-field{
width: 75%;
}
.email-button{
background-color: var(--orange);
color: white;
border: none;
padding: 1px 10px;
border-radius: 2px;
cursor: pointer;
}
.email-button{
background-color: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
}
.news-close:hover{
cursor: pointer;
}
#media(max-width:415px){
.news-header{
font-size: 25px;
width: 100%;
}
.news-text{
font-size: 16px;
padding: 5px 0 8px;
width: 100%;
}
.email-field{
width: 100%;
margin-bottom: 10px;
}
.email-button{
padding: 2px 0;
width: 100%;
}
.news-close{
color: white;
position: absolute;
right: 3%;
top: 5%;
}
}
.news-animation{
animation: animation 1s ease-in-out;
transform: translateY(0);
}
.news-animation2{
animation: animation2 1s ease-in-out;
transform: translateY(1000px);
}
#keyframes animation {
0%{
transform: translateY(1000px);
}
100%{
transform: translateY(0);
}
}
#keyframes animation2 {
0%{
transform: translateY(0);
}
100%{
transform: translateY(1000px);
}
}
#media(max-width:600px){
.newsletter{
max-width: 100%;
};
.news-content{
width: 100%;
}
}
<div class="news" id="news">
<i class="fa fa-close news-close fa-xs" onclick="closeNews()" id="closeNews"></i>
<div class="news-content">
<h3 class="news-header">Get latest updates in web technologies</h3>
<p class="news-text">I write articles related to web technologies, such as design trends, development
tools, UI/UX case studies and reviews, and more. Sign up to my newsletter to get
them all.</p>
<form class="news-form">
<input type="text" placeholder="Email address" class="email-field">
<button class="email-button">Count me in!</button>
</form>
</div>
</div>
The play button image hides when I click it, how do I also have the green image hide?
That is all I am trying to do in the code.
Hide the green image after the play image is clicked.
Currently only the play image hides, how to I have the green image hide aftr the play image is clicked?
https://jsfiddle.net/075anu3x/
css green image
.video-wrapper::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border: 1px solid #333;
pointer-events: none;
background: url(https://i.imgur.com/ShS6nAO.png) no-repeat;
background-size: contain;
background-position: center;
}
javascript
const manageCover = (function makeManageCover() {
const events = {};
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function fadeVideoIn(cover) {
hide(cover);
const videoWrapper = document.querySelector(".video-wrapper");
videoWrapper.classList.add("slide");
return videoWrapper;
}
function showVideo(videoWrapper) {
const thewrap = videoWrapper.parentElement.querySelector(".wrap");
show(thewrap);
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
const videoWrapper = fadeVideoIn(cover);
showVideo(videoWrapper);
cover.dispatchEvent(events.afterClickCover);
}
function init(callback) {
const cover = document.querySelector(".play");
cover.addEventListener("click", coverClickHandler);
events.afterClickCover = new Event("afterClickCover");
cover.addEventListener("afterClickCover", callback);
}
return {
init
};
}());
maybe you can try add background: unset; to .video-wrapper.slide::after class
for your issue, it is easier to make the green background with the button as the same component.
The reason why the green background doesn't get away:
It is set up as a pseudo-class under video-wrapper
In my experience, javascript can't reach a pseudo-class, even if it is possible, it will make your code super messy and hard to read and follow.
Suggestion:
Remove the green background from the video wrapper class and move it to the button.
See here
HTML
<div class="container">
<div class="video-wrapper">
<div class="ratio-keeper">
<div class="wrap hide">
<div class="video video-frame"></div>
</div>
</div>
</div>
<div class="play">
<button type="button" aria-label="Open"></button>
</div>
</div>
CSS
.play {
position: relative;
width: 100vw;
height: 100vh;
}
.play button {
-webkit-appearance: none;
appearance: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: 9px solid;
background: transparent;
filter: drop-shadow(3px 3px 3px #000000b3);
animation: rotate 700ms linear forwards;
border-color: red transparent red transparent;
}
.play::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border: 1px solid #333;
pointer-events: none;
background: url(https://i.imgur.com/ShS6nAO.png) no-repeat;
background-size: contain;
background-position: center;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
99.9% {
border-color: red transparent red transparent;
pointer-events: none;
}
100% {
transform: rotate(360deg);
border-color: blue;
}
}
.play button:hover {
box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}
.play button:focus {
outline: 0;
box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}
.play button::before {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid;
transform: translateX(4px);
animation: triangle 700ms linear forwards;
}
#keyframes triangle {
0% {
opacity: 0;
}
99.9% {
opacity: 0;
}
100% {
border-left-color: blue;
opacity: 1;
}
}
.hide {
display: none;
}
I want to implement ability to collapse the gray .content-wrapper block (with blue sqare inside) smoothly based on drag value when user drags .drag element. What is the best and efficient way nowadays to do this for mobile touch drag?
* {
box-sizing: border-box;
color: white;
}
.drag {
width: 50px;
height: 3px;
border-radius: 3px;
opacity: 0.3;
margin: 0 auto;
background: linear-gradient(to left, white, rgba(255, 255, 255, 0.8) 50%, white 100%);
transition: opacity 0.4s;
}
.screen {
padding-top: 40px;
margin: 0 auto;
border-radius: 5px;
overflow: hidden;
background: #2b2d5b;
width: 320px;
height: 568px;
}
.controls {
background: linear-gradient(to bottom, #fd2929, #fd5c5c);
height: 100px;
}
.drag-wrapper {
display: block;
padding: 20px;
}
.drag-wrapper:active .drag,
.drag-wrapper:hover .drag,
.drag-wrapper:focus .drag {
opacity: 0.7;
}
.board {
padding: 0 20px;
}
.content-wrapper {
padding: 20px;
height: 320px;
}
.content-wrapper {
background: #444;
}
.content {
display: flex;
justify-content: center;
align-items: center;
font-family: Helvetica;
background: linear-gradient(to bottom, #3adffd, #00abfb);
height: 100%;
}
<div class="screen">
<div class="content-wrapper">
<div class="content">
.content
</div>
</div>
<a href="javascript:void(0)" class="drag-wrapper">
<div class="drag"></div>
</a>
<div class="board">
<div class="controls"></div>
</div>
</div>
here's my implementation for this case with hammer.js
http://hammerjs.github.io
movement of the board could have more complex calculations based on e.velocityY, but I'm using quick CSS transition when pan ended which looks good for my case
$(document).ready(function() {
let sliderManager = new Hammer.Manager(document.querySelector('.drag-wrapper'));
let board = document.querySelector('.board');
let threshold = 150;
let boardTopInitial = board.style.top = board.offsetTop;
let boardTopCollaped = 30;
sliderManager.add(new Hammer.Pan({
threshold: 0,
pointers: 0
}));
sliderManager.on('pan', function(e) {
e.preventDefault();
board.classList.remove("transitable");
board.classList.add("full-height");
if (!board.classList.contains('pinned-top') && e.deltaY < 0) {
board.style.top = boardTopInitial + e.deltaY + "px";
if (e.isFinal) {
board.classList.add("transitable");
if (Math.abs(e.deltaY) > threshold) {
board.style.top = boardTopCollaped + "px";
board.classList.add("pinned-top");
} else {
board.setAttribute('style', '');
board.classList.remove("full-height");
}
}
} else if (board.classList.contains('pinned-top') && e.deltaY > 0) {
board.style.top = boardTopCollaped + e.deltaY + "px";
if (e.isFinal) {
board.classList.add("transitable");
if (Math.abs(e.deltaY) > threshold) {
board.setAttribute('style', '');
board.classList.remove("pinned-top");
board.classList.remove("full-height");
} else {
board.style.top = boardTopCollaped + "px";
board.classList.add("top");
}
}
}
})
})
* {
box-sizing: border-box;
color: white;
}
.drag {
width: 50px;
height: 3px;
border-radius: 3px;
opacity: 0.3;
margin: 0 auto;
background: linear-gradient(to left, white, rgba(255, 255, 255, 0.8) 50%, white 100%);
transition: opacity 0.4s;
}
.pinned-top {
top: 30px;
}
.full-height {
box-shadow: none;
min-height: 100vh;
}
.transitable {
transition: top .2s ease-out;
}
.screen {
position: relative;
padding-top: 40px;
margin: 0 auto;
border-radius: 5px;
overflow: hidden;
background: #2b2d5b;
width: 320px;
height: 568px;
}
.controls {
background: linear-gradient(to bottom, #fd2929, #fd5c5c);
height: 100px;
}
.drag-wrapper {
display: block;
padding: 20px;
}
.drag-wrapper:active .drag,
.drag-wrapper:hover .drag,
.drag-wrapper:focus .drag {
opacity: 0.7;
}
.board {
padding: 0 20px;
position: absolute;
background: #2b2d5b;
top: 360px;
left: 0;
right: 0;
}
.content-wrapper {
padding: 20px;
height: 320px;
}
.content-wrapper {
background: #444;
}
.content {
display: flex;
justify-content: center;
align-items: center;
font-family: Helvetica;
background: linear-gradient(to bottom, #3adffd, #00abfb);
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
<div class="screen">
<div class="content-wrapper">
<div class="content">
.content
</div>
</div>
<div class="board">
<a href="javascript:void(0)" class="drag-wrapper">
<div class="drag"></div>
</a>
<div class="controls"></div>
</div>
</div>
I'm currently trying to make a website that displays markers with its own specific text.
When a user clicks on the marker, it displays the text.
I've copied some code online and trying to mess around with it. Unfortunately, I'm not too experience with javascript. I was wondering if anyone would be able to help.
This is what I have so far:
HTML (I don't think there's any problems here):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MarkerWeb</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="container">
<div id="image-wrapper" data-captions='{"coords": [{"top":250,"left":200,"text":"iMac 1"},{"top":250,"left":540,"text":"iMac 2"}]}'>
<!-- layout.jpg is just a picture of a layout/floorplan -->
<img src="layout.jpg" alt=""/>
</div>
</div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
Javascript (The part I'm having a hard time with):
var Markers = {
fn: {
addMarkers: function() {
var target = $('#image-wrapper');
var data = target.attr('data-captions');
var captions = $.parseJSON(data);
var coords = captions.coords;
for (var i = 0; i < coords.length; i++) {
var obj = coords[i];
var top = obj.top;
var left = obj.left;
var text = obj.text;
$('<div class="marker"><div class="pin"><span class="popuptext" id="myPopup">' + text + '</span></div><div class="pin-effect"></div></div>').css({
top: top,
left: left
}).appendTo(target);
}
},
//This is the part I'm having trouble with.
showBeaconInfo: function() {
$('body').on('click', '.marker', function() {
var $marker = $(this),
$caption = $('popuptext', $marker);
if ($caption.is(':hidden')) {
$caption.show();
} else {
$caption.toggle("show");
}
});
}
},
init: function() {
this.fn.addMarkers();
this.fn.showBeaconInfo();
}
};
function clickBeacon() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
$(function() {
Markers.init();
});
CSS (I don't think there's any problems here):
body {
background: #e6e6e6;
}
#image-wrapper {
width: 800px;
height: 760px;
position: relative;
margin: 2em auto;
background: #f6f6f6;
border: 2px solid #ddd;
}
#image-wrapper img {
display: block;
margin: 25px auto;
}
.map-bg {
background: url(images/map-bg.jpg) no-repeat;
background-position: 0px 0px;
background-size: auto;
width: 100%;
height: 440px; /*adjust to the height of your image*/
position: relative;
}
.marker {
width: 100px;
height: 100px;
position: absolute;
/*top: 130px; /*positions our marker*/
/*left: 200px; /*positions our marker*/
display: block;
}
.pin {
width: 20px;
height: 20px;
position: relative;
top: 38px;
left: 38px;
background: rgba(5, 124, 255, 1);
border: 2px solid #FFF;
border-radius: 50%;
z-index: 1000;
cursor: pointer;
display: inline-block;
}
.pin-effect {
width: 100px;
height: 100px;
position: absolute;
top: 0;
display: block;
background: rgba(5, 124, 255, 0.6);
border-radius: 50%;
opacity: 0;
animation: pulsate 2400ms ease-out infinite;
}
#keyframes pulsate {
0% {
transform: scale(0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
/* The actual popup (appears on top) */
.pin .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.pin .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.pin .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
You need to update your showBeaconInfo function in 2 ways:
1) Fix the selector for $caption to grab the class popuptext by adding a period
2) Using the jquery function toggleClass to add or remove the class "show" on the popuptext, the css is setup to either use visibility: hidden or visibility: visible
showBeaconInfo: function() {
$('body').on('click', '.marker', function() {
var $marker = $(this);
var $caption = $('.popuptext', $marker); //needs period to indicate class
$caption.toggleClass('show'); //adding the class "show" will display the text
});
}
For Example:
var Markers = {
fn: {
addMarkers: function() {
var target = $('#image-wrapper');
var data = target.attr('data-captions');
var captions = $.parseJSON(data);
var coords = captions.coords;
for (var i = 0; i < coords.length; i++) {
var obj = coords[i];
var top = obj.top;
var left = obj.left;
var text = obj.text;
$('<div class="marker"><div class="pin"><span class="popuptext" id="myPopup">' + text + '</span></div><div class="pin-effect"></div></div>').css({
top: top,
left: left
}).appendTo(target);
}
},
//This is the part I'm having trouble with.
showBeaconInfo: function() {
$('body').on('click', '.marker', function() {
var $marker = $(this);
var $caption = $('.popuptext', $marker); //needs period to indicate class
$caption.toggleClass('show'); //adding the class "show" will display the text
});
}
},
init: function() {
this.fn.addMarkers();
this.fn.showBeaconInfo();
}
};
function clickBeacon() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
$(function() {
Markers.init();
});
body {
background: #e6e6e6;
}
#image-wrapper {
width: 800px;
height: 760px;
position: relative;
margin: 2em auto;
background: #f6f6f6;
border: 2px solid #ddd;
}
#image-wrapper img {
display: block;
margin: 25px auto;
}
.map-bg {
background: url(images/map-bg.jpg) no-repeat;
background-position: 0px 0px;
background-size: auto;
width: 100%;
height: 440px;
/*adjust to the height of your image*/
position: relative;
}
.marker {
width: 100px;
height: 100px;
position: absolute;
/*top: 130px; /*positions our marker*/
/*left: 200px; /*positions our marker*/
display: block;
}
.pin {
width: 20px;
height: 20px;
position: relative;
top: 38px;
left: 38px;
background: rgba(5, 124, 255, 1);
border: 2px solid #FFF;
border-radius: 50%;
z-index: 1000;
cursor: pointer;
display: inline-block;
}
.pin-effect {
width: 100px;
height: 100px;
position: absolute;
top: 0;
display: block;
background: rgba(5, 124, 255, 0.6);
border-radius: 50%;
opacity: 0;
animation: pulsate 2400ms ease-out infinite;
}
#keyframes pulsate {
0% {
transform: scale(0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
/* The actual popup (appears on top) */
.pin .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.pin .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.pin .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="image-wrapper" data-captions='{"coords": [{"top":250,"left":200,"text":"iMac 1"},{"top":250,"left":540,"text":"iMac 2"}]}'>
<!-- layout.jpg is just a picture of a layout/floorplan -->
<img src="layout.jpg" alt="" />
</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.