Смена фона и текста на cookies
827материалов
228тем на форуме
3003комментария
6152пользователя

Смена фона и текста на cookies


Описание:

Раньше при помощи скрипта, при использовании только JavaScript, можно было изменить цвет фона странички на выбранный, но у такого скрипта был один минус - при переходе на другую страничку цвет фона возвращался в начальное default состояние.

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

Цитата
Заранее хотелось бы предупредить, что если в качестве фона на Вашем сайте используется изображение (background-image), то данный скрипт работать не будет. Точнее работать то он будет, но результатов его работы вы не увидите, т.к. цвет фона будет меняться под фоновым изображением. Именно поэтому, для демонстрации работы скрипта мы убрали фоновое изображение с странички.

Установка:

Для работы с cookies мы будем использовать библиотеку jQuery и плагин jquery.cookie.js. Для подключения библиотеки jQuery, добавьте на свой сайт следующий JavaScript код:
Код
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Далее, для работы с cookies, необходимо подключить плагин jquery.cookie.js. Делается это так:
Код
<script type="text/javascript" src="http://webmaster-ucoz.ru/ucoz/js/js/js/jquery.cookie.js"></script>

Если файл jquery.cookie.js располагается не в корневой папке, то следует перед его именем указать путь к месторасположению файла.

После того, как библиотека jQuery и плагин jquery.cookie.js подключены, необходимо добавить скрипт, который будет менять элемент на выбранный и сохранять его в cookies:

Смена текста:
Код
<script type="text/javascript">$(document).ready(function() {if (typeof $.cookie("bg_color")!=="undefined") {var form_id=document.getElementById("bg_form");var form_value=$.cookie("bg_color");form_id.value=form_value;$("body").css("color",$.cookie("bg_color"));}$("#bg_form").change(function() {$("body").css("color",$("#bg_form :selected").val());$.cookie("bg_color",$("#bg_form :selected").val(), {expires: 1});});});</script>

смена фона:
Код
<script type="text/javascript">
$(document).ready(function() {
if (typeof $.cookie("bg_color")!=="undefined") {
var form_id=document.getElementById("bg_form");
var form_value=$.cookie("bg_color");
form_id.value=form_value;
$("body").css("background-color",$.cookie("bg_color"));
}
$("#bg_form").change(function(){
$("body").css("background-color",$("#bg_form :selected").val());
$.cookie("bg_color",$("#bg_form :selected").val(), {expires: 1});
});
});
</script>

В данном коде присутствует переменная expires, которая отвечает за "срок жизни" устанавливаемых скриптом cookies. Срок исчисляется в днях!

Теперь осталось лишь разместить форму для выбора цвета фона:
Код
<div align="center">
<b>Выберите цвет текста/фон:</b>
<select id="bg_form">
<option selected value="#ffffff">Белый
<option value="#000000">Черный
<option value="#99ccff">Голубой
<option value="#00ff00">Известковый
<option value="#00ff7f">Весенний зеленый
<option value="#40e0d0">Бирюзовый
<option value="#483d8b">Темный серовато-синий
<option value="#5f9ea0">Блеклый серо-голубой
<option value="#7fffd4">Аквамарин
<option value="#8b0000">Темно-красный
<option value="#b8860b">Темный красно-золотой
<option value="#bdb76b">Темный хаки
<option value="#d2691e">Шоколадный
<option value="#d2b48c">Желтовато-коричневый
<option value="#fa8072">Оранжево-розовый
<option value="#f5deb3">Пшеничный
<option value="#ff0000">Красный
<option value="#ff1493">Темно-розовый
<option value="#ffd700">Золотой
<option value="#ff6347">Томатный
<option value="#ffff00">Желтый
</select>

Пример работоспособности данного скрипта и применения смены текста Вы можете увидеть на персональных страницах пользователей сайта madeas.ru,  у которых используются собственные фоновые изображения, требующие подстройки текста под него.

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 22.10.2016 в 21:30
Материал просмотрен: 937 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 3 комментария

Пожаловаться
Сказать спасибо
Источник

3 комментария


LANIGIRO
DEMO не о чем... Автор, предоставляйте реальные ссылки на демонстрацию реальных скриптов... Тут вам не рекламная площадка сайта мадэас. Не отходя от темы: шаблон сайта http://madeas.ru/ - полное raBнo, такого неуклюжего сайта я никогда не видал...
iMadeas
Madeas Gaming @iMadeas 25.10.2016 17:442
0
Ну этому сайту до Ваших пяти, из которых три уже и не работают, а другие два закиданы рекламой, конечно еще очень далеко... Спасибо за конструктивную критику.
LANIGIRO
Советую поменять шаблон, ибо являясь студией по разработке уникальных шаблонов для клиентов, используя при этом у себя на сайте ужасно неудобный (я погорячился, назвав в прошлом комменте слово "неуклюжий", ну и "гавно" в т.ч.) - очень не конструктивно...
И вообще день у меня сегодня не задался, поэтому и на парах написал, то что написал... Поэтому, тысячекратно извиняюсь за свои слова.
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта