Develop Reference

JQuery Datepicker - vertically center date

I'm currently styling the jquery datepicker but im struggeling with vertically centering the dates positions.
This is what I got so far:
https://jsfiddle.net/L4vrkpmc/1/
Since the datepicker is using a table I tried
.ui-datepicker-calendar td{
vertical-align:center;
}
but it won't work. Anyone know how to vertical center the days?
html,
body {
height: 100%;
}
/* DatePicker Container */
#calendar {
height: 100%;
}
.ui-datepicker {
width: 100%;
height: 100%;
margin: 5px auto 0;
font: 9pt Arial, sans-serif;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}
.ui-datepicker a {
text-decoration: none;
}
/* DatePicker Table */
.ui-datepicker table {
width: 100%;
height: 100%;
text-align: center;
}
.ui-datepicker-header {
background: url('../img/dark_leather.png') repeat 0 0 #000;
color: #e0e0e0;
font-weight: bold;
-webkit-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, 2);
-moz-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
text-shadow: 1px -1px 0px #000;
filter: dropshadow(color=#000, offx=1, offy=-1);
line-height: 30px;
border-width: 1px 0 0 0;
border-style: solid;
border-color: #111;
}
.ui-datepicker-title {
text-align: center;
}
.ui-datepicker-prev,
.ui-datepicker-next {
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
cursor: pointer;
line-height: 600%;
overflow: hidden;
}
.ui-datepicker-prev {
float: left;
background-position: center -30px;
}
.ui-datepicker-next {
float: right;
background-position: center 0px;
}
.ui-datepicker thead {
background-color: #f7f7f7;
background-image: -moz-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #f1f1f1));
background-image: -webkit-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
background-image: -o-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
background-image: -ms-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
background-image: linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f1f1f1', GradientType=0);
border-bottom: 1px solid #bbb;
}
.ui-datepicker th {
text-transform: uppercase;
font-size: 6pt;
padding: 5px 0;
color: #666666;
text-shadow: 1px 0px 0px #fff;
filter: dropshadow(color=#fff, offx=1, offy=0);
}
.ui-datepicker tbody td {
padding: 0;
border-right: 1px solid #bbb;
}
.ui-datepicker tbody td:last-child {
border-right: 0px;
}
.ui-datepicker tbody tr {
border-bottom: 1px solid #bbb;
}
.ui-datepicker tbody tr:last-child {
border-bottom: 0px;
}
.ui-datepicker td span,
.ui-datepicker td a {
display: inline-block;
font-weight: bold;
text-align: center;
width: 100%;
height: 100%;
color: #666666;
text-shadow: 1px 1px 0px #fff;
filter: dropshadow(color=#fff, offx=1, offy=1);
}
.ui-datepicker-calendar .ui-state-default {
background: #ededed;
background: -moz-linear-gradient(top, #ededed 0%, #dedede 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ededed), color-stop(100%, #dedede));
background: -webkit-linear-gradient(top, #ededed 0%, #dedede 100%);
background: -o-linear-gradient(top, #ededed 0%, #dedede 100%);
background: -ms-linear-gradient(top, #ededed 0%, #dedede 100%);
background: linear-gradient(top, #ededed 0%, #dedede 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dedede', GradientType=0);
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
-moz-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
}
.ui-datepicker-calendar .ui-state-hover {
background: #f7f7f7;
}
.ui-datepicker-calendar .ui-state-active {
background: #6eafbf;
-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
-moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
color: #e0e0e0;
text-shadow: 0px 1px 0px #4d7a85;
filter: dropshadow(color=#4d7a85, offx=0, offy=1);
border: 1px solid #55838f;
position: relative;
margin: -1px;
}
.ui-datepicker-unselectable .ui-state-default {
background: #f4f4f4;
color: #b4b3b3;
}
.ui-datepicker-calendar td:first-child .ui-state-active {
margin-left: 0;
}
.ui-datepicker-calendar td:last-child .ui-state-active {
margin-right: 0;
}
.ui-datepicker-calendar tr:last-child .ui-state-active {
margin-bottom: 0;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$('#calendar').datepicker({
inline: true,
showOtherMonths: true,
firstDay: 1,
dayNamesMin: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
});
});
</script>
<div id="calendar"></div>
Thanks for your help :)

You Can't vertical align text in "a" tag if its not containing any child tag. I wrapped the text with <span> under 'a' tag using jQuery. here is the code:
$(".ui-datepicker td").each(function(){
var dateText = $(this).find("a").text();
$(this).find("a").html("<span>"+dateText+"</span>");
});
and some simple CSS changes :
.ui-datepicker td a{
display: table;
position: relative;
height: 100%;
width: 100%;
}
.ui-datepicker td a span{
display: table-cell;
text-align:center;
vertical-align: middle;
}

You can achieve this using only CSS by simply setting the line-height of the number to the same height of the square:
.ui-state-default {
height: 45px;
line-height: 45px;
padding: 0;
}

Change div attribute title color

I have a div with tt ID and I write code in JavaScript to add title attribute (tooltip) at runtime code given as:
$("#tt")
.css("left", (mouse.x - 240) + "px")
.css("top", (mouse.y - 258) + "px")
.attr("title", title)
.tooltip('show');
Now I want set color at title attribute. Please suggest me how to make it work.

I am currently using this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
/* Change Blocked with the title you are loo*/
<script>$(document).ready(function(){
$("div[title*='Blocked']").css("background-color", "yellow");});
</script>
/* Everything with the text Blocked in the title will change color*/
<div title="Blocked ality">One</div>
<div title="Blocked">Two</div>

If I understand correctly, you want to change the color of the native title...
Here is a CSS3 way to do that
http://jsfiddle.net/dimshik/tDQWN/8662/
source: https://css-tricks.com/css-content/
body {
padding: 10px;
}
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: red;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
<p>Here is some text and a LINK
with a red title on it. </p>
<p> And here is another one Link eleifend leo.</p>

Need Help building a login system for my website

Im building a login system in html with form. Heres The HTML and css.
Would php work?
HTML
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6 ielt8"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7 ielt8"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Paper Stack</title>
<link rel="stylesheet" type="text/css" href="loginstyle.css" />
</head>
<body>
<div class="container">
<section id="content">
<form action="">
<h1>Login Form</h1>
<div>
<input type="text" placeholder="Username" required="" id="username" />
</div>
<div>
<input type="password" placeholder="Password" required="" id="password" />
</div>
<div>
<input type="submit" value="Log in" />
Lost your password?
Register
</div>
</form><!-- form -->
<div class="button">
Download source file
</div><!-- button -->
</section><!-- content -->
</div><!-- container -->
</body>
</html>
CSS
/* Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
background: #DCDDDF url(http://cssdeck.com/uploads/media/items/7/7AF2Qzt.png);
color: #000;
font: 14px Arial;
margin: 0 auto;
padding: 0;
position: relative;
}
h1{ font-size:28px;}
h2{ font-size:26px;}
h3{ font-size:18px;}
h4{ font-size:16px;}
h5{ font-size:14px;}
h6{ font-size:12px;}
h1,h2,h3,h4,h5,h6{ color:#563D64;}
small{ font-size:10px;}
b, strong{ font-weight:bold;}
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }
.left { float:left; }
.right { float:right; }
.alignleft { float: left; margin-right: 15px; }
.alignright { float: right; margin-left: 15px; }
.clearfix:after,
form:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container { margin: 25px auto; position: relative; width: 900px; }
#content {
background: #f9f9f9;
background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
-webkit-box-shadow: 0 1px 0 #fff inset;
-moz-box-shadow: 0 1px 0 #fff inset;
-ms-box-shadow: 0 1px 0 #fff inset;
-o-box-shadow: 0 1px 0 #fff inset;
box-shadow: 0 1px 0 #fff inset;
border: 1px solid #c4c6ca;
margin: 0 auto;
padding: 25px 0 0;
position: relative;
text-align: center;
text-shadow: 0 1px 0 #fff;
width: 400px;
}
#content h1 {
color: #7E7E7E;
font: bold 25px Helvetica, Arial, sans-serif;
letter-spacing: -0.05em;
line-height: 20px;
margin: 10px 0 30px;
}
#content h1:before,
#content h1:after {
content: "";
height: 1px;
position: absolute;
top: 10px;
width: 27%;
}
#content h1:after {
background: rgb(126,126,126);
background: -moz-linear-gradient(left, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
right: 0;
}
#content h1:before {
background: rgb(126,126,126);
background: -moz-linear-gradient(right, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
left: 0;
}
#content:after,
#content:before {
background: #f9f9f9;
background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
border: 1px solid #c4c6ca;
content: "";
display: block;
height: 100%;
left: -1px;
position: absolute;
width: 100%;
}
#content:after {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
top: 0;
z-index: -1;
}
#content:before {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
top: 0;
z-index: -2;
}
#content form { margin: 0 20px; position: relative }
#content form input[type="text"],
#content form input[type="password"] {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: #eae7e7 url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) no-repeat;
border: 1px solid #c8c8c8;
color: #777;
font: 13px Helvetica, Arial, sans-serif;
margin: 0 0 10px;
padding: 15px 10px 15px 40px;
width: 80%;
}
#content form input[type="text"]:focus,
#content form input[type="password"]:focus {
-webkit-box-shadow: 0 0 2px #ed1c24 inset;
-moz-box-shadow: 0 0 2px #ed1c24 inset;
-ms-box-shadow: 0 0 2px #ed1c24 inset;
-o-box-shadow: 0 0 2px #ed1c24 inset;
box-shadow: 0 0 2px #ed1c24 inset;
background-color: #fff;
border: 1px solid #ed1c24;
outline: none;
}
#username { background-position: 10px 10px !important }
#password { background-position: 10px -53px !important }
#content form input[type="submit"] {
background: rgb(254,231,154);
background: -moz-linear-gradient(top, rgba(254,231,154,1) 0%, rgba(254,193,81,1) 100%);
background: -webkit-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
background: -o-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
background: -ms-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
background: linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee79a', endColorstr='#fec151',GradientType=0 );
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
-ms-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
-o-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
border: 1px solid #D69E31;
color: #85592e;
cursor: pointer;
float: left;
font: bold 15px Helvetica, Arial, sans-serif;
height: 35px;
margin: 20px 0 35px 15px;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
width: 120px;
}
#content form input[type="submit"]:hover {
background: rgb(254,193,81);
background: -moz-linear-gradient(top, rgba(254,193,81,1) 0%, rgba(254,231,154,1) 100%);
background: -webkit-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
background: -o-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
background: -ms-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
background: linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#fee79a',GradientType=0 );
}
#content form div a {
color: #004a80;
float: right;
font-size: 12px;
margin: 30px 15px 0 0;
text-decoration: underline;
}
.button {
background: rgb(247,249,250);
background: -moz-linear-gradient(top, rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
background: -webkit-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
background: -o-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
background: -ms-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
background: linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0',GradientType=0 );
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-ms-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-o-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
border-top: 1px solid #CFD5D9;
padding: 15px 0;
}
.button a {
background: url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) 0 -112px no-repeat;
color: #7E7E7E;
font-size: 17px;
padding: 2px 0 2px 40px;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.button a:hover {
background-position: 0 -135px;
color: #00aeef;
}
When the user enter submit i would like it to check a txt file with usernames and passwords. The text file is formatted like this:
username1:password1
username2:password2
username3:password3
I want to grab the first line, split it to "username1" and "password1", and then post to this:
br.form['login'] = 'username1'
br.form['passwd'] = 'password1'
EDIT
I know this php code will write the username and password to a txt file. I just need help doing the opposite.
PHP (Register)
<?php
//If Submit Button Is Clicked Do the Following
if ($_POST['Login']){
$myFile = "log.txt";
$fh = fopen($myFile, 'a') or die("can't open file");
$stringData = $_POST['username'] . ":";
fwrite($fh, $stringData);
$stringData = $_POST['password'] . "\n";
fwrite($fh, $stringData);
fclose($fh);
} ?>
After that, I want it to repeat and move onto username2:password2.
I saw this exact post for python but i would like to do this in html, Php ,Or JavaScrypt any help

PHP would be a good option. First familiarise yourself with the language then look in to the functions related to files e.g. fwrite() and fread().
Edit:
Look in to fgets(). That way you can put the username and password posted from the form and compare it against the file line by line.

You can use PHP.
Also it is never a good idea to store passwords in plain text. You should do some hashing of passwords and then store them. You can use PHP's password hashing API. You can read more about PHP's password hashing API
Also, I am not sure why you are storing password in plain text, you probably can use database (like MySQL) to store the details.
However, if you want only a layer of password protection before the users can access your site then you can use .htaccess and .htpasswd to add a layer of authentication on your site. When you add this, the users will have to enter a password before they can access the site. You can read more about about Authentication using .htaccess file
If you don't need database and don't want to use the .htaccess method and want to use file, then you might want to read on fgets() and fread(). Also, if you are using the file to store passwords, then don't have it accessible from the website (i.e. using some URL in browser). Store the file is some location which cannot be reached by some URL on your site. This will prevent others to download your password file.

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 */
}
}