I'm relatively new to Jquery and I'm trying to make a mouseover transition so when you hover over the title the background image should be changed with some ease css transition but nothing seems to work. I also tried Jquery fadeIn method but that also doesn't seem to work. What's the correct way to make the transition work?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Roboto;
background-color: #000;
position: relative;
overflow-x: hidden;
transition: all ease 2s;
}
.banner {
width: 100%;
height: 100vh;
transition: all 1s ease;
}
.banner-strip {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
transition: all .5s ease-in-out;
}
.strip {
position: relative;
width: 20%;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 0;
flex-direction: column;
/*background-color: #a03131;*/
color: #fff;
transition: all 1s ease;
}
.strip p {
text-align: center;
}
.strip big {
text-transform: uppercase;
font-size: 24px;
font-weight: 700;
letter-spacing: 2px;
}
.strip img {
line-height: 24px;
font-size: 14px;
text-align: center;
font-style: italic;
opacity: 0;
visibility: hidden;
transition: all ease 2s;
}
.banner-img img {
position: absolute;
width: 100%;
height: 100vh;
opacity: 0;
transition: all .5s ease-in-out;
}
.banner-img {
transtition: all .5s ease-in-out;
}
.strip:hover {
height: 100%;
padding: 15px 0 90px;
transition: all 1s ease;
}
.strip:hover img {
opacity: 1;
visibility: visible;
transition: all ease 2s !important;
}
<body>
<div class="banner">
<div class="banner-img">
<img src="default.jpg" alt="">
</div>
<div class="banner-strip">
<div class="strip" data-image="living.jpg">
<h2>Tattoo</h2><br>
<a href="tattoo.html">
<img src="ikonka4.png" alt="" style="width: 60px; height:60px">
</a>
</div>
<div class="strip" data-image="bedroom.jpg">
<h2>Beauty</h2>
<a href="beauty.html">
<img src="ikonka2.png" alt="" style="width: 60px; height:60px">
</a>
</div>
<div class="strip" data-image="dining.jpg">
<h2>Piercing</h2>
<a href="piercing.html">
<img src="ikonka3.png" alt="" style="width: 60px; height:60px">
</a>
</div>
</div>
</div>
<!-- jquery cdn link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var image = $(".banner-img").find("img").attr("src");
$(".banner-img img").css("opacity", "1").fadeIn("slow");
$(".strip").mouseover(function() {
var currentImage = $(this).attr("data-image");
$(this).parent().parent().find(".banner-img img").attr("src", currentImage);
$(".banner-img img").fadeIn("slow");
});
$(".strip").mouseout(function() {
$(".banner-img img").fadeIn("slow");
$(".banner-img img").attr("src", image).fadeIn("slow"); // SET DEFAULT IMAGE WHEN MOUSE OUT
});
});
</script>
See example below. I've used the background-color property for example purposes but this can easily be substituted with background-image.
$(function() {
$(".strip").mouseover(function() {
var curImg = $(this).attr("data-image");
$(".banner-img").css("background-color", curImg);
});
$(".strip").mouseout(function() {
$(".banner-img").css("background-color", '#000');
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Roboto;
position: relative;
overflow-x: hidden;
}
.banner {
position: fixed;
width: 100%;
height: 100px;
}
.banner-img {
position: fixed;
width: 100%;
height: 100px;
background-color: #000;
transition: background-color 1s ease-in-out;
}
.banner-strip {
display: flex;
align-items: center;
justify-content: space-around;
}
.strip {
position: relative;
width: 20%;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #fff;
}
.strip img {
display: block;
width: 60px;
height: 60px;
background: #FFF;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.strip:hover img {
opacity: 1;
}
<div class="banner">
<div class="banner-img">
</div>
<div class="banner-strip">
<div class="strip" data-image="red">
<a href="tattoo.html">
<img src="ikonka4.png" alt="">
</a>
<h2>Tattoo</h2>
</div>
<div class="strip" data-image="blue">
<a href="beauty.html">
<img src="ikonka2.png" alt="">
</a>
<h2>Beauty</h2>
</div>
<div class="strip" data-image="green">
<a href="piercing.html">
<img src="ikonka3.png" alt="">
</a>
<h2>Piercing</h2>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Related
I'm working on a slideShow and I'm trying to make .slidesTextes have a translation from the bottom and an opacity change, all controlled by a button that call a JS function.
However, it only works once : when the page is fully loaded. I tried to find out why, but I'm stuck. All I can say is that when I use the console and type my JS code ligne by ligne, it works perfectly. But if I type the full JS code at once in the console, it doesn't work anymore...
Please find the code below :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta title="">
<link rel="stylesheet" href="styleSheet.css">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
</head>
<body>
<div class="slides">
<div class="slidesImages">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
</div>
<div class="slidesTextes">
<span class="slidesTitre"><h2>First title</h2></span>
<span class="slidesTitre"><h2>Second title</h2></span>
<span class="slidesTitre"><h2>Third title</h2></span>
<span class="slidesTitre"><h2>Forth title</h2></span>
</div>
<div class="slidesBoutons">
<span id="slidesNumeros">1/4</span>
<a class="fleche" onclick="changeSlide(-1);"><</a>
<a class="fleche" onclick="changeSlide(1);">></a>
<a class="appelAction" href="https://tout-pres-de-chez-moi.fr/pages/demander-une-livraison-a-domicile">Button/link →</a>
</div>
</div>
</body>
</html>
Here is the script I use:
<script>
var numeroSlide=1;
afficherSlide(numeroSlide);
function changeSlide(numero){
numeroSlide=numeroSlide+numero;
if(numeroSlide<1){numeroSlide=4;}
if(numeroSlide>4){numeroSlide=1;}
afficherSlide(numeroSlide);
}
function afficherSlide(numeroSlide){
listImages=document.getElementsByClassName("image");
listTitres=document.getElementsByClassName("slidesTitre");
for(i=0;i<listImages.length;i++){
listImages[i].style.display="none";
listTitres[i].style.display="none";
}
listImages[numeroSlide-1].style.display="";
listTitres[numeroSlide-1].style.display="";
document.getElementById("slidesNumeros").innerHTML=numeroSlide+"/"+listImages.length;
apparaitre();
}
function apparaitre(){
document.getElementsByClassName("slidesTextes")[0].style.display="none";
document.getElementsByClassName("slidesTextes")[0].style.display="";
}
</script>
And here is the CSS file:
margin: 0px;
padding: 0px;
}
.slides{
height: 100vh;
position: absolute;
}
.slidesImages{
width: 100vw;
max-width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.slidesImages img{
width: 102%;
min-width: 1000px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-name: slideChange;
animation-duration: 1s;
}
#keyframes slideChange{
from{opacity: 0;}
to{opacity: 1;}
}
.slidesTextes{
font-family: serif;
font-size: 7vh;
font-weight: bold;
color: white;
position: absolute;
bottom: 25vh;
left: 8%;
animation: apparition 1s;
border: 1px solid red;
}
#keyframes apparition{
from{opacity: 0;bottom: 0vh;}
to{opacity:1;bottom: 25vh;}
}
.slidesTextes h2{
display: inline;
background-color: #f4743c;
padding: 0 1vw;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.slidesBoutons{
position: absolute;
bottom: 15%;
left: 8%;
width: 90%;
margin: 0.5vh 0;
}
.slidesBoutons *{
background-color: #29893f;
color: white;
font-family: sans-serif;
font-weight: bold;
font-size: 2.5vh;
float: left;
box-sizing: border-box;
height: 7vh;
line-height: 7vh;
padding: 0 1.5vw;
margin: 0 0.1vw;
text-decoration: none;
}
.slidesBoutons span{
opacity: 0.8;
}
.slidesBoutons a:hover{
background-color: #39994f;
cursor: pointer;
transition: 0.3s ease;
}
The browser is acting correctly; the animation is only triggered when the node renders, and it renders once. You have to remove the animation and re-add it whenever an arrow button gets clicked. The easiest way is to make it its own class (run code snippet):
var numeroSlide = 1;
afficherSlide(numeroSlide);
function changeSlide(numero) {
animation = document.getElementsByClassName("animation")[0];
animation.classList.remove("animation");
setTimeout(()=> animation.classList.add("animation"),0);
numeroSlide = numeroSlide + numero;
if (numeroSlide < 1) {
numeroSlide = 4;
}
if (numeroSlide > 4) {
numeroSlide = 1;
}
afficherSlide(numeroSlide);
}
function afficherSlide(numeroSlide) {
listImages = document.getElementsByClassName("image");
listTitres = document.getElementsByClassName("slidesTitre");
for (i = 0; i < listImages.length; i++) {
listImages[i].style.display = "none";
listTitres[i].style.display = "none";
}
listImages[numeroSlide - 1].style.display = "";
listTitres[numeroSlide - 1].style.display = "";
document.getElementById("slidesNumeros").innerHTML = numeroSlide + "/" + listImages.length;
apparaitre();
}
function apparaitre() {
document.getElementsByClassName("slidesTextes")[0].style.display = "none";
document.getElementsByClassName("slidesTextes")[0].style.display = "";
}
margin: 0px;
padding: 0px;
}
.slides{
height: 100vh;
position: absolute;
}
.slidesImages{
width: 100vw;
max-width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.slidesImages img{
width: 102%;
min-width: 1000px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-name: slideChange;
animation-duration: 1s;
}
#keyframes slideChange{
from{opacity: 0;}
to{opacity: 1;}
}
.slidesTextes{
font-family: serif;
font-size: 7vh;
font-weight: bold;
color: white;
position: absolute;
bottom: 25vh;
left: 8%;
border: 1px solid red;
}
.animation {
animation: apparition 1s;
}
#keyframes apparition{
from{opacity: 0;bottom: 0vh;}
to{opacity:1;bottom: 25vh;}
}
.slidesTextes h2{
display: inline;
background-color: #f4743c;
padding: 0 1vw;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.slidesBoutons{
position: absolute;
bottom: 15%;
left: 8%;
width: 90%;
margin: 0.5vh 0;
}
.slidesBoutons *{
background-color: #29893f;
color: white;
font-family: sans-serif;
font-weight: bold;
font-size: 2.5vh;
float: left;
box-sizing: border-box;
height: 7vh;
line-height: 7vh;
padding: 0 1.5vw;
margin: 0 0.1vw;
text-decoration: none;
}
.slidesBoutons span{
opacity: 0.8;
}
.slidesBoutons a:hover{
background-color: #39994f;
cursor: pointer;
transition: 0.3s ease;
}
<body>
<div class="slides">
<div class="slidesImages">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
</div>
<div class="slidesTextes animation">
<span class="slidesTitre"><h2>First title</h2></span>
<span class="slidesTitre"><h2>Second title</h2></span>
<span class="slidesTitre"><h2>Third title</h2></span>
<span class="slidesTitre"><h2>Forth title</h2></span>
</div>
<div class="slidesBoutons">
<span id="slidesNumeros">1/4</span>
<a class="fleche" onclick="changeSlide(-1);"><</a>
<a class="fleche" onclick="changeSlide(1);">></a>
<a class="appelAction" href="https://tout-pres-de-chez-moi.fr/pages/demander-une-livraison-a-domicile">Button/link →</a>
</div>
</div>
</body>
html
<div class="slidesTextes animation">
javascript
animation = document.getElementsByClassName("animation")[0];
animation.classList.remove("animation");
setTimeout(()=> animation.classList.add("animation"),0);
css
.animation {
animation: apparition 1s;
}
I have created a carousel using bootstrap 3 and javascript. The carousel works perfectly, the only problem is that I have the intention of displaying a triptych display (3 divs at once) but only one of my divs displays. The buttons work backwards and forwards fine.. Why is only one div displaying and how do i change my code so the carousel works similar to this example?: https://codepen.io/mephysto/pen/ZYVKRY
$( document ).ready(function() {
$('.carosuelProperties').each(function() {
var current = $(this);
var image = current.find('img');
current.css('background-image', 'url(' + image.attr('src') + ')');
});
$('.item:nth-child(1), .item:nth-child(2), .item:nth-child(3)').addClass('active');
});
$slides.on('mouseenter', _.debounce(function() {
}, 350));
$('#myCarousel').carousel({
interval: 4000
});
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
.caroImgClass {
display: none;
}
.arrowOf {
color: #008692!important;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
margin-top: -25px;
}
.arrowOf:hover {
color: #000000!important;
cursor: pointer;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.itemProperties {
min-height: 300px;
min-width: 300px;
max-height: 300px;
max-width: 300px;
width: 20vw;
border-radius: 20vw;
background-color: #008692;
}
.carosuelProperties {
min-height: 300px;
min-width: 300px;
max-height: 300px;
max-width: 300px;
width: 20vw;
border-radius: 20vw;
top: 0px;
left: 0px;
position: absolute;
transition: .5s ease-in-out;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.carosuelProperties:hover {
opacity: 0;
transition: .5s ease-in-out;
}
#media only screen and (min-width: 1900px) {
.propertyTitleCaro {
padding: 1vw;
padding-bottom: 0;
font-size: 1.5rem;
font-weight: 1000;
margin-top: 1.5vw;
}}
#media only screen and (max-width: 1900px) {
.propertyTitleCaro {
font-size: 1.5rem;
font-weight: 1000;
margin-top: 3vw;
padding: 10%;
padding-bottom: 0%;
}}
.propertyDesCaro {
padding: 1.5vw;
padding-top: 0px;
}
$carousel-visible-count: 3;
#mixin clearfix() {
&:before,
&:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
&:after { clear: both; }
}
* {
box-sizing: border-box;
}
.carousel__control {
position: absolute;
top: 25%;
bottom: 25%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
cursor: pointer;
outline: 0;
background: none;
}
.carousel-control {
background: none!important;
padding-top: 13%;
}
.carousel-control.left {
margin-left: -155px;
}
.multi-item-carousel{
.carousel-inner{
> .item{
transition: 500ms ease-in-out left;
}
.active{
&.left{
left:-33%;
}
&.right{
left:33%;
}
}
.next{
left: 33%;
}
.prev{
left: -33%;
}
#media all and (transform-3d), (-webkit-transform-3d) {
> .item{
// use your favourite prefixer here
transition: 100000ms ease-in-out left;
transition: 100000ms ease-in-out all;
backface-visibility: visible;
transform: none!important;
}
}
}
.carouse-control{
&.left, &.right{
background-image: none;
}
}
}
<div class="carousel slide" id="myCarousel" data-ride="carousel" data-interval="2000" data-pause="hover">
<div class="carousel-inner">
#if (isset($participatingProperties) && !empty($participatingProperties) && is_array($participatingProperties))
#foreach ($participatingProperties as $property)
<a href="/view/property/{{ $property->property_slug or $property->id }}">
<div class="carousel__box itemProperties col-md-4 col-sm-12 item">
<h2 class="propertyTitleCaro centered white sub-header">
<?php echo mb_strimwidth(strip_tags($property->property_name), 0, 45, '...'); ?>
</h2>
<p class="centered white smallerText propertyDesCaro"><?php echo mb_strimwidth(strip_tags($property->property_short_descript), 0, 140, '...<br><br>SEE MORE'); ?></p>
<div class="carosuelProperties" id="{{ $property->id }}">
<img class="caroImgClass" src="{{$property->property_main_image->images_main}}" alt="{{ $property->property_name or 'No name' }}" title="{{ $property->property_name or 'No name' }}">
</div>
</a>
</div>
#endforeach
#endif
</div>
<a class="left carousel-control arrowOf" href="#myCarousel" data-slide="prev">
<i class="fa fa-chevron-left fa-3x"></i></a>
<a class="right carousel-control arrowOf" href="#myCarousel" data-slide="next">
<i class="fa fa-chevron-right fa-3x"></i></a>
</div>
I am trying to create a pure JavaScript slider which automatically scrolls as the page loads. The slider gets successfully triggered for the first time and here comes the issue. When this slider goes through setInterval() function for the second iteration, the list items gets undefined (ie: the value of 'i'). Also I want the slider to autoscroll. I need this to get done with the help of pure JavaScript. Here is my code,
JS:
function slider() {
var ul = document.getElementById("imageSlider");
var liItems = ul.getElementsByTagName("li");
var imageWidth = liItems[0].offsetWidth;
var imageNumber = liItems.length;
setInterval(function () {
for (var i = 0; i <= liItems.length; i++) {
liItems[i].style.right = liItems[i].style.right + imageWidth + 'px';
}
}, 2000);
}
CSS:
.slider-wrapper {
height: 115px;
width: 100%;
}
.slide-wrapper {
height: 95px;
width: 274px;
background-image: linear-gradient(#aaaaaa,#e2e2e2);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 0.5s ease-out;
-webkit-transition: background-position 0.5s ease-out;
-moz-transition: background-position 0.5s ease-out;
-o-transition: background-position 0.5s ease-out;
-ms-transition: background-position 0.5s ease-out;
display: inline-block;
vertical-align: middle;
margin: 10px;
}
.slide-wrapper:hover {
height: 95px;
width: 274px;
background-position: 0 0;
}
.slide {
display: inline-block;
position: relative;
}
ul {
margin: 0;
padding: 0;
width: 100%;
}
.image {
text-align: center;
height: 95px;
width: 274px;
line-height: 92px;
}
.image-style {
max-width: 150px;
width: auto;
max-height: 75px;
height: auto;
vertical-align: middle;
}
.left-arrow {
width: 75px;
height: 115px;
float: left;
position: relative;
font-family: 'Dosis', sans-serif;
font-size: 75px;
}
.right-arrow {
width: 75px;
height: 115px;
float: right;
position: relative;
font-family: 'Dosis', sans-serif;
font-size: 75px;
}
.image-slider-ul {
text-align: center;
display: block;
white-space: nowrap;
padding: 0;
}
.container-middle {
display: inline-block;
height: 115px;
overflow: hidden;
width: 1188px;
}
HTML:
<body onload="slider()">
<ul id="imageSlider" class="image-slider-ul">
<div class="slider-wrapper">
<div class="left-arrow"><</div>
<div class="container-middle">
<li class="slide"><div class="slide-wrapper"><div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/1-Number-PNG.png" class="image-style"></div></div></li>
<li class="slide"><div class="slide-wrapper"><div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/2-Number-PNG.png" class="image-style"></div></div></li>
<li class="slide"><div class="slide-wrapper"><div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/3-Number-PNG.png" class="image-style"></div></div></li>
<li class="slide"><div class="slide-wrapper"><div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/4-Number-PNG.png" class="image-style"></div></div></li>
<li class="slide"><div class="slide-wrapper"><div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/5-Number-PNG.png" class="image-style"></div></div></li>
</div>
<div class="right-arrow">></div>
</div>
</ul>
</body>
Please help me figure this out! Thankyou..
we could make it automatic left sliding when periodical change of img element src with help of setInterval().
code:
function slider() {
// var ul = document.getElementById("imageSlider");
// var liItems = ul.getElementsByTagName("li");
// var imageWidth = liItems[0].offsetWidth;
// var imageNumber = liItems.length;
setInterval(function() {
var souc = document.getElementsByClassName("image-style");
var firstSrc = souc[0].src
for (var i = 0; i < souc.length -1; i++) {
souc[i].src = souc[i+1].src;
}
souc[souc.length-1].src = firstSrc;
}, 2000);
}
.slider-wrapper {
height: 115px;
width: 100%;
}
.slide-wrapper {
height: 95px;
width: 274px;
background-image: linear-gradient(#aaaaaa,#e2e2e2);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 0.5s ease-out;
-webkit-transition: background-position 0.5s ease-out;
-moz-transition: background-position 0.5s ease-out;
-o-transition: background-position 0.5s ease-out;
-ms-transition: background-position 0.5s ease-out;
display: inline-block;
vertical-align: middle;
margin: 10px;
}
.slide-wrapper:hover {
height: 95px;
width: 274px;
background-position: 0 0;
}
.slide {
display: inline-block;
position: relative;
}
ul {
margin: 0;
padding: 0;
width: 100%;
}
.image {
text-align: center;
height: 95px;
width: 274px;
line-height: 92px;
}
.image-style {
max-width: 150px;
width: auto;
max-height: 75px;
height: auto;
vertical-align: middle;
}
.left-arrow {
width: 75px;
height: 115px;
float: left;
position: relative;
font-family: 'Dosis', sans-serif;
font-size: 75px;
}
.right-arrow {
width: 75px;
height: 115px;
float: right;
position: relative;
font-family: 'Dosis', sans-serif;
font-size: 75px;
}
.image-slider-ul {
text-align: center;
display: block;
white-space: nowrap;
padding: 0;
}
.container-middle {
display: inline-block;
height: 115px;
overflow: hidden;
width: 1188px;
}
<body onload="slider()">
<div>
<ul id="imageSlider" class="image-slider-ul">
<div class="slider-wrapper">
<div class="left-arrow"><</div>
<div class="container-middle">
<li class="slide">
<div class="slide-wrapper">
<div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/1-Number-PNG.png" class="image-style"></div>
</div>
</li>
<li class="slide">
<div class="slide-wrapper">
<div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/2-Number-PNG.png" class="image-style"></div>
</div>
</li>
<li class="slide">
<div class="slide-wrapper">
<div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/3-Number-PNG.png" class="image-style"></div>
</div>
</li>
<li class="slide">
<div class="slide-wrapper">
<div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/4-Number-PNG.png" class="image-style"></div>
</div>
</li>
<li class="slide">
<div class="slide-wrapper">
<div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/5-Number-PNG.png" class="image-style"></div>
</div>
</li>
</div>
<div class="right-arrow">></div>
</div>
</ul>
</div>
</body>
Note:
open snippet in full page, you can understand clearly.
l hope it helps to you.
I am guessing that your problem arises as the first iteration moves elements to right but then does not repeat themselves as there are no elements to the left.
You could try to create a function which will move back all elements to the original position at the elements.lenth loop iteration as you'll be showing the animation to the last element as well.
I'm currently trying to get rid of a bunch of CSS animations and replace with the Velocity.js (along the way building in new animations).
At present I have a grid Item:
<div class="video-thumbnail">
<img src="http://placehold.it/1280x720" class="imgspacer" alt="{$info['title']}" />
<div class="overlay">
<a href="http://bbc.co.uk" class="thumbnail-link">
<div class="title">
<div class="title-display">
<h5 class="SlideIn">Title One</h5>
<h6 class="SlideIn">Title Two</h6>
</div>
</div>
</a>
</div>
</div>
This is controlled through CSS to fade in the .overlay element. What I then want to do is for the h5 & h6 classes to slide up in.
I've written the following code:
$('.overlay').hover(function(){
$(this).find('.SlideIn').velocity("transition.slideUpIn", {stagger: 100, duration: 500});
});
But nothing seems to be happening. I'm quite new to Javascript so I'm presuming I've made a silly mistake somewhere along the line but can't work out what it is.
I've included a full snippet below and it can also be found here
$('.overlay').hover(function(){
$(this).find('.SlideIn').velocity("transition.slideUpIn", {stagger: 100, duration: 500});
});
#thumbnail-array {
width: 100%;
}
.gutter-sizer {
width: 0.03%;
}
.video-thumbnail {
position: relative;
background-color: #777;
overflow: hidden;
line-height: 0px;
margin: 0px;
}
.video {
position: absolute;
margin-top: none;
left: 0;
right: 0;
bottom: 0;
padding: 0;
width: 100%;
height: 100%;
z-index: 100;
display: none;
}
.overlay {
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
z-index: 50;
}
.thumbnail-link {
display: table;
width: 100%;
height: 100%; /*important, forces to 100% height of parent*/
opacity:0;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .25s ease;
background: rgba(0, 0, 0, 0.5);
color: #FFFFFF;
text-decoration: none;
}
.title {
display: table-cell;
vertical-align: middle;
text-align: center;
text-decoration: none;
color: #FFFFFF;
font-family: helvetica;
width: 100%;
line-height: 0px;
}
.title-display {
display: block;
width: 100%;
}
.video-thumbnail:hover .thumbnail-link {
text-decoration: none;
opacity:1;
}
.imgspacer {
width: 100%;
max-width:100%;
}
.picturehelper {
display: inline-block;
}
.video-thumbnail:hover .video {
display: inline;
}
h5 {
display: inline-block;
width: 100%;
font-size: 2em;
margin: 0px;
padding: 0px;
line-height: normal;
}
h6 {
display: inline-block;
width: 100%;
font-size: 0.75em;
letter-spacing: 0.3em;
padding: 0px;
margin: 0px;
font-weight: 100;
line-height: normal;
}
<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.min.js"></script>
<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.ui.js"></script>
<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-thumbnail">
<img src="http://placehold.it/1280x720" class="imgspacer" alt="{$info['title']}" />
<div class="overlay">
<a href="http://bbc.co.uk" class="thumbnail-link">
<div class="title">
<div class="title-display">
<h5 class="SlideIn">Title One</h5>
<h6 class="SlideIn">Title Two</h6>
</div>
</div>
</a>
</div>
</div>
As mentioned by #AldoRomo88 and #jmcgriz there was an issue with the load order of the scripts on the page.
I fixed the issue by simply loading query first up (and hosting the scripts on my own server!)
I'm "required" to make a webpage:
In a page I want a side menu and when clicking each option it shows in the right some content, but without "loading" another page (this would be the easier way, just making a page for each "option" and then just clicking in each button would lead me to that page with the content in the right).
I found this:
<script type="text/javascript">
function toggle(IDS) {
var sel = document.getElementById('pg').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
if (sel[i].id != IDS) { sel[i].style.display = 'none'; }
}
var status = document.getElementById(IDS).style.display;
if (status == 'block') { document.getElementById(IDS).style.display = 'none'; }
else { document.getElementById(IDS).style.display = 'block'; }
return false;
}
</script>
I just added it to the side menu and when each part is clicked it shows what I want :
<div id="sidebar2">
<div>
<h2 class="title">TEXT</h2>
<ul>
<li>TEXT</li>
<li>TEXT2</li>
</ul>
</div>
<div>
And in the content of each "option":
<div id="pg">
<div id="pg0" class="pg">
<h2 class="title">TEXT</h2>
<p><img src="images/test.png" alt=""/></p>
</div>
<div id="pg1" class="pg">
<h2 class="title">TEXT2</h2>
<p><img src="images/test2.png" alt=""/>HERE GOES THE DIV POPUP BUTTON</p>
</div>
I want a button to open a pop up image. It appears toggle() sets everything inside each div to display:none; and when I click only changes to block the outer part. But if I have a div inside, it remains hidden.
I've tried these two codes for the popup:
<div id="test">
<a href="#" class="JesterBox">
<div id="image1"><img src="bg.jpg"></div>
</a>
Image 1
With the corresponding JesterBox definition in CSS:
.JesterBox div {
visibility: hidden;
position: fixed;
top: 5%;
right: 5%;
bottom: 5%;
left: 5%;
z-index: 75;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.JesterBox div:before {
content: '';
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 74;
background-color: rgba(0, 0, 0, 0);
transition: all 0.5s ease-out;
}
.JesterBox div img {
position: relative;
z-index: 77;
max-width: 100%;
max-height: 100%;
margin-left: -9999px;
opacity: 0;
transition-property: all, opacity;
transition-duration: 0.5s, 0.2s;
transition-timing-function: ease-in-out, ease-out;
}
.JesterBox div:target { visibility: visible; }
.JesterBox div:target:before { background-color: rgba(0, 0, 0, 0.7); }
.JesterBox div:target img {
margin-left: 0px;
opacity: 1;
}
And this other:
<div class="box">
<a class="button" href="#popup1">TEXT</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">
TEXT TEXT
</div>
</div>
</div>
With its corresponding CSS:
.box {
width: 20%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
I can't make it work. How could I make, for example, the 2nd option (the div class="box") work inside the div?
<div id="pg1" class="pg">
<h2 class="title">TEXT2</h2>
<p>
<div class="box">
<a class="button" href="#popup1">TEXT</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">
TEXT TEXT
</div>
</div>
</div>