Ripple Emulator in Visual Studio: manipulation of style.top fails after 252px
Question
Since two days the script below is not working anymore in the Ripple Emulator of Visual Studio 2015. Cordova 3.0 + 2.0. My picture stops on the y axis after 252px. x axis is working.
It is still running successfully in Chrome and with the Ripple-Extension both by using the file url.
I want the image to move endless with 225 degrees from top position to the left bottom.
2 pictures to explain it:
Not working: localhost
Working: url
Both times I am using the same code. Cache issue?
<html>
<head>
<title>Image moving</title>
<style>
#Ball {
position: absolute;
left: 500px;
top: 10px;
}
</style>
</head>
<body >
<script>
window.onload = function () {
startBall();
};
function move(xstep, ystep) {
var y = document.getElementById('Ball').offsetTop;
var x = document.getElementById('Ball').offsetLeft;
y = y + ystep;
x = x + xstep;
document.getElementById('Ball').style.top = y + "px"; // vertical movment
document.getElementById('Ball').style.left = x + "px"; // horizontal movment
}
function startBall() {
move(-1, 1);
var y = document.getElementById('Ball').offsetTop;
var x = document.getElementById('Ball').offsetLeft;
document.getElementById("msg").innerHTML = "X: " + x + " Y: " + y;
my_time = setTimeout('startBall()', 10);
}
</script>
<img src='images/Ball.jpg' id='Ball'>
<div id='msg'></div>
</body>
</html>
1 answers
solution1
0 2016-03-21 22:32:24
Solved it.
It was my js cache in Chrome. Could not solve it with F5 but I could solve it by disabling the cache: Disabling Chrome cache for website development
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.