On my Solar System model, when you click 'Toggle Orbits' it display the orbit for the all familiar planet earth, but you notice that the ring is not centred in the middle of the planet, only outside of it, how would I make it so it would be in the middle?
function myFunction() {
for (var i = 0; i < 500; i++) {
var x = Math.random() * screen.width;
var y = Math.random() * screen.height;
var star = document.createElement('div');
star.className = 'star';
star.style.left = x + 'px';
star.style.top = y + 'px';
document.body.appendChild(star);
}
}html {
background-color: #000;
overflow-x: hidden;
overflow-y: hidden;
}
.star {
position: absolute;
width: 1px;
height: 1px;
background: white;
z-index: -1;
}
.sun {
position: absolute;
height: 100px;
width: 100px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
border-radius: 50%;
/*box-shadow: rgb(204, 153, 0) 0px 0px 50px 0px;*/
}
#button-change {
position: absolute;
top: 2px;
left: 2px;
}
.earth {
position: absolute;
height: 25px;
width: 25px;
border-radius: 50%;
box-shadow: green 0 0 25px;
}
.earth-orbit {
position: absolute;
height: 200px;
width: 200px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
-webkit-animation: spin-right 15s linear infinite;
}
.earth-lines {
border-width: 1px;
border-style: solid;
border-color: white;
border-radius: 50%;
position: absolute;
}
.moon {
height: 10px;
width: 10px;
}
.moon-orbit {
top: 50%;
left: 50%;
height: 50px;
width: 50px;
margin-left: -12.5px;
margin-bottom: -37px;
border: 1px solid rgba(255, 0, 0, 0.1);
border-radius: 50%;
-webkit-animation: spin-right 4s linear infinite;
}
@-webkit-keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
}
}<!DOCTYPE html>
<html>
<head>
<title>Vanishing Act</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css' />
<script src=".11.1/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$('.earth-orbit').toggleClass('earth-lines');
});
});
</script>
</head>
<body onload="myFunction()">
<img class="sun" src="5.png">
</div>
<div class="earth-orbit">
<div class='moon-orbit'>
<img class="moon" src=".png" />
</div>
<img class="earth" src="?.out=jpg&size=l&tid=74422923" />
</div>
<button id="button-change">Toggle Orbits</button>
</body>
</html>On my Solar System model, when you click 'Toggle Orbits' it display the orbit for the all familiar planet earth, but you notice that the ring is not centred in the middle of the planet, only outside of it, how would I make it so it would be in the middle?
function myFunction() {
for (var i = 0; i < 500; i++) {
var x = Math.random() * screen.width;
var y = Math.random() * screen.height;
var star = document.createElement('div');
star.className = 'star';
star.style.left = x + 'px';
star.style.top = y + 'px';
document.body.appendChild(star);
}
}html {
background-color: #000;
overflow-x: hidden;
overflow-y: hidden;
}
.star {
position: absolute;
width: 1px;
height: 1px;
background: white;
z-index: -1;
}
.sun {
position: absolute;
height: 100px;
width: 100px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
border-radius: 50%;
/*box-shadow: rgb(204, 153, 0) 0px 0px 50px 0px;*/
}
#button-change {
position: absolute;
top: 2px;
left: 2px;
}
.earth {
position: absolute;
height: 25px;
width: 25px;
border-radius: 50%;
box-shadow: green 0 0 25px;
}
.earth-orbit {
position: absolute;
height: 200px;
width: 200px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
-webkit-animation: spin-right 15s linear infinite;
}
.earth-lines {
border-width: 1px;
border-style: solid;
border-color: white;
border-radius: 50%;
position: absolute;
}
.moon {
height: 10px;
width: 10px;
}
.moon-orbit {
top: 50%;
left: 50%;
height: 50px;
width: 50px;
margin-left: -12.5px;
margin-bottom: -37px;
border: 1px solid rgba(255, 0, 0, 0.1);
border-radius: 50%;
-webkit-animation: spin-right 4s linear infinite;
}
@-webkit-keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
}
}<!DOCTYPE html>
<html>
<head>
<title>Vanishing Act</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css' />
<script src="http://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$('.earth-orbit').toggleClass('earth-lines');
});
});
</script>
</head>
<body onload="myFunction()">
<img class="sun" src="5.png">
</div>
<div class="earth-orbit">
<div class='moon-orbit'>
<img class="moon" src="http://space-facts./wp-content/uploads/moon-transparent.png" />
</div>
<img class="earth" src="http://www.polyvore./cgi/img-thing?.out=jpg&size=l&tid=74422923" />
</div>
<button id="button-change">Toggle Orbits</button>
</body>
</html>4 Answers
Reset to default 5You put .earth-lines statically on .earth-orbit, so adjusting margin of .earth and .moon is a logical solution.
On the other hand, let's think out of the box. What if we put .earth-lines as a separate div? Like this:
<div class="earth-lines">
</div>
<div class="earth-orbit ">
<div class='moon-orbit'>
<img class="moon" src="http://space-facts./wp-content/uploads/moon-transparent.png" />
</div>
</div>
And the CSS for .earth-lines would look like this:
.earth-lines {
display: none;
border-width: 1px;
border-style: solid;
border-color: white;
border-radius: 50%;
position: absolute;
height: 226px;
width: 226px;
top: 50%;
left: 50%;
margin-left: -113px;
margin-top: -113px;
}
The last thing would be is to adjust the JavaScript:
<script>
$(document).ready(function() {
$("button").click(function() {
$('.earth-lines').toggle();
});
});
</script>
In this case, it would be toggled and will look just the way you want it to. Here's a fiddle: http://jsfiddle/x3ybjd0f/1/
P.S. Marvelous idea and implementation, I love it ;)
UPDATE
How to fix the Sun.
In your code you have <img class="sun" src="5.png">
According to your ment, the link to the picture is http://toms-storage.tk/5.png
So the right code for this would be <img class="sun" src="http://toms-storage.tk/5.png">
.earth {
margin-left: 20px;
}
However, that will throw the Moon off of the orbit. Adjusting the margin-left of .moon-orbit class will fix that.
in css
.moon-orbit{
margin-bottom : -14px;
}
Here's the change:
.moon-orbit {
top: 50%;
left: 50%;
height: 50px;
width: 50px;
margin-left: 6px;
margin-bottom: -37px;
border: 1px solid rgba(255, 0, 0, 0.1);
border-radius: 50%;
-webkit-animation: spin-right 4s linear infinite;
}
.earth {
position: absolute;
height: 25px;
width: 25px;
margin-left: 20px;
border-radius: 50%;
box-shadow: green 0 0 25px;
}
And here's the fiddle: http://jsfiddle/4ehg64ru/1/