Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.11.2010, 21:13
Новичок на форуме
Отправить личное сообщение для Master07 Посмотреть профиль Найти все сообщения от Master07
 
Регистрация: 03.11.2010
Сообщений: 3

Неполадки с выдвижной панелью
http://www.obzhorka.ucoz.ru/
Сверху есть рабочий вариант выдвижной панели на jquery, в мазиле все работает, а в эксплорере при закрытии панель странно дергается, как это можно исправить вот код:

<head> 
<link rel="stylesheet" href="panel.css" type="text/css" media="screen" /> 
<script src="http://xhtml.co.il/scripts/jquery-latest.min.js" type="text/javascript"></script> 
<script> 
$(document).ready(function(){ 
$("#box").click(function(){ 
$("#menu").animate({ 
height: "100px", 
height: "toggle" 
}, 1500 ); 
}); 
}); 

</script> 

<script> 
$(document).ready(function() { 
$("#box").click(function() { 
$(this).animate( { 'top': ($(this).css('top') != "100px" ? "100px" : "0px") }, 1500 ); 
}); 
}); 

</script> 
<style> 
body { 
margin: 0; 
padding: 0px 0 0; 
position: relative; 

} 

#menu { 

list-style: none; 
padding: 0; 
margin: 0; 
width: 100%; 
height: 100px; 
background: url([url]http://www.obzhorka.ucoz.ru/slidepanel/images/fonpaneli.gif[/url]) no-repeat; 
display: none; 
position: absolute; 

} 
#menu span { 
display: none; 
position: absolute; 

} 
#menu a { 
display: block; 
text-indent: -900%; 
position: absolute; 
outline: none; 

} 
#menu a:hover { 
background-position: 0 0; 
} 
#menu a:hover span{ 
display: block; 
} 
#menu .kulinar { 
width: 174px; 
height: 20px; 
background: url([url]http://www.obzhorka.ucoz.ru/slidepanel/images/kulinarnye_recepty.gif[/url]) no-repeat; 
left: 56px; 
top: 40px; 
} 
#menu .kulinar span { 

width: 174px; 
height: 20px; 
background: url([url]http://www.obzhorka.ucoz.ru/slidepanel/images/kulinarnyerecepty.gif[/url]) no-repeat; 
left: 0px; 
top: 0px; 

} 
#menu .masterklass { 
width: 131px; 
height: 20px; 
background: url([url]http://www.obzhorka.ucoz.ru/slidepanel/images/master_klassy.gif[/url]) no-repeat; 
left: 338px; 
top: 40px; 
} 
#menu .masterklass span { 

width: 131px; 
height: 20px; 
background: url([url]http://www.obzhorka.ucoz.ru/slidepanel/images/Masterklassy.gif[/url]) no-repeat; 
left: 0px; 
top: 0px; 

} 
#menu .pazly { 
width: 112px; 
height: 20px; 
background: url([url]http://www.obzhorka.ucoz.ru/slidepanel/images/pazly.gif[/url]) no-repeat; 
left: 588px; 
top: 40px; 
} 
#menu .pazly span { 
width: 112px; 
height: 20px; 
background: url([url]http://www.obzhorka.ucoz.ru/slidepanel/images/pazly1.gif[/url]) no-repeat; 
left: 0px; 
top: 0px; 
cursor: pointer; 
} 
#menu .forum { 
width: 152px; 
height: 20px; 
background: url([url]http://www.obzhorka.ucoz.ru/slidepanel/images/forum.gif[/url]) no-repeat; 
left: 788px; 
top: 40px; 
} 
#menu .forum span { 
width: 152px; 
height: 20px; 
background: url([url]http://www.obzhorka.ucoz.ru/slidepanel/images/forum1.gif[/url]) no-repeat; 
left: 0px; 
top: 0px; 
cursor: pointer; 
} 

#box { 
top: 0; 
position: absolute; 
background-color: #DAA520; 
height: 100px; 
} 

</style> 
</head> 
<body> 
<ul id="menu"> 

<li><a href="#" class="kulinar">kulinar<span></span></a></li> 
<li><a href="#" class="masterklass">masterklass<span></span></a></li> 
<li><a href="#" class="pazly">pazly<span></span></a></li> 
<li><a href="#" class="forum">forum<span></span></a></li> 

</ul> 
<button id="box">» Run</button> 

</body>

Последний раз редактировалось Master07, 04.11.2010 в 14:24.
Ответить с цитированием
  #2 (permalink)  
Старый 04.11.2010, 07:27
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

Цитата:
height: "100px",
height: "toggle"
Подозрительно…

P.S. Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 04.11.2010, 14:32
Новичок на форуме
Отправить личное сообщение для Master07 Посмотреть профиль Найти все сообщения от Master07
 
Регистрация: 03.11.2010
Сообщений: 3

Сообщение от exec Посмотреть сообщение
Подозрительно….
Когда я написал этот код в блокноте и тестировал его на компьютре то проблем не было, а стоило загрузить на сайт они появились.
Выделеный Вами элемент кода подразумевает выдвижение панели низ на 100 px по клику с возможностью убрать ее при повторном клике, о всяком случае так подразумевалось, или это можно сделать более корректно ?
Ответить с цитированием
  #4 (permalink)  
Старый 04.11.2010, 14:43
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

Попробуйте сделать так:

$("#box").click(function () {
	this.clicked = !this.clicked;
	$("#menu").slideToggle(1500);
	$(this).animate({
		top: this.clicked ? "100px" : 0
	}, 150);
});
Ответить с цитированием
  #5 (permalink)  
Старый 04.11.2010, 17:30
Новичок на форуме
Отправить личное сообщение для Master07 Посмотреть профиль Найти все сообщения от Master07
 
Регистрация: 03.11.2010
Сообщений: 3

Когда ставлю этот код, двигается только кнопка, а паенль не выдвигается
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск