Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Изменить состояние нескольких Div и запонить их для пользователя (https://javascript.ru/forum/dom-window/56283-izmenit-sostoyanie-neskolkikh-div-i-zaponit-ikh-dlya-polzovatelya.html)

soloinnet 08.06.2015 16:22
Изменить состояние нескольких Div и запонить их для пользователя
 
Добрый день уважаемые форумчане. Только начал изучать Javascript и столкнулся с задачей итак

1- у нас имеется 2 Div-а : первый необходимо сделать невидимым , display - none, а второму изменить padding.
2 - Всё это необходимо активировать одним событием button onclick. Событие должно отрабатывать в обе стороны. Display none-visible , padding 1px-2px
3 - состояние обоих Div необходимо запомнить в печеньках.

Господа кто может объяснить чайнику как это делается. С куками уже 3 день вожусь всё как-то очень печально и медленно.

ksa 08.06.2015 16:41
Цитата:
Сообщение от soloinnet
С куками уже 3 день вожусь всё как-то очень печально и медленно.
Используй "Локальное хранилище"...
http://htmlbook.ru/html5/storage

ksa 08.06.2015 16:43
Цитата:
Сообщение от soloinnet
С куками уже 3 день вожусь всё как-то очень печально и медленно
Вот статейка хорошая...
http://ruseller.com/lessons.php?id=593&rub=28

soloinnet 11.06.2015 16:59
запись смена печенек удалась, теперь шаг 2 сменна padding
 
Итак, с cookiсами разобрались

Код:
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Demo Div display + cookies</title>
  
  <script type='text/javascript' src='http://code.jquery.com/jquery-2.1.3.js'>
<!--Библиотека JQuery-->
  <script type='text/javascript'
src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js">
<!--Библиотека JQuery cookies, у кого не сработает, в названии точку заменить на '_',
 если будут проблемы с компиляцией в Visual Studio - расположить ссылку на эту
 библиотеку внизу документа, желательно установить async-->
</script>
    
  <script type='text/javascript'>



$(function() {
  var state = $.cookie('state');
  var open = state == "open";
  $("#toolo").toggle(open);
  $("#toolo2").toggle(!open);

  $(".toggle").on("click",function(e){
    e.preventDefault();
    var open = this.id=="show";
      console.log(open,this.id)
    $("#toolo").toggle(open);
    $("#toolo2").toggle(!open);
    $.cookie('state', open?"open":"closed", { expires:3 });
  });
});


</script>


</head>
<body>
  <div id="toolo"> text 1
   <button class="toggle" id="hide">Open</button>           
  </div>
  <div id="toolo2">
     text 2
    <button class="toggle" id="show">Hide</button>
  </div>
<div class="paddingchange" style="padding:25px 35px 0 275px" id="paddingdiv">
Этот див при нажатии кнпки Hide должен сдвигать паддинг на лево на  '-275px'
А при нажатии на Show возвращать всё как было
</div>
</body>
</html>
Вот только никак не могу понять как Padding сменить

ksa 15.06.2015 08:27
Цитата:
Сообщение от soloinnet
Вот только никак не могу понять как Padding сменить
Так и смени...

obj.style.paddingLeft='-275px';

http://htmlbook.ru/css/padding-left

soloinnet 15.06.2015 15:08
Добавляю следующее

function changePaddingPlus() {
	            var paddingPlus = "25px";
	            document.getElementById("paddingdiv").style.paddingLeft = paddingPlus;
	            };
	        function changePaddingMinus() {
	            var paddingMinus = "275px";
	            document.getElementById("paddingdiv").style.paddingLeft = paddingMinus;
	        }


и естесвенно меняю button

</head>
<body>
  <div id="toolo"> text 1
   <button class="toggle" id="hide" onclick="changePaddingMinus()">Open</button>          
  </div>
  <div id="toolo2">
     text 2
    <button class="toggle" id="show" onclick="changePaddingPlus()">Hide</button>
  </div>
<div class="paddingchange" style="padding:25px 35px 0 275px" id="paddingdiv">
Этот див при нажатии кнпки Hide должен сдвигать паддинг на лево на  '-275px'
А при нажатии на Show возвращать всё как было
</div>
</body>
</html>


Понимаю что это громоздко и неправильно, вернее было-бы засунуть всё в одну функцию с проверкой :
1 - если указано значение paddingLeft в кукисах, взять его
2 - если не указано значение paddingLeft , назначить его 275px, сохранить это в кукисах
3 - при обработки кнопки Hide - установить значение paddingLeft = 25px и сохранить его в кукисах
4 - при обработки кнопки Show - установить значение paddingLeft = 275px и сохранить его в кукисах

но что-то у меня не очень получается. Есть идеи ?

ksa 15.06.2015 15:33
Цитата:
Сообщение от soloinnet
Есть идеи ?
Я даже не понимаю зачем делать такие большие отрицательные отступы... :)

soloinnet 15.06.2015 19:30
Реализованно довольно громоздко
 
Это слепок с настоящего сайта, там короче очень нервный верстальщик который не намерен переделывать сайт в резиновый. Так что у некоторых Div очень странные параметры )) Выкручиваюсь как могу.

Добавлено 16.06.2015 17:57

Решено 

<title>Demo mplugnjs</title>

<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.3.js'></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript" >

    $(function () {
        var state = $.cookie('state');
        var open = state == "open";
        $("#toolo").toggle(open);
        $("#toolo2").toggle(!open);

        $(".toggle").on("click", function (e) {
            e.preventDefault();
            var open = this.id == "show";
            console.log(open, this.id)
            $("#toolo").toggle(open);
            $("#toolo2").toggle(!open);
            $.cookie('state', open ? "open" : "closed", { expires: 3 });
        });

    });

    $(document).ready(function () {
        var paddingCookie = $.cookie('padding');

        if (paddingCookie != null) {
            document.getElementById('paddingdiv').style.paddingLeft = paddingCookie;
        }
        else if (paddingCookie == null || undefined) {
            document.getElementById('paddingdiv').style.paddingLeft = "275px";
        }
        alert(paddingCookie);
    });
    function changePaddingPlus() {
        var paddingPlus = "25px";
        document.getElementById("paddingdiv").style.paddingLeft = paddingPlus;
        $.cookie('padding', "25px", { expires: 3 });
    };
    function changePaddingMinus() {
        var paddingMinus = "275px";
        document.getElementById("paddingdiv").style.paddingLeft = paddingMinus;
        $.cookie('padding', "275px", { expires: 3 });
    }
</script>



</head>
<body>
    <div id="toolo">
        text 1
        <button class="toggle" id="hide" onclick="changePaddingMinus()">Open</button>
    </div>
    <div id="toolo2">
        text 2
        <button class="toggle" id="show" onclick="changePaddingPlus()">Hide</button>
    </div>
    <div id="paddingdiv" style="padding:35px 0px 0px 275px;">
        Этот див при нажатии кнпки Hide должен сдвигать паддинг на лево на  '-275px'
        А при нажатии на Show возвращать всё как было
    </div>
</body>
<script type="text/javascript">

   
</script>
</html>

ну и вот здесь можно посмотреть как пример работает .

Господа буду благодарен за идеи оптимизации кода.


Часовой пояс GMT +3, время: 09:47.