jsFiddle Code Not Working on Local Machine

Question

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>

Why would you expect it to work? Your script's source doesn't start with `http:` — MetalFrog, Aug 16 '12 at 13:45
If you're using Chrome or Firefox you should be able to see the Javascript console. I suspect you might find some error messages there. For instance the method "animateDiv" might not exist... — o01, Aug 16 '12 at 13:45

score 5 · Accepted Answer · answered Aug 16 '12 at 13:46

Opening in Chrome, I got an error:

Uncaught SyntaxError: Unexpected token ?

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.

score 1 · Answer 2 · edited May 08 '13 at 13:54

1

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

edited May 08 '13 at 13:54

Spudley

166,037
39
233
307

answered May 08 '13 at 13:34

Raja Sekaran

11
1

jsFiddle Code Not Working on Local Machine

2 Answers2

Linked