Форум

doomgart · #1 (**permalink**) 07.05.2014, 16:51

Всем доброго времени суток! Прошу помощи в решении небольшой и простой задачи. Найденные решения для аналогичных задач приспособить для моей задачи не получается в виду отсутствия знаний 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 практически не разбираюсь и прошу помощи.

M-ka · #2 (**permalink**) 07.05.2014, 19:10

doomgart,
http://learn.javascript.ru/cookie

Вообще я больше предпочитаю использовать стореджи, нежели куки, если надо просто записывать и считывать значения в пределах домена. Но если стореджи не поддерживаются из-за древности браузера, тогда можно прибегать к кукам...

doomgart · #3 (**permalink**) 07.05.2014, 19:46

Спасибо за статью, только человеку, мало понимающему JS, статья не сильно помогает. Поэтому, если кто-то может, подскажите более конкретно.

M-ka · #4 (**permalink**) 07.05.2014, 20:06

doomgart,
Функция setCookie(name, value, options) --- копипастишь ее
читаешь "Запись в document.cookie", какие параметры бывают
Передаешь эти три параметра...среди которых вместо value передать divEvent, в котором лежит block, none или пустое

doomgart · #5 (**permalink**) 07.05.2014, 20:51

Вот, большое спасибо!

danik.js · #6 (**permalink**) 07.05.2014, 22:19

В конце документа, или в обработчик события DOMContentLoaded добавляешь код:

if (localStorage.hasOwnProperty('divEventHidden')) {
    hide_show(); // вообще, более удачное имя - toggle
}

А в саму функцию hide_show добавляешь строчки: в блоке if - localStorage.setItem('divEventHidden', null);
в блоке else - localStorage.removeItem('divEventHidden');

doomgart · #7 (**permalink**) 07.05.2014, 23:47

Закинул код, что-то не работает.
"
В конце документа, или в обработчик события DOMContentLoaded добавляешь код:
if (localStorage.hasOwnProperty('divEventHidden')) {
hide_show(); // вообще, более удачное имя - toggle
}
"
Это можно закинуть в конец html странички и заключить в теги <script>, или нужно добавить что-то ещё?

doomgart · #8 (**permalink**) 08.05.2014, 10:09

Сообщение от 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 то появляется, то исчезает, можно ли избежать такого поведения?

M-ka · #9 (**permalink**) 08.05.2014, 15:04

doomgart,
Так же, при медленном интернет-соединении div то появляется, то исчезает, можно ли избежать такого поведения? --- сделайте по умолчанию скрытым и отображайте только тогда, когда необходимо... ну или вообще генерируйте контент на ходу в местах, где он может присутствовать или отсутствовать в зависимости от полученных параметров...

doomgart · #10 (**permalink**) 08.05.2014, 16:26

Сообщение от 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;

?

Форум

Справочник

Discord чат

Курсы javascript