07.05.2014, 16:51
|
|
Новичок на форуме
|
|
Регистрация: 07.05.2014
Сообщений: 6
|
|
|
Сохранение свойства css в cookie
Всем доброго времени суток! Прошу помощи в решении небольшой и простой задачи. Найденные решения для аналогичных задач приспособить для моей задачи не получается в виду отсутствия знаний JS.
Сайт:
http://postscriptuum.com/photo
Есть "кнопка" - она скрывает div HTML:
<a id="linkEvent" onClick="hide_show();return false;">Закрыть</a>
JS код (частично взят с другого ресурса)
function hide_show()
{
//Получаем стиль блока с айди divEvent (для изменения)
var divEvent=document.getElementById("divEvent").style.display;
//Получаем стиль ссылки (для изменения)
var linkEvent=document.getElementById("linkEvent").innerHTML;
var linkEventFon=document.getElementById("linkEvent").style.backgroundColor;
//Изначально стиль display у блока равен ""
//так как он изначально отображается
//задаем ему стиль block
if(divEvent=="")divEvent="block";
//Если блок не отображается
if(divEvent=="none")
{
divEvent="block";
linkEvent="Закрыть";
linkEventFon='#f1f1f1';
}
//или наоборот
else
{
divEvent="none";
linkEvent="Открыть";
linkEventFon='#ffffff';
}
//Теперь меняем стили у ссылки
//и блока который хотим скрыть или показать
document.getElementById("divEvent").style.display=divEvent;
document.getElementById("linkEvent").innerHTML=linkEvent;
document.getElementById("linkEvent").style.backgroundColor=linkEventFon;
Задача:
как сделать так, чтобы изменения состояния display записывались в cookie? в JS практически не разбираюсь и прошу помощи.
|
|
07.05.2014, 19:10
|
|
Аспирант
|
|
Регистрация: 25.04.2014
Сообщений: 47
|
|
doomgart,
http://learn.javascript.ru/cookie
Вообще я больше предпочитаю использовать стореджи, нежели куки, если надо просто записывать и считывать значения в пределах домена. Но если стореджи не поддерживаются из-за древности браузера, тогда можно прибегать к кукам...
Последний раз редактировалось M-ka, 07.05.2014 в 19:13.
|
|
07.05.2014, 19:46
|
|
Новичок на форуме
|
|
Регистрация: 07.05.2014
Сообщений: 6
|
|
|
Спасибо за статью, только человеку, мало понимающему JS, статья не сильно помогает. Поэтому, если кто-то может, подскажите более конкретно.
|
|
07.05.2014, 20:06
|
|
Аспирант
|
|
Регистрация: 25.04.2014
Сообщений: 47
|
|
|
doomgart,
Функция setCookie(name, value, options) --- копипастишь ее
читаешь "Запись в document.cookie", какие параметры бывают
Передаешь эти три параметра...среди которых вместо value передать divEvent, в котором лежит block, none или пустое
|
|
07.05.2014, 20:51
|
|
Новичок на форуме
|
|
Регистрация: 07.05.2014
Сообщений: 6
|
|
|
Вот, большое спасибо!
|
|
07.05.2014, 22:19
|
 |
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
В конце документа, или в обработчик события DOMContentLoaded добавляешь код:
if (localStorage.hasOwnProperty('divEventHidden')) {
hide_show(); // вообще, более удачное имя - toggle
}
А в саму функцию hide_show добавляешь строчки: в блоке if - localStorage.setItem('divEventHidden', null);
в блоке else - localStorage.removeItem('divEventHidden');
__________________
В личку только с интересными предложениями 
|
|
07.05.2014, 23:47
|
|
Новичок на форуме
|
|
Регистрация: 07.05.2014
Сообщений: 6
|
|
|
Закинул код, что-то не работает.
"
В конце документа, или в обработчик события DOMContentLoaded добавляешь код:
if (localStorage.hasOwnProperty('divEventHidden')) {
hide_show(); // вообще, более удачное имя - toggle
}
"
Это можно закинуть в конец html странички и заключить в теги <script>, или нужно добавить что-то ещё?
|
|
08.05.2014, 10:09
|
|
Новичок на форуме
|
|
Регистрация: 07.05.2014
Сообщений: 6
|
|
Сообщение от danik.js
|
В конце документа, или в обработчик события DOMContentLoaded добавляешь код:
if (localStorage.hasOwnProperty('divEventHidden')) {
hide_show(); // вообще, более удачное имя - toggle
}
А в саму функцию hide_show добавляешь строчки: в блоке if - localStorage.setItem('divEventHidden', null);
в блоке else - localStorage.removeItem('divEventHidden');
|
Попробовал добавить
<body onload="hide_show();return false;">
Работает. Если добавить
window.onload = hide_show;
вниз странички, тоже работает. Но оба способа работают только с
if (localStorage.hasOwnProperty('divEventHidden')) {
hide_show();
}
- и я не понимаю, почему.
Так же, при медленном интернет-соединении div то появляется, то исчезает, можно ли избежать такого поведения? |
|
08.05.2014, 15:04
|
|
Аспирант
|
|
Регистрация: 25.04.2014
Сообщений: 47
|
|
|
doomgart,
Так же, при медленном интернет-соединении div то появляется, то исчезает, можно ли избежать такого поведения? --- сделайте по умолчанию скрытым и отображайте только тогда, когда необходимо... ну или вообще генерируйте контент на ходу в местах, где он может присутствовать или отсутствовать в зависимости от полученных параметров...
|
|
08.05.2014, 16:26
|
|
Новичок на форуме
|
|
Регистрация: 07.05.2014
Сообщений: 6
|
|
|
Сообщение от M-ka
|
doomgart,
сделайте по умолчанию скрытым и отображайте только тогда, когда необходимо... ну или вообще генерируйте контент на ходу в местах, где он может присутствовать или отсутствовать в зависимости от полученных параметров...
|
Сделать по умолчанию скрытым - нехорошо, потому что в div содержится важная информация для всех новоприбывающих, и она важна для ознакомления. Но, со временем, у пользователей может появиться желание расширить рабочую область за счёт сжатия информации в этом div'е. Поэтому я прошу помощи, т.к. только начинаю изучать JS на Вашем ресурсе.
Вопрос:
1. Будет ли с cookie работать быстрее, или нет?
2. Зачем нужна строка
if (localStorage.hasOwnProperty('divEventHidden')) {
hide_show();
}
если есть
<body onload="hide_show();return false;">
или
window.onload = hide_show;
? |
|
|
|
