Develop Reference

How to set infinity time for slotmachine jquery and stop random after I click button again

Hello I want to set reeling_time to infinity and stop random after I click generate button again
var reeling_time = 500;
$('#gen').click(function() {
$('.reel-container:first').slotMachine(randGen());
});
Here is my fiddle : https://jsfiddle.net/xmenzaa/mrs93b58/24/

you can try this
....
var continue_spinning = true;
....
var stopSpinning = function() {
if (continue_spinning) {
setTimeout(stopSpinning, my_timer);
return
}
....
$('#gen').click(function() {
if (continue_spinning) {
continue_spinning = false;
$('#gen').html('Start');
}
else {
$('.reel-container:first').slotMachine(randGen());
continue_spinning = true;
$('#gen').html('Stop');
}
});
Demo:
var reeling_time = 500;
var stop_spinning_time_difference = 350;
var start_spinning_time = 0;
var currency_symbol = "$";
var continue_spinning = true;
$.fn.slotMachine = function(my_number) {
var $parentSlot = this;
var hidden_reels_html = '';
var hidden_reels_array = [];
var numberFormat = function number_format(number) {
number = (number + '');
return number;
}
for (var $j = 0; $j <= 9; $j++) {
hidden_reels_array[$j] = "";
for (var $i = 0; $i <= 9; $i++) {
hidden_reels_array[$j] += '<div class="reel-symbol' + ($i == 0 ? ' reel-loop' : '') + '">' + (($j + $i) % 10) + '</div>';
}
}
var transformNumberToArrayPlusDollar = function(my_number) {
var my_scale = parseInt(my_number, 10) > 999 ? 0 : 2;
my_number = numberFormat(my_number, my_scale, ".", ",");
var my_number_array = my_number.split('');
// my_number_array.unshift(currency_symbol);
return my_number_array;
};
//Effect for the reel to go up and then down like it is pushed to spin
var effectBeforeSpin = function() {
$parentSlot.find('.main-reel-symbol').removeClass('reel-stop').addClass('reel-begin');
};
var slotMachine = function(my_number) {
var my_number_array = transformNumberToArrayPlusDollar(my_number);
var reels_html = '';
for (var $i = 0; $i < my_number_array.length; $i++) {
reels_html += '<div class="reel">' + hidden_reels_array[($i % 10)] + '</div>';
}
effectBeforeSpin();
var startSpinning = function() {
$parentSlot.html(reels_html);
var my_timer = reeling_time;
$.each(my_number_array, function(my_index, my_value) {
var next_value = /^[0-9]$/.test(my_value) ? (parseInt(my_value, 10) + 1) % 10 : "0";
var stopSpinning = function() {
if (continue_spinning) {
setTimeout(stopSpinning, my_timer);
return
}
$parentSlot.find('.reel:eq(' + my_index + ')').html("<div class='reel-symbol main-reel-symbol reel-stop'>" + my_value + "</div>")
.append("<div class='reel-symbol'>" + next_value + "</div>");
};
setTimeout(stopSpinning, my_timer);
my_timer += stop_spinning_time_difference;
});
};
setTimeout(startSpinning, start_spinning_time);
};
slotMachine(my_number);
return this;
};
function randGen() {
var randNum = (Math.floor(Math.random() * 999) + 1).toString()
if (randNum.toString().length == 3) {
return randNum;
}
else if (randNum.toString().length == 2) {
return "0" + randNum;
}
else if (randNum.toString().length == 1) {
return "00" + randNum;
}
}
$('.reel-container:first').slotMachine('00' + 1).toString();
if (continue_spinning) {
$('#gen').html('Stop');
}
$('#gen').click(function() {
if (continue_spinning) {
continue_spinning = false;
$('#gen').html('Start');
//$('#gen').attr('disabled', true)
}
else {
$('.reel-container:first').slotMachine(randGen());
continue_spinning = true;
$('#gen').html('Stop');
}
});
#-moz-keyframes reel-loop {
from {
margin-top: 0px;
}
to {
margin-top: -480px;
}
}
#-webkit-keyframes reel-loop {
from {
margin-top: 0px;
}
to {
margin-top: -480px;
}
}
#keyframes reel-loop {
from {
margin-top: 0px;
}
to {
margin-top: -480px;
}
}
#-moz-keyframes reel-begin {
0% {
margin-top: 0px;
}
75% {
margin-top: -60px;
}
100% {
margin-top: 20px;
}
}
#-webkit-keyframes reel-begin {
0% {
margin-top: 0px;
}
75% {
margin-top: -60px;
}
100% {
margin-top: 20px;
}
}
#keyframes reel-begin {
0% {
margin-top: 0px;
}
75% {
margin-top: -60px;
}
100% {
margin-top: 20px;
}
}
#-moz-keyframes reel-stop {
from {
top: -50px;
}
to {
top: 0px;
}
}
#-webkit-keyframes reel-stop {
from {
top: -50px;
}
to {
top: 0px;
}
}
#keyframes reel-stop {
from {
top: -50px;
}
to {
top: 0px;
}
}
.main-container {
margin: 0 auto;
}
.reel {
width: 70px;
height: 90px;
background: #DAC290;
border: 4px solid #C7A365;
float: left;
margin-right: 10px;
}
.reel-symbol {
color: black;
font-size: 60px;
line-height: 74px;
height: 74px;
vertical-align: middle;
text-align: center;
overflow: hidden;
}
.reel-container {
height: 90px;
overflow: hidden;
position: relative;
}
.reel-loop {
-moz-animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-moz-animation-name: reel-loop;
-webkit-animation-name: reel-loop;
animation-name: reel-loop;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-moz-animation-direction: reverse;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.reel-stop {
-moz-animation-duration: 0.15s;
-webkit-animation-duration: 0.15s;
animation-duration: 0.15s;
-moz-animation-name: reel-stop;
-webkit-animation-name: reel-stop;
animation-name: reel-stop;
-moz-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
.reel-begin {
-moz-animation-duration: 0.35s;
-webkit-animation-duration: 0.35s;
animation-duration: 0.35s;
-moz-animation-name: reel-begin;
-webkit-animation-name: reel-begin;
animation-name: reel-begin;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
<!-- Range -->
<link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<div class="bg-img text-center">
<div class='main-container'>
<div class='reel-container'></div>
</div>
<button id="gen">Gen</button>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src="js/range.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>

animationend event not firing

I am trying to add an animationend event to an element, but the event doesn't get fired. What am I doing wrong, and how can I fix it?
JSFiddle
var btn = document.getElementById('btn');
var elem = document.getElementById('elem');
var timeOutFunc;
btn.addEventListener('click', function() {
elem.classList.add('show');
clearTimeout(timeOutFunc);
timeOutFunc = setTimeout(function() {
elem.classList.remove('show')
}, 1000);
});
elem.addEventListener('animationend', function(e) {
console.log('animation ended');
});
#elem {
background-color: orange;
width: 100px;
height: 100px;
opacity: 0;
transition: opacity 500ms ease;
}
#elem.show {
opacity: 1;
transition: none;
}
<button id="btn">Press Me</button>
<div id="elem"></div>

There are two separate animating events.
animationend
transitionend
When using the css transition use transitionend, and when using #keyframes/animation, use animationend.

You need to modify the animation style property of the element this is your updated example at Jsfiddle
#elem {
background-color: orange;
width: 100px;
height: 100px;
opacity: 0;
transition: opacity 500ms ease;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myopacity {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes myopacity {
0% { opacity: 0; }
100% { opacity: 1; }
}
#elem.show {
WebkitAnimation : myopacity 1s 1;
animation : myopacity 1s 1;
}
var btn = document.getElementById('btn');
var elem = document.getElementById('elem');
var timeOutFunc;
btn.addEventListener('click', function() {
elem.classList.add('show');
/* clearTimeout(timeOutFunc);
timeOutFunc = setTimeout(function() {
elem.classList.remove('show')
}, 1000);*/
});
elem.addEventListener('animationend', function(e) {
console.log('');
alert('animation ended');
elem.classList.remove('show')
});
<button id="btn">Press Me</button>
<div id="elem"></div>

Adding fade-in to javascript timer

In my html body I am using a javascript that writes and changes a line of text in my div, with ID "moto", every 5 seconds.
var text = ["TEXT 1","TEXT 2","TEXT 3","TEXT 4"];
var counter = 0;
var elem = document.getElementById("moto");
ChangeFunction();
setInterval(ChangeFunction, 5000);
function ChangeFunction() {
elem.innerHTML = text[counter];
counter++;
if(counter >= text.length) { counter = 0; }
}
#moto{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
<div id="moto"></div>
Do I need to apply some java fade-in fade-out? I would rather use CSS...

You can use jquery to do this easily as below
var text = ["TEXT 1","TEXT 2","TEXT 3","TEXT 4"];
var counter = 0;
var elem = document.getElementById("moto");
ChangeFunction();
setInterval(ChangeFunction, 5000);
function ChangeFunction() {
var moto = text[counter++];
$(elem).fadeOut('slow', function() {
$(elem).html(moto);
$(elem).fadeIn('slow');
});
if(counter >= text.length) { counter = 0; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="moto"></div>

You don't need JavaScript at all. Here's a pure CSS implementation:
#keyframes fade {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
#moto {
position: relative;
}
#moto div {
position: absolute;
top: 0;
left: 0;
opacity: 0;
animation: fade 4s 0s infinite alternate-reverse;
}
#moto :nth-child(1) {
animation-delay: -2s;
}
#moto :nth-child(2) {
animation-delay: 0s;
}
#moto :nth-child(3) {
animation-delay: 2s;
}
#moto :nth-child(4) {
animation-delay: 4s;
}
<div id="moto">
<div>TEXT 1</div>
<div>TEXT 2</div>
<div>TEXT 3</div>
<div>TEXT 4</div>
</div>

CSS slide in from left animation

I'm working on a slideshow and it works, except for the animations. The animation for sliding out works fine but the animation for sliding in from the left does not. The left margin gets set to 0% but there is no animation, even though it is set to -100% at first.
Javascript:
var images = [
'http://i.imgur.com/ByyUANz.png',
'http://i.imgur.com/S5FfOOB.png',
'http://i.imgur.com/EuefPdv.png',
'http://i.imgur.com/Ucvm4pJ.png',
'http://i.imgur.com/pK5WBHN.png',
'http://i.imgur.com/nuOLVpy.png'
]
function slideShow(startAt){
var holder = document.getElementById("currentImage");
var img = document.createElement("img");
img.src = images[startAt];
holder.appendChild(img);
nextPicture(startAt, img);
}
function nextPicture(current, currentElement){
var holder = document.getElementById("currentImage");
setTimeout(function(){
currentElement.className = "translateLeft";
current += 1;
var img = document.createElement("img");
img.src = images[current];
img.style.marginLeft = "-100%";
holder.appendChild(img);
img.className = "translateIn";
if (current == 5){
current = -1;
nextPicture(current, img);
} else {
nextPicture(current, img);
}
}, 5000)
}
slideShow(0);
CSS:
.translateLeft {
transition: 3s;
margin-left: 100% !important;
}
.translateIn {
transition: 3s;
margin-left: 0% !important;
}

Here is a solution for you.
https://jsfiddle.net/smaefwrp/2/
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html,
body,
img {
position: absolute;
top:0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
overflow-x: hidden;
}
#currentImage {
height: 100%;
width: 1920px;
}
.translateOrigin {
transition: none;
transform: translate3d(-100%, 0, 0) !important;
}
.translateLeft {
transition: transform 3s;
transform: translate3d(100%, 0, 0) !important;
}
.translateIn {
transition: transform 3s;
transform: translate3d(0, 0, 0) !important;
}
</style>
</head>
<body>
<div id="currentImage">
</div>
<div id="buttons">
</div>
<script type="text/javascript">
var images = [
'http://i.imgur.com/ByyUANz.png',
'http://i.imgur.com/S5FfOOB.png',
'http://i.imgur.com/EuefPdv.png',
'http://i.imgur.com/Ucvm4pJ.png',
'http://i.imgur.com/pK5WBHN.png',
'http://i.imgur.com/nuOLVpy.png'
];
var imageEle = [];
var currImage = 0;
var holder = document.getElementById("currentImage");
function imagesPreload() {
for (var i = 0; i < images.length; i++) {
var img = new Image();
img.src = images[i];
img.className = "translateOrigin";
holder.appendChild(img);
imageEle.push(img);
}
}
imagesPreload();
document.onkeydown = function(event){
if(event.keyCode === 13) {
nextPicture();
}
};
function slideShow(startAt) {
var holder = document.getElementById("currentImage");
imageEle[currImage].className = "translateIn";
nextPicture();
}
function nextPicture() {
setTimeout(function () {
var img = imageEle[currImage];
img.addEventListener("transitionend", transitionEnd, false);
img.className = "translateLeft";
if (currImage == 5) {
currImage = 0;
} else {
currImage++;
}
imageEle[currImage].className = "translateIn";
/* Reset the image to original position */
function transitionEnd() {
img.className = "translateOrigin";
img.removeEventListener("transitionend", transitionEnd, false);
nextPicture();
}
}, 5000)
}
slideShow(currImage);
</script>
</body>
</html>

To create a nice slideshow I suggest to use css transform property rather than the margin. The idea is to create the placeholder element currentImage with relative position, and then create all images inside it with position set to absolute. Then by default all images are translated out of the placeholder element, and adding/removing classes show and hide you can place them inside the view and then outside of it, like this:
var images = [
'http://i.imgur.com/ByyUANz.png',
'http://i.imgur.com/S5FfOOB.png',
'http://i.imgur.com/EuefPdv.png',
'http://i.imgur.com/Ucvm4pJ.png',
'http://i.imgur.com/pK5WBHN.png',
'http://i.imgur.com/nuOLVpy.png'
];
// Get the holder
var holder = document.getElementById("currentImage");
// Create the images
images.forEach(function(url) {
var img = document.createElement("img");
img.src = url;
holder.appendChild(img);
});
// Image counter
var counter = 0;
// Slide show interval
var slideshow = setInterval(function() {
// When we reach the end of images we shut down the slide show
// or you can reset the counter to start over
if(counter === images.length) {
clearInterval(slideshow);
return;
}
// Get all images
var nodes = holder.getElementsByTagName("img");
// Hide previous image
if(nodes[counter - 1]) {
nodes[counter - 1].className = "hide";
}
// Show next image
nodes[counter].className = "show";
counter++;
}, 2500);
#currentImage {
background: gray;
width: 300px;
height: 300px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#currentImage img {
width: 100%;
position: absolute;
transform: translateX(-110%);
-webkit-transition: -webkit-transform 1.0s ease 0s;
-moz-transition: -moz-transform 1.0s ease 0s;
-o-transition: -o-transform 1.0s ease 0s;
transition: transform 1.0s ease 0s;
}
#currentImage img.show {
transform: translateX(0%);
}
#currentImage img.hide {
transform: translateX(110%);
}
<div id="currentImage">
</div>

You can try something like:
// HTML
<div id="currentImage">
<div class="window">
<div class="image-list">
<div>
<img src="http://i.imgur.com/ByyUANz.png" />
</div>
<div>
<img src="http://i.imgur.com/S5FfOOB.png" />
</div>
<div>
<img src="http://i.imgur.com/EuefPdv.png" />
</div>
<div>
<img src="http://i.imgur.com/Ucvm4pJ.png" />
</div>
<div>
<img src="http://i.imgur.com/pK5WBHN.png" />
</div>
<div>
<img src="http://i.imgur.com/nuOLVpy.png" />
</div>
</div>
</div>
</div>
And CSS
// CSS
img {
height: 50px;
width: 50px
}
.window {
position: absolute;
height: 50px;
width: 50px;
border: 2px solid red;
overflow: hidden
}
div {
display: inline-block
}
.image-list {
list-style-type: none;
display: inline-block;
padding-left: 0px;
margin: 0px;
width: 350px;
animation: slidingli 30s ;
}
#keyframes slidingli {
0% {
transform: translateX(0px)
}
16% {
transform: translateX(-50px)
}
32% {
transform: translateX(-100px)
}
48% {
transform: translateX(-150px)
}
64% {
transform: translateX(-200px)
}
80% {
transform: translateX(-250px)
}
100% {
transform: translateX(-300px)
}
}
Checkout this fiddle. Also there are many libraries out there which provide what need For example: http://fotorama.io/customize/autoplay/

pull variable from css with js

I'm trying to get an action to occur when one clicks on an image, however only when the image is at full opacity
function func() {
if ($('.Absolute-Center').css('opacity') == 1) {
alert("it works");
}
}
.Absolute-Center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
img.Absolute-Center {
opacity: 0.05;
filter: alpha(opacity=5);
-webkit-transition: opacity 20s linear;
}
img.Absolute-Center:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 20s linear;
}
<img src="picture.png" class="Absolute-Center" onclick="func()" />

Try using transitionend event , .addClass() , .removeClass() ; removing :hover from css
function func(e) {
if ($(this).css("opacity") == 1) {
alert("it works");
$(this).removeClass("clicked")
}
};
$(".Absolute-Center").on({
"click": function() {
$(this).addClass("clicked")
},
"transitionend": func
})
.Absolute-Center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
img.Absolute-Center {
opacity: 0.05;
filter: alpha(opacity=5);
transition: opacity 20s linear;
}
img.Absolute-Center.clicked {
opacity: 1;
filter: alpha(opacity=100);
transition: opacity 20s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<img src="http://lorempixel.com/50/50" class="Absolute-Center" />

This should help improve understanding and should be easily adaptable to do exactly what you want.
$(function() {
$('img').on('click', function() {
var alpha = $(this).css('opacity');
$("#msg").text((alpha == 1) ? "full" : alpha);
}).on('transitionend', function() {
var alpha = $(this).css('opacity');
if (alpha == 1) {
$("#msg2").fadeIn().delay(700).fadeOut();
} else {
$("#msg3").fadeIn().delay(700).fadeOut();
}
});
});
img {
border: 1px solid #000;
}
img {
opacity: 0.05;
filter: alpha(opacity=5);
-webkit-transition: opacity 5s linear;
}
img:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 5s linear;
}
#msg2, #msg3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="picture.png" />
<div>Last clicked at opacity: <span id="msg"></span>
</div>
<div id="msg2">End of fade-IN transition</div>
<div id="msg3">End of fade-OUT transition</div>