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/
Related
There already is an answer for autoscrolling, but that has a problem. If the user has manually scrolled it up to read old logs, that code keeps auto-scrolling, interfering the user's reading. So, I want it to auto-scroll only when it is showing the last line (i.e., either the user has never scrolled it up, or scrolled it up and then scrolled down to the bottom). How can I determine that?
var output;
var i = 0;
function onLoad() {
output = document.getElementById("output");
onTimeout();
}
function onTimeout() {
i++;
var line = document.createElement("div");
line.innerText = "Log " + i;
output.appendChild(line);
var isShowingTheLastLine = true;
if (isShowingTheLastLine) {
output.scrollTop = output.scrollHeight;
}
setTimeout(onTimeout, 1000);
}
<body onload="onLoad()">
<div id="output" style="overflow-y:scroll; height:200px; width:300px; background:yellow"></div>
</body>
You can use the offsetHeight property in this case. output.scrollHeight - output.offsetHeight will be equal to output.scrollTop if the div is scrolled to the bottom. Sometimes the difference may not be that accurate. So you can keep a minimum amount check in the condition.
if(Math.floor(output.scrollHeight - output.offsetHeight) - Math.floor(output.scrollTop) < 5)
{
// the div is currently at the bottom
}
Full code:
var output;
var i = 0;
function onLoad() {
output = document.getElementById("output");
onTimeout();
}
function onTimeout() {
i++;
var line = document.createElement("div");
line.innerText = "Log " + i;
if (
Math.floor(output.scrollHeight - output.offsetHeight) -
Math.floor(output.scrollTop) < 5
) {
// the div is currently at the bottom
output.appendChild(line);
output.scrollTop = output.scrollHeight;
} else {
output.appendChild(line);
}
setTimeout(onTimeout, 1000);
}
onLoad();
<div id="output" style="overflow-y:scroll; height:200px; width:300px; background:yellow"></div>
Here is my suggestion
Click the output and it stops. Click the scrollbar and scroll up and you can read as long as you hold the mouse down
I also use eventListeners instead of inline events
let output;
let cnt = 0;
let tId;
let pause;
const onTimeout = () => {
var line = document.createElement("div");
line.innerText = `Log ${++cnt}`;
output.appendChild(line);
if (!pause) {
output.scrollTop = output.scrollHeight;
tId = setTimeout(onTimeout, 1000);
}
};
window.addEventListener("DOMContentLoaded", () => {
output = document.getElementById("output");
onTimeout();
output.addEventListener("mousedown", () => {
pause = true;
});
document.addEventListener("mouseup", () => {
if (pause) {
pause = false;
onTimeout();
}
})
})
<div id="output" style="overflow-y:scroll; height:200px; width:300px; background:yellow"></div>
I have a question about changing variables.
I'm making a scoreboard for table tennis. I'm trying to show the players who has to serve. Everytime the x-key gets pressed (/when a point is scored), I check if the right to serve has to change. For this example I removed that bit.
What I'm trying to do:
Everytime an input is detected (keyboard event), the opacity of the first variable is changed to be the opposite from what is was, as well as the second variable.
Perhaps, you could think of it like a railroad crossing.
What is happening:
Only the opacity of the first variable is 1. This is due to the code running from top to bottom. It sees that the currentActionPlayer1 variable is 0, so it makes it 1. But when it reaches the if statement 'currentActionPlayer2 == 0', that is true. So the currentActionPlayer1 variable becomes 0, and cAP2 becomes 1 again.
I don't really know how to explain it any better.
var currentActionPlayer1 = 1;
var currentActionPlayer2 = 0;
window.addEventListener("keyup", checkKeyUp);
function checkKeyUp(keyUp) {
if (keyUp.keyCode == "88") { //X
changeActionPlayer();
}
}
function changeActionPlayer() {
if (currentActionPlayer1 == 1) {
currentActionPlayer1 = 0;
currentActionPlayer2 = 1;
changeActionIcon();
}
if (currentActionPlayer2 == 1) {
currentActionPlayer1 = 0;
currentActionPlayer1 = 1;
changeActionIcon();
}
}
function changeActionIcon() {
if (currentActionPlayer1 == 1) {
document.getElementById('actionP1').style.opacity = "1";
document.getElementById('actionP2').style.opacity = "0.2";
}
if (currentActionPlayer2 == 1) {
document.getElementById('actionP1').style.opacity = "0.2";
document.getElementById('actionP2').style.opacity = "1";
}
}
<html>
<head>
</head>
<body>
<p id='actionP1' style='opacity: 0.2'>action</p>
<p id='actionP2' style='opacity: 0.2'>action</p>
</body>
</html>
If I right understand, you need something like this one?
var currentActionPlayer1 = 1;
var currentActionPlayer2 = 0;
window.addEventListener("keyup", checkKeyUp);
function checkKeyUp(keyUp) {
if (keyUp.code == "KeyX") { //X
changeActionPlayer();
}
}
function changeActionPlayer() {
if (currentActionPlayer1 == 1) {
currentActionPlayer1 = 0;
currentActionPlayer2 = 1;
changeActionIcon();
} else if (currentActionPlayer2 == 1) {
currentActionPlayer2 = 0;
currentActionPlayer1 = 1;
changeActionIcon();
}
}
function changeActionIcon() {
if (currentActionPlayer1 == 1) {
document.getElementById('actionP1').style.opacity = "1";
document.getElementById('actionP2').style.opacity = "0.2";
}
if (currentActionPlayer2 == 1) {
document.getElementById('actionP1').style.opacity = "0.2";
document.getElementById('actionP2').style.opacity = "1";
}
}
<html>
<head>
</head>
<body>
<p id='actionP1' style='opacity: 0.2'>action</p>
<p id='actionP2' style='opacity: 0.2'>action</p>
</body>
</html>
I have this code which scrolls the div automatically. When we move the cursor on to the particular div it stops scrolling, and after removing the cursor from the div it will automatically start from the same position. The code is working fine but sometimes it is not working, can any one resolve the issue ?
ScrollRate = 20;
function scrollDiv_init() {
DivElmnt = document.getElementById('MyDivName');
ReachedMaxScroll = false;
DivElmnt.scrollTop = 0;
PreviousScrollTop = 0;
ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}
function scrollDiv() {
if (!ReachedMaxScroll) {
DivElmnt.scrollTop = PreviousScrollTop;
PreviousScrollTop++;
ReachedMaxScroll = DivElmnt.scrollTop >= (DivElmnt.scrollHeight -
DivElmnt.offsetHeight);
} else {
ReachedMaxScroll = (DivElmnt.scrollTop == 0) ? false : true;
DivElmnt.scrollTop = PreviousScrollTop;
PreviousScrollTop--;
}
}
function pauseDiv() {
clearInterval(ScrollInterval);
}
function resumeDiv() {
PreviousScrollTop = DivElmnt.scrollTop;
ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}
<html>
<body onLoad="scrollDiv_init()">
<div class="inner" id="MyDivName" onMouseOver="pauseDiv()"
onMouseOut="resumeDiv()">
...........elements like (P ,img etc)....
</div>
</html>
The click functions I made change the content. But, whenever I use setinterval or settimeout, the functions run 1 time and then run again immediately without using the delay.
What am I doing wrong?
$(document).ready(function() {
$('.seashellcontainertwo').hide();
var settimer = 1;
$('.seashellcontainer').click(function() {
settimer = 0;
$('.seashellcontainer').hide();
$('.seashellcontainertwo').show();
});
$('.seashellcontainertwo').click(function() {
settimer = 0;
$('.seashellcontainertwo').hide();
$('.seashellcontainer').show();
});
if (settimer == 1) {
setInterval(function() {
$('.seashellcontainertwo').hide();
$('.seashellcontainer').show();
}, 3000);
setInterval(function() {
$('.seashellcontainertwo').show();
$('.seashellcontainer').hide();
}, 3000);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="seashellcontainer">seashellcontainer</div>
<div class="seashellcontainertwo">seashellcontainertwo</div>
I suppose,this is what you were trying to achieve in intervals, Not sure about click events though. Further clarification will help.
$(document).ready(function() {
var seaShellContainerTwo = $('.seashellcontainertwo');
var seaShellContainer = $('.seashellcontainer');
seaShellContainerTwo.hide();
var settimer = 0;
setInterval(function() {
if (settimer === 1) {
seaShellContainerTwo.hide();
seaShellContainer.show();
settimer = 0;
} else {
seaShellContainerTwo.show();
seaShellContainer.hide();
settimer = 1;
}
}, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="seashellcontainer">seashellcontainer</div>
<div class="seashellcontainertwo">seashellcontainertwo</div>
It looks like jQuery's handling of -= in css() isn't working in IE8 for some reason. The following code doesn't through any errors, but it doesn't work either. I've narrowed it down to the operator mentioned above.
var postCount = $(".postsWrapper .window .posts article").length;
var numberOfPages = Math.ceil(postCount / 3);
var currentPage = 1;
var transitioning = false;
$(".postsWrapper button").click(function() {
var direction = $(this).attr("data-direction");
var postWindowWidth = $(".postsWrapper .window").width();
if (direction == "next" && currentPage < numberOfPages && transitioning == false) {
transitioning = true;
// the below line does nothing in IE8
$(".postsWrapper .window .posts").css("marginLeft", "-=" + postWindowWidth);
setTimeout(function() {
transitioning = false;
}, 1000);
currentPage++;
} else if (direction == "previous" && currentPage > 1 && transitioning == false) {
transitioning = true;
// the below line does nothing in IE8
$(".postsWrapper .window .posts").css("marginLeft", "+=" + postWindowWidth);
setTimeout(function() {
transitioning = false;
}, 1000);
currentPage--;
}
});
See http://www.weblinxinc.com/beta/candy-controls/demo/site/index.htm
The problem is that your margin-left property is starting out with the value auto, and so jQuery can't increment/decrement it. Live Example (source below)
If you initially set it to a numeric value, it'll start working. Live example
This might qualify as a jQuery bug, you might check their list to see if it's there.
Here's the source to the live examples:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<div id="test">I'm the test div</div>
<script>
(function() {
"use strict";
// The following line is only in the second example, the one that works;
// without it, it doesn't work (in IE8) even though it does in Chrome
$("#test").css("marginLeft", 0);
var counter = 0;
var up = true;
display("Initial marginLeft: " + $("#test").css("marginLeft"));
setInterval(function() {
if (up) {
$("#test").css("marginLeft", "+=5");
} else {
$("#test").css("marginLeft", "-=5");
}
++counter;
if (counter > 10) {
counter =0;
up = !up;
}
}, 200);
function display(msg) {
$("<p>").html(String(msg)).appendTo(document.body);
}
})();
</script>
</body>
</html>