/ Scripts & jquery / Версия сайта для слабовидящих

Версия сайта для слабовидящих

20.12.2020

246

Создадим блок с настройками в котором будут изменятся параметры сайта, такие как цветовая схема и размер шрифта.

Для полноценной работы данного решения потребуется подключение jquery.cookie.js.

Блок настроек

Данный блок я спроектировал как выдвигающаяся панель с иконкой слева на экране.

Верстка панели:

<div class="visual-select">
	<div class="visual-select-btn" title="Версия сайта для слабовидящих"><i class="far fa-eye"></i></div>
	<div class="visual-select-block"><div>
		<div class="pic-monochrome-btn">
			<label for="pic-monochrome">Сделать изображения монохромными</label>
			<input id="pic-monochrome" type="checkbox" name="pic-monochrome">
		</div>
		
		<div>
			<p>Цветовая схема сайта</p>
			<select id="color-scheme" name="color-scheme">
				<option value="">Стандартный</option>
				<option value="black-white">Чёрным по белому</option>
				<option value="white-black">Белым по чёрному</option>
				<option value="barkblue-skyblue">Тёмно-синим по голубому</option>
				<option value="green-darkbrown">Зелёным по тёмно-коричневому</option>				
			</select>
		</div>
		
		<div>
			<p>Размер шрифта</p>
			<div class="site-text-size-block">
				<div class="minus-btn"><i class="far fa-minus"></i></div>
				<input type="number" name="site-text-size" id="site-text-size" step="2"	min="12" max="24" value="16">
				<div class="plus-btn"><i class="fal fa-plus"></i></div>	
			</div>	
		</div>
		
	</div></div>
</div>

Стили панели

.visual-select {
    position: fixed;
	z-index: 9999;
    top: 50%;
    height: 300px;
    margin-top: -150px;
    left: -280px;
    width: 280px;
	transition: all 0.3s ease;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s ease 0s;
}
	
.visual-select.visual-select-open {left: 0;}	
	
.visual-select-btn {
    background: #8bc34a;
    border: 1px solid #8bc34a;
	border-left: 0;
    color: #fff;
    border-radius: 0 5px 5px 0;
    position: absolute;
    right: -50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}
	
.visual-select i {margin: 0;}	
	
.visual-select-block {
    background: #4daf50;
	border: 1px solid #8bc34a;
	color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
	padding: 30px 30px 0;
}
	
.visual-select-block > div > * {
    display: flex;
    justify-content: space-between;
	margin-bottom: 30px;
	align-items: center;
}	
	
.visual-select-block > div > * > * {width: 50%;}	

Скрипт открывания панели

jQuery(document).ready(function($){
	
	$('.visual-select-btn').on('click', function(){
		$('.visual-select').toggleClass('visual-select-open');
	});
});

Настройки изменения сайта

Скрипты (добавляем после скрипта раскрытия панели в document.ready):

	// Монохром изображений
	
	$('#pic-monochrome').change(function(){ //функция работает при изменении checkbox

		if ($('#pic-monochrome').is(':checked')) { 
			$('body').addClass('pic-monochrome');
			$.cookie('pic-monochrome', 'true', { path: '/', expires: 7 });
		} else {
			$('body').removeClass('pic-monochrome');
			$.removeCookie('pic-monochrome', { path: '/' });
		}

	});
	
	
	// Цветовая схема
	
	$('#color-scheme').change(function(){ //функция работает при изменении select

		var colorVar = $("#color-scheme option:selected").val();

		if($("#color-scheme").val()=="") { 
			$('body').removeClass('black-white white-black barkblue-skyblue green-darkbrown');
			$.removeCookie('color-scheme', { path: '/' });
		} else {
			$('body').removeClass('black-white white-black barkblue-skyblue green-darkbrown');
			$('body').addClass(colorVar);
			$.cookie('color-scheme', colorVar, { path: '/', expires: 7 });	
		}

	});
	
	
	// Изменение размера шрифта
	
	$('.site-text-size-block').on('click', '.minus-btn', function() {
		$input = $(this).nextAll('input[name=site-text-size]');
		var val = parseFloat($input.val());
		var step = parseFloat($input.attr('step'));
		var min = parseFloat($input.attr('min'));
		if (val > min) { $input.val( val-step ).change(); } 
	});

	$('.site-text-size-block').on('click', '.plus-btn', function() {
		$input = $(this).prev('input[name=site-text-size]');
		var val = parseFloat($input.val());
		var step = parseFloat($input.attr('step'));
		var max = parseFloat($input.attr('max'));
		if (val < max) { $input.val( val+step ).change(); }
	});	
	
	$('#site-text-size').change(function(){ //функция работает при изменении input

		var sizeVar = $("#site-text-size").val();

		if(sizeVar=="16") {
			$('html').css('font-size','16px');
			$('body').css('font-size','16px');
			$.removeCookie('text-size', { path: '/' });
		} else {
			$('html').css('font-size', sizeVar + 'px');
			$('body').css('font-size', sizeVar + 'px');
			$.cookie('text-size', sizeVar, { path: '/', expires: 7 });	
		}

	});

Стили

/* Монохром изображений */

body.pic-monochrome img, body.pic-monochrome i, body.pic-monochrome :before, body.pic-monochrome :after {filter: grayscale(1);}


/* Цветовая схема */

body.black-white {background: #fff; color: #000;}
body.black-white div, body.black-white a {background: #fff !important; color: #000 !important;}


body.white-black {background: #000; color: #fff;}
body.white-black div, body.white-black a {background: #000 !important; color: #fff !important; border-color: #222 !important;}
body.white-black .visual-select-btn {background: #8bc34a !important;}


body.barkblue-skyblue {background: #9dd1ff; color: #143565;}
body.barkblue-skyblue div, body.barkblue-skyblue a {background: #9dd1ff !important; color: #143565 !important; border-color: #80b4e2 !important;}
body.barkblue-skyblue .visual-select-btn {background: #fff !important;}

body.green-darkbrown {background: #3b2716; color: #a1e650;}
body.green-darkbrown div, body.green-darkbrown a {background: #3b2716 !important; color: #a1e650 !important; border-color: #2d1d0f !important;}
body.green-darkbrown .visual-select-btn {background: #fff !important; color: #659c24 !important; }


/* Изменение размера шрифта */
	
.site-text-size-block {display: flex; width: 50%;}
	
.site-text-size-block div {
    background: #8bc34a;
    display: flex;
    align-items: center;
    width: 40px;
    justify-content: center;
    cursor: pointer;
}
	
.site-text-size-block input {width: 50%; text-align: center; padding: 3px;}

Извлечение настроек из Cookies

Добавляем после скриптов по изменению стилей (внутри document.ready)

	// Блок включения с Cookie
	
	var picmonochrome = $.cookie('pic-monochrome');
	var colorscheme = $.cookie('color-scheme');
	var fontsize = $.cookie('text-size');
	
	if(picmonochrome == null){
	} else {
		$('body').addClass('pic-monochrome');
		$('#pic-monochrome').attr( 'checked', 'checked' );
	}
	
	if(colorscheme == null){
	} else {
		$('body').addClass(colorscheme);
		$('#color-scheme option[value="' + colorscheme + '"]').attr( 'selected', 'selected' );
	}
	
	if(fontsize == null){
	} else {
		$('html').css('font-size', fontsize + 'px');
		$('body').css('font-size', fontsize + 'px');
		$('#site-text-size').val( fontsize );
	}

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Ajax форма без плагина

Ajax форма без плагина

Создаем формы без использования плагинов (например Contact Form 7). Делаем форму Ajax. Создание простой формы Добавляем скрипт обработчик (с валидацией полей) Прописываем функцию формы Данное решение взято с сайта inprocess.by Читать далее »

Заявка на товар

Заявка на товар

Бывает так, что нам не нужно непосредственно продавать товар через сайт, а только лишь получить на него заявку. Данный механизм прост: нам нужно создать форму обратной связи в которую будет Читать далее »

/
Contact Form 7

Contact Form 7

Contact Form 7 — очень нужный плагин для модулирования различных форм обратной связи. Имеет множество дополнений. Плагин Contact Form 7 Код вставки формы Отключить обертку в <p> и добавление <br> Читать далее »

/

Добавить комментарий

Пока нет комментариев. Будь первым!

Версия сайта для слабовидящих Версия сайта для слабовидящих
Ищем самого первого предка
Рекомендации для васИщем самого первого предкаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.