Zmiana wielkości tekstu przez czytelnika

Zastosowanie poniższego kodu na stronie, umożliwi osobie przeglądającej witrynę zmianę wielkości fontów do takiej, jakiej czytelnik sobie życzy. Czytelnik będzie mógł powiększyć, bądź pomniejszyć tekst na stronie wg swojego upodobania. Poradnik przygotowałam w oparciu o skrypt Document Text Sizer ze strony www.dynamicdrive.com.

1. Tworzymy nowy lub edytujemy istniejący panel:

PA -> Zarządzanie stroną -> Zarządzanie panelami.

2. Wklejamy kody do panelu:

HTML:

Fragment jest odpowiedzialny za wyświetlenie: A+/a-, co po kliknięciu odpowiedniej literki będzie skutkowało powiększeniem/pomniejszeniem czcionki na całej stronie.

<div class="powieksz">
<a href="javascript:ts('body',1)">A+</a>
<a href="javascript:ts('body',-1)">/a-</a>
</div> 

CSS:

Pozycjonujemy klasę powieksz i nadajemy konkretną wielkość literkom: A+/a-.

<style type="text/css">
.powieksz {position:fixed;top:20px;right:20px;}
.powieksz a {font-size:25px;font-weight:bold;text-decoration:none}
</style>

W prawym górnym rogu strony pojawi się: A+/a-. Oczywiście pozycjonowanie jak i symbolikę można sobie zmienić na grafikę, to już jest wasza własna inwencja.

SKRYPT:

<script type="text/javascript">
/*------------------------------------------------------------
 Document Text Sizer- Copyright 2003 - Taewook Kang.  All rights reserved.
 Coded by: Taewook Kang (txkang.REMOVETHIS@hotmail.com)
 Web Site: http://txkang.com
 Script featured on Dynamic Drive (http://www.dynamicdrive.com)
 
 Please retain this copyright notice in the script.
 License is granted to user to reuse this code on 
 their own website if, and only if, 
 this entire copyright notice is included.
--------------------------------------------------------------*/

//Specify affected tags. Add or remove from list:
var tgs = new Array( 'div','td','tr');

//Specify spectrum of different font sizes:
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var startSz = 2;

function ts( trgt,inc ) {
 if (!document.getElementById) return
 var d = document,cEl = null,sz = startSz,i,j,cTags;
 
 sz += inc;
 if ( sz < 0 ) sz = 0;
 if ( sz > 6 ) sz = 6;
 startSz = sz;
  
 if ( !( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];

 cEl.style.fontSize = szs[ sz ];

 for ( i = 0 ; i < tgs.length ; i++ ) {
  cTags = cEl.getElementsByTagName( tgs[ i ] );
  for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
 }
}
</script>

3. Zapisz i pamiętaj aby włączyć panel!

Kod jest kompatybilny z przeglądarkami: IE5+/NS6+/Opera 7+ itd...