Показать сообщение отдельно
  #8 (permalink)  
Старый 15.06.2015, 19:30
Новичок на форуме
Отправить личное сообщение для soloinnet Посмотреть профиль Найти все сообщения от soloinnet
 
Регистрация: 08.06.2015
Сообщений: 9

Реализованно довольно громоздко
Это слепок с настоящего сайта, там короче очень нервный верстальщик который не намерен переделывать сайт в резиновый. Так что у некоторых 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>

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

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

Последний раз редактировалось soloinnet, 16.06.2015 в 16:03. Причина: Решено
Ответить с цитированием