Jump to content
GSForum - Segélyvonal

Betûméret növelése/csökkentése


Recommended Posts

Posted

Akkor ahogy ígértem, röviden bemutatnék egy egyszerű megoldást arra, hogyan engedjük meg az oldalra látogatóknak, hogy ők állíthassák be a nekik kényelmes betűméretet.

 

Először is szükség van természetesen magára az oldalra:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Az oldal címe</title>

<link href="cikk.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="cikk.js" ></script>
</head>
<body>

<div id="header">
<h1>Az oldal címe</h1>
</div>
<div id="toolbar"></div>

<div id="menu">
<ul>
	<li><a href="#">Menü 1</a></li>
	<li><a href="#">Menü 2</a></li>
	<li><a href="#">Menü 3</a></li>
	<li><a href="#">Menü 4</a></li>
	<li><a href="#">Menü 5</a></li>
	<li><a href="#">Menü 6</a></li>
</ul>
</div>

<div id="content">
<h2>A cikk címe</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque justo. Nulla ut mi quis metus bibendum mattis. ...</p>
<h3>Alcím</h3>
<p>Nullam blandit, sapien ac molestie sagittis, tellus enim blandit purus, quis eleifend tellus eros nec massa. ...</p>
<ul>
	<li>Maecenas eleifend diam et orci feugiat imperdiet.</li>
	<li>Ut dignissim faucibus dui.</li>
	<li>Ut varius malesuada quam.</li>
	<li>Vestibulum scelerisque lobortis sapien.</li>
	<li>Phasellus facilisis pharetra augue.</li>
</ul>
<p>Donec lacinia sapien sit amet risus. Curabitur adipiscing purus in odio. Duis sollicitudin. In pellentesque porta odio. ...</p>
</div>

<div id="footer">
Ide jön a lábléc
</div>

</body>
</html>

Ebben - főleg azoknak, akik szorgalmasan olvassák Balázs sorozatát - sok meglepő nem lesz. A HTML-hez a fejlécben csatoltunk egy CSS-t és egy JavaScriptet, valamint létrehoztunk egy üres DIV-et az "eszközsávunknak".

Ezt az oldalt egy kicsit megformázzuk (ez lesz ugyebár a cikk.css):

body { margin: 5px; color: #000000; background: #ffffff; font-family: arial, verdana, helvetica; font-size: 12px; }
#header { height: 30px; padding: 4px 0; text-align: center; background: #66e; }
#header h1 { margin: 0; font-size: 16px; }

#toolbar { position: absolute; top: 28px; right: 5px; }
#toolbar a { margin: 0 5px; color: #fff; font-weight: bold; text-decoration: none; }

#footer { clear: both; margin-top: 4px; padding: 2px 0; text-align: center; color: #fff; background: #33e; }

#menu { float: left; width: 7%; margin-top: 4px; padding: 4px 10px; border: 2px solid #33e; }
#menu ul { list-style: none; margin: 0; padding: 0; }
#menu li a { color: #028; font-weight: bold; text-decoration: none; }
#menu li a:hover { color: #208; text-decoration: underline; }

#content { float: left; width: 83%; margin: 4px 5px 0 10px; font-size: 12px; }
#content h2 { margin: 0; font-size: 160%; }
#content h3 { margin: .5em 0; font-size: 120%; }
#content p { margin: 0; }
#content ul { margin: 1em 0 1em 1.5em; }
#content li { font-size: 90%;}

Ebben sincsen sok "varázslat" - mondhatni minimalart stílusú lett oldalunk. Amit érdemes kiemelni, hogy a content DIV elemeinél a betűméretet százalékosan adjuk meg, de ha valakinek szimpatikusabb, például a 120% helyett írhat 1.2em-et is, a végeredmény ugyanaz lesz.

 

És akkor most jön maga a lényeg, azaz a cikk.js:

var fontpx = 12; 		// alapértelmezés szerint ekkora betűkkel írunk
var minpx  = 10;		// a legkisebb fontméret
var maxpx  = 18;		// a legnagyobb fontméret

function changeFont(dif) {
var obj;
var newpx = fontpx + dif;

if (newpx >= minpx && newpx <= maxpx) {
	obj = document.getElementById("content");
	if (obj) obj.style.fontSize = newpx + "px";
	fontpx = newpx
}
} 

function initPage() {
// kitesszük a két "gombot"
var tb = '<a title="Betűméret növelése" href="#" onclick="changeFont(+1);">A+</a>'
tb    += '<a title="Betűméret csökkentése" href="#" onclick="changeFont(-1);">A–</a>'

document.getElementById("toolbar").innerHTML = tb;
}

window.onload = initPage;

Visszafele haladva a kódban:

1. Megkérjük a böngészőt, hogy az oldal betöltődését követően indítsa el az initPage függvényt;

2. Ez a függvény összerak egy nagyon egyszerű HTML-kódrészletet, ami nem más mint két link, amelyek közül az egyik +1, a másik -1 paraméterrel hívja meg a changeFont függvényt;

3. Ezt a kis kódot szépen belehelyezzük az erre fenntartott toolbar DIV-be - ami ettől ugyanúgy fog működni, mintha eleve odaírtuk volna ezt a HTML-részletet;

4. A changeFont nem csinál mást, mint ellenőrzi, hogy nem mennénk-e ki a minpx-maxpx tartományból, és ha nem, akkor content DIV-nek megváltoztatja a fontSize (amit CSS-ben font-size-nak írunk) tulajdonságát, majd magának is felírja, hogy mennyi is az aktuális méret.

 

A függvényt hívó kódot azért nem a HTML-be írjuk be eleve, mert így egyrészt szépen elkülönítjük a három réteget (tartalom, kinézet, működés), másrészt nem zavarjuk össze a felhasználót esetlegesen nem kívánatos eszközökkel. Hiszen ha a JavaScript nála nem működik, akkor az eszközsávból eleve semmi nem fog látszódni.

 

És mindez nagyon szépen működik IE (6/7 biztosan), Firefox, Safari, Opera és Chrome alatt is.

Posted
var maxpx  = 18;		// a legkisebb fontméret

A "maxpx" nem a legnagyobb betûméretet jelöli? :)

Posted

A Copy-Paste elõnyei és hátrányai fejezet újabb szép példáját láthattuk. :upsz: Szerencsére ettõl még mûködik. 8) De azért javítottam, kösz!

Posted

Így olyan szépen egyforma hosszúak lesznek a sorok. Ráadásul (valamivel) könnyebb áttekinteni. 8)

Bezzeg a szép diszkrét JS megoldásért már meg sem dicsérsz. :Sír:

Posted

Hát pont ezen háborodtam fel, hogy ez így nem diszkrét, ha tagbe írunk eseményvezérlést. Igaz, hogy kívülrõl írjuk bele... fél piros, fél fekete pont. :)

Posted

Miután eleve JS-bõl illesztem be a kódot, lehetne, de szerintem felesleges létrehozni egy sima SPAN-t, és annak eseményére definiálni a funkciót. De akkor azzal külön foglalkozni kellene a CSS-ben is (legyen olyan színû, mint a linkek, az egér alakja változzon stb.). :hááát:

 

Ha nincs JS, úgysem jelenik meg a link, így nem kavar be a felesleges "eszközsáv". Szerintem a "diszkréció" és a kizárólag DOM-on keresztüli vezérlés nem kizárólagos kapcsolat. :hááát: De csak a Te kedvedért, holnap átírom. :démonikacaj:

Posted

Jó, akkor definiáljuk a diszkréció fogalmát, mert a spant végképp nem értem.

 

Én arról beszélek, hogy eseményt is csak külsõ JS-bõl vezérlünk, nem pedig tagben. (Tehát annak a két a-nak adtam volna valami class-t vagy valahogy másképp megcímeztem volna DOM-ból, és rájuk aggattam volna az onclick vezérlõt.) Mivel a taget is kívülrõl rakjuk bele, ezért ez olyan félig jó, félig nem jó megoldás. Nem mondom, hogy rossz, mert jó, csak nem (elég) szép.

Posted

Mindent az esztétikáért :démonikacaj::

function initPage() {
    // kitesszük a két "gombot"
    var tb = '<a href="#" id="fontinc" title="Betûméret növelése">A+</a>'
    tb    += '<a href="#" id="fontdec" title="Betûméret csökkentése">A–</a>'
    document.getElementById("toolbar").innerHTML = tb;
    
    document.getElementById("fontinc").onclick=function() { changeFont(+1); return false; }
    document.getElementById("fontdec").onclick=function() { changeFont(-1); return false; }
}

 

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...