I am attempting to make an element move randomly inside a <div>
Thankfully, someone has found a solution which can be found here
However, when I run it on my local machine OR on a server, the element does not move.
Here is my source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
div.a {
width: 50px;
height:50px;
background-color:red;
position:fixed;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
animateDiv();
});
function makeNewPosition(){
// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 50;
var w = $(window).width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh,nw];
}
function animateDiv(){
var newq = makeNewPosition();
var oldq = $('.a').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$('.a').animate({ top: newq[0], left: newq[1] }, speed, function(){
animateDiv();
});
};
function calcSpeed(prev, next) {
var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);
var greatest = x > y ? x : y;
var speedModifier = 0.1;
var speed = Math.ceil(greatest/speedModifier);
return speed;
}
</script>
</head>
<body>
<div class='a'></div>
</body>
</html>
Sorry for my bad english
i have idea for copy the full source code
steps
click on the Share button
copy the link of on 2 box Share full screen result
then go that link(copy link). it show the result
then right click, click the view frame source.
Now your source code show
then put on the exact link of the script src and css.
now your code work
Opening in Chrome, I got an error:
It looks like there is a non-visible character after the ending brace in the javascript. Open with Notepad++ and delete the extra character.
I have seen this happen when you copy and paste directly from a fiddle.