I'm trying to achieve a responsive carousel which supports auto-play infinite loop, and the center item always take 70% of the view port with.
Right now the best I can do is something like this by taking advantage of a library called Slick:
https://codepen.io/anon/pen/pBvQBM
$('.slick')
.on('init', () => {
$('.slick-slide[data-slick-index="-2"]').addClass('lt2');
$('.slick-slide[data-slick-index="-1"]').addClass('lt1');
$('.slick-slide[data-slick-index="1"]').addClass('gt1');
$('.slick-slide[data-slick-index="2"]').addClass('gt2');
})
.slick({
centerMode: true,
centerPadding: 0,
slidesToShow: 3,
autoplay: true,
autoplaySpeed: 500,
}).on('beforeChange', (event, slick, current, next) => {
$('.slick-slide.gt2').removeClass('gt2');
$('.slick-slide.gt1').removeClass('gt1');
$('.slick-slide.lt1').removeClass('lt1');
$('.slick-slide.lt2').removeClass('lt2');
const lt2 = (current < next && current > 0) ? current - 1 : next - 2;
const lt1 = (current < next && current > 0) ? current : next - 1;
const gt1 = (current < next || next === 0) ? next + 1 : current;
const gt2 = (current < next || next === 0) ? next + 2 : current + 1;
$(`.slick-slide[data-slick-index="${lt2}"]`).addClass('lt2');
$(`.slick-slide[data-slick-index="${lt1}"]`).addClass('lt1');
$(`.slick-slide[data-slick-index="${gt1}"]`).addClass('gt1');
$(`.slick-slide[data-slick-index="${gt2}"]`).addClass('gt2');
// Clone processing when moving from 5 to 0
if (current === 5 && next === 0) {
$(`.slick-slide[data-slick-index="${current - 1}"]`).addClass('lt2');
$(`.slick-slide[data-slick-index="${current}"]`).addClass('lt1');
$(`.slick-slide[data-slick-index="${current + 2}"]`).addClass('gt1');
$(`.slick-slide[data-slick-index="${current + 3}"]`).addClass('gt2');
}
// Clone processing when moving from 0 to 5
if (current === 0 && next === 5) {
$(`.slick-slide[data-slick-index="${current - 1}"]`).addClass('gt2');
$(`.slick-slide[data-slick-index="${current}"]`).addClass('gt1');
$(`.slick-slide[data-slick-index="${current - 2}"]`).addClass('lt1');
$(`.slick-slide[data-slick-index="${current - 3}"]`).addClass('lt2');
}
console.log('beforeChange', current, ':', lt2, lt1, next, gt1, gt2);
});
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 20vh 0;
}
.slick span {
display: block;
background: #3498db;
color: #fff;
font-size: 36px;
height: 100px;
line-height: 100px;
position: relative;
text-align: center;
//border: solid 1px rgb(145, 195, 0);
transform: translate(0, 0) scale(.4);
transition: all .4s ease;
opacity: .5;
}
.slick-slide {
border: solid 1px #2dc37f;
}
.slick-slide.lt2 span {
transform: translate(10%, 0) scale(.6);
}
.slick-slide.lt1 span {
opacity: .7;
transform: translate(5%, 0) scale(.8);
}
.slick-slide.gt1 span {
opacity: .7;
transform: translate(-5%, 0) scale(.8);
}
.slick-slide.gt2 span {
transform: translate(-10%, 0) scale(.6);
}
.slick-slide.slick-center span {
z-index: 1;
transform: scale(1);
opacity: 1;
color: #e67e22;
}
.slick-prev,
.slick-next{
position: absolute;
top: 50%;
appearance: none;
margin-top: -10px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
color: transparent;
outline: none;
z-index: 100;
}
.slick-prev {
width: 0;
height: 0;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #007bff transparent transparent;
left: 0;
}
.slick-next {
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent transparent transparent #007bff;
right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="slick">
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
</div>
However, this is not exactly what I want. In this demo, all three items have the same width, but I want the center item to have 70% width, something like this:
Please share some pointers on how I can make it happen. I'm not limited to this Slick library and open to any other options such as pure CSS or JQuery.
You're actually not too far off, you are just a little inconsistent with your targeting of the styles. I took off a bunch of the styles on the spans, and added a few styles on the slide divs:
https://codepen.io/anon/pen/PgwXbV
You might adjust some of the details, but I think this CSS gets it pretty close to your desired effect:
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 20vh 0;
}
.slick span {
display: block;
background: #3498db;
color: #fff;
font-size: 36px;
height: 100px;
line-height: 100px;
position: relative;
text-align: center;
/* border: solid 1px rgb(145, 195, 0); */
/* make the non-centered slides partially transparent */
opacity: .5;
}
.slick-slide {
border: solid 1px #2dc37f;
/* make the non-centered slides smaller */
transform: scale(.5);
transition:transform .4s ease;
}
.slick-slide.slick-center {
/* make the center slide full size */
transform: scale(1);}
.slick-slide.slick-center span {
z-index: 1;
transform: scale(1);
/* make the centered slides solid */
opacity: 1;
color: #e67e22;
}
.slick-prev,
.slick-next{
position: absolute;
top: 50%;
appearance: none;
margin-top: -10px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
color: transparent;
outline: none;
z-index: 100;
}
.slick-prev {
width: 0;
height: 0;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #007bff transparent transparent;
left: 0;
}
.slick-next {
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent transparent transparent #007bff;
right: 0;
}
This part seemed unnecessary with the changes, though I see what you were going for:
.slick-slide.lt2 span {
transform: translate(10%, 0) scale(.6);
}
.slick-slide.lt1 span {
opacity: .7;
transform: translate(5%, 0) scale(.8);
}
.slick-slide.gt1 span {
opacity: .7;
transform: translate(-5%, 0) scale(.8);
}
.slick-slide.gt2 span {
transform: translate(-10%, 0) scale(.6);
}
Related
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 have set up a switcher on my website to toggle between normal mouse / pointer & a Lego hand as a cursor and a head as pointer. However, I can only get the cursor to show when clicking the switcher. How can I also add this pointer
(cursor: url(https://cdn.shopify.com/s/files/1/0571/7137/8349/files/pointer.png?v=1644096049), pointer;)
It should be assigned to the following classes:
a, button, input, input, button, a, input, .slider, .round
I have then also added a snippet, which lets the switcher / checkbox stay on checked...
(You can see that on this video [password is 12345678]: https://easyupload.io/gknxoi)
However after a reload of the page for example, the switcher stays on checked, but the cursor doesn't show up...
var cbs = document.querySelectorAll('input[type=checkbox]');
for (var i = 0; i < cbs.length; i++) {
cbs[i].addEventListener('change', function() {
if (this.checked) {
document.body.style.cursor = "url(https://cdn.shopify.com/s/files/1/0571/7137/8349/files/cursor.png?v=1644096068), auto";
} else {
document.body.style.cursor = "default";
}
});
}
$(function() {
var test = localStorage.input === 'true' ? true : false;
$('input').prop('checked', test || false);
});
$('input').on('change', function() {
localStorage.input = $(this).is(':checked');
console.log($(this).is(':checked'));
});
.switcheronheader {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
margin-bottom: 2px;
}
.mouseswitcher {
/* border-left: 1px solid #248751; */
padding-left: 20px;
}
.switcheronheader input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #248751;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mouseswitcher">
<label class="switcheronheader">
<input type="checkbox" id="overheaderswitch">
<span class="slider round"></span>
</label>
</div>
Is this what you are looking for?
a, input, button, .slider, .round {
margin: 15px;
cursor:url(https://cdn.shopify.com/s/files/1/0571/7137/8349/files/pointer.png?v=1644096049), auto;
}
<input type="button" value="lego"/>
link to google.com
Use document.querySelector('html') instead of document.body will make it work.
Also, use cursor: auto instead of cursor: default
var cbs = document.querySelectorAll('input[type=checkbox]');
for (var i = 0; i < cbs.length; i++) {
cbs[i].addEventListener('change', function() {
if (this.checked) {
document.querySelector('html').style.cursor= ' url(https://cdn.shopify.com/s/files/1/0571/7137/8349/files/cursor.png?v=1644096068), auto'
document.querySelector('label').style.cursor = ' url(https://cdn.shopify.com/s/files/1/0571/7137/8349/files/cursor.png?v=1644096068), auto'
} else {
document.querySelector('html').style.cursor = "auto";
document.querySelector('label').style.cursor = 'auto'
}
});
}
.switcheronheader {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
margin-bottom: 2px;
}
.mouseswitcher {
/* border-left: 1px solid #248751; */
padding-left: 20px;
}
.switcheronheader input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #248751;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mouseswitcher">
<label class="switcheronheader">
<input type="checkbox" id="overheaderswitch">
<span class="slider round"></span>
</label>
</div>
I am creating a chrome extension that has a content script that changes the style of dom text elements that it finds with regex.
I want the popup of the extension to have switches that save state after closing.
For example - a turn on and off switches for the extension in the popup menu.
From what I've read online, I have to use chrome.storage to save the state of the checkboxes but I don't quite get how to read the state of the checkbox in the popup.js and how to store it.
HTML
<input class = "power-switch" type="checkbox" id="toggle"/>
<div class="toggle-wrap">
<div style= "text-align: right;width: 190px;font-weight: bolder;">ON / OFF</div>
<label class= "toggle-label"for="toggle"></label>
</div>
CSS
*,
*::before,
*::after {
transition: 400ms all ease-in-out 50ms;
box-sizing: border-box;
backface-visibility: hidden;
}
input[type="checkbox"] {
display: none;
}
a{ color: rgba(43,43,43,1); text-decoration: none; padding: 10px; border-bottom: 2px solid rgba(43,43,43,1); }
a:hover{ background: rgba(43,43,43,1); color: rgba(255,255,255,1); }
/*Button is :CHECKED*/
input[type="checkbox"]:checked ~ div {
background: rgba(73,168,68,1);
box-shadow: 0 0 2px rgba(73,168,68,1);
}
input[type="checkbox"]:checked ~ div label {
left: 27px;
/* 110px */
transform: rotate(360deg);
}
/*shared*/
.toggle-wrap,
.toggle-label {
border-radius: 50px;
}
/*'un':checked state*/
.toggle-wrap {
height: 26px;
width: 50px;
background: rgba(43, 43, 43, 1);
position: relative;
/* top: calc(50vh - 50px);
left: calc(50vw - 100px); */
box-shadow: 0 0 2px rgba(43,43,43,1);
}
.toggle-label {
height: 20px;
/* 80 */
width: 20px;
/* 80 */
background: rgba(255, 255, 255, 1);
position: absolute;
top: 3px;
/* 10 */
left: 3px;
/* 10 */
cursor: pointer;
}
.toggle-label::before {
content: '';
height: 16px;
/* 60 */
width: 4px;
position: absolute;
top: calc(50% - 8px);
/* - 30 px*/
left: calc(50% - 2px);
/*- 2.5px */
transform: rotate(45deg);
}
.toggle-label::after {
content: '';
height: 4px;
width: 16px;
/* 60 */
position: absolute;
top: calc(50% - 2px);
/*- 2.5px */
left: calc(50% - 8px);
/* - 30 px*/
transform: rotate(45deg);
}
.toggle-label::before,
.toggle-label::after{
background: rgba(43,43,43,1);
border-radius: 5px;
}
/* pesduo class on toggle */
input[type="checkbox"]:checked ~ .toggle-wrap .toggle-label::before{
height: 14px;
/* 50px */
top: calc(55% - 7px);
/* 25px */
left: calc(60% - 2.5px);
background: rgba(73,168,68,1);
}
input[type="checkbox"]:checked ~ .toggle-wrap .toggle-label::after{
width: 7px;
/* 20px */
top: calc(95% - 9px);
/* -25px */
left: calc(22.5% - 2px);
/* 2.5px */
background: rgba(73,168,68,1);
}
I'm not quite sure if the CSS is needed for the the example.
You need to check the checked property of the element.
const checkbox = document.getElementById("checkbox"),
text = document.getElementById("text");
checkbox.onchange = function() {
//this is referring to checkbox
text.innerHTML = this.checked;
};
<input type="checkbox" id="checkbox" />
<p id="text">false</p>
For storing the values, here is an example from google:
//setting data
chrome.storage.sync.set({key: value}, function() {
console.log('Value is set to ' + value);
});
//getting data
chrome.storage.sync.get(['key'], function(result) {
console.log('Value currently is ' + result.key);
});
Also, you can be done like this and store theme in local storage
<div class="switchtodark ">
<span>SWITCH TO DARK</span>
</div>
function change() {
const darkMode = document.getElementById("dark");
darkMode.addEventListener('click', () => {
document.body.classList.toggle('dark');
localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
});
};
if (localStorage.getItem('theme') === 'dark') {
document.body.classList.add('dark');
}
Css
.maintext h1 {
font-size: 120px;
z-index: 1000;
color: #171717;
}
.dark .maintext h1 {
color: white;
}
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>
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.