Develop Reference

Smooth scroll bar (on mouse scroll) without jquery?

I want to implement smoothness while scrolling a page, for example this site link has the effect what I am talking about. I implemented the animation for scroll when clicked, but I want to implement smooth scroll while user scrolls using mousewheel.
I am looking for a solution without jquery.
(This is not a duplicate of any questions here in stackoverflow).

header
{
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
#info
{
font-size: 18px;
color: #555;
text-align: center;
margin-bottom: 25px;
}
a{
color: #074E8C;
}
.scrollbar
{
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow
{
min-height: 450px;
}
#wrapper
{
text-align: center;
width: 500px;
margin: auto;
}
/*
* STYLE 1
*/
#style-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
/*
* STYLE 2
*/
#style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
/*
* STYLE 3
*/
#style-3::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar-thumb
{
background-color: #000000;
}
/*
* STYLE 4
*/
#style-4::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar-thumb
{
background-color: #000000;
border: 2px solid #555555;
}
/*
* STYLE 5
*/
#style-5::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-5::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-5::-webkit-scrollbar-thumb
{
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%,
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.5, transparent), to(transparent));
}
/*
* STYLE 6
*/
#style-6::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-6::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-6::-webkit-scrollbar-thumb
{
background-color: #F90;
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
/*
* STYLE 7
*/
#style-7::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-7::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-7::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-image: -webkit-gradient(linear,
left bottom,
left top,
color-stop(0.44, rgb(122,153,217)),
color-stop(0.72, rgb(73,125,189)),
color-stop(0.86, rgb(28,58,148)));
}
/*
* STYLE 8
*/
#style-8::-webkit-scrollbar-track
{
border: 1px solid black;
background-color: #F5F5F5;
}
#style-8::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-8::-webkit-scrollbar-thumb
{
background-color: #000000;
}
/*
* STYLE 9
*/
#style-9::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-9::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-9::-webkit-scrollbar-thumb
{
background-color: #F90;
background-image: -webkit-linear-gradient(90deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
/*
* STYLE 10
*/
#style-10::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-10::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-10::-webkit-scrollbar-thumb
{
background-color: #AAA;
border-radius: 10px;
background-image: -webkit-linear-gradient(90deg,
rgba(0, 0, 0, .2) 25%,
transparent 25%,
transparent 50%,
rgba(0, 0, 0, .2) 50%,
rgba(0, 0, 0, .2) 75%,
transparent 75%,
transparent)
}
/*
* STYLE 11
*/
#style-11::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-11::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-11::-webkit-scrollbar-thumb
{
background-color: #3366FF;
border-radius: 10px;
background-image: -webkit-linear-gradient(0deg,
rgba(255, 255, 255, 0.5) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0.5) 75%,
transparent 75%,
transparent)
}
/*
* STYLE 12
*/
#style-12::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
border-radius: 10px;
background-color: #444444;
}
#style-12::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-12::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #D62929;
background-image: -webkit-linear-gradient(90deg,
transparent,
rgba(0, 0, 0, 0.4) 50%,
transparent,
transparent)
}
/*
* STYLE 13
*/
#style-13::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
border-radius: 10px;
background-color: #CCCCCC;
}
#style-13::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-13::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #D62929;
background-image: -webkit-linear-gradient(90deg,
transparent,
rgba(0, 0, 0, 0.4) 50%,
transparent,
transparent)
}
/*
* STYLE 14
*/
#style-14::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
background-color: #CCCCCC;
}
#style-14::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-14::-webkit-scrollbar-thumb
{
background-color: #FFF;
background-image: -webkit-linear-gradient(90deg,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 25%,
transparent 100%,
rgba(0, 0, 0, 1) 75%,
transparent)
}
/*
* STYLE 15
*/
#style-15::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-15::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-15::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #FFF;
background-image: -webkit-gradient(linear,
40% 0%,
75% 84%,
from(#4D9C41),
to(#19911D),
color-stop(.6,#54DE5D))
}
/*
* STYLE 16
*/
#style-16::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-16::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-16::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #FFF;
background-image: -webkit-linear-gradient(top,
#e4f5fc 0%,
#bfe8f9 50%,
#9fd8ef 51%,
#2ab0ed 100%);
}
<div id="wrapper">
<div class="scrollbar" id="style-default">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-1">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-2">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-3">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-4">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-5">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-6">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-7">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-8">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-9">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-10">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-11">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-13">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-14">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-15">
<div class="force-overflow"></div>
</div>

show progress percentage on progress bar

I have some HTML file with css and javascript, it shows progress bar depending on project start date, end date and current date, it works fine but I need that progress percentage to show into the bar.
there is my file content:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style type="text/css">
.meter {
height: 20px;
/* Can be anything */
position: relative;
margin: 60px 0 20px 0;
/* Just for demo spacing */
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255, 255, 255, 0.3);
box-shadow : inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.meter > span {
display: block;
height: 100%;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43, 194, 83);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(43, 194, 83)), color-stop(1, rgb(84, 240, 84)));
background-image: -moz-linear-gradient(center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);
-webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
-moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}
.meter > span:after, .animate > span > span {
content:"";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
.animate > span:after {
display: none;
}
#-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
.orange > span {
background-color: #f1a165;
background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a));
background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
}
.red > span {
background-color: #f0a3a3;
background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323));
background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
}
.nostripes > span > span, .nostripes > span:after {
-webkit-animation: none;
background-image: none;
}
</style>
<title>Date to Percentage Progress</title>
<script type='text/javascript'>//<![CDATA[
var targetDate = new Date("07/12/2017");
var beginDate = new Date("04/20/2017");
var totalTime = (targetDate - beginDate);
$(function () {
//Create a custom event on the span to handle incoming data for animation.
$(".meter > span").bind("progress-event", function (e, data) {
$(this)
.width($(this).prop("width"))
.data("origWidth", data.Complete)
.animate({
width: $(this).data("origWidth") + "%"
}, 1200);
$(this).prop("title",($(this).data("origWidth") + "%"));
});
//Initial animation on page load.
$(".meter > span").each(function () {
$(document).trigger("date-changed", {
Date: new Date()
});
});
//Apply the datepicker with an event handler for a selected date
$("#date-input").datepicker({
onSelect: function (selectedDate, obj) {
$(document).trigger("date-changed", {
Date: selectedDate
});
} // end onSelect function
});
});
//Custom event to handle a date being picked from the datepicker
$(document).bind("date-changed", function (e, data) {
var dateProgress = new Date(data.Date) - beginDate;
var completionPercentage = (Math.round((dateProgress / totalTime) * 100));
if(completionPercentage > 100) { //Make sure we don't go past 100
completionPercentage = 100;
} // end if
$(".meter > span").trigger("progress-event", {
Date: data.Date,
Complete: completionPercentage
});
});
//]]>
</script>
</head>
<body>
<div class="meter"> <span></span>
</body>
</html>

Since you already using jquery. I would suggest to use jQueryUI progressbar UI widget and refer this example from the official jQueryUI website.
https://jqueryui.com/progressbar/#download
I hope this helps.

Margin-Right on css not Working

I have been messing with Coding during school because it interests me the most out of anything at school, and have been self-teaching myself Html-Css-and Js for most of the school year.
I have been re-creating my school's website, and I have run into some problems.
My CSS "Margin-Right" command has not been working.
I have been trying to center a <Div> area with CSS and the "Style" command using margin left and right, and the right will never work.
I don't want to just use the position: absolute; command because I want some space on the side so you can see the background.
Here is my Html code.
CSS:
.Isaac {
width: 100%;
padding: 4px;
margin-right:100px;
background-color: white;
-webkit-box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 2px 12px rgba(23, 69, 88, .5);
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 10px;
}
HTML:
<div class="Isaac" Style="Background-color: #E6E6E6 ; Margin-Top: 40px">
<!-- div content -->
</div>
Edit: The "100x" thing was just a silly error on my part, I meant to have "100px"
Also, I changed Margin-Right: 100x ; to margin-right:100px; and it still have no difference
I hope you can help me

Change:
Margin-Right: 100x;
to:
margin-right: 100px;

The problem is the width:100% on the .Isaac divs. This causes the divs themselves to be as wide as their parent, the body. Then the margins extend to the right of that, off screen.
Solution: remove the width:100%.
.Isaac {
/*width: 100%;*/
padding: 4px;
Margin-Right: 100px;
background-color: white;
-webkit-box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 2px 12px rgba(23, 69, 88, .5);
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 10px;
}
.myButton {
-moz-box-shadow: inset 0px 5px 0px 0px #000000;
-webkit-box-shadow: inset 0px 5px 0px 0px #000000;
box-shadow: inset 0px 1px 0px 0px #000000;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffffff));
background: -moz-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: -webkit-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: -o-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: linear-gradient(to bottom, #ffffff 5%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
background-color: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #000000;
display: inline-block;
cursor: pointer;
color: #000000;
font-family: Arial;
font-size: 13px;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #000000;
}
.myButton:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffffff));
background: -moz-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: -webkit-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: -o-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 5%, #ffffff 100%);
background: linear-gradient(to bottom, #ffffff 5%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
background-color: #ffffff;
}
.myButton:active {
position: relative;
top: 1px;
}
/* I added this, because the body start tag doesn't appear in the snippet */
body {
background-attachment: fixed; background-repeat: no-repeat; Background-size: 100% 100%; background-image:url(https://upload.wikimedia.org/wikipedia/commons/3/32/Mount_Rainier_from_above_Myrtle_Falls_in_August.JPG)
}
<div class="Isaac" Style="Background-color: #E6E6E6; Margin-Top: 40px"><img src="http://www.conway.k12.wa.us/sites/default/files/logov4.png" style="width:150px;height:50px;">Menu : Family access : Facebook/Social Media<a/> : <a href="#" class="Hello"><br><a href="#" class="MyButton">District Office
School OfficeDepartmentsStaffFamilyTeachersBoard</div>

use text-align center for aligning your contents to center
issue with margin-right was you use : x instead of px
.Isaac {
width: 100%;
padding: 4px;
text-align: center;
margin-right: 100px;
background-color: white;
-webkit-box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 2px 12px rgba(23, 69, 88, .5);
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 10px;
}
Hope this is what you want to achieve

toggle function making all other divs disappear

So I have many divs (planets). I'd like to make them disappear by clicking on them. So far I have earth and sun only. On my test run, when I click on sun, and earth also disappears. What is the proper code so that not all planets will disappear just by one click.
HTML:
<div class="planets" id="sun"><div>
<div class-"planets" id="earth"></div>
CSS:
#sun {
background-image: -webkit-gradient(linear, 100% 45%, 0% 97%, from(#FEA901), to(#FE4801));
background-image: -webkit-linear-gradient(top, #FEA901, #FE4801);
background-image: -moz-linear-gradient(top, #FEA901, #FE4801);
background-image: -ms-linear-gradient(top, #FEA901, #FE4801);
background-image: -o-linear-gradient(top, #FEA901, #FE4801);
position:relative;
border:3px solid orange;
height:150px;
width:150px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
border-radius:50%;
-webkit-box-shadow: 0px 0px 30px 5px rgba(255, 255, 190, .75);
-moz-box-shadow: 0px 0px 30px 5px rgba(255, 255, 190, .75);
box-shadow: 0px 0px 250px 100px rgba(240, 176, 12, .75);
}
#earth {
position:absolute;
top:440px;
right:700px;
height:100px;
width:100px;
border-radius:50%;
border:1px solid white;
background-image: -webkit-gradient(linear, 100% 45%, 0% 97%, from(#068143), t(#FE4801));
background-image: -webkit-linear-gradient(top, #2215DF, #068143);
background-image: -moz-linear-gradient(top, #FEA901, #068143);
background-image: -ms-linear-gradient(top, #FEA901, #068143);
background-image: -o-linear-gradient(top, #FEA901, #068143);
-webkit-box-shadow: 0px 0px 30px 5px rgba(131, 180, 226, .75);
-moz-box-shadow: 0px 0px 30px 5px rgba(131, 180, 226, .75);
box-shadow: 0px 0px 50px 10px rgba(131, 180, 226, .75);
}
JS:
$(document).ready(function() {
$("html").mousemove(function(e){
$('.follow').css({'top': e.clientY - 100, 'left': e.clientX - 60});
});
$('.planets').click(function() {
$('#sun').toggle(1000);
});
});

$('.planets').click(function() {
$(this).hide();
}
you could also do
$('.planets').click(function() {
$(this).toggle();
}
but it'd be pointless since you can't click on it to make it reappear, after it is already hidden

You had several typos in your code. You forgot the </div> to the sun, which made it not parse correctly and the earth wouldn't show up. Also you had - instead of = for the class. Here is the code for you fixed:
jsFiddle

change div z-index from high to low if div crosses over other div when window resized?

i have a div called 'start-button' with a higher z-index than an image on my page.
Basically if a user shrinks the window width to anything lower than 1024x768 then i want the z-index of 'start-button' to be set below the image so that the image then appears on top of the other div.
is there a way of using jquery of css to say that if the window width goes lower than 1024x768 then to change the z-index of the divs? or can i use something like css .start-button:width=37.7%{ to determine when the divs z-index should change.
<div class="start-button"></div>
<div class="image"></div>
css for start-button:
.start-button{
border: 1px solid #3f3f3f;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.3);
color: #434343;
cursor: pointer;
display: block;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
margin-top: 15px;
margin-left:0px;
padding: 10px;
text-shadow: 0 -1px 0 #444444;
text-align:center;
width: 90px;
height:20px;
position:absolute;
z-index:150;
font-size:16px;
font-weight:400;
text-decoration:none;
background-color:#cccccc;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
background-color:#333333;
background-image: linear-gradient(top, #f7f7f7 0%, #9f9f9f 100%);
background-image: -o-linear-gradient(top, #f7f7f7 0%, #9f9f9f 100%);
background-image: -moz-linear-gradient(top, #f7f7f7 0%, #9f9f9f 100%);
background-image: -webkit-linear-gradient(top, #f7f7f7 0%, #9f9f9f 100%);
background-image: -ms-linear-gradient(top, #f7f7f7 0%, #9f9f9f 100%);
overflow:hidden;
}
image css:
.header_logo_place{
width:100%;
height:525px;
float:left;
margin-left:4%;
background-image:url(../img/image_logo2013.png);
background-repeat:no-repeat;
background-position:bottom left;
position:relative;
margin-top:-1px;
z-index:230;
}

You can use CSS media-queries for this, no need for javascript/jQuery:
#media (max-width: 1024px) and (max-height: 768px) {
.start-button {
z-index: 0; /* amend as required */
}
}