Менять фон статьи и кнопку с записью в cookie

0

wcooper

1 декабря 2016, 04:37

855

Всех приветствую! Есть два скрипта и кнопка которые меняют фон в заданном месте

<div id="SuperButton" class="exemple">

<span class="button1 active">сделать белый фон</span>

<span class="button2">сделать тёмный фон</span>

</div>



<div id="col">ЗДЕСЬ МЕНЯЕТ ФОН ТЕКСТА</div>

Javascript

/* МЕНЯЕТ ФОН СТАТЬИ ПРИ НАЖАТИИ НА КНОПКУ */

window.onload = function() {

    document.getElementById('SuperButton').onclick = function()

    {

        if(document.getElementById('col').className != 'whitefon')

        {

            document.getElementById('col').className = 'whitefon';

        }

        else

        {

            document.getElementById('col').className = 'topic-content';

        }

    }

}

/* КНОПКА МЕНЯЮЩАЯ ФОН И САМУ СЕБЯ */

$(function(){

  $('.button1, .button2').click(function(){

    $('.button1, .button2').toggleClass('active');

  });

});

CSS


.exemple {

 float: right;

 }

 

.imgEx1, .imgEx2 {

 display: none;

 }

 

/* КНОПКА ПЕРЕКЛЮЧЕНИЯ ФОНА */

.button1 {

 display: none;

 width: 160px;

 color: #000000;

 cursor: pointer;

 background: #ffffff;

 font-style: 8px;

 text-align: center;

 padding: 0px 0px 0px 0px;

 }

        

.button2 {

 display: none;

 width: 160px;

 color: #fff;

 cursor: pointer;

 background: #000000;

 font-style: 8px;

 text-align: center;

 padding: 0px 0px 0px 0px;

 }

 

.button1:hover, .button2:hover {

 opacity: 0.8;

 }

 

.active {

 display: block;

 }

 

/* ПЕРЕКЛЮЧАЕМЫЙ ФОН */ 

.whitefon { 

 font-size: 14px; 

 background-color: #ffffff;

 color: #000000;

 font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;

 line-height: 15pt;

 text-align: justify;

 padding: 10px 10px 10px;

 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02);

 }

Я не силён в программировании, только учусь, но уже голову сломал. Подскажите пожалуйста, как мне всё это записать в cookie? Что бы при одном клике по кнопке производилась запись в cookie, а при повторном оставляло пустое значение.

A

7

anzarsh

1 декабря 2016, 06:56

#1

https://learn.javascript.ru/cookie - если это все сам написал, то и здесь тоже разберешься. Обрати внимание, что куки создаются на определенное время и по истечении удаляются браузером и доступны по определенному адресу

S

469

Sitealert

1 декабря 2016, 08:08

#2

wcooper:
Подскажите пожалуйста, как мне всё это записать в cookie? Что бы при одном клике по кнопке производилась запись в cookie, а при повторном оставляло пустое значение.

"Всё это" записывать не надо. Записывается только некое выражение, типа "background=white" или "background=dark". А уже по условию наличия той или иной записи в куках выдаётся вариант страницы с её элементами.

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.

W

0

wcooper

1 декабря 2016, 10:11

#3

Скрипты писал не я, поэтому и прошу помощи. https://learn.javascript.ru/cookie - Пробовал делать как написано, но перестают работать скрипты.

S

469

Sitealert

1 декабря 2016, 11:22

#4

А что тут непонятного? Проверяете куки и дальше определяетесь с работой скриптов. Нет куки - одно действие, есть кука номер 1 - другое действие, есть кука номер 2 - третье действие.

W

0

wcooper

1 декабря 2016, 11:38

#5

А куда именно вписывать значение?

S

469

Sitealert

1 декабря 2016, 11:51

#6

Туда, куда Вы и хотите - в cookie. Записать - document.cookie = "". Прочитать -путём обработки и чтения document.cookie.

A

7

anzarsh

1 декабря 2016, 16:15

#7


function getCookie(name) {

var matches = document.cookie.match(new RegExp(

"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"

));

return matches ? decodeURIComponent(matches[1]) : undefined;

}

$(function(){



var yourcolor = getCookie('color');

if(yourcolor){

if(yourcolor=="button1"){



} else if(yourcolor=="button2"){

$('.button1').removeClass('active');

$('.button2').addClass('active');

}

}

$('.button1, .button2').click(function(){

$('.button1, .button2').toggleClass('active');

if($('.button1').hasClass('active')){

var date = new Date(new Date().getTime() + 60 * 1000);

document.cookie = "color=button1; path=/; expires=" + date.toUTCString();

} else if($('.button2').hasClass('active')){

var date = new Date(new Date().getTime() + 60 * 1000);

document.cookie = "color=button2; path=/; expires=" + date.toUTCString();

}

});

});

это все с той статьи скопипастил, почти

W

0

wcooper

1 декабря 2016, 17:34

#8

anzarsh:


function getCookie(name) {

var matches = document.cookie.match(new RegExp(

"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"

));

return matches ? decodeURIComponent(matches[1]) : undefined;

}

$(function(){



var yourcolor = getCookie('color');

if(yourcolor){

if(yourcolor=="button1"){



} else if(yourcolor=="button2"){

$('.button1').removeClass('active');

$('.button2').addClass('active');

}

}

$('.button1, .button2').click(function(){

$('.button1, .button2').toggleClass('active');

if($('.button1').hasClass('active')){

var date = new Date(new Date().getTime() + 60 * 1000);

document.cookie = "color=button1; path=/; expires=" + date.toUTCString();

} else if($('.button2').hasClass('active')){

var date = new Date(new Date().getTime() + 60 * 1000);

document.cookie = "color=button2; path=/; expires=" + date.toUTCString();

}

});

});

это все с той статьи скопипастил, почти

Не работает. Фон меняется, а копка перестала и при обновлении страницы возвращается в исходное состояние.

S

469

Sitealert

1 декабря 2016, 17:49

#9

Потому что с наскоку эти вещи не делаются. Тут не обойдёшься одной функцией - надо подумать и внимательно всё написать, с учётом всех нюансов. Вот если Вы учитесь - как раз удобный случай поэкспериментировать на практике.

Конкурент с черным SEO Стоит ли сейчас делать Семантическое ядро, кластеризация -

A

7

anzarsh

1 декабря 2016, 18:06

#10

wcooper:
Не работает. Фон меняется, а копка перестала и при обновлении страницы возвращается в исходное состояние.

https://codepen.io/anzarsh/pen/mOpwdR - я не знаю как вы задумывали чтоб это работало, но в куки он сохраняет.

Яндекс Вебмастер вынес товарные фиды в отдельный раздел

Что делать, если ваша email-рассылка попала в спам