Z index issues with video and menu Div - javascript

So on mobile, in the research film page section, I have two videos and a div with some hidden text toggled to be seen or hidden with javascript. The contents of research film are organised by flexbox. On top of these videos and text is a fixed navbar that overlaps the top video "paper boys" . The fixed nav therefore doesn't allow the user to click on the video. The fixed Navbar doesn't respond to z-index (-100) toggled through javascript whenever the user clicks on the "more" button.
Here is the JS to trigger the menu and div to be seen -
const mediaQueryPhone = window.matchMedia('(max-width: 1000px)')
if (mediaQueryPhone.matches) {
let menuOpen = false;
morebtn.addEventListener('click', () => {
processMenu.classList.toggle('fadeMenu');
menuOpen = processMenu.classList.contains('fadeMenu');
if (!menuOpen) {
processMenu.style.touchAction = "none";
processMenu.style.pointerEvents = "none"
} else {
processMenu.style.touchAction = "auto";
processMenu.style.pointerEvents = "all"
}
})
const creditIcon = document.querySelector('.credit-icon');
const creditText = document.querySelector('.credit-text');
let creditOpen = false;
creditIcon.addEventListener('click', () => {
creditText.classList.toggle('hideElement');
creditOpen = creditText.classList.contains('hideElement');
if (!creditOpen) {
creditText.style.display = "block";
} else {
creditText.style.display = "none";
}
})
HTML page with 2 videos
<div class="mobile__header-controls">
<div class="mobile__nav">
<button class="mobile__more">+</button>
<div class="mobile__process-nav">
Show
About
Research Films
Stills
Lookbook
</div>
<div class="mobile__main-nav">
<a class="mabtn" href="/MA.html">MA</a>
<a class="capbtn" href="/capsule.html">Capsule</a>
<a class="babtn user-border" href="/BA.html">BA</a>
</div>
</div>
Back
</div>
<div id="researchFilm-ba" data-tab-content>
<div class="video-wrapper-ba align black-text fade-in">
<p>Dear You (2017)</p>
<video class="mood2" video controls poster="img/BA/Screenshot 2020-08-24 at 12.10.24 am.png"
preload="metadata">
<source src="/img/BA/dear you,.mp4" type="video/mp4">
</video>
</div>
<div id="paperBoys" class="video-wrapper-ba black-text fade-in">
<p>Paper Boys (2018)</p>
<video class="mood" video controls poster="/img/BA/Screenshot 2020-08-24 at 12.10.05 am.png"
preload="metadata">
<source src="/img/BA/Paper Boys.mp4" type="video/mp4">
</video>
</div>
<div class="credit-ba black-text">
<button class="credit-icon">(...)</button>
<div class="credit-text credtitBAMargin hideElement">
<p>
Thank you
to my team of helpers
<br><br>
and the following
<br><br>
Collaborators<br>
<br>Film produced with Taka Hata
<br>Accessories produced by Kristy Fan
<br>Soundtrack composed by Zacharias Wolfe
and Friends at Royal College of Music
<br><br>
Look Book
<br>Make Up by Kristina Pavlovic
<br>Look Book photographed by Simonas Berukstis
<br>Slime Making photographed by Oliver Vanes
<br><br>
Show
<br>Internal Show Make Up by Phoebe Walters
<br>Press Show Make Up by Mariko Yamamoto
<br>Supported by L’Oréal Professionnel
<br><br>
Models
<br>Yota Hoshi
<br>Masato Funaoka
<br>Ryan
<br>Youtian Zhang
<br>Tien Ai Guan
<br>Xander Ang
<br>Wing Fung
<br><br>
and the BAFCSM team</p>
</div>
</div>
</div>
CSS
.mobile__process-nav { // this is the menu dropdown styling
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: 30vh;
height: calc(var(--vh, 1vh) * 30);
color: white;
border: 2px solid white;
opacity: 0;
transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
z-index: 0;
margin-top: 1rem;
margin-left: 2rem;
}
.fadeMenu {
opacity: 1;
}
#researchFilm-ba {
width: 100%;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
background-color: white;
flex-direction: column-reverse;
justify-content: flex-end;
}
.video-wrapper-ba {
width: 80vw;
height: 35vh;
height: calc(var(--vh, 1vh) * 35);
margin: 0;
margin-top: 2rem;
}
.align {
margin-top: -1.5rem;
}
#researchFilm-ba p,
#researchFilm p {
font-size: 1rem;
font-family: Helvetica, sans-serif;
font-style: italic;
margin-bottom: 0rem;
color: black;
}
.credit-ba {
position: absolute;
display: flex;
flex-direction: column;
margin-left: 80vw;
margin-top: -9vh;
margin-top: calc(var(--vh, 1vh) * -9);
}
.credit-text {
margin-left: -55vw;
width: 67vw;
background-color: white;
margin-top: 0vh;
margin-top: calc(var(--vh, 1vh) * 0);
display: none;
}
.credtitBAMargin {
margin-top: 10vh;
margin-top: calc(var(--vh, 1vh) * 10);
}
.credit-text p {
width: 60vw;
color: black;
}
.credit-icon {
padding: 0;
margin: 1.5rem;
}
#media not all and (pointer: coarse) {
.credit:hover .credit-text,
.credit-ba:hover .credit-text {
display: block;
}
.contact-a a:hover {
color: white;
}
.menu-container:hover .menu {
opacity: 1;
pointer-events: all;
-ms-transform: translateY(0);
transform: translateY(0);
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
outline: none;
}
.stockist p:hover {
background-color: black;
}
}

Related

Infinite carousel with indicator and smooth transition

I'm struggling with infinite carousel below:
let $carousel = document.querySelector('.carousel');
let $ref_ribbon = document.querySelector('.carousel__ribbon');
let $ref_right = document.querySelector('.carousel__button--right');
let $ref_left = document.querySelector('.carousel__button--left');
let $ref_counter = 0;
let $direction;
const transfer = () => {
if ($direction === -1) {
$ref_ribbon.appendChild($ref_ribbon.firstElementChild);
} else if ($direction === 1) {
$ref_ribbon.prepend($ref_ribbon.lastElementChild);
}
$ref_ribbon.style.transition = "none";
$ref_ribbon.style.transform = "translateX(0px)";
setTimeout(function() {
$ref_ribbon.style.transition = "transform .7s ease-in-out";
})
}
const right_button = () => {
if ($direction === 1) {
$ref_ribbon.prepend($ref_ribbon.lastElementChild);
$direction = -1;
}
$direction = -1;
$carousel.style.justifyContent = 'flex-start';
$ref_ribbon.style.transform = `translateX(-${300}px)`;
}
const left_button = () => {
$ref_counter--;
if ($direction === -1) {
$ref_ribbon.appendChild($ref_ribbon.firstElementChild);
$direction = 1;
}
$direction = 1;
$carousel.style.justifyContent = 'flex-end';
$ref_ribbon.style.transform = `translateX(${300}px)`;
}
$ref_right.addEventListener('click', right_button);
$ref_left.addEventListener('click', left_button);
$ref_ribbon.addEventListener('transitionend', transfer)
.carousel {
display: flex;
margin: auto;
position: relative;
height: 200px;
width: 300px;
background-color: red;
justify-content: flex-start;
}
.carousel__button {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 100;
}
.carousel__button--left {
left: 0;
}
.carousel__button--right {
right: 0;
}
.carousel__ribbon {
display: flex;
flex-direction: row;
outline: 3px solid black;
height: 100%;
transition: transform .7s ease-in-out;
}
.carousel__pane {
display: flex;
background-color: skyblue;
height: 100%;
width: 300px;
flex-shrink: 0;
outline: 1px dashed navy;
}
.carousel__content {
text-align: center;
margin: auto;
}
.carousel__indicator {
display: flex;
gap: 10px;
left: 50%;
transform: translateX(-50%);
height: 30px;
position: absolute;
bottom: 0;
}
.carousel__circle {
height: 10px;
width: 10px;
background-color: gray;
border-radius: 50%;
cursor: pointer;
}
.carousel__circle--active {
background-color: black;
}
<div class="carousel">
<button class="carousel__button carousel__button--left"><</button>
<button class="carousel__button carousel__button--right">></button>
<div class="carousel__ribbon">
<div class="carousel__pane">
<p class="carousel__content">Pane 1</p>
</div>
<div class="carousel__pane">
<p class="carousel__content">Pane 2</p>
</div>
<div class="carousel__pane">
<p class="carousel__content">Pane 3</p>
</div>
<div class="carousel__pane">
<p class="carousel__content">Pane 4</p>
</div>
<div class="carousel__pane">
<p class="carousel__content">Pane 5</p>
</div>
</div>
<div class="carousel__indicator">
<div class="carousel__circle carousel__circle--active"></div>
<div class="carousel__circle"></div>
<div class="carousel__circle"></div>
<div class="carousel__circle"></div>
<div class="carousel__circle"></div>
</div>
</div>
I would like to connect indicator so when somebody click on proper circle then carousel will automatically slide to this particular panel. Also, I would like to set this circles that they will show which panel is currently active.
In addition, I would like to get such effect that carousel will jump to this particular panel immediately, ommiting other panels between.
So, if active one is first panel and I click fifth circle, then carousel will smoothly change panel like to the panel number two, but instead of number two I will see number five.
Sadly I always fail to get this effect. I would appriciate if somebody more experienced direct me how to deal with this problem.

Clicking the fade doesn't around lightbox doesn't close it

I want to create a button action where upon click, a video light box opens and when the visitor clicks anywhere else outside of the video (the fade), the video closes. So far, other features work except when I click on fade near the edge of the video, it doesn't close. So here's my html, css & js.
<div id="motionVideo">
<div class='motionButton' onclick="motionLightbox_open();"></div>
<div id="motionLight">
<video id="motionShowreel" width='1280' height='720' controls>
<source src="./motionGraphic.mp4" type="video/mp4">
<!--Browser does not support <video> tag -->
</video>
</div>
<div id="motionFade" onClick="motionLightbox_close();">
</div>
<div class="motionShowreel">
<video src="./motionGraphic.mp4" width="100%" height="50%"></video>
</div>
</div>
#motionVideo {
/*background: #ffc8b2;*/
grid-area: motionVideo;
}
.motionButton{
background-image:url(./mg.png);
background-position:center center;
background-repeat: no-repeat;
background-size: 70%;
width:100%;
height:100%;
/*position: relative;
top:20vh;
left:-20vw;*/
}
.motionShowreel{
width: 100%;
height: 100%;
position: relative;
top: -120vh;
left: 0vw;
z-index: -1;
}
#motionFade {
display: none;
position: fixed;
width: 100%;
height: 100%;
background-color: black;
top:0%;
left:0%;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
#motionLight {
display: none;
position: absolute;
padding: 10vw;
top:0;
align-items: center center;
justify-content: center center;
z-index: 1002;
cursor: pointer;
}
window.document.onkeydown = function(e) {
if (!e) {
e = event;
}
if (e.keyCode == 27) {
motionLightbox_close();
}
}
function motionLightbox_open() {
var lightBoxVideo = document.getElementById("motionGraphic");
window.scrollTo(0,150);
document.getElementById('motionLight').style.display = 'block';
document.getElementById('motionFade').style.display = 'block';
lightBoxVideo.pause();
}
function motionLightbox_close() {
var lightBoxVideo = document.getElementById("motionGraphic");
document.getElementById('motionLight').style.display = 'none';
document.getElementById('motionFade').style.display = 'none';
lightBoxVideo.pause();
}
When I try clicking on the fade near the edge of the video, the video doesn't close. Only by scrolling down further and clicking does it close. How do I fix this issue?
Seems like div by ID motionLight is occupying the space around the player (it has a huge padding). Try adding the close handler also to that div:
<div id="motionLight" onclick="motionLightbox_close()">
</div>
Working example
window.document.onkeydown = function(e) {
if (!e) {
e = event;
}
if (e.keyCode == 27) {
motionLightbox_close();
}
}
function motionLightbox_open() {
var lightBoxVideo = document.getElementById("motionGraphic");
window.scrollTo(0,150);
document.getElementById('motionLight').style.display = 'block';
document.getElementById('motionFade').style.display = 'block';
lightBoxVideo.pause();
}
function motionLightbox_close() {
var lightBoxVideo = document.getElementById("motionGraphic");
document.getElementById('motionLight').style.display = 'none';
document.getElementById('motionFade').style.display = 'none';
lightBoxVideo.pause();
}
#motionVideo {
/*background: #ffc8b2;*/
grid-area: motionVideo;
}
.motionButton{
background-color: #EEEEEE;
width:100%;
height:100%;
width: 100px;
height: 30px;
/*position: relative;
top:20vh;
left:-20vw;*/
}
.motionShowreel{
width: 100%;
height: 100%;
position: relative;
top: -120vh;
left: 0vw;
z-index: -1;
}
#motionFade {
display: none;
position: fixed;
width: 100%;
height: 100%;
background-color: black;
top:0%;
left:0%;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
#motionLight {
display: none;
position: absolute;
padding: 10vw;
top:0;
align-items: center center;
justify-content: center center;
z-index: 1002;
cursor: pointer;
}
<div id="motionVideo">
<div class="motionButton" onclick="motionLightbox_open();">Open</div>
<div id="motionLight" onclick="motionLightbox_close()">
<video id="motionShowreel" width='1280' height='720' controls>
<source src="./motionGraphic.mp4" type="video/mp4">
<!--Browser does not support <video> tag -->
</video>
</div>
<div id="motionFade" onClick="motionLightbox_close();">
</div>
<div class="motionShowreel">
<video id="motionGraphic" src="./motionGraphic.mp4" width="100%" height="50%"></video>
</div>
</div>

How do I give elements with the same class name to perform the same function in javascript?

I have multiple elements with the same class name and want them to perform the same javascript function but output their unique "inner.Text" specific
to the element i clicked. Right Now i know i need an [index] and a loop
but I just don't know how to implement that at the moment since im a novice in javascript.
spent 3 hours trying to figure it out
const myButton = document.querySelectorAll('.clipboard-icon');
const myInp = document.querySelectorAll('.snippetcode');
myButton.forEach(ree =>
ree.addEventListener('click', copyElementText));
function copyElementText(id) {
var text = myInp.innerText;
var elem = document.createElement("textarea");
document.body.appendChild(elem);
elem.value = text;
elem.select();
document.execCommand("copy");
document.body.removeChild(elem);
console.log('clicked');
}
console.log(myButton);
console.log(myInp);
/*everything works fine if the script was changed to affect only ONE class name but I cant figure out how to make them work for more than one
*/
.snippet1 {
border: solid rgb(55, 63, 184) 3px;
}
.snippet_holder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
padding: 0 3.5rem;
margin: 0 0 1rem 0;
position: relative;
}
.buttons {
width: 170px;
height: 40px;
border: 0;
padding: 0;
font-size: 1rem;
color: #fff;
border-radius: 10px;
}
.snippet_holder:hover .clipboard-icon {
display: block;
position: absolute;
top: 15px;
right: 65px;
background: rgb(51, 153, 136);
margin: 0;
width: 30px;
padding: 0;
height: 30px;
}
.clipboard-icon {
display: none;
}
.clipboard-icon img {
width: inherit;
height: inherit;
position: relative;
}
.clipboard-icon pre {
display: none;
}
.snippetcode1 {
display: none;
}
.button1 {
-webkit-animation: rainbow 6.5s ease infinite;
animation: rainbow 6.5s ease infinite;
background-image: linear-gradient(124deg, #ff470f, #ff3860, #b86bff, #3273dc);
background-size: 800% 800%;
}
#keyframes rainbow {
0% {
background-position: 1% 80%;
}
50% {
background-position: 99% 20%;
}
100% {
background-position: 1% 80%;
}
0% {
background-position: 1% 80%;
}
50% {
background-position: 99% 20%;
}
100% {
background-position: 1% 80%;
}
}
main {
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<html>
<body>
<main>
<div class="snippet_holder snippet_holder1">
<div class="clipboard-icon">
<pre>
<code class= "snippetcode">
1st class text copieddddd
</code>
</pre>
<img src="https://www.shareicon.net/data/128x128/2016/04/27/756265_clipboard_512x512.png">
</div>
<button type="button" class="buttons button1">button</button>
</div>
<div class="snippet_holder snippet_holder1">
<div class="clipboard-icon">
<pre>
<code class= "snippetcode">
22222nddd class text copieddddd
</code>
</pre>
<img src="https://www.shareicon.net/data/128x128/2016/04/27/756265_clipboard_512x512.png">
</div>
<button type="button" class="buttons button1">button</button>
</div>
<div class="snippet_holder snippet_holder1">
<div class="clipboard-icon">
<pre>
<code class= "snippetcode">
3rd class text copieddddd
</code>
</pre>
<img src="https://www.shareicon.net/data/128x128/2016/04/27/756265_clipboard_512x512.png">
</div>
<button type="button" class="buttons button1">button</button>
</div>
<div class="snippet_holder snippet_holder1">
<div class="clipboard-icon">
<pre>
<code class= "snippetcode">
4thhhhhhhhclass text copieddddd
</code>
</pre>
<img src="https://www.shareicon.net/data/128x128/2016/04/27/756265_clipboard_512x512.png">
</div>
<button type="button" class="buttons button1">button</button>
</div>
</main>
</body>
</html>
You've to query the .snippetcode related to the button pressed, so, it makes no sense to query the nodeList myInp, you can access to the right element using the currentTarget provided in the event object...
function copyElementText(event) {
var text = event.currentTarget.querySelector('.snippetcode').innerText;
var elem = document.createElement("textarea");
document.body.appendChild(elem);
elem.value = text;
elem.select();
document.execCommand("copy");
document.body.removeChild(elem);
console.log('clicked');
}

Add bullets to slider that automatically change with the right slide

I made a slider with seven pictures and next and previous buttons. The slider works automatically and when hovering the slider the loop stops.
I've tried to add interactive bullets - now wrote in static HTML - that respond to their given picture.
The bullets should be as many as there are slides, but without having to add them myself one by one.
But I don't know how to do it. Can anyone help?
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace("active", "");
}
if (slides.length > 0) {
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
}
$(document).ready(function() {
var interval = setInterval(function() {
var $curr = $('.mySlides:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.mySlides').first();
$next.css('z-index',2).fadeIn('slow', function() {
$curr.hide().css('z-index',0);
$next.css('z-index',1);
});
}, 5000);
$('.mySlides').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(function() {
var $curr = $('.mySlides:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.mySlides').first();
$next.css('z-index',2).fadeIn('slow', function() {
$curr.hide().css('z-index',0);
$next.css('z-index',1);
});
}, 5000);
});
});
/* SLIDER*/
#containermio {
width: 100%;
margin: 0 auto;
overflow: hidden;
height: 536px;
position: relative;
}
#containermio a:hover {
color: white;
}
#containermio ul {
margin: 0px;
padding: 0px;
width: 100%;
list-style: none;
height: 100%;
position: absolute;
}
#containermio ul li {
height: 100%;
display: none;
position: relative;
}
#containermio ul li:first-child {
display: block;
}
#containermio ul li img {
width: 100%;
min-height: 100%;
}
/* FADE */
.mySlides {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* SLIDE TITLE*/
.text {
margin: 0;
padding: 20px 0 0 25px;
font-size: 40px;
font-weight: 600;
color: #f7f7f7;
text-align: center;
position: absolute;
font-family: 'Montserrat', sans-serif;
}
/* ARROWS */
.prev, .next {
z-index: 99;
cursor: pointer;
position: absolute;
display: block;
top: 40%;
width: auto;
color: #fff;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
padding: 25px 25px 25px 25px;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
text-decoration: none;
}
/* DOTS */
.dotdiv {
bottom: 10px;
position: absolute;
width: 100%;
text-align: center;
z-index: 99;
}
.dot {
cursor:pointer;
height: 6px;
width: 6px;
margin: 0 2px;
background-color: #eee;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
z-index: 99;
}
.active, .dot:hover {
background-color: #717171;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="containermio">
<ul id="slidermio">
<li class="mySlides">
<div id="slide1" class="text">alicè</div>
<img src="http://digitaljournal.com/img/8/7/8/4/4/i/1/1/7/o/ulingan_kids.jpg"/>
</li>
<li class="mySlides">
<div id="slide2" class="text">halo halo</div>
<img src="http://freethoughtblogs.com/taslima/files/2012/06/22-funny2.jpg"/>
</li>
<li class="mySlides">
<div id="slide3" class="text">tilt</div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png"/>
</li>
<li class="mySlides">
<div id="slide4" class="text">artist unknown</div>
<img src="http://www.chinadaily.com.cn/china/images/2010WenUN/attachement/jpg/site1/20100921/0013729ece6b0e01d9691a.jpg"/>
</li>
<li class="mySlides">
<div id="slide5" class="text">insa</div>
<img src="http://kenwheeler.github.io/slick/img/fonz2.png"/>
</li>
<li class="mySlides">
<div id="slide6" class="text">blue lights</div>
<img src="http://kenwheeler.github.io/slick/img/fonz3.png"/>
</li>
<li class="mySlides">
<div id="slide7" class="text">outdoor festival</div>
<img src="http://kenwheeler.github.io/slick/img/fonz3.png"/>
</li>
</ul>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="dotdiv">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(+1)"></span>
<span class="dot" onclick="currentSlide(+1)"></span>
<span class="dot" onclick="currentSlide(+1)"></span>
<span class="dot" onclick="currentSlide(+1)"></span>
<span class="dot" onclick="currentSlide(+1)"></span>
<span class="dot" onclick="currentSlide(+1)"></span>
</div>
</div>
jsfiddle: https://jsfiddle.net/e9m3yupp/ (original: https://jsfiddle.net/hctxgqhx/)
I changed a lot in your code, in order to make it much more flexible and concise.
There are too many changes to explain every single one, so I used comments in the code snippet below instead, to explain what every line does.
But I will sum up the most major changes:
I put all the slides in an array. In that array, every slide is represented by an object containing a txt and an img property. The first index of the array ([0]) is used to store the slide-index.
I removed the <ul> with all the <li>s from the HTML, and replaced them with one <div>. And instead of switching elements, I change the source of the image.
This way, you don't have to add new slides to your HTML, all you have to do is add a slide-object to the slides-array in JS.
I moved the onclick handlers (for the arrows and bullets/dots) from HTML to JS. It's considered good practice to keep all JS-code outside of your HTML.
Don't pay too much attention to all the 'changes' in the CSS. Mostly, those are just me reordering and reformatting things for my own readability, but I'll admit it's an acquired taste:)
There might be however a few actual changes that are critical for proper layout/functionality, but like I said I changed so much that I don't even remember.
Unfortunately, I couldn't get the CSS fade animation (see code block below) to work with the new code. Because now there is only one element for all slides, switching the source instead of the elements, the animation doesn't fire anymore. I tried a lot of things, but with no success.
/* FADE */
.slide {-webkit-animation-name:fade; -webkit-animation-duration:1.5s; animation-name:fade; animation-duration:1.5s;}
#-webkit-keyframes fade {from {opacity:.4} to {opacity:1}}
#keyframes fade {from {opacity:.4} to {opacity:1}}
So I had to move that animation to JS, using jQuery:
$(".slide").fadeTo(0,.4,function(){$(this).fadeTo(1500,1);});
If you really want to do the animation with CSS, you could use similar code as I used to create the bullets/dots (see code snippet), to also create an <li> for every slide in the array. But that will crowd your webpage with a whole lot of elements the more slides you add... not sure which option is better.
Code Snippet:
$(document).ready(function() {
var interval;
var slides = [
1,
{txt:"alicè", img:"http://digitaljournal.com/img/8/7/8/4/4/i/1/1/7/o/ulingan_kids.jpg"},
{txt:"halo halo", img:"http://freethoughtblogs.com/taslima/files/2012/06/22-funny2.jpg"},
{txt:"tilt", img:"http://kenwheeler.github.io/slick/img/fonz1.png"},
{txt:"artist unknown", img:"http://www.chinadaily.com.cn/china/images/2010WenUN/attachement/jpg/site1/20100921/0013729ece6b0e01d9691a.jpg"},
{txt:"insa", img:"http://kenwheeler.github.io/slick/img/fonz2.png"},
{txt:"blue lights", img:"http://kenwheeler.github.io/slick/img/fonz3.png"},
{txt:"outdoor festival", img:"http://kenwheeler.github.io/slick/img/fonz3.png"}
];
/* SLIDE INTERVAL*/
function startSlideInterval(){interval = setInterval(function(){$(".next").click();},5000);} //trigger the next-button on every interval
$('.slide').hover(function(){clearInterval(interval);},startSlideInterval); //clear interval on 'hover', restart interval on 'unhover'
/* SHOW SLIDE */
function showSlide(n) {
if (n>slides.length-1) {n=1;} else if (n<1) {n=slides.length-1;} //loop around to first/last slide
$(".slide img").attr("src",slides[n].img); //change image
$(".slide div").html(slides[n].txt); //change text
$(".bullets span:nth-child("+slides[0]+")").removeClass("active"); //deactivate old bullet
$(".bullets span:nth-child("+n+")").addClass("active"); //activate new bullet
$(".slide").fadeTo(0,.4,function(){$(this).fadeTo(1500,1);}); //fade new slide
slides[0] = n; //set slide-index to new value
}
/* ARROWS */
$(".prev").click(function(){showSlide(slides[0]-1);}); //click-handler
$(".next").click(function(){showSlide(slides[0]+1);}); //click-handler
/* BULLETS */
(function(){
var bullets = "";
for (var i=1,count=slides.length; i<count; ++i) {bullets += "<span></span>"} //add a bullet for every slide in the array
$(".bullets").append(bullets); //append bullets to their container
$(".bullets span").click(function(){showSlide($(this).index()+1);}); //click-handler
})();
/* INITIALIZE */
showSlide(slides[0]); //show the first slide
startSlideInterval(); //start slide-interval
});
html {width:95%; height:90%;} /*ONLY FOR CODE SNIPPET*/
body {width:100%; height:100%;}
/* SLIDER */
#slider {position:relative; width:90%; height:80%; margin:0 auto; background-color:grey; overflow:hidden;}
#slider .slide {width:100%; height:100%; text-align:center;}
#slider .slide img {width:auto; height:100%;}
#slider .slide div {position:absolute; left:0; top:0; margin:0; padding:20px 0 0 25px; text-align:center; font-family:'Montserrat',sans-serif; font-size:40px; font-weight:600; color:#f7f7f7;}
/* ARROWS */
#slider a {
display: block;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: auto;
padding: 25px;
text-decoration: none;
font-size: 18px;
font-weight: bold;
color: #fff;
cursor: pointer;
z-index: 1;
transition: background-color 0.6s ease;
}
#slider a:hover {background-color:rgba(0,0,0,0.8);}
#slider a.prev {left:0; border-radius:0 3px 3px 0;}
#slider a.next {right:0; border-radius:3px 0 0 3px;}
/* BULLETS */
.bullets {position:absolute; bottom:10px; width:100%; text-align:center; z-index:1;}
.bullets span {
display: inline-block;
width: 6px;
height: 6px;
margin: 0 2px;
border-radius: 50%;
background-color: #eee;
cursor:pointer;
transition: background-color 0.6s ease;
}
.bullets span:hover, .bullets span.active {background-color:#717171;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="slider">
<div class="slide"><img src="" /><div></div></div>
<a class="prev">❮</a><a class="next">❯</a>
<div class="bullets"></div>
</div>
jsfiddle: https://jsfiddle.net/hctxgqhx/16/

Ability to flip div boxes, changing their size, and interacting with the content

I'm trying to create a design with small clickable div boxes, that once clicked they flip by 180° and show content. Content which you can interact with: like clicking links, copy text or change the content with the use of more buttons.
I've managed to accomplish this, but my question follows: Is there a better way for this?
Found this website of a basic example
But being CSS based the content on the other side isn't interactable.
This is the code:
HTML
<div id="saos">
<div id="pg1" style="display:none;">
<blockquote>Page1</blockquote><br>
Yay content.
</div>
<div id="pg2" style="display:none;">
<blockquote>Page2</blockquote><br>
More content.
</div>
<div class="x" style="display:none;" onclick="closePage()">
<p>X</p>
</div>
<div id="2" class="an2 start startbak" onclick="openPage()">
<p class="sp">Click!</p>
</div>
<div id="cont" style="display:none;">
<p class="sp">Click!</p>
</div>
</div>
CSS
.write {
position: absolute;
width: 100px;
height: 50px;
background: #0055ff;
-webkit-transition: all 1.5s cubic-bezier(.08, 1, .08, 1);
left: 10px;
text-align: center;
font-family: Verdana;
}
.write:hover {
-webkit-transform: perspective(600px)scale(1.2);
-moz-transform: perspective(600px)scale(1.2);
}
.write p {
color: #002164;
text-align: center;
margin-top: 10px;
font-size: 22px;
}
.an {
-webkit-transition: all 1.5s cubic-bezier(.08, 1, .08, 1);
}
.an2 {
-webkit-transition: all .5s ease;
}
.page {
background-color: rgba(17, 17, 17, .8);
position: absolute;
left: 120px;
border: 2px solid #252525;
height: 330px;
width: 530px;
overflow: auto;
font-size: 14px;
color: #818181;
}
.start {
text-align: center;
font-family: Verdana;
position: absolute;
top: 150px;
left: 290px;
height: 120px;
width: 120px;
-webkit-transform: perspective(600px)rotateY(180deg)translateZ(-10px);
-moz-transform: perspective(600px)rotateY(180deg);
}
.start:hover {
background-color: #0055ff;
cursor: pointer;
}
.startbak {
background-color: #0036a3;
}
.mainbak {
background: #252525;
}
.sp {
color: #002164;
margin-top: 43px;
font-size: 30px;
-webkit-transform: rotateY(180deg)rotateZ(-45deg)translateZ(-10px);
-moz-transform: rotateY(180deg)rotateZ(-45deg);
}
.frame {
top: 0px;
left: 0px;
position: absolute;
width: 751px;
height: 452px;
-webkit-transform: perspective(600px)rotateY(0deg);
-moz-transform: perspective(600px)rotateY(0deg);
}
.x {
position: absolute;
left: 700px;
height: 18px;
width: 45px;
background-color: #c75050;
color: #fff;
display: table;
text-align: center;
font-size: 10px;
font-family: Verdana;
z-index: 2;
}
.x:hover {
background-color: #e04343;
cursor: default;
}
.x:active {
background-color: #993d3d;
}
.x p {
display: table-cell;
vertical-align: middle;
}
JavaScript
var htmlString = '<div class="f an write" style="top: 10px;" name="Home" onClick="openTab(\'pg1\',\'0\')"><p>Home</p></div>\n'
htmlString += '<div class="f an write" style="top: 65px;" name="About" onClick="openTab(\'pg2\',\'1\')"><p>About</p></div>\n'
function openTab(id, n){
for (var i=0;i<write.length;i++){
write[i].className = 'f an write';
write[i].style.top = i*55+10+'px';
name = write[i].getAttribute('name');
write[i].innerHTML = '<p>'+name+'</p>';
}
write[n].className = 'f an page';
write[n].style.top = '10px';
write[n].innerHTML= '<div class="ins">'+document.getElementById(id).innerHTML+'</div>';
}
var id2 = document.getElementById('2'),
x = document.getElementsByClassName('x')[0];
function openPage(){
id2.className = 'an2 frame mainbak';
setTimeout(function() {
id2.className = 'an2 frame mainbak'
id2.setAttribute('onclick','')
document.getElementById('2').innerHTML=htmlString
}, 150);
setTimeout(function() {
x.style.display='';
}, 600);
}
function closePage(){
id2.className = 'an2 start mainbak';
setTimeout(function() {
id2.className = 'an2 start startbak'
id2.setAttribute('onclick','openPage()')
document.getElementById('2').innerHTML=document.getElementById('cont2').innerHTML
}, 150);
x.style.display='none';
}
Also made a JSFiddle but it doesn't seem to work..
While on my browser does.
It should be possible to do this with only a couple of lines of Javascript. Rich Bradshaw's example that you posted was an excellent starting point.
Rather than starting the flip on hover (via css selectors) I added a couple of lines of Javascript - actually jQuery, but plain JS would work - to add the relevant class on click. It works really nicely...
See jsFiddle Demo
I also managed to get the back face clickable (as in that demo) so it should meet all of your needs.
By that method the HTML is reduced to:
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://lorempixel.com/450/281/" />
</div>
<div class="back face center">
<p>This is nice for exposing more information about an image.</p>
<p>Any content can go here.</p>
<p>Including interactive HTML like
links</p>
</div>
</div>
</div>
And the Javascript is just:
$('#f1_container').click(function() {
$('#f1_container').addClass('clicked');
});

Categories