I have this code. It is animating car icon on google maps api.
$("#p_inc").mousedown(function () {
if(mouseDownAnim) clearInterval(mouseDownAnim);
moveCar();
mouseDownInc = true;
this.timer = setTimeout(function(){
if(mouseDownInc){
mouseDownAnim = setInterval(function () {
moveCar();
}, 150);
}
else{
if(mouseDownAnim) clearInterval(mouseDownAnim);
}
},200);
})
$("#p_dec").mousedown(function () {
backCar();
if(mouseDownAnim) clearInterval(mouseDownAnim);
mouseDownDec = true;
this.timer = setTimeout(function(){
if(mouseDownDec){
mouseDownAnim = setInterval(function () {
backCar();
}, 150);
}
else{
if(mouseDownAnim) clearInterval(mouseDownAnim);
}
},200);
});
$(document).on('mouseup',function(){
mouseDownInc = false;
mouseDownDec = false;
clearInterval(mouseDownAnim);
});
What i expect? When i click on button then moveCar() should trigger once, but when i click and hold button - moveCar() should trigger once , wait a 200ms and after that should repeat moveCar() every 150ms until i do mouseup. It is working but sometimes setInterval stack and i cant stop it. Where is bug?
JSFIDDLE: https://jsfiddle.net/2hbkrs6m/
working code
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>- jsFiddle demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<link href="/css/result-light.css" type="text/css" rel="stylesheet">
<style type="text/css"></style>
<script type="text/javascript">
$(function(){
var mouseDownInc = false;
var mouseDownDec = false;
var mouseDownAnim = null;
$("#p_inc").mousedown(function (event) {
if(mouseDownAnim) clearInterval(mouseDownAnim);
moveCar();
mouseDownInc = true;
if(mouseDownInc){
mouseDownAnim = setInterval(function () {
moveCar();
}, 150);
}
});
$("#p_dec").mousedown(function (event) {
if(mouseDownAnim) clearInterval(mouseDownAnim);
backCar();
mouseDownDec = true;
if(mouseDownDec){
mouseDownAnim = setInterval(function () {
backCar();
}, 150);
}
});
$(document).on('mouseup',function(){
mouseDownInc = false;
mouseDownDec = false;
clearInterval(mouseDownAnim);
});
function moveCar(){console.log("movecar")
}
function backCar(){console.log("backcar")
}
});
</script>
</head>
<body>
<button id="p_inc">Move</button>
<button id="p_dec">Back</button>
</body>
</html>
Related
codepens below showing use of setTimeout, setInterval & location.reload
what other options are available?
next level I want is - add a control to allow the user to cycle forwards/backwards easily.
codepen using setTimeout & location.reload (requires reloading page - want to avoid this)
https://codepen.io/GuruAtWork/pen/PoPYbKK
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<div id="info">start</div>
<script>
var elem = document.getElementById("info");
setTimeout(function () {
elem.innerHTML = "one";
}, 1000);
setTimeout(function () {
elem.innerHTML = "two";
}, 2000);
setTimeout(function () {
elem.innerHTML = "three";
}, 3000);
setTimeout(function(){
//window.location.reload(1);
location.reload()
}, 4000);
</script>
</body>
</html>
codepen using setInterval nested inside setTimeout
https://codepen.io/GuruAtWork/pen/rNOBjBa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<div id="info">start</div>
<script>
var elem = document.getElementById("info");
setTimeout(function () {
console.log("setTimeout 1000")
elem.innerHTML = "setTimeout 1000";
setInterval(function () {
elem.innerHTML = "setInterval one";
console.log("setInterval 1000")
}, 4000);
}, 1000);
setTimeout(function () {
console.log("setTimeout 2000")
elem.innerHTML = "setTimeout 2000";
setInterval(function () {
console.log("setInterval 2000")
elem.innerHTML = "setInterval two";
}, 4000);
}, 2000);
setTimeout(function () {
console.log("setTimeout 3000")
elem.innerHTML = "setTimeout 3000";
setInterval(function () {
console.log("setInterval 3000")
elem.innerHTML = "setInterval three";
}, 4000);
}, 3000);
</script>
</body>
</html>
You can use an array to store the contents, and loop the index. To go back/forward just change the value of i and update.
var contents=["one", "two", "three"], i = 0;
setInterval(function() {
document.getElementById("content").innerHTML = contents[i];
if (++i >= 3) i = 0;
}, 1000);
<div id='content'></div>
I'm pretty new to Javascript and im trying to build slideshow myself now. Only im stuck right now after i build the array where i get my pictures from. It only shows a white screen.
My Javascript
$(function () {
var counter = 0;
var defaultSettings = {
"sliderContainer": "#slider"
, "pauseWithMouse": true
, "sliderSpeed": 2000
, "transitionSpeed": 1500
};
function cycleImages() {
counter++;
if (counter >= images.Length) {
counter = 0;
}
document.getElementById("#slider img").src = MyImages[counter];
var images = $('#slider img')
, now = images.filter(':visible')
, next = now.next().length ? now.next() : images.first()
, speed = 1500; //Transition speed
now.fadeOut(speed);
next.fadeIn(speed);
}
var theInterval; // Slide speed
var = images = [];
// if myImages exists then
images = myImages;
if (images.length > 0) {
$(defaultSettings.sliderContainer).append('<img id="sliderImage" src="' + images[0] + '" />');
startSlide();
}
var startSlide = function () {
setInterval(cycleImages, defaultSettings.sliderSpeed); // Set interval
};
var stopSlide = function () {
if (defaultSettings.pauseWithMouse) {
clearInterval(theInterval);
}
};
startSlide();
$('#slider img').on('mouseover', function () {
stopSlide();
});
$('#slider img').on('mouseout', function () {
startSlide();
});
});
And my HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Javascript Slider</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/slideshow.js"></script>
<script>
var myImages = ["slide1.jpg", "slide2.jpg", "bg/slide3.jpg"];
</script>
</head>
<body>
<main>
<div id="slider">
</div>
</main>
</body>
</html>
you have strange declaration of variable here
var = images = [];
also you need to move this part
var startSlide = function() {
setInterval(cycleImages, defaultSettings.sliderSpeed); // Set interval
};
before
if (images.length > 0) {
$(defaultSettings.sliderContainer).append('<img id="sliderImage" src="' + images[0] + '" />');
startSlide();
}
you have wrong variable name (MyImages) here
document.getElementById("#slider img").src = MyImages[counter];
first try to debug your code
How do I let mouse hiding if inactive and inside a specific div ?
I have the "html5gallery-box-0" div on my website, and I need the mouse to hide if the user let it idle over/inside the div after a couple of seconds.
Here's the jsfiddle I'm working on.
And here's the js I'm using to hide the mouse when it's inactive.
$(function () {
var timer;
var fadeInBuffer = false;
$(document).mousemove(function () {
if (!fadeInBuffer) {
if (timer) {
console.log("clearTimer");
clearTimeout(timer);
timer = 0;
}
console.log("fadeIn");
$('html').css({
cursor: ''
});
} else {
fadeInBuffer = false;
}
timer = setTimeout(function () {
console.log("fadeout");
$('html').css({
cursor: 'none'
});
fadeInBuffer = true;
}, 500)
});
});
This will work
$(function() {
var timer;
var fadeInBuffer = false;
$(document).mousemove(function() {
if (!fadeInBuffer && timer) {
console.log("clearTimer");
clearTimeout(timer);
timer = 0;
console.log("fadeIn");
$('html').css({
cursor: ''
});
} else {
$('.html5gallery-box-0').css({
cursor: 'default'
});
fadeInBuffer = false;
}
timer = setTimeout(function() {
console.log("fadeout");
$('.html5gallery-box-0').css({
cursor: 'none'
});
fadeInBuffer = true;
}, 2000)
});
$('.html5gallery-box-0').css({
cursor: 'default'
});
});
and here is the fiddle (if you want to change the idle time just do it, it's on 2 seconds now).
http://jsfiddle.net/eugensunic/1Lsqpm3y/4/
I have created a script, which holds a div-container. The moment i move the mouse quickly left and right on the container, it does not work anymore. Google Chrome does not process it properly either, why?
<html>
<head>
<title>move container</title>
<script type="text/javascript">
var position=0;
var interval;
var isRunning = false;
function moveRight0()
{
if (position => 20){
position = 19;
}
if (isRunning==true){
isRunning = false;
return;
}
if (isRunning==false) {
isRunning = true
document.getElementById("container0").style.left = position+"px";
position++;
if(position==20)
{
clearInterval(interval);
interval=0;
}
}
}
function moveLeft0()
{
if (position < 1){
position = 0;
}
if (isRunning==true){
isRunning = false;
return;
}
if (isRunning==false) {
isRunning = true
document.getElementById("container0").style.left = position+"px";
position--;
if(position<1)
{
clearInterval(interval);
interval = 0;
}
}
}
function al(){
alert(interval);
}
function setIntervalLeft0()
{
interval = setInterval(moveLeft0,10);
}
function setIntervalRight0()
{
interval = setInterval(moveRight0,10);
}
</script>
</head>
<body>
<div onmouseover="setIntervalRight0()" onmouseout="setIntervalLeft0()" id="container0" style="width:50px; height:20px; position:absolute; z-index:1; top:0px; left:0px">text</div><br><br>
<input type="button" onclick="al()" name="zeige">
</body>
</html>
Thank you for your response!
Im dont really understand what your code is supposed to do, but i made a few minor changes and it works on chrome.
Note: you have an error in your code
if (position => 20){
//=> is invalid, use >= instead
http://jsfiddle.net/2r9usf4h/
I don't really know javascript, but I hacked together (i.e. found) the following code that does exactly what I want, EXCEPT, I want the window focus to end up on the one with the countdown timer. In other words, I want to open the yahoo.com window, but not put it in focus.
Edit: I only really need this to work in IE11.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language='JavaScript'>
var time = 10;
var page = "http://google.com";
function countDown(){
time--;
gett("container").innerHTML = time;
if(time == -1){
window.location = page;
}
}
function gett(id){
if(document.getElementById) return document.getElementById(id);
if(document.all) return document.all.id;
if(document.layers) return document.layers.id;
if(window.opera) return window.opera.id;
}
function init(){
if(gett('container')){
setInterval(countDown, 1000);
gett("container").innerHTML = time;
}
else{
setTimeout(init, 50);
}
}
document.onload = init();
window.open('http://www.yahoo.com');
</SCRIPT>
</head>
<body>
<H2>Google loading in <span id="container"></span> seconds...</H2>
</body>
</html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language='JavaScript'>
var time = 10;
var page = "http://google.com";
function countDown(){
time--;
gett("container").innerHTML = time;
if(time == -1){
window.open('http://www.yahoo.com',"_blank","toolbar=yes, scrollbars=yes, resizable=yes, top=500, left=500, width=400, height=400");
}
}
function gett(id){
if(document.getElementById) return document.getElementById(id);
if(document.all) return document.all.id;
if(document.layers) return document.layers.id;
if(window.opera) return window.opera.id;
}
function init(){
if(gett('container')){
setInterval(countDown, 1000);
gett("container").innerHTML = time;
}
else{
setTimeout(init, 50);
}
}
document.onload = init();
</SCRIPT>
</head>
<body>
<H2>Google loading in <span id="container"></span> seconds...</H2>
</body>
</html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h2>Google loading in <span id="counter">3</span> seconds...</h2>
<script>
document.onload = init()
$elem = document.getElementById("counter");
var timer = $elem.innerHTML;
//timer = 30; //if you want start timer from javascript or change time inside counter
function init() {
var interval = setInterval(function() {
timer = timer-1;
$elem.innerHTML = timer;
if(timer == 0) {
var popWindow = window.open("http://google.com", '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes');
popWindow.blur();
window.focus();
window.onblur = window.focus();
clearInterval(interval);
}
},1000);
}
</script>
</body>
</html>