Вход

Просмотр полной версии : Изменить состояние нескольких Div и запонить их для пользователя


soloinnet
08.06.2015, 16:22
Добрый день уважаемые форумчане. Только начал изучать 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
С куками уже 3 день вожусь всё как-то очень печально и медленно.
Используй "Локальное хранилище"...
http://htmlbook.ru/html5/storage

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

soloinnet
11.06.2015, 16:59
Итак, с 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
Вот только никак не могу понять как 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
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.paddin gLeft = paddingCookie;
}
else if (paddingCookie == null || undefined) {
document.getElementById('paddingdiv').style.paddin gLeft = "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>

ну и вот здесь (https://jsfiddle.net/soloinnet/ak62gga5/)можно посмотреть как пример работает .

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