Странности со скриптом 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]

Попробуйте сначала объявить функцию, а потом уже вызывать

Alexanderos,
Попробуйте воткнуть алерты с чтением кукис по событиям чтения и записи куков и глянуть

Вот эта запись не слишком корректна
-($("#panel .region-inner").height() - 20)

я бы сделал так
+(-$("#panel .region-inner").height() +20)

Или так
'-'+($("#panel .region-inner").height() - 20)+'px'

Огромное спасибо за советы! Сейчас буду копать дальше.

Оффтоп:
Что-то я забыл как тут картинки нормально размещать? Ну никак они не хотят размещаться в статье.... Делал именно через кнопочку "картинка"... вставляю туда путь после заливки картинки... или тут только с внешнего источника получается разместить?

Так я же вроде и не вызываю никаких своих функций... а те что есть - это же вроде как безымянные функции... можно поконкретнее?

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

Выложите полный рабочий пример.

Выложил рабочий пример по адресу: http://test.kridom.ru/

Сейчас понял что в Опере вообще бывает не срабатывает cookie, то есть положение панели не запоминается...

Немного изменил код JS, но все равно проблема в необходимости нажать 2 раза чтобы поднять панель осталась:

$(document).ready(function(){
	var panelHeight = $("#panel .region-inner").height();
	var panelTop = panelHeight - 20;

	if (($.cookie('cookie_panel_status')) == 'active') {
		$('#btn-panel-slide').addClass("active");
		$("#panel .region-inner").animate({top: 0 + "px"}, 1);
	}
	else {
		$("#panel .region-inner").animate({top: "-" + panelTop + "px"}, 1);
	}
	
	$('#btn-panel-slide').toggle(function () {	
		$("#panel .region-inner").animate({top: 0 + "px"}, 500);
		$('#btn-panel-slide').addClass("active");
		$.cookie('cookie_panel_status', 'active', { expires: 7, path: '/' });
	}, function() {
		$("#panel .region-inner").animate({top: "-" + panelTop + "px"}, 500);
		$('#btn-panel-slide').removeClass("active");
		$.cookie('cookie_panel_status', '', { expires: 7, path: '/' });
	});
});

Still need help :(

У мну всё запоминает (Наверняка в Настройках брауза куки не включены

Включены как раз.
А два раза не приходится кликать чтобы панель задвинуть вверх из нижнего положения?