CSS animation in firefox not working - javascript

I'm having problem with getting CSS animation work properly in firefox browser. I've tried to use the "moz" - prefix, without success.The animation works as expected in chrome, see code below.
var ss = document.styleSheets;
var rec;
var bg = document.getElementById('bg');
function getRule (name) {
var indexArr = [];
for(var i = 0; i<ss[0].cssRules.length; i++){
if(ss[0].cssRules[i].name !== "undefined" && ss[0].cssRules[i].name === name){
indexArr.push(i);
}
}
return indexArr;
}
function swapNode(node){
tmp = node.cloneNode(false);
node.parentNode.removeChild(node);
rec = tmp;
bg.appendChild(rec);
}
function modifyRule(element, name, val){
var browser = checkBrowser();
// if(element.style.webkitAnimationPlayState === "paused")
// element.style.webkitAnimationPlayState = "running";
var indexes = getRule(name);
var rule = [];
if(indexes.length){
element.style.WebkitAnimationName = "none";
element.style.WebkitAnimationName = name;
element.style.mozAnimationName = "none";
element.style.mozAnimationName = name;
element.style.AnimationName = "none";
element.style.AnimationName = name;
swapNode(element);
if(name === "translate"){
rule[0] = "#-"+browser+"-keyframes "+name+" {"+
"0% {-"+browser+"-transform: "+name+"(0px);}"+
"50% {-"+browser+"-transform: "+name+"("+val+");}"+
"100% {-"+browser+"-transform: "+name+"(0px);}}";
rule[1] = "#keyframes "+name+" {"+
"0% {transform: "+name+"(0px);}"+
"50% {transform: "+name+"("+val+");}"+
"100% {transform: "+name+"(0px);}}";
}
else{
rule[0] = "#-"+browser+"-keyframes "+name+" {"+
"100% {-"+browser+"-transform: "+name+"("+val+");}}";
rule[1] = "#keyframes "+name+" {"+
"100% {transform: "+name+"("+val+");}}";
}
for(var i = 0; i<indexes.length; i++){
console.log(rule[i]);
ss[0].deleteRule(indexes[i]);
ss[0].insertRule(rule[i], indexes[i]);
}
}
else{
console.log('err');
}
}
function stopAnim (element) {
element.style.WebkitAnimationPlayState = "paused";
}
function checkBrowser () {
if(navigator.userAgent.indexOf("Chrome") != -1 )
{
return "webkit";
}
else if(navigator.userAgent.indexOf("Firefox") != -1 )
{
return "moz";
}
}
.container {
position: relative;
left: 40px;
top: 50px;
width: 240px;
height: 150px;
}
#bg {
width: 100%;
height: 90px;
background-color: #f3f3ff;
border: solid;
border-width: 1px;
}
#recBlue{
height: 50px;
width: 50px;
background-color: #aaaaff;
border: solid;
border-width: 3px;
position: absolute;
left: 35px;
top: 20px;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: "bounce";
-webkit-animation-fill-mode: forwards;
-moz-animation-duration: 2s;
-moz-animation-timing-function: "bounce";
-moz-animation-fill-mode: forwards;
}
#recRed{
height: 50px;
width: 50px;
background-color: #ffaaaa;
border: solid;
border-width: 3px;
position: absolute;
left: 150px;
top: 20px;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: "ease-in-out";
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
}
#btn-grp{
text-align: center;
}
#-webkit-keyframes rotate {
}
#-webkit-keyframes translate {
}
#-moz-keyframes rotate {
}
#-moz-keyframes translate {
}
<div class="container">
<div id="bg">
<div id="recBlue">
</div>
<div id="recRed">
</div>
</div>
<div id="btn-grp">
<button id="clock" onclick='modifyRule(recBlue, "rotate", "100deg");'>></button>
<button id="anticlock" onclick='modifyRule(recBlue, "rotate", "-100deg");'><</button>
<button id="move" onclick='modifyRule(recRed, "translate", "-100px")'>></button>
<button id="stop" onclick='stopAnim(recRed)'>#</button>
</div>
</div>
Any help would be appreciated!


var ss = document.styleSheets;
var rec;
var bg = document.getElementById('bg');
function getRule (name) {
for(var i = 0; i<ss[0].cssRules.length; i++){
if(ss[0].cssRules[i].name !== "undefined" && ss[0].cssRules[i].name === name)
return i;
}
}
function swapNode(node){
tmp = node.cloneNode(false);
node.parentNode.removeChild(node);
rec = tmp;
bg.appendChild(rec);
}
function modifyRule(element, name, val){
var browser = checkBrowser();
console.log(browser);
if(element.style.webkitAnimationPlayState === "paused")
element.style.webkitAnimationPlayState = "running";
var index = getRule(name);
var rule = "";
if(typeof index !== "undefined"){
element.style.WebkitAnimationName = "none";
element.style.WebkitAnimationName = name;
element.style.mozAnimationName = "none";
element.style.mozAnimationName = name;
ss[0].deleteRule(index);
swapNode(element);
if(name === "translate"){
rule = "#-"+browser+"-keyframes "+name+" {"+
"0% {-"+browser+"-transform: "+name+"(0px);}"+
"50% {-"+browser+"-transform: "+name+"("+val+");}"+
"100% {-"+browser+"-transform: "+name+"(0px);}}";
}
else{
rule = "#-"+browser+"-keyframes "+name+" {"+
"100% {-"+browser+"-transform: "+name+"("+val+");}}";
console.log(rule);
}
ss[0].insertRule(rule, index);
}
else{
console.log('err');
}
}
function stopAnim (element) {
element.style.WebkitAnimationPlayState = "paused";
}
function checkBrowser () {
if(navigator.userAgent.indexOf("Chrome") != -1 )
{
return "webkit";
}
else if(navigator.userAgent.indexOf("Firefox") != -1 )
{
return "moz";
}
}
.container {
position: relative;
left: 40px;
top: 50px;
width: 240px;
height: 150px;
}
#bg {
width: 100%;
height: 90px;
background-color: #f3f3ff;
border: solid;
border-width: 1px;
}
#recBlue{
height: 50px;
width: 50px;
background-color: #aaaaff;
border: solid;
border-width: 3px;
position: absolute;
left: 35px;
top: 20px;
animation-duration: 2s;
animation-timing-function: "bounce";
animation-fill-mode: forwards;
animation-name:translate;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: "bounce";
-webkit-animation-fill-mode: forwards;
-webkit-animation-name:translate;
}
#recRed{
height: 50px;
width: 50px;
background-color: #ffaaaa;
border: solid;
border-width: 3px;
position: absolute;
left: 150px;
top: 20px;
animation-duration: 2s;
animation-timing-function: "ease-in-out";
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name:rotate;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: "ease-in-out";
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name:rotate;
}
#btn-grp{
text-align: center;
}
#-webkit-keyframes rotate {
}
#-webkit-keyframes translate {
}
#keyframes rotate {
}
#keyframes translate {
}
<div class="container">
<div id="bg">
<div id="recBlue">
</div>
<div id="recRed">
</div>
</div>
<div id="btn-grp">
<button id="clock" onclick='modifyRule(recBlue, "rotate", "100deg");'>></button>
<button id="anticlock" onclick='modifyRule(recBlue, "rotate", "-100deg");'><</button>
<button id="move" onclick='modifyRule(recRed, "translate", "-100px")'>></button>
<button id="stop" onclick='stopAnim(recRed)'>#</button>
</div>
</div>
You are not define animation name -webkit-animation-name:rotate; and animation-name:rotate;.
Hope it will helps you.


Problem solved, it was the wrong syntax of animationname.
element.style.MozAnimationName = "none";
element.style.MozAnimationName = name;
element.style.animationName = "none";
element.style.animationName = name;
Is correct.

Related

How would I add a CSS background when my switch is toggled/checked in JavaScript?

document.addEventListener('DOMContentLoaded', function () {
var checkbox = document.querySelector('input[type="checkbox"]');
var RainbowBackground = `
.Rainbow {
height: 100%;
width: 100%;
left:0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
background: linear-gradient(#ff0000, #ff4000, #ff8000, #ffbf00, #ffff00, #bfff00, #80ff00, #40ff00, #00ff00, #00ff40, #00ff80, #00ffbf, #00ffff, #00bfff, #0080ff, #0040ff, #0000ff, #4000ff, #8000ff, #bf00ff, #ff00ff, #ff00bf, #ff0080, #ff0040, #ff0000);
background-size: 10000% 10000%;
-webkit-animation: rainbow 3s ease infinite;
animation: rainbow 3s ease infinite;}
#keyframes rainbow {
0%{background-position:0% 82%}
25%{background-position: 50% 9.5%}
50%{background-position:100% 19%}
75%{background-position: 75% 41%}
100%{background-position:0% 82%}
}
`
var styleSheet = document.createElement("RainbowBackground")
styleSheet.innerText = RainbowBackground
document.head.appendChild(styleSheet)
checkbox.addEventListener('change', function () {
if (checkbox.checked) {
document.getElementById('body2').add = 'styleSheets'
document.getElementById('text').innerHTML = 'ON';
}
else {
document.getElementById('body2').style.background = 'none'
document.getElementById('text').innerHTML = 'OFF';
}
});
});

Use element.classList.toggle to toggle a class from JavaScript.
const checkBox = document.getElementById("checkbox")
const card = document.getElementById("card")
checkbox.addEventListener("change", () => {
card.classList.toggle("bg_color")
})
.card{
height: 100px;
width: 100px;
background: red;
}
.bg_color{
background: linear-gradient(#ff0000, #ff4000, #ff8000, #ffbf00, #ffff00, #bfff00, #80ff00, #40ff00, #00ff00, #00ff40, #00ff80, #00ffbf, #00ffff, #00bfff, #0080ff, #0040ff, #0000ff, #4000ff, #8000ff, #bf00ff, #ff00ff, #ff00bf, #ff0080, #ff0040, #ff0000);
}
<div id="card" class="card">
</div>
<input type="checkbox" id="checkbox">

Crop image and download it with specific size

I modified a code to upload an image with specific size and I'm here right now:
imageUploadPrepare();
function imageUploadPrepare() {
var $profileImgDiv = document.getElementById("profile-img-div"),
$profileImg = document.getElementById("profile-img"),
$changePhoto = document.getElementById("change-photo"),
$xPosition = document.getElementById("x-position"),
$yPosition = document.getElementById("y-position"),
$saveImg = document.getElementById("save-img"),
$loader = document.getElementById("loader"),
$cancelImg = document.getElementById("cancel-img"),
$profileImgInput = document
.getElementById("profile-img-input"),
$profileImgConfirm = document
.getElementById("profile-img-confirm"),
$error = document.getElementById("error");
var currentProfileImg = "",
profileImgDivW = getSizes($profileImgDiv).elW,
NewImgNatWidth = 0,
NewImgNatHeight = 0,
NewImgNatRatio = 0,
NewImgWidth = 0,
NewImgHeight = 0,
NewImgRatio = 0,
xCut = 0,
yCut = 0;
makeSquared($profileImgDiv);
$changePhoto.addEventListener("change", function() {
currentProfileImg = $profileImg.src;
showPreview(this, $profileImg);
$loader.style.width = "100%";
$profileImgInput.style.display = "none";
$profileImgConfirm.style.display = "flex";
$error.style.display = "none";
});
$xPosition.addEventListener("input", function() {
$profileImg.style.left = -this.value + "px";
xCut = this.value;
yCut = 0;
});
$yPosition.addEventListener("input", function() {
$profileImg.style.top = -this.value + "px";
yCut = this.value;
xCut = 0;
});
$saveImg.addEventListener("click", function() {
cropImg($profileImg);
resetAll(true);
});
$cancelImg.addEventListener("click", function() {
resetAll(false);
});
window.addEventListener("resize", function() {
makeSquared($profileImgDiv);
profileImgDivW = getSizes($profileImgDiv).elW;
});
function makeSquared(el) {
var elW = el.clientWidth;
el.style.height = (elW * 0.82) + "px";
}
function showPreview(input, el) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
if (input.files && input.files[0]) {
reader.onload = function(e) {
setTimeout(function() {
el.src = e.target.result;
}, 300);
var poll = setInterval(function() {
if (el.naturalWidth && el.src != currentProfileImg) {
clearInterval(poll);
setNewImgSizes(el);
setTimeout(function() {
$loader.style.width = "0%";
$profileImg.style.opacity = "1";
}, 250);
}
}, 100);
};
} else {
return;
}
}
function setNewImgSizes(el) {
if (getNatSizes(el).elR > 1) {
el.style.width = "auto";
el.style.height = "100%";
newImgWidth = getSizes(el).elW;
$xPosition.style.display = "block";
$yPosition.style.display = "none";
$xPosition.max = newImgWidth - profileImgDivW;
} else if (getNatSizes(el).elR < 1) {
el.style.width = "100%";
el.style.height = "auto";
newImgHeight = getSizes(el).elH;
$xPosition.style.display = "none";
$yPosition.style.display = "block";
$yPosition.max = newImgHeight - profileImgDivW;
} else if (getNatSizes(el).elR == 1) {
el.style.width = "100%";
el.style.height = "auto";
$xPosition.style.display = "none";
$yPosition.style.display = "none";
}
}
function getNatSizes(el) {
var elW = el.naturalWidth,
elH = el.naturalHeight,
elR = elW / elH;
return {
elW: elW,
elH: elH,
elR: elR
};
}
function getSizes(el) {
var elW = el.clientWidth,
elH = el.clientHeight,
elR = elW / elH;
return {
elW: elW,
elH: elH,
elR: elR
};
}
function cropImg(el) {
var natClientImgRatio = getNatSizes(el).elW / getSizes(el).elW;
(myCanvas = document.getElementById("croppedPhoto")),
(ctx = myCanvas.getContext("2d"));
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, 400, 487);
ctx.drawImage(
el,
xCut * natClientImgRatio,
yCut * natClientImgRatio,
profileImgDivW * natClientImgRatio,
profileImgDivW * natClientImgRatio,
0,
0,
400,
487
);
var newProfileImgUrl = myCanvas.toDataURL("image/jpeg");
$profileImg.src = newProfileImgUrl;
uploadImage(newProfileImgUrl);
function uploadImage(image) {
const dashboardProfileImage = document.getElementById('profile-img');
dashboardProfileImage.src = image;
downloadImage(image);
dashboardProfileImage.download = "output.png";
async function downloadImage(imageSrc) {
const image = await fetch(imageSrc)
const imageBlog = await image.blob()
const imageURL = URL.createObjectURL(imageBlog)
const link = document.createElement('a')
link.href = imageURL
link.download = 'image file name here'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
}
}
function resetAll(confirm) {
if (!confirm) {
$profileImg.src = currentProfileImg;
}
$changePhoto.value = "";
$profileImgInput.style.display = "block";
$profileImgConfirm.style.display = "none";
$profileImg.style.left = "0";
$profileImg.style.top = "0";
$profileImg.style.width = "100%";
$profileImg.style.height = "100%";
$xPosition.style.display = "none";
$yPosition.style.display = "none";
$xPosition.value = "0";
$yPosition.value = "0";
xCut = "0";
yCut = "0";
}
function checkMinSizes(el) {
if (getNatSizes(el).elW > 400 && getNatSizes(el).elH > 400) {
return true;
} else {
return false;
}
}
}
/*Profile image*/
.profile-photo-div{
position: relative;
margin: 0 auto 40px auto;
width: 320px;
height: auto;
overflow: hidden;
border-radius: 10px;
-webkit-transition: ease .3s;
-o-transition: ease .3s;
transition: ease .3s;
}
.profile-photo-div .profile-img-div{
display: block;
position: relative;
overflow: hidden;
}
.profile-photo-div #loader{
position: absolute;
top:0;
left: 0;
width: 0%;
height: 100%;
background-color: #00cccf;
z-index:10;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
}
.profile-photo-div #profile-img{
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.profile-photo-div #change-photo{
display: none;
}
.profile-photo-div .profile-buttons-div{
position: relative;
display: block;
}
.profile-photo-div .button{
position: relative;
display: block;
font-family: helvetica, sans-serif;
font-size: 15px;
padding:15px;
text-align: center;
color: white;
background-color: #8f7cff;
cursor: pointer;
-webkit-transition: .5s;
-o-transition: .5s;
transition: .5s;
overflow: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.profile-photo-div .button:hover{
letter-spacing: 1px;
}
.profile-photo-div .button:after{
content: '';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width: 10px;
height: 10px;
background-color: rgba(255,255,255,0.4);
border-radius: 50%;
opacity: 0;
-webkit-transition: .9s;
-o-transition: .9s;
transition: .9s;
}
.profile-photo-div .button:hover:after{
-webkit-transform: scale(50);
-ms-transform: scale(50);
transform: scale(50);
opacity: 1;
}
.profile-photo-div .button.half{
width: 50%;
}
.profile-photo-div .green{
background-color: #15ae6b;
}
.profile-photo-div .red{
background-color: #ae0000;
}
.profile-photo-div #x-position{
position: absolute;
bottom: 5px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
display: none;
}
.profile-photo-div #y-position{
position: absolute;
right: -50px;
top: 50%;
-webkit-transform: translateY(-50%) rotate(90deg);
-ms-transform: translateY(-50%) rotate(90deg);
transform: translateY(-50%) rotate(90deg);
display: none;
}
.profile-photo-div canvas{
position: absolute;
top: -2000px;
left: -2000px;
z-index: -1;
}
.profile-photo-div .profile-img-confirm{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
}
.profile-photo-div .error{
font-family: Helvetica, sans-serif;
font-size: 13px;
color: red;
text-align:center;
display: none;
}
/*end of profile image*/
<div class="profile-photo-div" id="profile-photo-div">
<div class="profile-img-div" id="profile-img-div" style="height: 150px;">
<div id="loader"></div>
<img id="profile-img" src="/dashboard/img/default-user.png">
<input id="x-position" type="range" name="x-position" value="0" min="0">
<input id="y-position" type="range" name="y-position" value="0" min="0">
</div>
<div class="profile-buttons-div">
<div class="profile-img-input" id="profile-img-input">
<label class="button" id="change-photo-label" for="change-photo">UPLOAD PHOTO</label>
<input id="change-photo" name="change-photo" type="file" style="display: none;" accept="image/*">
</div>
<div class="profile-img-confirm" id="profile-img-confirm" style="display: none;">
<div class="button half green" id="save-img">
<i class="fa fa-check" aria-hidden="true"></i>
</div>
<div class="button half red" id="cancel-img">
<i class="fa fa-remove" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="error" id="error">حداقل سایز مجاز 400×400</div>
<canvas id="croppedPhoto" width="400" height="400"></canvas>
</div>
The issue is so far the image is always cropped with fixed dimensions of 400 * 400 pixels !!
But I want to crop them at 454.138px * 306px and no matter how I modify the numbers I always get that 400* 400 fix size?!
How can fix this?
NOTE: Since Stack overflow snippet code is completely useless in order to test the code please use this Codepen:
https://codepen.io/pixy-dixy/pen/RwZGKBQ

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>

How to make a css animation play forward or reverse on demand

I have a css animation that depending on some situation I want to be able to toggle forwards or backwards at any time based on some JS. Heres a basic example:
html
<div id="box"></div>
<button onclick="toggle()">toggle</button>
js
window.isSmall = true;
window.toggle = function() {
if (isSmall) {
var el = document.getElementById("box");
el.classList.add("bigger");
} else {
// ????
}
isSmall = !isSmall;
}
css
#keyframes bigger {
from { width:100px; height:100px; }
to { width:200px; height:200px; }
}
#box {
width:100px;
height:100px;
background-color: red;
}
.bigger {
animation-name: bigger;
animation-duration: 1s;
animation-fill-mode: forwards;
}
Fiddle:
http://jsfiddle.net/gbh408up/
I thought this would be pretty straight-forward but surprisingly I wasn't able to find a method to accomplish this. Note, I'm specifically looking for a solution with animations, NOT transitions. Any ideas?

You can work with 2 classes that animate what is required.
window.isSmall = true;
window.toggle = () => {
const box = document.getElementById("box");
if (isSmall) {
box.classList.remove("smaller");
box.classList.add("bigger");
} else {
box.classList.remove("bigger");
box.classList.add("smaller");
}
isSmall = !isSmall;
console.log(isSmall)
}
#keyframes bigger {
from {
width: 100px;
height: 100px;
}
to {
width: 200px;
height: 200px;
}
}
#keyframes smaller {
from {
width: 200px;
height: 200px;
}
to {
width: 100px;
height: 100px;
}
}
#box {
width: 100px;
height: 100px;
background-color: red;
}
.bigger {
animation-name: bigger;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.smaller {
animation-name: smaller;
animation-duration: 1s;
animation-fill-mode: forwards;
}
<div id="box"></div>
<button onclick="toggle()">toggle</button>

I just finished figuring this out. So here is my solution:
<div id="box"></div>
<button onclick="toggle()">toggle</button>
window.isSmall = true;
window.toggle = function() {
var el = document.getElementById("box");
if (el.className == "a") {
el.className = "b";
} else {
el.className = "a";
}
isSmall = !isSmall;
console.log('toggle');
}
#keyframes a {
from { width:100px; height:100px; }
to { width:200px; height:200px; }
}
#keyframes b {
from { width:200px; height:200px; }
to { width:100px; height:100px; }
}
#box {
width:100px;
height:100px;
background-color: red;
}
.a {
animation-name: a;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.b {
animation-name: b;
animation-duration: 1s;
animation-fill-mode: forwards;
}
I changed the "bigger" to just "a" and my "smaller" to just "b". But this works. Ok - I have it in a fiddle now.
https://jsfiddle.net/markem/2b6n3gmc/1/
Also, this was somewhat answered with this question here on StackOverflow:
Javascript simple add class remove class

Show dialog on Google Maps V3 Java Script API

In google maps Api for javaScript V3 , it's possible show dialog same as location dialog
Example:
When click some marker:
marker.addListener('click', function () {
// console.log(marcador['geo']);
mostrarInfoMarcas(marcador['user'], marcador['geo']);
});

Here is my solution,
I create the marker by OverlayView Object
So You can treat it as DIV and input the HTML content
function CustomMarker(latlng, map, args) {
this.latlng = latlng;
this.args = args;
this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
var self = this;
var div = this.div;
if (!div) {
div = this.div = document.createElement('div');
var style = '';
var content = '';
if (typeof(self.args.marker_style) !== 'undefined') {
style = self.args.marker_style;
div.className = 'iot-node-'+style;
}
if (typeof(self.args.marker_content) !== 'undefined') {
content = self.args.marker_content;
var a = document.createElement('a');
var cur = this.getPosition();
a.style.backgroundColor='blue';
a.style.color = 'white';
a.style.fontSize = "3em";
a.style.textAlign= "center";
a.innerHTML = (content=="-1"?"-":content);
var sub_div = document.createElement('div');
sub_div.style.paddingLeft = '2px';
var sub_info = self.args.marker_info;
sinfo = '<BR>'+sub_info.name+'<BR>'+
'<font size=2>'+sub_info.office+'</font>';
sub_div.innerHTML = sinfo;
sub_div.className = 'showme';
sub_div.style.lineHeight= "16px";
sub_div.style.backgroundColor = 'blue';
sub_div.style.color = 'white';
a.appendChild(sub_div);
div.appendChild(a);
if(style=='info') {
var span = document.createElement('span');
span.innerHTML = 'x';
google.maps.event.addDomListener(span, "click", function(event) {
});
//a.appendChild(span);
}
}
if (typeof(self.args.marker_style) !== 'undefined' && style!='') {
var cur = this.getPosition();
var me = this;
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
var point = this.getProjection().fromLatLngToDivPixel(this.getPosition());
if (point) {
if(style!='info') {
div.style.left = (point.x-20 ) + 'px';
div.style.top = (point.y-10) + 'px';
var my_info= null;
var sub = {latLng: cur, style: 'info', content: root_content.replace('[type]', style.toUpperCase()).replace('[address]', addr)};
my_info= create_node(map, sub);
nd.push(my_info);
} else {
div.style.left = (point.x - 35 ) + 'px';
div.style.top = (point.y - 60 ) + 'px';
}
}
}
}
};
CustomMarker.prototype.remove = function() {
if (this.div) {
this.div.parentNode.removeChild(this.div);
this.div = null;
}
this.setMap(null);
};
CustomMarker.prototype.getPosition = function() {
return this.latlng;
};
function create_node(map, node) {
return new CustomMarker(
node.latLng,
map,
{
marker_style: node.style,
marker_content: node.content,
marker_info: node.info
}
);
}
var map;
function initialize() {
var centerLat = 21.04731; //default lat
var centerLng = 105.792137; //default long
var cen = new google.maps.LatLng(centerLat, centerLng) ;
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: cen,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
Draw();
}
var nd = [];
function Draw() {
var lastest_json='{"markers":[{"markerId":"1","name":"Marker1","info":"INFO1","lat":"21.04731","lon":"105.792137"}]}'
var json_dev = JSON.parse(lastest_json);
var markers = json_dev.markers;
for(var i=0; i<markers.length; i++)
{
var dev = markers[i];
var cen = new google.maps.LatLng(parseFloat(dev.lat), parseFloat(dev.lon));
var sub = {latLng: cen, style: 'info', info: dev, content: dev.markerId};
nd.push(create_node(map, sub));
}
}
google.maps.event.addDomListener(window, 'load',initialize);
.iot-node-ae, .iot-node-asn, .iot-node-adn, .iot-node-mn, .iot-node-in, .iot-node-info {
position: absolute;
list-style-type: none;
left: 20px;
top: 20px;
}
.iot-node-ae>a, .iot-node-asn>a, .iot-node-adn>a, .iot-node-mn>a, .iot-node-in>a, .iot-node-info>a {
position: relative;
z-index: 2;
display: block;
width: 20px;
height: 20px;
border-style: solid;
border-width: 2px;
border-color: #0079ff;
border-radius: 50%;
background: white;
text-align:left;
font-weight: bold;
padding-top:0px;
padding-left:0px;
padding-right:0px;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.iot-node-info>a {
width: 60px;
height: 35px;
position: relative;
border-radius: 0;
}
.iot-node-info>a>span {
position: absolute; top: 2px; right:2px;
cursor: pointer;
display:inline-block;
padding:2px 5px;
background:#ccc;
}
.iot-node-info>a>span::hover {
position: absolute; top: 2px; right:2px;
cursor: pointer;
display:inline-block;
padding:2px 5px;
background:#ccc;
}
.iot-node-info>a::before {
content:"";
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 0;
border-left: 13px solid transparent;
border-right: 26px solid #0079ff;
border-bottom: 13px solid transparent;
}
.iot-node-info>a>div {
display:none;
}
.iot-node-info>a:hover > .showme{
width: 150px;
height: 70px;
background-color:white;
position:absolute;
top:-70px;
left:-45px;
border-width:2px;
border-color:#0079ff;
display:block;
}
.iot-node-ae::after, .iot-node-asn::after , .iot-node-adn::after , .iot-node-mn::after , .iot-node-in::after , .iot-node-info::after{
content: '';
position: absolute;
border-radius: 50%;
width: 100%;
height: 100%;
top: 0;
left: 0;
//animation: cd-pulse 2s infinite;
}
#keyframes cd-pulse
{
0% {box-shadow:0 0 0 0 #0079ff}
100%{box-shadow:0 0 0 20px rgba(255,150,44,0)}
}
/* AE */
.iot-node-ae{
}
.iot-node-ae>a{
background: #ff3300;
font-size:14px;
}
.iot-node-ae::after{
//animation: cd-pulse 2s infinite;
}
/* asn */
.iot-node-asn{
}
.iot-node-asn>a{
background: #cc9900;
}
.iot-node-asn::after{
//animation: cd-pulse 2s infinite;
}
/* adn */
.iot-node-adn{
}
.iot-node-adn>a{
background: #330099;
}
.iot-node-adn::after{
//animation: cd-pulse 2s infinite;
}
/* mn */
.iot-node-mn{
}
.iot-node-mn>a{
background: #669900;
}
.iot-node-mn::after{
//animation: cd-pulse 2s infinite;
}
/* IN */
.iot-node-in{
}
.iot-node-in>a{
background: #ff9900;
font-size:14px;
}
.iot-node-in::after{
//animation: cd-pulse 2s infinite;
}
<script src="http://maps.google.com/maps/api/js" type="text/javascript"></script>
<div id="map" style="width: 100%; height: 238px; "></div>

Categories

Resources