Forums

JosiahB

Hello,

I am relatively new to web coding and I need to create a calendar that has different colored days for different events. This is what I have so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">

table {
border-collapse: collapse;
width: 100px;
}

#month {
	position:relative;
	left:170px;
}


td {
position: relative;
diplay: block;
text-allign: center;
padding-left: 20px;

}


.calendar td, tr, h6 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-align:center;
        width: 300px; 
	}
	
.calendar h2 {
	font-family:Arial, Helvetica, sans-serif;
	position: absolute;
	left: 40px;
	}

.days {
	padding-bottom:10px;
	word-spacing: 25px;
}


.fade {
	color: grey;
}



.days h6 {
	display: inline;
	position:relative;
	left: 20px;
}

.calendar tr, td {
	padding-top: 15px;
	padding-bottom: 15px;
	padding-right: 35px;
	padding-left: 35px;
	font-size:24px;
	
}

#fade-top {
	color: grey;
}

#Sunday {
}

#Monday {
left: 38px;
}

#Tuesday {
left: 49px;
}

#Wednesday {
left: 50px;
}

#Thursday {
left: 44px;
}

#Friday {
left: 59px;
}

#Saterday {
left: 75px;
}

#game {
	background-image: url(Images/calendar-game.PNG);
	position:relative;
	width: 100%;
	height:100%;
	background-position: 0px -60px;	
	background-repeat:no-repeat;
	cursor:pointer;
	color:#FFF;
}



#game:hover {
	background-image: url(Images/calendar-game.PNG);
	cursor:pointer;
	background-position:0px -1px;
	color:#000000;
}


#practice {
	background-image: url(Images/calendar-practice.png);
	width:100%;
	height:100%;
	position:relative;
	background-position: 0px -60px;
	background-repeat:no-repeat;
	cursor:pointer;
	color: #FFF;
}

#practice:hover {
	background-image: url(Images/calendar-practice.png);
	cursor:pointer;
	position:relative;
	background-position:0px -1px;
	color:black;
}

#canceled {
	background-image: url(Images/calendar-canceled.png);
	width:100%;
	height:100%;
	position:relative;
	background-position: 0px -60px;
	background-repeat:no-repeat;
	cursor:pointer;
	color:#FFF;
}

#canceled:hover {
	background-image: url(Images/calendar-canceled.png);
	cursor:pointer;
	position:relative;
	background-position:0px -1px;
	color:#000000;
}

#change {
	background-image: url(Images/calendar-change.png);
	width:100%;
	height:100%;
	position:relative;
	background-position: 0px -60px;
	background-repeat:no-repeat;
	cursor:pointer;
	color:#FFF;
}

#change:hover {
	background-image: url(Images/calendar-change.png);
	cursor:pointer;
	position:relative;
	background-position:0px -1px;
	color:#000000;
}

.blank {
    background-image: url(Images/calendar-blank.png);
	width:100%;
	height:100%;
	position:relative;
	background-position: 0px 3px;
	background-repeat:no-repeat;
	cursor: default;
}

</style>
<title>Untitled Document</title>
</head>

<body>

<table class="calendar">

<table class="September">

<h2 id="month">September</h2>

<div class="days">
<h6 id="Sunday">Sunday</h6>
<h6 id="Monday">Monday</h6>
<h6 id="Tuesday">Tuesday</h6>
<h6 id="Wednesday">Wednesday</h6>
<h6 id="Thursday">Thursday</h6>
<h6 id="Friday">Friday</h6>
<h6 id="Saterday">Saterday</h6>
</div>

<tr>
	<td id="fade-top" class="blank">26</td>
    <td id="fade-top" class="blank">27</td>
    <td id="fade-top" class="blank">28</td>
    <td id="fade-top" class="blank">29</td>
    <td id="fade-top" class="blank">30</td>
    <td id="fade-top" class="blank">31</td>
    <td>1</td>
</tr> 

<tr>
    <td class="blank">2</td>
    <td id="game">3</a></td>
    <td id="practice">4</td>
    <td id="canceled">5</td>
    <td id="change">6</td>
    <td>7</td>
    <td>8</td>
</tr>  

<tr>
	<td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
</tr> 
 
<tr>
	<td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
    <td>21</td>
    <td>22</td>
</tr>   

<tr>
	<td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    <td>28</td>
    <td>29</td>
</tr>  

<tr>
	<td>30</td>
    <td class="fade">1</td>
    <td class="fade">2</td>
    <td class="fade">3</td>
    <td class="fade">4</td>
    <td class="fade">5</td>
    <td class="fade">6</td>
</tr> 

</table><!--end of September-->

....etc.

What I need next is to have some code that will allow me to display information when a certain day is clicked. I tried using :active but that would crop the image/text within the square area of the specific day.

Thanks, any help would be greatly appreciated!

JosiahB

oh, something happened to all my div tags sorry...

Senff

Please select your code in the post and then hit the CODE button (the white paper with the blue thingies on it).

Senff

You should use some jQuery for that.

Basically, first create a class called "selected".
When you click on any TD, remove the class "selected" from all TDs, and apply it to the one you just clicked.

Like this: http://jsfiddle.net/DvrEB/

Also, it's called SatUrday.

JosiahB

ok, where do I insert the jQuery?

haha, I know I was typing fast and forgot to change it :)

JosiahB

and how? sorry don't know much about that, just some css and html :)

Senff

Start at http://docs.jquery.com/How_jQuery_Works

JosiahB

Hey, still kinda confused on how to insert it into my page ... :(

I tried doing this but nothing happened...

....


.selected {
	background-color:green;
}

</style>
<title>Untitled Document</title>
</head>

<body>



<table class="calendar">



<table class="September">

<h2 id="month">September</h2>

<div class="days">
<h6 id="Sunday">Sunday</h6>
<h6 id="Monday">Monday</h6>
<h6 id="Tuesday">Tuesday</h6>
<h6 id="Wednesday">Wednesday</h6>
<h6 id="Thursday">Thursday</h6>
<h6 id="Friday">Friday</h6>
<h6 id="Saterday">Saterday</h6>
</div>

<tr>
	<td id="fade-top" class="blank">26</td>
    <td id="fade-top" class="blank">27</td>
    <td id="fade-top" class="blank">28</td>
    <td id="fade-top" class="blank">29</td>
    <td id="fade-top" class="blank">30</td>
    <td id="fade-top" class="blank">31</td>
    <td>1</td>
</tr> 

<tr>
	<td class="blank">2</td>
    <td id="game">3</a></td>
    <td id="practice">4</td>
    <td id="canceled">5</td>
    <td id="change">6</td>
    <td>7</td>
    <td>8</td>
</tr>  


<script type="text/javascript">
$('td').click(function(){
    $('td').removeClass('selected');
    $(this).addClass('selected');
});
</script>

.....

THANKS!!

Robskiwarrior

You need to wrap it in document ready. If you have a look at http://docs.jquery.com/How_jQuery_Works it will show you.


<script type="text/javascript">
jQuery(function($) {
$('td').click(function(){
    $('td').removeClass('selected');
    $(this).addClass('selected');
 });
});
</script>

Senff

Also, any content in a table should always be in a CELL. So when we take the first part of your code for example:

<table class="calendar">

<table class="September">

<h2 id="month">September</h2>

<div class="days">
   <h6 id="Sunday">Sunday</h6>
   <h6 id="Monday">Monday</h6>
   ......
   <h6 id="Saterday">Saterday</h6>
</div>

<tr>
   <td id="fade-top" class="blank">26</td>
   <td id="fade-top" class="blank">27</td>
   ....

Should be something like this:

<table class="calendar">

   <tr><td>   <!--   THIS OVER HERE -->

   <table class="September">

      <tr><td>   <!--   THIS OVER HERE -->

      <h2 id="month">September</h2>

      <div class="days">
         <h6 id="Sunday">Sunday</h6>
         <h6 id="Monday">Monday</h6>
         ......
         <h6 id="Saterday">Saterday</h6>
      </div>

      </tr></td>   <!--   THIS OVER HERE -->

      <tr>
         <td id="fade-top" class="blank">26</td>
         <td id="fade-top" class="blank">27</td>
         ....

And, again, it's SatUrday not SatErday. ;)

treehouse : what would you like to learn today?

Forums

Problems with Tables