Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.02.2014, 07:56
Аватар для psfdek
Профессор
Отправить личное сообщение для psfdek Посмотреть профиль Найти все сообщения от psfdek
 
Регистрация: 14.02.2014
Сообщений: 157

Показать\скрыть с сохранением состояния
Есть скрипт показывающий и скрывающий блок. Как сделать так что бы состояние блока сохранялось при перезагрузке страницы?

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


<a href="#" onclick="showFun()">Скрыть \ показать</a>
<div id="myShowBlock">1  1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </div>

var visible = true;
function showFun() {
    if(visible) {
        document.getElementById('myShowBlock' ).style.display = 'none';
        visible = false;
    } else {
        document.getElementById('myShowBlock' ).style.display = 'block';
        visible = true;
    }
}
Ответить с цитированием
  #2 (permalink)  
Старый 14.02.2014, 08:13
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

var hide = window.localStorage.getItem('hide');
function showFun() {
   document.getElementById('myShowBlock').style.display = hide ? 'block' : 'none';
   window.localStorage.setItem('hide', (hide ^= 1));
}

if(hide) showFun();


Не тестировал, но работать должно.
Ответить с цитированием
  #3 (permalink)  
Старый 14.02.2014, 09:32
Аватар для psfdek
Профессор
Отправить личное сообщение для psfdek Посмотреть профиль Найти все сообщения от psfdek
 
Регистрация: 14.02.2014
Сообщений: 157

Оно скрывает\показывает, но при перезагрузке сбрасывается тоже
Ответить с цитированием
  #4 (permalink)  
Старый 14.02.2014, 10:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

psfdek,
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<a href="#" onclick="showFun()">Скрыть \ показать</a>
<div id="myShowBlock">1  1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </div>

<script>
   var hide = window.localStorage.getItem('hide');
       hide = hide === null ? 1 : +hide;   //1 если самый самый  первый раз нужно  чтоб было открыто иначе 0
function showFun() {
   window.localStorage.setItem('hide', (hide ^= 1));
   document.getElementById('myShowBlock').style.display = hide ? 'block' : 'none';
   return false
}
   document.getElementById('myShowBlock').style.display = hide ? 'block' : 'none';

</script>
</body>

</html>
Ответить с цитированием
  #5 (permalink)  
Старый 14.02.2014, 10:26
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Во-первых, showFn (show - показать) - неудачное имя для функции, которая скрывает блок.
Во-вторых:
Сообщение от Ruslan_xDD
hide ^= 1
Что это такое? Не в обиду, но следующий раз накакаю в кармушку.

Мой вариант:
<!DOCTYPE HTML>
<html>
    <head>
      <title>Untitled</title>
      <meta charset="utf-8">
    </head>
     
    <body>
    <a href="javascript:toggleBlock()">Скрыть \ показать</a>
    <div id="myShowBlock">1  1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </div>
     
    <script>
    (function() {
        var toggle = function(element, show) {
            element.style.display = show ? 'block' : 'none';
        };
        var block = document.getElementById('myShowBlock');
        var visible = localStorage.hasOwnProperty('visible') ? JSON.parse(localStorage.getItem('visible')) : true;
        toggle(block, visible);
        window.toggleBlock = function() {
            toggle(block, visible = !visible);
            localStorage.setItem('visible', visible);
        };
    })();
    </script>
</body>
 
</html>
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #6 (permalink)  
Старый 14.02.2014, 10:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от danik.js
Во-первых, showFn (show - показать) - неудачное имя для функции, которая скрывает блок.
Во-вторых: Сообщение от Ruslan_xDD
hide ^= 1
Что это такое? Не в обиду, но следующий раз накакаю в кармушку.
параноик
Ответить с цитированием
  #7 (permalink)  
Старый 14.02.2014, 10:39
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

danik.js, преобразование в противоположное значение (true в false, false в true), знаю, что смотрится ужасно, но работает.
Ответить с цитированием
  #8 (permalink)  
Старый 14.02.2014, 10:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

danik.js,
showFn нормальное название для функции которая работает с анимацией видимости элемента, hide ^= 1 супер решение, применял и буду применять если неподскажите лучше, единственное полезное это 17 строка в вашем коде кеширование элемента - остальное панты правильного пацана - но несмотря на всю правильность вашего кода он оставляет впечатление запутанности и тяжеловесности чтобы в него вникнуть нужно дополнительное усилие: бегать взглядом вверх вниз никакой последовательности.
Ответить с цитированием
  #9 (permalink)  
Старый 14.02.2014, 10:52
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

рони, +
hide ^= 1 и ~elemIndexOf('bla bla bla') очень удобно использовать, не понятно почему Данику это не нравится, типо якобы запутывает топик стартера, хотя сам какой-то запутанной фигни для такой простой задачи понаписал.
Ответить с цитированием
  #10 (permalink)  
Старый 14.02.2014, 10:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109


<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<a href="#" onclick="return spell()">Скрыть \ показать</a>
<div id="myShowBlock">1  1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </div>
<script>
   var hide = window.localStorage.getItem('hide'),
       hide = hide === null ? 1 : +hide,   //1 если самый самый  первый раз нужно  чтоб было открыто иначе 0
       block = document.getElementById('myShowBlock');
function show() {
   block.style.display = hide ? 'block' : 'none';
}
function spell() {
   window.localStorage.setItem('hide', (hide ^= 1));
   show();
   return false
}
show()
</script>
</body>
</html>

Последний раз редактировалось рони, 14.02.2014 в 11:16.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
удалить элемент input с сохранением его значения в <td> Сергей1980 jQuery 1 29.08.2013 02:06
jsTree с checkbox'ами с сохранением изменений в БД Rooner jQuery 1 26.06.2013 22:27
Кнопка и ее 3 основных состояния john1992on jQuery 10 14.05.2011 21:28
Бегущая строка в строке состояния DexS Общие вопросы Javascript 0 06.05.2011 14:43
Текст в строке состояния в FF3 Bad Request Events/DOM/Window 2 17.09.2008 12:35