AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Изменение размера шрифта пользователем

Ко мне обращались пользователи с просьбой увеличить размер текста на сайте. Для удовлетворения всех желающих я добавил небольшой скрипт, который меняет размер основного поля. В нижеприведенном примере я меняю размер всего тела документа.

Для изменения размера шрифта нажимайте Большую или маленькую букву. Средняя возвращает шрифт в значение по-умолчанию: AAA



Исходный код этого примера:


<p>Для изменения размера шрифта нажимайте Большую или маленькую букву.
Средняя возвращает шрифт в значение по-умолчанию:

<style type="text/css"><!--
.resize a:nth-child(1){font-size:10px;}
.resize a:nth-child(2){font-size:13px;}
.resize a:nth-child(3){font-size:16px;}
//--></style>

<span class="resize"><a href="" onclick="return resize(-1)">A</a><a href="" onclick="return resize(0)">A</a><a href="" onclick="return resize(+1)">A</a></span>
</p>


<script type="text/javascript">
<!--
function getCookie( name ) {
	var start = document.cookie.indexOf( name + '=' );
	var len = start + name.length + 1;
	if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) return null;
	if ( start == -1 ) return null;
	var end = document.cookie.indexOf( ';', len );
	if ( end == -1 ) end = document.cookie.length;
	return unescape( document.cookie.substring( len, end ) );
}

function setCookie( name, value, expires, path, domain, secure ) {
	var today = new Date();
	today.setTime( today.getTime() );
	if ( expires ) expires = expires * 1000 * 60 * 60 * 24;
	var expires_date = new Date( today.getTime() + (( expires ) ? expires : 1000 * 60 * 60 * 24 ) );
	document.cookie = name+'='+escape( value ) +
		';expires='+expires_date.toGMTString() +
		( ( path ) ? ';path=' + path : '' ) +
		( ( domain ) ? ';domain=' + domain : '' ) +
		( ( secure ) ? ';secure' : '' );
}

function resize(v){
    e=document.body;
    var c=e.currentStyle || window.getComputedStyle(e, null);
    if(v)c=Math.max(8,Math.min(20,parseInt(c.fontSize)+v))+'px';
    else c='11px';
    e.style.fontSize= c;
    //console.log(c);
    setCookie( "fontSize", c);
    return false;
}
if(i=getCookie("fontSize"))window.onload=function(o){return function(){document.body.style.fontSize=o;}}(i);
//-->
</script>


По мотивам статьи http://www.jstoolbox.com/skripty/rabota-s-formami/otobrazhenie-oshibok-vozle-polej-formy/


.

© Copyright 2008-2016 by KDG