Показать сообщение отдельно
  #1 (permalink)  
Старый 07.06.2012, 00:25
Интересующийся
Отправить личное сообщение для Alexanderos Посмотреть профиль Найти все сообщения от Alexanderos
 
Регистрация: 27.09.2010
Сообщений: 29

Странности со скриптом jQuery...
Всем доброго времени суток.

Решил я как-то сделать выдвигающуюся панель навигации для сайта на jQuery. И вроде как неплохо получилось, все работает. Вот только минус большой в том что постоянно эту панель нужно открывать/закрывать при перезагрузке страницы...

Потому решил сделать сохранение состояния в cookies браузера. Идея конечно совсем не нова... и у меня в принципе все работает... за исключением одного маленького неприятного момента. С которым собственно и прошу помочь разобраться...

Почему-то после перезагрузки страницы, когда состояние панели берется из cookies, именно в выдвинутом (активном) положении панели, приходится нажимать на кнопку 2 раза, чтобы панель задвинулась.

После того как панель задвинулась, если страницу не перезагружать, то механизм отрабатывает все верно. Ровно по одному нажатию для движения панели...

Нахожу это очень странным, код писал сам, глядя на многочисленные примеры. Не могу найти ошибку, подскажите неопытному плиз


Собственно JS:
$(document).ready(function(){
	if (($.cookie('cookie_panel_status')) == 'active') {
		$('#btn-panel-slide').addClass("active");
		$("#panel .region-inner").animate({top:"0px"}, 1);
	}
	else {
		$("#panel .region-inner").animate({top:-($("#panel .region-inner").height() - 20) + "px"}, 1);
	}	
	
	$('#btn-panel-slide').toggle(function () {	
		$("#panel .region-inner").animate({top:"0px"}, 500);
		$('#btn-panel-slide').addClass("active");
		$.cookie('cookie_panel_status', 'active', { expires: 7, path: '/' });
	}, function() {
		$("#panel .region-inner").animate({top:-($("#panel .region-inner").height() - 20) + "px"}, 500);
		$('#btn-panel-slide').removeClass("active");
		$.cookie('cookie_panel_status', '', { expires: 7, path: '/' });
	});
});



HTML:
<div id="panel" class="section region">
   <div class="region-inner">
      ...
   </div>
   <a href="#" id="btn-panel-slide" class=""></a>
</div>



Панель неактивна:
[IMG]attachments/jquery/1285d1339014850-strannosti-so-skriptom-jquery-panel-jpg[/IMG]
Панель активна:
[IMG]attachments/jquery/1285d1339014850-strannosti-so-skriptom-jquery-panel_active-jpg[/IMG]
Изображения:
Тип файла: jpg panel.jpg (126.4 Кб, 3 просмотров)
Тип файла: jpg panel_active.jpg (131.0 Кб, 6 просмотров)

Последний раз редактировалось Alexanderos, 07.06.2012 в 00:38.
Ответить с цитированием