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

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

20.12.2020

535

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

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

Ajax форма с вложением файла

Ajax форма с вложением файла

Долго искал и нашел (здесь www.thenerdyblog.com) отличное решение — форма с вложением файла на ajax. Форма Скрипт Файл-обработчик Если нужно чтобы вложение было обязательным, то в условии else прописываем ошибку: Читать далее »

/
Сбор ящиков для подписки в БД

Сбор ящиков для подписки в БД

Создадим форму для сбора email для подписки, которая будет сохранять значения в специальную таблицу в БД. Форма Скрипт по передаче данных (ajax) Стили формы Функция по отправке формы Данная функция Читать далее »

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

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

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