Can you now check my code:
--------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
td {
font-align: right;
padding: 2px;
}
.hour {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #0000FF;
float: right;
width: 10px;
font-weight: bold;
text-align: right;
}
.minute {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#0066FF;
float: right;
width: 23px;
}
.time-slot {
background: blue;
}
.time-slot-selected {
background: yellow;
}
</style>
</head>
<body>
<script type="text/javascript" src="jquery-1.1.3.1.pack.js"></script>
<script>
$(".time-slot").mousedown(function() {
$(this).addClass("time-slot-selected");
}).mouseup(function() {
$(this).addClass("time-slot-selected");
});
</script>
<table width="116" border="1">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">0</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">1</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">2</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">3</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">4</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">5</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">6</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">7</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">8</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">9</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">10</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">11</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">12</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">13</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">14</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">15</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">16</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">17</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">18</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">19</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">20</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">21</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">22</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" rowspan="2" align="right" valign="top"><div
class="minute">00</div>
<div class="hour">23</div>
<div style="clear:both;"></div></td>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
<tr>
<td width="50" align="right" valign="top" class="time-slot"> </td>
</tr>
</table>
</body>
</html>
--------------------------
Now I change my ids to classes.
But now I don't know why td is not change the color from blue to yellow if I
click on it?
2007/7/29, Richard D. Worth <[EMAIL PROTECTED]>:
>
> Ideally you would have a jQuery selector you could use to identify the
> rows/cells that can be selected (by binding onmousedown, onmouseup). Taking
> a look at your html, you've got classes on the TDs in your left columns of
> rows (.minute, .hour). The TDs in the right column of rows only have ids
> (incidentally, your ids are invalid as they must begin with a letter. Also
> while the colon ':' is valid it has to be escaped in jQuery selectors, so
> it's better to avoid if possible).
>
> So the first step (if you want the user to be able to click and drag a
> selection of rows in the right column) is give all of those TDs a class. Ex.
> 'selectable' or 'time-slot'
>
> Next we use that selector and bind the events:
>
> $(".time-slot").mousedown(function() {
> $(this).addClass("time-slot-selected");
> }).mouseup(function() {
> $(this).addClass("time-slot-selected");
> });
>
> If time-slot-selected has a different background color, this will
> highlight the slots at each end of your selection. Now to get the ones
> in-between. One option is to get the index (n-th child of parent) of each of
> these two and then create a selector to give you all the ones with an index
> in that range, then add the same class. Another option - walk all
> "time-slots" (using each() - $(".time-slot").each(function(i) { ... }); ).
> After you pass up a selected one, keep adding the selected class to each
> slot until you hit another selected one. Of course, this assumes the user
> mouseup'd on a different slot than down.
>
> Depending on how you want it to work, you may consider clearing a previous
> selection on mousedown. Something like:
>
> $(".time-slot-selected").removeClass("time-slot-selected");
>
> Also don't forget to make the table and cells unselectable to prevent text
> selection while dragging. Hopefully this will get you started. Let me know
> if you get stuck again.
>
> - Richard
>
> On 7/28/07, PeterKl <[EMAIL PROTECTED]> wrote:
> >
> >
> > I want create my own calendar with jQuery, but I have small problem:
> >
> > My source (for now):
> >
> > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
> > www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> > <html xmlns="http://www.w3.org/1999/xhtml";>
> > <head>
> > <meta http-equiv="Content-Type" content="text/html;
> > charset=iso-8859-1" />
> > <title>Untitled Document</title>
> > <style>
> > td {
> > font-align: right;
> > padding: 2px;
> > }
> > .hour {
> > font-family: Verdana, Arial, Helvetica, sans-serif;
> > font-size: 13px;
> > color: #0000FF;
> > float: right;
> > width: 10px;
> > font-weight: bold;
> > text-align: right;
> >
> > }
> > .minute {
> > font-family: Verdana, Arial, Helvetica, sans-serif;
> > font-size: 11px;
> > color:#0066FF;
> > float: right;
> > width: 23px;
> >
> > }
> > </style>
> > </head>
> >
> > <body>
> > <script type="text/javascript" src="jquery-1.1.3.1.pack.js"></script>
> > <table width="195" border="1">
> > <tr>
> > <td> </td>
> > <td>Ponedeljek</td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">0</div>
> > <div style="clear:both;"></div></td>
> > <td width="129" id="0:00"> </td>
> > </tr>
> > <tr>
> > <td id="0:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">1</div>
> > <div style="clear:both;"></div></td>
> > <td id="1:00"> </td>
> > </tr>
> > <tr>
> > <td id="1:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">2</div>
> > <div style="clear:both;"></div></td>
> > <td id="2:00"> </td>
> > </tr>
> > <tr>
> > <td id="2:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">3</div>
> > <div style="clear:both;"></div></td>
> > <td id="3:00"> </td>
> > </tr>
> > <tr>
> > <td id="3:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">4</div>
> > <div style="clear:both;"></div></td>
> > <td id="4:00"> </td>
> > </tr>
> > <tr>
> > <td id="4:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">5</div>
> > <div style="clear:both;"></div></td>
> > <td id="5:00"> </td>
> > </tr>
> > <tr>
> > <td id="5:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">6</div>
> > <div style="clear:both;"></div></td>
> > <td id="6:00"> </td>
> > </tr>
> > <tr>
> > <td id="6:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">7</div>
> > <div style="clear:both;"></div></td>
> > <td id="7:00"> </td>
> > </tr>
> > <tr>
> > <td id="7:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">8</div>
> > <div style="clear:both;"></div></td>
> > <td id="8:00"> </td>
> > </tr>
> > <tr>
> > <td id="8:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">9</div>
> > <div style="clear:both;"></div></td>
> > <td id="9:00"> </td>
> > </tr>
> > <tr>
> > <td id="9:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">10</div>
> > <div style="clear:both;"></div></td>
> > <td id="10:00"> </td>
> > </tr>
> > <tr>
> > <td id="10:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">11</div>
> > <div style="clear:both;"></div></td>
> > <td id="11:00"> </td>
> > </tr>
> > <tr>
> > <td id="11:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">12</div>
> > <div style="clear:both;"></div></td>
> > <td id="12:00"> </td>
> > </tr>
> > <tr>
> > <td id="12:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">13</div>
> > <div style="clear:both;"></div></td>
> > <td id="13:00"> </td>
> > </tr>
> > <tr>
> > <td id="13:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">14</div>
> > <div style="clear:both;"></div></td>
> > <td id="14:00"> </td>
> > </tr>
> > <tr>
> > <td id="14:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">15</div>
> > <div style="clear:both;"></div></td>
> > <td id="15:00"> </td>
> > </tr>
> > <tr>
> > <td id="15:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">16</div>
> > <div style="clear:both;"></div></td>
> > <td id="16:00"> </td>
> > </tr>
> > <tr>
> > <td id="16:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">17</div>
> > <div style="clear:both;"></div></td>
> > <td id="17:00"> </td>
> > </tr>
> > <tr>
> > <td id="17:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">18</div>
> > <div style="clear:both;"></div></td>
> > <td id="18:00"> </td>
> > </tr>
> > <tr>
> > <td id="18:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">19</div>
> > <div style="clear:both;"></div></td>
> > <td id="19:00"> </td>
> > </tr>
> > <tr>
> > <td id="19:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">20</div>
> > <div style="clear:both;"></div></td>
> > <td id="20:00"> </td>
> > </tr>
> > <tr>
> > <td id="20:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">21</div>
> > <div style="clear:both;"></div></td>
> > <td id="21:00"> </td>
> > </tr>
> > <tr>
> > <td id="21:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">22</div>
> > <div style="clear:both;"></div></td>
> > <td id="22:00"> </td>
> > </tr>
> > <tr>
> > <td id="22:30"> </td>
> > </tr>
> > <tr>
> > <td width="50" rowspan="2" align="right" valign="top"><div
> > class="minute">00</div>
> > <div class="hour">23</div>
> > <div style="clear:both;"></div></td>
> > <td id="23:00"> </td>
> > </tr>
> > <tr>
> > <td id="23:30"> </td>
> > </tr>
> > </table>
> > </body>
> > </html>
> >
> > My problem is:
> > How can I use jQuery in this HTML table with option onmousedown and
> > onmouseup -> I want colored the rows, witch is selected by user (user
> > is select them with mouse).
> > (example what I want is Google Calendar)
> >
> > Thx,
> > PeterKl
> >
> >
>
