Slide delay for no apparent reason css slider jquery

Slide delay for no apparent reason css slider jquery - javascript

so as per the jsfiddle http://jsfiddle.net/greggy_coding/013481b9/19/
For the purpose of this question the focus is between the first and second slide transition... when you get to the second transition the classes don't get added immediately on the slide they wait for about 1 second the slider area... Can someone explain why as I want to have the classes added immediately on slide load.
p.s I am using getscript from another part of the site to load the script ... this is the script , (slider-animation.js)..
$(function() {
var $slides = $(".slides");
$slides.first().addClass("new-class");
$(".slide-container")
.on("transitionend webkitTransitionEnd oTransitionEnd msTransitionEnd", function(e){
// do something here
$slides.find(".slide-container [class^='add-anim']").removeClass("animat fadeInUpBig bounceInUp");
var $radio = $slides.find(":radio[name='radio-btn']:checked");
and this is the getscript just after the loading of the slider, (.slides) to another page....
$(".tile-area-main").css({width: "720px"}).load("what.html .slides");
$.getScript("js/slider/slider-animations.js");

So I finally found the solution: http://jsfiddle.net/ea55zpe3/
Don't forget the line: overflow: hidden;in body, this gets rid of the scroll bar appearing for a second.
HTML
<div class="tile-area-main" id="tam-content">
<ul class="slides animated bounceInUp">
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container">
<div class="slideM">
<p class="add-anim-up">thisis an area for some text</p>
<p class="add-anim-left">Thisthis is another text area</p>
</div>
<div class="nav">
<label for="img-6" class="prev">‹</label>
<label for="img-2" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-2" />
<li class="slide-container">
<div class="slideM">
<p class="add-anim-up">some more text to have some classes added to</p>
<p class="add-anim-up">some more text with something to do</p>
</div>
<div class="nav">
<label for="img-1" class="prev">‹</label>
<label for="img-3" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-3" />
<li class="slide-container">
<div class="slideM">
<div id="referrals" class="add-anim-up">
<div id="company-title">
<h2>Referrals</h2>
</div>
<p class="add-anim-up">herapist or speech and language therapist) referrals are accepted, music therapy is unfortunately not currently available on the NHS. Schools are able tssions. If you have any questions or enquiries about musitate to contact us. (contact icon)</p>
</div>
<div id="local-links" class="add-anim-up">
<div id="company-title">
<h2>Local Links</h2>
</div>
<br/>
<p class="add-anim-left">MusAbility are always interested in networking and making local links with other businesses, charities and organisations in the North-West. Please send us a message to tell us about yourselves or to arrange to meet for a coffee and a chat (other beverages are accepted!) If you are interested in building a more formal partnership or co-promoting, please get in touch.</p>
</div>
</div>
<div class="nav">
<label for="img-2" class="prev">‹</label>
<label for="img-4" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-4" />
<li class="slide-container">
<div class="slideM">
<img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" />
</div>
<div class="nav">
<label for="img-3" class="prev">‹</label>
<label for="img-5" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-5" />
<li class="slide-container">
<div class="slideM">
<img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
</div>
<div class="nav">
<label for="img-4" class="prev">‹</label>
<label for="img-6" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-6" />
<li class="slide-container">
<div class="slideM">
<img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
</div>
<div class="nav">
<label for="img-5" class="prev">‹</label>
<label for="img-1" class="next">›</label>
</div>
</li>
</ul>
CSS
body {
background-color:#000;
overflow:hidden;
}
.metro .tile-area-main {
position: fixed;
left: 290px;
top: 150px;
display: inline-block;
color: #ffffff;
cursor: pointer;
width: 780px;
height: 450px;
overflow: hidden;
z-index : 3000;
}
.metro .tile-area-main p {
margin: 0;
padding: 0 2.4em 0.6em;
font-size: 1.2em;
line-height: 1.5;
color : #fff;
cursor: pointer;
}
.slides {
padding: 0;
width: 609px;
height: 420px;
display: block;
margin: 0 auto;
position: relative;
}
.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.slides input {
display: none;
}
.slide-container {
display: block;
}
.slideM {
top: 0;
opacity: 0;
width: 609px;
height: 420px;
display: block;
position: absolute;
transform: scale(0);
transition: all .7s ease-in-out;
}
.slideM img {
width: 100%;
height: 100%;
}
.slideM p {
color: #fff;
font-size : 22px;
}
.nav {
z-index:9999;
top:0;
}
.nav .prev {
margin-left:-80px
}
.nav .next {
right: -80px;
}
.nav label {
width: 100px;
height: 100%;
display: none;
position: absolute;
opacity: 1;
z-index: 9999;
cursor: pointer;
transition: opacity .2s;
color: #FFF;
font-size: 56pt;
text-align: center;
line-height: 20px;
font-family:"Varela Round", sans-serif;
text-shadow: 0px 0px 15px rgb(119, 119, 119);
}
.slideM:hover + .nav label {
opacity: 0.5;
}
.nav label:hover {
opacity: 1;
}
input:checked + .slide-container .slideM {
opacity: 1;
transform: scale(1);
transition: opacity 1s ease-in-out;
}
input:checked + .slide-container .nav label {
display: block;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 1000px, 0);
transform: translate3d(0, 1000px, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 1000px, 0);
transform: translate3d(0, 1000px, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
opacity: 0.3;
background-color: rgba(0, 0, 0, 0.3);
}
.new-class .slideM {
border: 2px solid red;
}
JS
$(function () {
var $slides = $(".slides");
$slides.first().addClass("new-class");
$(".add-anim-up").addClass("animated fadeInUpBig bounceInUp");
$(".add-anim-left").addClass("animated fadeInUpBig bounceInUp");
$(".nav").on("click", function () {
$(".add-anim-up").removeClass("animated fadeInUpBig bounceInUp");
$(".add-anim-left").removeClass("animated fadeInUpBig bounceInUp");
if ($(".add-anim-up").css('opacity') == '1') {
$(".add-anim-up").addClass("animated fadeInUpBig bounceInUp");
$(".add-anim-left").addClass("animated fadeInUpBig bounceInUp");
};
});
});

If you switch your removeClass to after the addClass statements, you shouldn't see this behavior (http://jsfiddle.net/013481b9/25/):
var $radio = $slides.find(":radio[name='radio-btn']:checked");
$radio.next(".slide-container").find(".add-anim-up").addClass("animated fadeInUpBig");
$radio.next(".slide-container").find(".add-anim-left").addClass("animated fadeInUpBig");
$slides.find(".slide-container [class^='add-anim']").removeClass("animated fadeInUpBig bounceInUp");
The pause/flicker you were seeing was the classes being removed before the next animation was added.
Another thing I noticed (but that was not causing this specific behavior) was that the transitionend event was being run multiple times (for each change css change to the box), so I added a check for the transform event:
if (e.originalEvent.propertyName == 'transform') {
// do stuff
}
Hopefully that's helpful. Best of luck!

Related

how to save the elements value that is created with js direct| i want to use client side

i want to create a chat and i have been working on it.
here is the code below
<!DOCTYPE html>
<html>
<head>
<title>Aswin's Good Apps</title>
<!-- add icon link -->
<link rel = "icon" href =
"https://goodapps.w3spaces.com/AswinIcon.png"
type = "image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<style>
body{
background-color:pink;
color:purple;
font: 15px Arial, sans-serif;
}
#media screen and (max-width: 300px) {
body{
width: 100%;
}
}
.
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
/* Add a background color when the inputs get focus */
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for all buttons */
button {
background-color: purple;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.cancelbtn {
padding: 14px 20px;
background-color: #8B0000;
}
.cancelbtn, .signupbtn {
float: left;
width: 50%;
}
.signupbtn{
background-color:#013220;
}
.container {
padding: 20px;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: #0000ffff;
padding-top: 50px;
}
.modal-content {
background-color: #ff8c00;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%;
}
hr {
border: 1px solid blue;
margin-bottom: 25px;
}
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: white;
}
.close:hover,
.close:focus {
color: purple;
cursor: pointer;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
a{
font-size:25px;
color:purple;
text-decoration:none;
font-size:50px;
}
h2{
font-size:50px;
background-color: pink;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 12px;
}
#loading {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
text-align: center;
color:green;
background-color:yellow;
top: calc(50% - 30px);
left: calc(50% - 45px);
text-align: center;
font-weight: bold;
}
div.sticky1 {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 12px;
}
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 130px;
height: 130px;
margin: -76px 0 0 -76px;
border: 16px solid greenyellow;
border-radius: 60%;
border-top: 16px solid yellow;
border-radius:60%;
border-bottom: 16px solid yellow;
-webkit-animation: spin 2s linear infinite;
animation: spin 1s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
}
ul{
list-style: none;
}
p{
font-size: 25px;
}
</style>
</head>
<body onload="myFunction()" style="margin:0;">
<div id="body">
<script>
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
document.getElementById('fail').style.display='none';
document.getElementById('goonthetrack').style.display='none';//
let messages = localStorage.getItem('message');
console.log(messages);
document.getElementById('result').innerHTML = messages;
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("loading").style.display="none";
}
//this will filter the results to which they have searched far
function searchresult(){
//this line tells the html tags we have used
var input, filter, ul, li, a, i, txtValue;
//this collects the inputs id
input = document.getElementById("mysearch");
//this tells about the filter
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
function validate()
{
if( document.getElementById("text1").value == "aswin.arulvel#gmail.com"
&& document.getElementById("text2").value == "aswinwebsitepass" )
{
document.getElementById("p1").innerHTML = "Hello Aswin";
document.getElementById('goonthetrack').style.display='block';
document.getElementById("signup2").style.display = "none" ;
document.getElementById("login1").style.display = "none" ;
}
else if( document.getElementById("text1").value == "sathya.arulvel#gmail.com"
&& document.getElementById("text2").value == "sathyasaccount01" )
{
document.getElementById("p1").innerHTML = "Hello Sathya!";
document.getElementById('goonthetrack').style.display='block';
document.getElementById("signup2").style.display = "none" ;
document.getElementById("login1").style.display = "none" ;
}
else if(document.getElementById("text1").value == "arulvel.kumarasamy#gmail.com"
&& document.getElementById("text2").value == "skar$SP50zxcvArulaccount")
{
document.getElementById("p1").innerHTML = "Hello Arulvel!";
document.getElementById('goonthetrack').style.display='block';
document.getElementById("signup2").style.display = "none" ;
document.getElementById("login1").style.display = "none" ;
}
else if(document.getElementById("text1").value == "mine#3478"
&& document.getElementById("text2").value == "mine#3478")
{
document.getElementById("p1").innerHTML = "Hello Shreyan!";
document.getElementById('goonthetrack').style.display='block';
document.getElementById("login1").style.display = "none" ;
document.getElementById("signup2").style.display = "none" ;
}
else
{
alert( "validation failed" );
document.getElementById("fail").style.display = "block" ;
}
}
function addmessaage()
{
let li = document.createElement("li");
let li2 = li.classname = "li2";
let textToChange = document.getElementById('chatmessage').value;
let t= document.createTextNode(textToChange);
li.appendChild(t);
document.getElementById('result').appendChild(li);
document.getElementById('chatmessage').value ="";
var multisave = document.getElementById('result').value;
for (i = 0 ; i < li2.length; i++) {
li2[i].onclick = function() {
var div = this.parentElement;
}
}
localStorage.setItem("message", textToChange);
}
</script>
<a href="goodapps.w3spaces.com/fractionscalc.html">We just put fraction calculer! Explore it!
<div class="container mt-3" style="background-color:pink; text-align:left;">
<div class="sticky">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<p id="p1">Not logged in</p>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" style="font-size:20px;"> <i class="fa fa-home"></i>Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="login1" data-toggle="tab" href="#login" style="font-size:20px;"><i class="fa fa-sign-in"></i>Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" id="signup2" data-toggle="tab" href="#menu3" style="font-size:20px;"> <i class="fa fa-user-plus" aria-hidden="true"></i>Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2" style="font-size:20px;"><i class="fa fa-database" aria-hidden="true"></i>Good Apps</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu4" style="font-size:20px;"><i class="fa fa-comment" aria-hidden="true"></i>Chat</a>
</li>
<iframe style="text-align:right;"width="145" height="102" src="https://goodapps.w3spaces.com/dateaswin.html" style="float:right; text-decoration: none; margin-right: 100px;">
</iframe>
</div>
</li>
</ul>
</div>
<!-- Tab panes -->
<div style="background-color:pink;"class="tab-content">
<div id="home" class="container tab-pane active"><br>
<i class="fa fa-home" style="font-size:50px;"></i><h3><i class="fa-duotone fa-house"></i>HOME</h3>
<img src="https://goodapps.w3spaces.com/AswinIcon.png"/ width="200" height="360px">
<p>Welcome to Aswin.</p>
<a class="nav-link" data-toggle="tab" href="#login" style="font-size:20px;">Login</a>
<a class="nav-link" data-toggle="tab" href="#menu3" style="font-size:20px;"> Sign Up</a>
</div>
<div id="login" class="container tab-pane fade"><br>
<i class="fa fa-sign-in" style="font-size:50px;"> </i></i><h3>Login</h3>
<p>Log in to save your work and have a more personalized experience.</p>
<form action="#home">
<input type="text" style = "width:15%;"class="form-control" placeholder="Username" id="text1" />
<input type="password" class="form-control" placeholder="Password" id="text2" style="width:15%;"/>
<input type="button" value="Login" class="btn btn-info" onclick="javascript:validate()" />
</form>
<div class="alert alert-danger" id="fail">
<p>Incorrect username or password.</p>
</div>
<div class="alert alert-success" id="goonthetrack">
<p>You have succesfuly logged in.</p>
</div>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Good Apps</h3>
<p>These are all good apps and have a lot of helpful info and all that stuff Items that are tagged "Under Development" are not finished and may have issues.</p>
<input type="search" id="mysearch" placeholder="Search Apps..." style="margin-top: 8px;
padding: 14px;
float: right; " onkeyup="searchresult()"
>
<ul id="myUL">
<li> Aswin's Tutorials</li>
<br>
<br>
<li>Aswin's Stories</li>
<br>
<br>
<li>Aswin's Sentences</li>
<br>
<br>
<li>Aswin's Games</li>
<br>
<br>
<li> Aswin's Calculater</li>
<br>
<br>
<li>Aswin's Writer</li>
<br>
<br>
<li>Aswin's Code Editor</li>
<br>
<br>
<li> Aswin's Dictonary</li>
<br>
<br>
<li> Aswin's Galaxy Director (under devolopment)
</li><br>
<br>
<li> Aswin's Star Collage(under devolopment)
</li><br>
<br>
<li> Aswin's Facts(under devolopment)</li>
</ul>
</div>
<div id="menu3" class="container tab-pane fade"><br>
<i class="fa fa-user-plus" style="font-size:50px;" aria-hidden="true"></i><h3>Sign UP</h3>
<form action="#home">
<p>Enter your email:</p>
<input type="email" class="form-control" required>
<p>Set a password:</p>
<input type="password" class="form-control" required>
<p>Repeat Password:</p>
<input type="password" class="form-control" required>
<input type="checkbox" class="form-control" required style="text-align:left;" name="I agree to the terms of service." id="agree" value="I agree to the terms of service."/><p>By signing up, I agree to the terms of service.</p>
<input type="submit" class="form-control" value="Sign Up">
</form>
</div>
<div id="menu4" class="container tab-pane fade"><br>
<i class="fa fa-comment" style="font-size:50px;" aria-hidden="true"></i><h3>chat</h3>
<form action="#home">
<ul id="result" style="font-size:50px; display: inline-block;overflow:auto; height:150px;" class="form-control">
</ul>
<input type="text" id="chatmessage" class="form-control">
<input type="button" value="Send" onclick="addmessaage()" id="save" class="btn btn-success">
</form>
</div>
</div>
<div class="sticky">
</iframe>
</div>
</div>
</div>
<div id="loader"></div><p id="loading">Loading...</p>
</div>
</body>
</html>
i want to save the elements that the js has been created.
i want to use client-side javascript and use localstorage().
issue is i can't save multiple messages.
go to the chat section and make the snippet full screen
please help me

This chain of CSS animation should run infinitely but it doesn't

I have this simple set of CSS animations that I want to run indefinitely. But for some reason, it only runs twice and stops.
Here's a CodePen example.
Here is how I implement it using Jquery (this is also seen on the code)
$('#slide1').one(animationEnd, () => {
$('#slide1').css('display', 'none').removeClass('animate-1')
$('#slide2').css('display', '').addClass('animate-2')
})
$('#slide2').one(animationEnd, () => {
$('#slide2').css('display', 'none').removeClass('animate-2')
$('#slide3').css('display', '').addClass('animate-3')
})
$('#slide3').one(animationEnd, () => {
$('#slide3').css('display', 'none').removeClass('animate-3')
$('#slide1').css('display', '').addClass('animate-1')
})
See that #slide3 should revert to #slide1 for animation. It did, but it stops after 2 cycles.

You have defined counter variable as const, but it needs to be let to allow later reassignment.
let counter = 0;
Also you need to use $.on instead of $.one when binding to the animation end. $.on is used to bind handler to some event (every time it occurres), while $.one is used for one time binding only (run the handler first time the event occurres, but no more that that).
Here is your updated example:
https://codepen.io/anon/pen/WXNOKQ

answer already given and accepted, this is only for infos since the javaScript takes only three boxes into account.
animation-delay can be used to keep animation looping infinitly:
body {
color: #FFFFFF;
background-color: #27292d;
overflow: hidden;
background: #27292d url('bg.jpg') no-repeat fixed center;
font-family: 'Roboto', sans-serif;
}
.slider-container {
position: absolute;
right: 0;
top: 40%;
}
.slider-content {
position: relative;
font-size: 32px;
text-transform: uppercase;
}
.boxes {
float: left;
padding: 10px 20px;
margin: 5px;
position: relative;
}
.sub-box {
clear: both;
margin-left: 60px;
}
.sub-box span {
color: #000000;
padding: 10px 20px;
background-color: #FFFFFF;
}
.box1 {
background-color: #FF4F80;
}
.box2 {
background-color: #4CA2F0;
}
.box3 {
background-color: #53CEC8;
}
#keyframes heartbeat {
0% {
transform: translate(100px, 200px) scale(0)
}
50% {
transform: translate(100px, 200px) scale(0)
}
60% {
transform: translate(-100px) scale(1.5)
}
70% {
transform: translate(-100px) scale(1.5)
}
80% {
transform: translate(-100px) scale(1.5)
}
100% {
transform: translate(100px, -200px) scale(0)
}
}
.slider-single {
position: absolute;
right: 0;
width: 400px;
height: 50px;
margin: 20px;
transform: scale(0);
}
.animate-1 {
transition: 300ms cubic-bezier(.17, .67, .55, 1.43);
animation: ease-out heartbeat 6s -3s infinite;
}
.animate-2 {
transition: 300ms cubic-bezier(.17, .67, .55, 1.43);
animation: ease-out heartbeat 6s -1s infinite;
}
.animate-3 {
transition: 300ms cubic-bezier(.17, .67, .55, 1.43);
animation: ease-out heartbeat 6s 1s infinite;
}
<div class="slider-container">
<div class="slider-content">
<div id='slide1' class="slider-single animate-1">
<div class=''>
<p class='boxes box1'>Pink Header</p>
</div>
<div class='sub-box'>
<span>White Header</span>
</div>
</div>
<div id='slide2' class="slider-single animate-2">
<div>
<p class='boxes box2'>Another Header</p>
</div>
<div class='sub-box'>
<span>subheader</span>
</div>
</div>
<div id='slide3' class="slider-single animate-3">
<div>
<p class='boxes box3'>10 more to go</p>
</div>
</div>
</div>
</div>
<div class="slider-container">
<div class="slider-content">
<div id='slide1' class="slider-single animate-1">
<div class=''>
<p class='boxes box1'>Pink Header</p>
</div>
<div class='sub-box'>
<span>White Header</span>
</div>
</div>
<div id='slide2' class="slider-single" style='display:none;'>
<div>
<p class='boxes box2'>Another Header</p>
</div>
<div class='sub-box'>
<span>subheader</span>
</div>
</div>
<div id='slide3' class="slider-single" style='display:none;'>
<div>
<p class='boxes box3'>10 more to go</p>
</div>
</div>
</div>
</div>

isotope with lightGallery filtering with multiple galleries

I am currently working on a portfolio for an artist. I am using Masonry with Isotope to filter for specific kinds of paintigs. When the items are being clicked, it opens lightGallery: http://sachinchoolur.github.io/lightGallery/
Everything works fine so far, the problem is the following:
What I want to achieve is that, if you filter for nature paintings for example, only the nature paintings will be shown and if you click on one of the items it opens the gallery. But the problem is, that at the moment ALL images of ALL categories are been shown in the gallery of nature. So if you click through them, you also get images of the category 'people' for example.
I guess the aim there is to give the different categories different 'galleries'. But if the filter 'show all' is clicked, the user should also be able to click through all the images of all categories, so that the gallery is not ending when the category of the item being clicked 'ends'.
As Im not that good with javascript, I hope you may be able to help me a little bit and that you understand my problem ..
The Code
HTML MARKUP
<div class="categories">
<button data-filter="*">Alle</button>
<button data-filter=".ship">Schiff</button>
<button data-filter=".copop">CoPop</button>
<button data-filter=".grey_bg">grey bg</button>
</div>
<div class="grid" id="lightgallery">
<a class="grid__item copop" href="app/assets/img/co-pop.jpg">
<img class="grid__item__img" src="app/assets/img/co-pop.jpg">
</a>
<a class="grid__item ship" href="app/assets/img/ship.jpg">
<img class="grid__item__img" src="app/assets/img/ship.jpg">
</a>
<a class="grid__item copop" href="app/assets/img/co-pop.jpg">
<img class="grid__item__img" src="app/assets/img/co-pop.jpg">
</a>
<a class="grid__item ship" href="app/assets/img/ship.jpg">
<img class="grid__item__img" src="app/assets/img/ship.jpg">
</a>
<a class="grid__item copop" href="app/assets/img/co-pop.jpg">
<img class="grid__item__img" src="app/assets/img/co-pop.jpg">
</a>
<a class="grid__item ship" href="app/assets/img/ship.jpg">
<img class="grid__item__img" src="app/assets/img/ship.jpg">
</a>
</div>
</div>
JS initialize lightgallery
<script type="text/javascript">
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
</script>
JS isotope
(function($) {
$('#wrap').imagesLoaded(function() {
$('.categories').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
});
var $grid = $('.grid').isotope({
itemSelector: '.grid__item',
percentPosition: true,
masonry: {
columnWidth: '.grid__item'
}
})
});
So I guess I need to create several galleries and say in the code that only the items of that activated data-filter gallery will be shown when clicked. But maybe that would also work without creating extra multiple galleries? Because then the problem would maybe be, that when all items are active, only the ones in that specific gallery of the selected item will be shown in the lightGallery.
Thank you for your help in advance!

kindly check this pen to get what you need
$(document).ready(function() {
var $gallery = $('#gallery');
var $boxes = $('.revGallery-anchor');
$boxes.hide();
$gallery.imagesLoaded( {background: true}, function() {
$boxes.fadeIn();
$gallery.isotope({
// options
sortBy : 'original-order',
layoutMode: 'fitRows',
itemSelector: '.revGallery-anchor',
stagger: 30,
});
});
$('button').on( 'click', function() {
var filterValue = $(this).attr('data-filter');
$('#gallery').isotope({ filter: filterValue });
$gallery.data('lightGallery').destroy(true);
$gallery.lightGallery({
selector: filterValue.replace('*','')
});
});
});
$(document).ready(function() {
$("#gallery").lightGallery({
});
});
//button active mode
$('.button').click(function(){
$('.button').removeClass('is-checked');
$(this).addClass('is-checked');
});
//CSS Gram Filters on Mouse enter
$("#gallery a .nak-gallery-poster").addClass("inkwell");
$("#gallery a").on({
mouseenter : function() {
$(this).find(".nak-gallery-poster").removeClass("inkwell").addClass("walden");
},
mouseleave : function() {
$(this).find(".nak-gallery-poster").removeClass("walden").addClass("inkwell");
}
});
.revGallery-anchor, .gal-overlay, .nak-gallery-poster{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.revGallery-anchor{
overflow: hidden;
position: relative;
width: calc(100% / 5);
display: block;
float: left;
border: 5px solid #e9e9e9;
}
.gal-overlay{
display: block;
width: 100%;
height: 100%;
background: rgba(27,27,27, 0.6);
position: absolute;
top: 0;
left: 0;
transition: background .4s ease;
-webkit-transition: background .4s ease;
}
.revGallery-anchor:hover .gal-overlay{
background: rgba(27,27,27, 0);
}
.nak-gallery {
display: block;
width: 100%;
position: relative;
margin-top: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.nak-gallery-poster{
padding-bottom:100%;
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transition: all .4s ease;
-webkit-transition: all .4s ease;
}
.revGallery-anchor:hover .nak-gallery-poster{
transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
}
.img-responsive{
display:none;
}
.button{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
width: 200px;
height: 48px;
border: 1px solid rgba(0,169,157,1);
background-color: rgba(0,169,157,1);
border-radius: 2px;
color: #fff;
letter-spacing: 2px;
}
.button:hover {
background-color: #363636;
text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
color: #fff;
}
.button:active,
.button.is-checked {
background-color: #28F;
}
.button.is-checked {
color: white;
text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}
.button:active {
box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}
.revGallery-anchor-width1{
width: 40%
}
.revGallery-anchor-width2{
width: 30%
}
.revGallery-anchor-width3{
width: 20%
}
.nak-gallery-height1{
padding-bottom: 400px
}
.nak-gallery-height2{
padding-bottom: 300px
}
.nak-gallery-height3{
padding-bottom: 200px
}
.preloader{
display: none;
}
.preloaderStyle{
background: red;
width: 100%;
height: 100px;
}
<button type="button" class="button is-checked" data-filter="">ALL</button>
<button type="button" class="button" data-filter=".design">DESIGN</button>
<button type="button" class="button" data-filter=".branding">BRANDING</button>
<div class="nak-gallery nlg1" id="gallery">
<a href="http://unsplash.com/photos/GYNxcQvBNzA/download" class="revGallery-anchor design">
<img class="img-responsive" src="http://unsplash.com/photos/GYNxcQvBNzA/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/GYNxcQvBNzA/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a>
<a href="https://www.youtube.com/watch?v=Io0fBr1XBUA" class="revGallery-anchor branding">
<img class="img-responsive" src="http://unsplash.com/photos/ssAcdlJRsI4/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/ssAcdlJRsI4/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a>
<a href="http://unsplash.com/photos/EKIyHUrUHWU/download" class="revGallery-anchor design">
<img class="img-responsive" src="http://unsplash.com/photos/EKIyHUrUHWU/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/EKIyHUrUHWU/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a>
<a href="http://unsplash.com/photos/CFi7_hCXecU/download" class="revGallery-anchor branding">
<img class="img-responsive" src="http://unsplash.com/photos/CFi7_hCXecU/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/CFi7_hCXecU/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a>
<a href="http://unsplash.com/photos/cFplR9ZGnAk/download" class="revGallery-anchor design">
<img class="img-responsive" src="http://unsplash.com/photos/cFplR9ZGnAk/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/cFplR9ZGnAk/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a>
</div>
https://codepen.io/kannan3024/pen/YWoQgq

slidetoggle in pure Javascript

As you might see I have fixed a kind of text box that will pop up when someone is hovering over that image, but honestly I want a slide-up effect that gone up slowly. Must be completely in pure JavaScript (no jQuery please!). Anyone knows how I can do that.
function show(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "visible";
}
}
function hide(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "hidden";
}
}
.text1 {
position: relative;
bottom: 28px;
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
visibility: hidden;
}
.text2 {
position: relative;
bottom: 28px;
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
visibility: hidden;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.bbc.com" target="_blank" class="image" onmouseover="show('text1')" onmouseout="hide('text1')">
<img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
<div class="text1">AAA</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.cnn.com" target="_blank" class="image" onmouseover="show('text2')" onmouseout="hide('text2')">
<img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
<div class="text2">BBB</div>
</a>
</div>
</div>
</div>

Here is a version of it that's totally javascript free, just using CSS. I'm going to edit this soon with a slight javascript addition (this current version requires you to have a fixed size).
.caption {
height: 250px;
width: 355px;
overflow: hidden;
}
.caption-image {
height: 100%;
}
.caption-text {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
transform: translateY(-100%);
}
<div class="caption">
<img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
<div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>
<div class="caption">
<img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
<div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>
Version with JS sizing:
Basically the same idea, but when the page is loading it sets certain styles so the images can be what ever size you like.
var captionSel = document.querySelectorAll('.caption');
for (let i = 0; i < captionSel.length; i++) {
let image = captionSel[i].querySelector(":scope > .caption-image");
let text = captionSel[i].querySelector(":scope > .caption-text");
text.style.width = image.clientWidth - 20 + "px";
captionSel[i].style.height = image.clientHeight + "px";
}
.caption {
overflow: hidden;
}
.caption-text {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
transform: translateY(-100%);
}
<div class="caption">
<img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
<div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>
<div class="caption">
<img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
<div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>

I'll give it to you even better: No javascript at all!
This is possible with pure CSS:
.tumb-wrapper {
position: relative;
overflow: hidden;
}
.text {
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
position: absolute;
bottom: -30px;
transition: 300ms;
left: 0;
}
.tumb-wrapper:hover .text {
bottom: 28px;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.bbc.com" target="_blank" class="image">
<img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
<div class="text">AAA</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.cnn.com" target="_blank" class="image">
<img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
<div class="text">BBB</div>
</a>
</div>
</div>
</div>
The transition css property animates whatever change you make. This way, when you hover over the .tumb-wrapper div, the .text div will slide up.
You should note however, that ancient IE versions won't be able to use this

I usually do this with only CSS.
Just save the first and second image right next to each other on one file... then you use css to change the position of the background image. To make things nicer i add a css-animation to the movement of the background image.
Example of my code:
<div id="thumb_Wrapper">
<div class="_Thumb">
<img src="images/Thumb.jpg" class="Animate_left">
</div>
</div>
The CSS
#_Container{position:absolute; bottom -60px; right:2px; width:626px; height:100px;}
._Thumb{position:relative; margin-right:4px; width:100px; height:80px; display:block; float:left; background:#EFEFEF; overflow:hidden;}
._Thumb > img{position:absolute; left:0; height:100%; background-size:cover; background-position:center;}
._Thumb > img:hover{left:-18px; cursor:pointer;}
CSS Animation
.Animate_left{transition:left .3s;}
Now all you have to do is swap out the image.
onHover - the image in the thumbnail will smoothly slide to the left; revealing the rest of the image/ showing the other image.
You can set how far to the left(or right) you want the thumb-image to first appear by adjusting the value of 'left' in the ._Thumb class.
You can set how far the image slides on hover by adjusting the img:hover{left:-18px} to what ever you like; instead of 18px.

Hide() with fadeIn()/fadeOut()

I'm trying to do a fade in and fade out jquery. However, I'm having some issues.
I hide the div when the page loads, but when I hover over it to fade it in, it fades in for a second then disappears. I then have to hover out then hover back in.
My Jquery:
$(document).ready(function(){
$('#hidedsl6').hide();
$('#showdsl6').hover(function(){
$('#hidedsl6').fadeIn();
}, function(){
$('#hidedsl6').fadeOut();
});
$('#showfttn10').hover(function(){
});
$('#showfttn15').hover(function(){
});
$('#showfttn25').hover(function(){
});
$('#showfttn50').hover(function(){
});
});
My HTML:
<h3 class="DSLLocation" id="showdsl6">DSL 6</h3>
<button class="btn btnblue" id="hidedsl6" type="button">Order Now!</button>

Just add preventDefault to stop the back and forth fade
$(document).ready(function(){
$('#hidedsl6').hide();
$('#showdsl6').hover(function(){
$('#hidedsl6').fadeIn();
}, function(e){
e.preventDefault();
$('#hidedsl6').fadeOut();
});
$('#showfttn10').hover(function(){
});
$('#showfttn15').hover(function(){
});
$('#showfttn25').hover(function(){
});
$('#showfttn50').hover(function(){
});
});

Why use jQuery when it can be done with CSS
.products{
display:table;
table-layout:fixed;
width: 100%;
}
.option{
display: table-cell;
position: relative;
text-align: center;
padding: 24px;
background: #C0FFEE;
}
.option button{
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: 0;
cursor: pointer;
background: #1CEA6E;
transition: 0.3s; -webkit-transition: 0.3s;
opacity: 0;
visibility: hidden;
}
.option:hover button{
opacity: 1;
visibility: visible;
}
<div class="products">
<div class="option">
<h3>DSL 6</h3>
<button>ORDER NOW!</button>
</div>
<div class="option">
<h3>DSL 30</h3>
<button>ORDER NOW!</button>
</div>
<div class="option">
<h3>SUPER DSL 50</h3>
<button>ORDER NOW!</button>
</div>
</div>

$(document).ready(function(){
$('#hidedsl6').hide();
$('#showdsl6').hover(function(){
$('#hidedsl6').fadeIn();});
});

Develop Reference

JavaScript is the programming language of the Web.

Slide delay for no apparent reason css slider jquery - javascript

Related

how to save the elements value that is created with js direct| i want to use client side

This chain of CSS animation should run infinitely but it doesn't

isotope with lightGallery filtering with multiple galleries

slidetoggle in pure Javascript

Hide() with fadeIn()/fadeOut()

Categories

Resources