Календарь при помощи html и css

sonya777 · 20.08.2009, 23:06

Выбираю месяц и ничего не происходит

sokol666 · 21.08.2009, 12:49

все прекрасно работает, вот код, смотри что у тебя не так:

Код:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){											 
	var month =	$('#month_select').attr('value');
	$('#'+month).css('display', 'block');
	
	$('#month_select').change(function(){
		var month = $(this).attr('value');
		$('.month').each(function(){
			$(this).css('display', 'none');
		});
		$('#'+month).css('display', 'block');
	});
});
</script>
<style type="text/css">
#calendar{
width:170px;
height:170px;
position:relative;
top:320px;
left:65px;
text-align:center;
font-size:11pt;
}
#month_select{
width:150px;
margin-bottom:20px;
}
.month{
display:none;
}
.month a{
width:20px;
height:20px;
text-align:center;
display:block;
float:left;
text-decoration:none;
font-weight:700;
margin:0px 2px 2px 0px;
color:#000;
background-color:#fff;
border:1px solid #ccc;
}
.month a.curr{
color:#ccc;
background-color:#f22;
border:1px solid #c88;
}
.month a:hover{
color:#fff;
background-color:#f00;
border:1px solid #f66;
}
</style>

</head>
<body>
<div id="calendar"><select name="month" id="month_select"><option value="january" selected>Январь</option><option value="february">Февраль</option><option value="march">Март</option><option value="april">Апрель</option><option value="may">Май</option><option value="june">Июнь</option><option value="july">Июль</option><option value="august">Август</option><option value="september">Сентябрь</option><option value="october">Октябрь</option><option value="november">Ноябрь</option><option value="december">Декабрь</option></select><div id="january" class="month"><a href='/january/1' class='curr'>1</a><a href='/january/2'>2</a><a href='/january/3'>3</a><a href='/january/4'>4</a><a href='/january/5'>5</a><a href='/january/6'>6</a><a href='/january/7'>7</a><a href='/january/8'>8</a><a href='/january/9'>9</a><a href='/january/10'>10</a><a href='/january/11'>11</a><a href='/january/12'>12</a><a href='/january/13'>13</a><a href='/january/14'>14</a><a href='/january/15'>15</a><a href='/january/16'>16</a><a href='/january/17'>17</a><a href='/january/18'>18</a><a href='/january/19'>19</a><a href='/january/20'>20</a><a href='/january/21'>21</a><a href='/january/22'>22</a><a href='/january/23'>23</a><a href='/january/24'>24</a><a href='/january/25'>25</a><a href='/january/26'>26</a><a href='/january/27'>27</a><a href='/january/28'>28</a><a href='/january/29'>29</a><a href='/january/30'>30</a><a href='/january/31'>31</a></div><div id="february" class="month"><a href='/february/1' class='curr'>1</a><a href='/february/2'>2</a><a href='/february/3'>3</a><a href='/february/4'>4</a><a href='/february/5'>5</a><a href='/february/6'>6</a><a href='/february/7'>7</a><a href='/february/8'>8</a><a href='/february/9'>9</a><a href='/february/10'>10</a><a href='/february/11'>11</a><a href='/february/12'>12</a><a href='/february/13'>13</a><a href='/february/14'>14</a><a href='/february/15'>15</a><a href='/february/16'>16</a><a href='/february/17'>17</a><a href='/february/18'>18</a><a href='/february/19'>19</a><a href='/february/20'>20</a><a href='/february/21'>21</a><a href='/february/22'>22</a><a href='/february/23'>23</a><a href='/february/24'>24</a><a href='/february/25'>25</a><a href='/february/26'>26</a><a href='/february/27'>27</a><a href='/february/28'>28</a><a href='/february/29'>29</a></div><div id="march" class="month"><a href='/march/1' class='curr'>1</a><a href='/march/2'>2</a><a href='/march/3'>3</a><a href='/march/4'>4</a><a href='/march/5'>5</a><a href='/march/6'>6</a><a href='/march/7'>7</a><a href='/march/8'>8</a><a href='/march/9'>9</a><a href='/march/10'>10</a><a href='/march/11'>11</a><a href='/march/12'>12</a><a href='/march/13'>13</a><a href='/march/14'>14</a><a href='/march/15'>15</a><a href='/march/16'>16</a><a href='/march/17'>17</a><a href='/march/18'>18</a><a href='/march/19'>19</a><a href='/march/20'>20</a><a href='/march/21'>21</a><a href='/march/22'>22</a><a href='/march/23'>23</a><a href='/march/24'>24</a><a href='/march/25'>25</a><a href='/march/26'>26</a><a href='/march/27'>27</a><a href='/march/28'>28</a><a href='/march/29'>29</a><a href='/march/30'>30</a><a href='/march/31'>31</a></div><div id="april" class="month"><a href='/april/1' class='curr'>1</a><a href='/april/2'>2</a><a href='/april/3'>3</a><a href='/april/4'>4</a><a href='/april/5'>5</a><a href='/april/6'>6</a><a href='/april/7'>7</a><a href='/april/8'>8</a><a href='/april/9'>9</a><a href='/april/10'>10</a><a href='/april/11'>11</a><a href='/april/12'>12</a><a href='/april/13'>13</a><a href='/april/14'>14</a><a href='/april/15'>15</a><a href='/april/16'>16</a><a href='/april/17'>17</a><a href='/april/18'>18</a><a href='/april/19'>19</a><a href='/april/20'>20</a><a href='/april/21'>21</a><a href='/april/22'>22</a><a href='/april/23'>23</a><a href='/april/24'>24</a><a href='/april/25'>25</a><a href='/april/26'>26</a><a href='/april/27'>27</a><a href='/april/28'>28</a><a href='/april/29'>29</a><a href='/april/30'>30</a></div><div id="may" class="month"><a href='/may/1' class='curr'>1</a><a href='/may/2'>2</a><a href='/may/3'>3</a><a href='/may/4'>4</a><a href='/may/5'>5</a><a href='/may/6'>6</a><a href='/may/7'>7</a><a href='/may/8'>8</a><a href='/may/9'>9</a><a href='/may/10'>10</a><a href='/may/11'>11</a><a href='/may/12'>12</a><a href='/may/13'>13</a><a href='/may/14'>14</a><a href='/may/15'>15</a><a href='/may/16'>16</a><a href='/may/17'>17</a><a href='/may/18'>18</a><a href='/may/19'>19</a><a href='/may/20'>20</a><a href='/may/21'>21</a><a href='/may/22'>22</a><a href='/may/23'>23</a><a href='/may/24'>24</a><a href='/may/25'>25</a><a href='/may/26'>26</a><a href='/may/27'>27</a><a href='/may/28'>28</a><a href='/may/29'>29</a><a href='/may/30'>30</a><a href='/may/31'>31</a></div><div id="june" class="month"><a href='/june/1' class='curr'>1</a><a href='/june/2'>2</a><a href='/june/3'>3</a><a href='/june/4'>4</a><a href='/june/5'>5</a><a href='/june/6'>6</a><a href='/june/7'>7</a><a href='/june/8'>8</a><a href='/june/9'>9</a><a href='/june/10'>10</a><a href='/june/11'>11</a><a href='/june/12'>12</a><a href='/june/13'>13</a><a href='/june/14'>14</a><a href='/june/15'>15</a><a href='/june/16'>16</a><a href='/june/17'>17</a><a href='/june/18'>18</a><a href='/june/19'>19</a><a href='/june/20'>20</a><a href='/june/21'>21</a><a href='/june/22'>22</a><a href='/june/23'>23</a><a href='/june/24'>24</a><a href='/june/25'>25</a><a href='/june/26'>26</a><a href='/june/27'>27</a><a href='/june/28'>28</a><a href='/june/29'>29</a><a href='/june/30'>30</a></div><div id="july" class="month"><a href='/july/1' class='curr'>1</a><a href='/july/2'>2</a><a href='/july/3'>3</a><a href='/july/4'>4</a><a href='/july/5'>5</a><a href='/july/6'>6</a><a href='/july/7'>7</a><a href='/july/8'>8</a><a href='/july/9'>9</a><a href='/july/10'>10</a><a href='/july/11'>11</a><a href='/july/12'>12</a><a href='/july/13'>13</a><a href='/july/14'>14</a><a href='/july/15'>15</a><a href='/july/16'>16</a><a href='/july/17'>17</a><a href='/july/18'>18</a><a href='/july/19'>19</a><a href='/july/20'>20</a><a href='/july/21'>21</a><a href='/july/22'>22</a><a href='/july/23'>23</a><a href='/july/24'>24</a><a href='/july/25'>25</a><a href='/july/26'>26</a><a href='/july/27'>27</a><a href='/july/28'>28</a><a href='/july/29'>29</a><a href='/july/30'>30</a><a href='/july/31'>31</a></div><div id="august" class="month"><a href='/august/1' class='curr'>1</a><a href='/august/2'>2</a><a href='/august/3'>3</a><a href='/august/4'>4</a><a href='/august/5'>5</a><a href='/august/6'>6</a><a href='/august/7'>7</a><a href='/august/8'>8</a><a href='/august/9'>9</a><a href='/august/10'>10</a><a href='/august/11'>11</a><a href='/august/12'>12</a><a href='/august/13'>13</a><a href='/august/14'>14</a><a href='/august/15'>15</a><a href='/august/16'>16</a><a href='/august/17'>17</a><a href='/august/18'>18</a><a href='/august/19'>19</a><a href='/august/20'>20</a><a href='/august/21'>21</a><a href='/august/22'>22</a><a href='/august/23'>23</a><a href='/august/24'>24</a><a href='/august/25'>25</a><a href='/august/26'>26</a><a href='/august/27'>27</a><a href='/august/28'>28</a><a href='/august/29'>29</a><a href='/august/30'>30</a><a href='/august/31'>31</a></div><div id="september" class="month"><a href='/september/1' class='curr'>1</a><a href='/september/2'>2</a><a href='/september/3'>3</a><a href='/september/4'>4</a><a href='/september/5'>5</a><a href='/september/6'>6</a><a href='/september/7'>7</a><a href='/september/8'>8</a><a href='/september/9'>9</a><a href='/september/10'>10</a><a href='/september/11'>11</a><a href='/september/12'>12</a><a href='/september/13'>13</a><a href='/september/14'>14</a><a href='/september/15'>15</a><a href='/september/16'>16</a><a href='/september/17'>17</a><a href='/september/18'>18</a><a href='/september/19'>19</a><a href='/september/20'>20</a><a href='/september/21'>21</a><a href='/september/22'>22</a><a href='/september/23'>23</a><a href='/september/24'>24</a><a href='/september/25'>25</a><a href='/september/26'>26</a><a href='/september/27'>27</a><a href='/september/28'>28</a><a href='/september/29'>29</a><a href='/september/30'>30</a></div><div id="october" class="month"><a href='/october/1' class='curr'>1</a><a href='/october/2'>2</a><a href='/october/3'>3</a><a href='/october/4'>4</a><a href='/october/5'>5</a><a href='/october/6'>6</a><a href='/october/7'>7</a><a href='/october/8'>8</a><a href='/october/9'>9</a><a href='/october/10'>10</a><a href='/october/11'>11</a><a href='/october/12'>12</a><a href='/october/13'>13</a><a href='/october/14'>14</a><a href='/october/15'>15</a><a href='/october/16'>16</a><a href='/october/17'>17</a><a href='/october/18'>18</a><a href='/october/19'>19</a><a href='/october/20'>20</a><a href='/october/21'>21</a><a href='/october/22'>22</a><a href='/october/23'>23</a><a href='/october/24'>24</a><a href='/october/25'>25</a><a href='/october/26'>26</a><a href='/october/27'>27</a><a href='/october/28'>28</a><a href='/october/29'>29</a><a href='/october/30'>30</a><a href='/october/31'>31</a></div><div id="november" class="month"><a href='/november/1' class='curr'>1</a><a href='/november/2'>2</a><a href='/november/3'>3</a><a href='/november/4'>4</a><a href='/november/5'>5</a><a href='/november/6'>6</a><a href='/november/7'>7</a><a href='/november/8'>8</a><a href='/november/9'>9</a><a href='/november/10'>10</a><a href='/november/11'>11</a><a href='/november/12'>12</a><a href='/november/13'>13</a><a href='/november/14'>14</a><a href='/november/15'>15</a><a href='/november/16'>16</a><a href='/november/17'>17</a><a href='/november/18'>18</a><a href='/november/19'>19</a><a href='/november/20'>20</a><a href='/november/21'>21</a><a href='/november/22'>22</a><a href='/november/23'>23</a><a href='/november/24'>24</a><a href='/november/25'>25</a><a href='/november/26'>26</a><a href='/november/27'>27</a><a href='/november/28'>28</a><a href='/november/29'>29</a><a href='/november/30'>30</a></div><div id="december" class="month"><a href='/december/1' class='curr'>1</a><a href='/december/2'>2</a><a href='/december/3'>3</a><a href='/december/4'>4</a><a href='/december/5'>5</a><a href='/december/6'>6</a><a href='/december/7'>7</a><a href='/december/8'>8</a><a href='/december/9'>9</a><a href='/december/10'>10</a><a href='/december/11'>11</a><a href='/december/12'>12</a><a href='/december/13'>13</a><a href='/december/14'>14</a><a href='/december/15'>15</a><a href='/december/16'>16</a><a href='/december/17'>17</a><a href='/december/18'>18</a><a href='/december/19'>19</a><a href='/december/20'>20</a><a href='/december/21'>21</a><a href='/december/22'>22</a><a href='/december/23'>23</a><a href='/december/24'>24</a><a href='/december/25'>25</a><a href='/december/26'>26</a><a href='/december/27'>27</a><a href='/december/28'>28</a><a href='/december/29'>29</a><a href='/december/30'>30</a><a href='/december/31'>31</a></div></div>
</body>
</html>

Dejust · 21.08.2009, 13:58

sonya777, а почему src="/js/user.js не подключили?

sonya777 · 21.08.2009, 14:32

sokol666, ну скопировал я это все, сделал папку js, положил в нее user.js, но это все равно не html! Как там страницы прописывать то?

Добавлено через 39 секунд

Цитата:

Сообщение от Артем Колесников

sonya777, а почему src="/js/user.js не подключили?

да подключил вроде

sokol666 · 21.08.2009, 15:11

sonya777, копируешь мой текст в блокнот, сохраняешь как *.html запускаешь и радуешься жизни.
C сылками например вот

Код HTML:

<a href='/december/21'>21</a>

это 21 декабря в календаре. Меняешь ссылку на ту страницу которая тебе нужна, и все

sonya777 · 21.08.2009, 22:10

Что то он грузится часами! Фигня какая то

Асмодиан · 22.08.2009, 11:40

sonya777, делали календарь, а получились часы?

sokol666 · 22.08.2009, 13:25

Цитата:

Сообщение от sonya777

Что то он грузится часами! Фигня какая то

т.е. вы хотели сказать, что грузится долго??
Если да, то в ослике он у меня тоже долго грузился (может это из-за того что скрипт со стороннего сайта подключается), а в опере открылся моментально

sonya777 · 22.08.2009, 13:50

Не, у меня опера как раз основной браузер! Вообще грузится не реально долго! А нет никакого более простого решения моей проблемы при помощи html и css?

Niemans · 22.08.2009, 13:56

sonya777, скачайте библиотеку, пропишите ей ссылку и будет все быстро работать.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
растягивающийся календарь на флеш	DeCa	Технологии Flash	0	21.12.2010 16:21
как сделать календарь с праздниками?	kostia	HTML, CSS, JavaScript	0	20.03.2010 21:43
Как вставить в страницу содержимое другой страицы при помощи HTML?	Lander	HTML, CSS, JavaScript	7	27.08.2009 18:53
Прошу о помощи	neXus	Технологии Flash	5	02.03.2006 14:26
Календарь на 2006 г.	Ленок	Графические работы	7	18.01.2006 13:06

20.08.2009, 23:06	#11
sonya777	Выбираю месяц и ничего не происходит

21.08.2009, 13:58	#13
Dejust	sonya777, а почему src="/js/user.js не подключили?

21.08.2009, 15:11	#15
sokol666	sonya777, копируешь мой текст в блокнот, сохраняешь как *.html запускаешь и радуешься жизни. C сылками например вот Код HTML: <a href='/december/21'>21</a> это 21 декабря в календаре. Меняешь ссылку на ту страницу которая тебе нужна, и все

21.08.2009, 22:10	#16
sonya777	Что то он грузится часами! Фигня какая то

22.08.2009, 11:40	#17
Асмодиан	sonya777, делали календарь, а получились часы?

22.08.2009, 13:50	#19
sonya777	Не, у меня опера как раз основной браузер! Вообще грузится не реально долго! А нет никакого более простого решения моей проблемы при помощи html и css?

22.08.2009, 13:56	#20
Niemans	sonya777, скачайте библиотеку, пропишите ей ссылку и будет все быстро работать.