Develop Reference

Why animation don't complete its path when duration is decreased by JavaScript

I have a animation whose duration decreases each time black jumps(using space) over the red, it works fine that subsequent jumps reduces the duration.
But after a certain decrease in time, say after reducing to 4s,3.9s,3.8s..., the animation don't start from the right-most end which is supposed to be. As it is decided path(110vw) in #keyframes animateVillan
Is there something I am doing wrong, first thought it is a glitch kind and decided to change duration only when red reaches less than 10 and tried below part
if (ourVillanFigXValue < 10) {
ourVillanFig.style.animationDuration = ourVillanAnimeDuration - 0.1 + "s";
}
But this didn't solve the problem and path is not completely traced by the red
Sorry have to jump a little, 4 or 5 jumps only to see the error plz
let ourHeroFig = document.getElementById("ourHero");
let ourVillanFig = document.getElementById("obstacleBar");
let gameScoreDigits = document.getElementById("gameScoreDigits");
let valueXCoordinate = "";
let obstacleBarCrossed = true;
document.body.addEventListener('keydown', function(e) {
let ourHeroFigXValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('left'));
let ourHeroFigYValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('bottom'));
if (e.code === "ArrowRight") {
valueXCoordinate = ourHeroFigXValue + 100;
} else if (e.code === "KeyA" || e.code === "ArrowLeft") {
if (ourHeroFigXValue > ourHeroFig.offsetWidth + 90) {
valueXCoordinate = ourHeroFigXValue - 100;
} else {
valueXCoordinate = 0;
}
} else if (e.code === "Space") {
ourHeroFig.classList.add("animateHero");
setTimeout(function() {
ourHeroFig.classList.remove("animateHero");
}, 700)
}
changePosition();
})
function changePosition() {
ourHeroFig.style.left = valueXCoordinate + 'px'
}
let delayInAnimeSub = ""
setInterval(
function() {
let ourHeroFigXValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('left'));
let ourHeroFigYValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('bottom'));
let ourVillanFigXValue = parseInt(getComputedStyle(ourVillanFig).getPropertyValue('left'));
let ourVillanFigYValue = parseInt(getComputedStyle(ourVillanFig).getPropertyValue('bottom'));
let gameOverValueX = Math.abs(ourVillanFigXValue - ourHeroFigXValue);
let gameOverValueY = Math.abs(ourVillanFigYValue - ourHeroFigYValue);
if (ourVillanFigXValue < 10) {
ourVillanFig.style.animationDuration = ourVillanAnimeDuration - 0.3 + "s";
}
if (gameOverValueX < ourVillanFig.offsetWidth && gameOverValueY < ourVillanFig.offsetHeight) {
console.log("yes touched");
ourVillanFig.classList.remove("animateVillan");
obstacleBarCrossed = false;
} else if (obstacleBarCrossed && gameOverValueX < ourVillanFig.offsetWidth) {
ourVillanAnimeDuration = parseFloat(getComputedStyle(ourVillanFig).getPropertyValue('animation-duration'));
console.log(ourVillanFigXValue < 0, ourVillanAnimeDuration)
if (ourVillanAnimeDuration <= 2) {
ourVillanAnimeDuration = 2
}
}
// console.log(gameOverValueX,gameOverValueY)
}, 10);
#ourHero {
width: 20px;
height: 180px;
background-color: black;
position: fixed;
bottom: 0;
left: 0;
transition: 0.1s;
}
.animateHero {
animation: animateHero 0.7s linear;
}
#keyframes animateHero {
0% {
bottom: 0;
}
50% {
bottom: 350px;
}
100% {
bottom: 0;
}
}
#obstacleBar {
width: 20px;
height: 180px;
background-color: red;
position: fixed;
bottom: 0;
left: 50vw;
}
.animateVillan {
animation: animateVillan 5s linear infinite;
}
#keyframes animateVillan {
0% {
left: 110vw;
}
100% {
left: 0;
}
}
<div id="ourHero"></div>
<div id="obstacleBar" class="animateVillan"></div>
Thanks for help in advance

First make the red thing starts from far right so change left: 50vw; to something like left: 110vw;. Also, instead of the infinite animation, just remove the animateVillan class after the red gets out of screen then re-add it again. Can be done by using an animationend event handler:
ourVillanFig.addEventListener('animationend', () => {
ourVillanFig.classList.remove('animateVillan')
ourVillanFig.clientHeight // just to cause a reflow
ourVillanFig.classList.add('animateVillan')
})
or maybe by checking its x position and see when it gets out.
Here is the result. It seems that it is working just fine without any glitches:
EDIT: To make the red stops where it is when it touches black, you can make the following css class:
.pauseVillan {
animation-play-state: paused;
}
and then when the red gets in touch just add the pauseVillan class to it:
ourVillanFig.classList.add('pauseVillan')
Here is the updated snippet:
let ourHeroFig = document.getElementById('ourHero')
let ourVillanFig = document.getElementById('obstacleBar')
let gameScoreDigits = document.getElementById('gameScoreDigits')
let valueXCoordinate = ''
let obstacleBarCrossed = true
document.body.addEventListener('keydown', function(e) {
let ourHeroFigXValue = parseInt(
getComputedStyle(ourHeroFig).getPropertyValue('left')
)
let ourHeroFigYValue = parseInt(
getComputedStyle(ourHeroFig).getPropertyValue('bottom')
)
if (e.code === 'ArrowRight') {
valueXCoordinate = ourHeroFigXValue + 100
} else if (e.code === 'KeyA' || e.code === 'ArrowLeft') {
if (ourHeroFigXValue > ourHeroFig.offsetWidth + 90) {
valueXCoordinate = ourHeroFigXValue - 100
} else {
valueXCoordinate = 0
}
} else if (e.code === 'Space') {
ourHeroFig.classList.add('animateHero')
setTimeout(function() {
ourHeroFig.classList.remove('animateHero')
}, 700)
}
changePosition()
})
ourVillanFig.addEventListener('animationend', () => {
ourVillanFig.classList.remove('animateVillan')
ourVillanFig.clientHeight // just to cause a reflow
ourVillanFig.classList.add('animateVillan')
})
function changePosition() {
ourHeroFig.style.left = valueXCoordinate + 'px'
}
let delayInAnimeSub = ''
setInterval(function() {
let ourHeroFigXValue = parseInt(
getComputedStyle(ourHeroFig).getPropertyValue('left')
)
let ourHeroFigYValue = parseInt(
getComputedStyle(ourHeroFig).getPropertyValue('bottom')
)
let ourVillanFigXValue = parseInt(
getComputedStyle(ourVillanFig).getPropertyValue('left')
)
let ourVillanFigYValue = parseInt(
getComputedStyle(ourVillanFig).getPropertyValue('bottom')
)
let gameOverValueX = Math.abs(ourVillanFigXValue - ourHeroFigXValue)
let gameOverValueY = Math.abs(ourVillanFigYValue - ourHeroFigYValue)
if (ourVillanFigXValue < 10) {
ourVillanFig.style.animationDuration =
ourVillanAnimeDuration - 0.3 + 's'
}
if (
gameOverValueX < ourVillanFig.offsetWidth &&
gameOverValueY < ourVillanFig.offsetHeight
) {
console.log('yes touched')
ourVillanFig.classList.add('pauseVillan')
obstacleBarCrossed = false
} else if (
obstacleBarCrossed &&
gameOverValueX < ourVillanFig.offsetWidth
) {
ourVillanAnimeDuration = parseFloat(
getComputedStyle(ourVillanFig).getPropertyValue('animation-duration')
)
console.log(ourVillanFigXValue < 0, ourVillanAnimeDuration)
if (ourVillanAnimeDuration <= 2) {
ourVillanAnimeDuration = 2
}
}
// console.log(gameOverValueX,gameOverValueY)
}, 10)
#ourHero {
width: 20px;
height: 180px;
background-color: black;
position: fixed;
bottom: 0;
left: 0;
transition: 0.1s;
}
.animateHero {
animation: animateHero 0.7s linear;
}
#keyframes animateHero {
0% {
bottom: 0;
}
50% {
bottom: 350px;
}
100% {
bottom: 0;
}
}
#obstacleBar {
width: 20px;
height: 180px;
background-color: red;
position: fixed;
bottom: 0;
left: 110vw;
}
.animateVillan {
animation: animateVillan 4s linear;
}
.pauseVillan {
animation-play-state: paused;
}
#keyframes animateVillan {
0% {
left: 110vw;
}
100% {
left: 0;
}
}
<div id="ourHero"></div>
<div id="obstacleBar" class="animateVillan"></div>

jQuery: Nesting letter transform function

This is the code:
$(document).ready(function() {
var isRandom = false;
$('#one, #two').html(function(i, html) {
var chars = $.trim(html).split("");
return '<span>' + chars.join('</span><span>') + '</span>';
});
$('#one').click(function() {
isRandom = !isRandom;
if (isRandom) {
$('span').each(function() {
$(this).css({
"position": "absolute"
});
$(this).animate({
left: Math.random() * window.outerWidth / 2,
top: Math.random() * window.outerHeight / 2,
});
});
} else {
$('span').each(function() {
$(this).css({
"position": "relative"
});
$(this).animate({
left: 0,
top: 0,
});
});
}
});
});
html,
body {
width: 100%;
height: 100%;
}
div {
font-family: Arial;
font-size: 20px;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one">Click me</div>
<div id="two">Flying letters based on #one</div>
<div>No flying letters</div>
If you click the first div, the letters from #one and #two start moving. That's exactly how it should look like. But then: If you want to get the previous state, you would need have to click a letter from #once. It also should work if you click one of the two other div.
How is it possible to do that? Would be happy if somebody could help me!

You can add click event on #two to do that as below -
$('#two').click(function() {
if (isRandom) {
isRandom = false;
$('span').each(function() {
$(this).css({
"position": "relative"
});
$(this).animate({
left: 0,
top: 0,
});
});
}
});
Final code (I have extracted into functions for better understanding) -
$(document).ready(function() {
var isRandom = false;
$('#one, #two').html(function(i, html) {
var chars = $.trim(html).split("");
return '<span>' + chars.join('</span><span>') + '</span>';
});
$('#one').click(function() {
isRandom = !isRandom;
if (isRandom) {
fly();
} else {
restore();
}
});
$('#two').click(function() {
if (isRandom) {
isRandom = false;
restore();
}
});
function fly() {
$('span').each(function() {
$(this).css({
"position": "absolute"
});
$(this).animate({
left: Math.random() * window.outerWidth / 2,
top: Math.random() * window.outerHeight / 2,
});
});
}
function restore() {
$('span').each(function() {
$(this).css({
"position": "relative"
});
$(this).animate({
left: 0,
top: 0,
});
});
}
});
html,
body {
width: 100%;
height: 100%;
}
div {
font-family: Arial;
font-size: 20px;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one">Click me</div>
<div id="two">Flying letters based on #one</div>
<div>No flying letters</div>

You can simply change your selector to some class which is same to all divs then inside event handler you just need to check if the div which is clicked has id has one using && if yes then only if part will get executed .
Demo Code :
$(document).ready(function() {
var isRandom = false;
$('#one, #two').html(function(i, html) {
var chars = $.trim(html).split("");
return '<span>' + chars.join('</span><span>') + '</span>';
});
//chnage slector
$('div.sameclass').click(function() {
isRandom = !isRandom;
//check if the div which is clicked has id one..
if (isRandom && $(this).attr("id") == "one") {
$('span').each(function() {
$(this).css({
"position": "absolute"
});
$(this).animate({
left: Math.random() * window.outerWidth / 2,
top: Math.random() * window.outerHeight / 2,
});
});
} else {
$('span').each(function() {
$(this).css({
"position": "relative"
});
$(this).animate({
left: 0,
top: 0,
});
});
}
});
});
html,
body {
width: 100%;
height: 100%;
}
div {
font-family: Arial;
font-size: 20px;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one" class="sameclass">Click me</div>
<div id="two" class="sameclass">Flying letters based on #one</div>
<div class="sameclass">No flying letters</div>

Owl Carousel 2 - can't change slide on hover

I already tried to swap the functions on owl.carousel.js but it only works when the mouse moves.
var Autoplay = function(scope) {
this.core = scope;
this.core.options = $.extend({}, Autoplay.Defaults, this.core.options);
this.handlers = {
'translated.owl.carousel refreshed.owl.carousel': $.proxy(function() {
this.autoplay();
}, this),
'play.owl.autoplay': $.proxy(function(e, t, s) {
this.play(t, s);
}, this),
'stop.owl.autoplay': $.proxy(function() {
this.stop();
}, this),
'mouseover.owl.autoplay': $.proxy(function() {
if (this.core.settings.autoplayHoverPause) {
this.pause();
}
}, this),
'mouseleave.owl.autoplay': $.proxy(function() {
if (this.core.settings.autoplayHoverPause) {
this.autoplay();
}
}, this)
};
this.core.$element.on(this.handlers);};
Any idea how to make the slideshow work when mouse on top of the image?

When i had this problem, i used this code:
$('.owl-carousel .owl-dot').hover(function() {
$(this).click();
},
function() {}
);
and here my css for dots:
.owl-dot{
position: relative;
padding: 0;
height: 3px;
margin: 0;
float: left;
}
.owl-dot:before{
content: "";
position: absolute;
top: -168px; // the height of image
height: 168px; // the height of image
width: 100%;
left: 0;
z-index: 0;
}
when you will make hover to dots the image will be changing, that's all !!!

Div slider in reverse

This is the link of an example of divslider: http://jsfiddle.net/jtbowden/ykbgT/light/
But in this example the divs are moving from right to left
but i want to move the divs from left to right now.. this website already has an editor inside it.
so please help me move the divs in reverse direction. because on my code i want to go both sides
$('.box').click(function() {
$('.box').each(function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
} else if ($(this).offset().left > $('#container').width()) {
$(this).animate({
left: '50%',
}, 500 );
} else {
$(this).animate({
left: '-150%',
}, 500 );
}
});
});​

Here's what worked for me on your JS Fiddle:
$('.box').click(function() {
$('.box').each(function() {
if ($(this).offset().left < 0) {
$(this).animate({
left: '50%',
}, 500 );
} else if ($(this).offset().left > $('#container').width()) {
$(this).css({
'left': '-150%',
} );
} else {
$(this).animate({
left: '150%',
}, 500 );
}
});
});​

Is this what you mean?
#box1 {
background-color: green;
left: 150%; /* changed this */
}
#box3 {
background-color: red;
left: -150%; /* changed this */
}
​
and
$('.box').click(function() {
$('.box').each(function() {
if ($(this).offset().left > $('#container').width()) {
$(this).css("left", "-150%");
} else if ($(this).offset().left < 0) {
$(this).animate({left:'50%'},500);
} else {
$(this).animate({left:'150%'},500);
}
});
});​

Internet Explorer: Issue with Overlay / opacity

I'm trying to create a dialog window using the following CSS:
#blackOverlay {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
z-index: 1001;
}
#whiteOverlay {
display: block;
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
z-index:2002;
overflow: auto;
background: #c4e982;
}
and the following JS:
var div = $("<div id='blackOverlay'></div");
$("body").prepend(div);
var div = $("<div id='whiteOverlay'></div");
div.html("Loading......");
var u = "myurl?function=example";
div.load(u);
$("body").prepend(div);
This works correctly in Firefox, Safari, Chrome and Opera.
Unfortunately it fails in IE, at least on version 8.0. The color/opacity is only applied to body and NOT on other DIV's. Instead of "hidding" everything behind the blackOverlay, everything (links, buttons, input fields, ...) is still usable although the loaded content is displayed correctly (in front, center of screen).
Any help is appreciated!
Thank you jduren for pointing me in the right direction. After attempting to handle it in similar way as described here I came up with the following workaround:
function shime() {
jQuery.each(jQuery.browser, function(i) {
if($.browser.msie){
$('div').each(function() {
$(this).addClass("shine");
});
}
});
}
function unshime() {
jQuery.each(jQuery.browser, function(i) {
if($.browser.msie){
$(".shine").each(function() {
$(this).removeClass("shine");
});
}
});
}
And the following CSS:
div.shine {
display: none;
}
I know that it's not the best solution, but I'm getting tired of running in circles due to IE "features".

You need to create what's called an iFrame shim. IE paints controls over everything that isn't windowed so you won't be able to handle this by CSS/HTML hacks alone.
Here is a quick overview of Iframe Shimming http://www.macridesweb.com/oltest/IframeShim.html
Also, the Mootools More library includes an iFrame shim Feature http://mootools.net/docs/more/Utilities/IframeShim as do most popular javascript frameworks that create overlayed UI elements.
This is the IFrame Shim class from mootools more library to give you an idea of what's involved, don't use this as it depends on other Mootoosl classes.
var IframeShim = new Class({
Implements: [Options, Events, Class.Occlude],
options: {
className: 'iframeShim',
src: 'javascript:false;document.write("");',
display: false,
zIndex: null,
margin: 0,
offset: {x: 0, y: 0},
browsers: (Browser.Engine.trident4 || (Browser.Engine.gecko && !Browser.Engine.gecko19 && Browser.Platform.mac))
},
property: 'IframeShim',
initialize: function(element, options){
this.element = document.id(element);
if (this.occlude()) return this.occluded;
this.setOptions(options);
this.makeShim();
return this;
},
makeShim: function(){
if(this.options.browsers){
var zIndex = this.element.getStyle('zIndex').toInt();
if (!zIndex){
zIndex = 1;
var pos = this.element.getStyle('position');
if (pos == 'static' || !pos) this.element.setStyle('position', 'relative');
this.element.setStyle('zIndex', zIndex);
}
zIndex = ($chk(this.options.zIndex) && zIndex > this.options.zIndex) ? this.options.zIndex : zIndex - 1;
if (zIndex < 0) zIndex = 1;
this.shim = new Element('iframe', {
src: this.options.src,
scrolling: 'no',
frameborder: 0,
styles: {
zIndex: zIndex,
position: 'absolute',
border: 'none',
filter: 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'
},
'class': this.options.className
}).store('IframeShim', this);
var inject = (function(){
this.shim.inject(this.element, 'after');
this[this.options.display ? 'show' : 'hide']();
this.fireEvent('inject');
}).bind(this);
if (!IframeShim.ready) window.addEvent('load', inject);
else inject();
} else {
this.position = this.hide = this.show = this.dispose = $lambda(this);
}
},
position: function(){
if (!IframeShim.ready || !this.shim) return this;
var size = this.element.measure(function(){
return this.getSize();
});
if (this.options.margin != undefined){
size.x = size.x - (this.options.margin * 2);
size.y = size.y - (this.options.margin * 2);
this.options.offset.x += this.options.margin;
this.options.offset.y += this.options.margin;
}
this.shim.set({width: size.x, height: size.y}).position({
relativeTo: this.element,
offset: this.options.offset
});
return this;
},
hide: function(){
if (this.shim) this.shim.setStyle('display', 'none');
return this;
},
show: function(){
if (this.shim) this.shim.setStyle('display', 'block');
return this.position();
},
dispose: function(){
if (this.shim) this.shim.dispose();
return this;
},
destroy: function(){
if (this.shim) this.shim.destroy();
return this;
}
});
window.addEvent('load', function(){
IframeShim.ready = true;
});