gordon sung gordon sung - 6 months ago 20
HTML Question

html code not running on notepad++

I tried running my HTML code via notepad++ on chrome but does not seem to work. This code is basically an animation of circles revolving around a bigger circle. For some odd reason, my code does not run the animation. Here is my code:

<html>
<head>
<style type="text/css">

div {
border-radius: 50%;
border: 2px solid #000;
position: fixed;
}

#center {
width: 200px;
height: 200px;
left: 100px;
top: 100px;
}

#sat0,
#sat1,
#sat2,
#sat3,
#sat4 {
width: 50px;
height: 50px;
}


</style>
</head>
<body>
<div id="center"></div>
<div id="sat0"></div>
<div id="sat1"></div>
<div id="sat2"></div>
<div id="sat3"></div>
<div id="sat4"></div>


<script language="JavaScript" type="text/javascript">


var pos = $('#center').position(),
radiusSat = $('#sat1').width() * 0.5,
radius = $('#center').width() * 0.5,
cx = pos.left + radius,
cy = pos.top + radius,
x, y, angle = 0,
angles = [],
spc = 360 / 5,
deg2rad = Math.PI / 180,
i = 0;

for (; i < 5; i++) {
angles.push(angle);
angle += spc;
}

/// space out radius
radius += (radiusSat + 10);

loop();

function loop() {

for (var i = 0; i < angles.length; i++) {

angle = angles[i];

x = cx + radius * Math.cos(angle * deg2rad);
y = cy + radius * Math.sin(angle * deg2rad);

$('#sat' + i).css({
left: x - radiusSat,
top: y - radiusSat
});

angles[i] = angles[i] + 1;
if (angles[i] > 360) angles[i] = 0;
}

requestAnimationFrame(loop);
}




</script>
</body>
</html>


I cannot find any mistakes that I might have made. Please help. Thank you.

Answer

It's simple. You are trying to use jQuery ($) without including jQuery library. Please insert this

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

Before this:

<script language="JavaScript"  type="text/javascript">

Or better inside <head></head> tags

Comments