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

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

20.12.2020

184

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

Для полноценной работы данного решения потребуется подключение 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 Читать далее »

Вложение файла при отправке формы

Вложение файла при отправке формы

Как настроить в WordPress вложение и отправку файла с формы без использования плагинов. Форма с нужным полем для вложения и указанием обработчика: Содержимое файла process_upload.php, на который мы переходим после Читать далее »

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

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

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

/

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

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

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