Javascript je jeden z troch základných nástrojov, ktorý sa používa pri zobrazovaní webstránok. Zatiaľ, čo html definuje, čo na stránke bude a CSS zase ako to bude vyzerať, Javascript zabezpečuje dynamické zmeny na stránke podľa toho, čo užívateľ urobí.  Predstavte si to ako keď píšete vo Worde. To, čo tam napíšete, je html. To, ako to sformátujete – teda veľkosť písma, odsadenia, riadkovanie… – to je všetko CSS. A Javascript sa postará napríklad o to, čo uvidíte na dnešnom príklade – teda o zmenu veľkosti písma podľa rozhodnutia užívateľa.

 

Poďme teda na to. Najprv si vytvoríme html input, ktorým bude užívateľ voliť veľkosť písma. Dôležité je, aby sme zadali ID, aby Javascript vedel, odkiaľ bude brať hodnotu veľkosti písma:

<div id=”ovladanie”><input type=”range” onmousemove=”fontVelkost();” id=”fontsize” min=”10″ max=”35″ step=”5″ value=”15″/></div>

 

Potom si vložíme textové pole so slepým textom. Tiež je dôležité, aby bolo označené jedinečným ID.

<div id=”text”>
<p>sample text here</p>
</div>

 

Teraz príde na radu Javascriptová funkcia:

<script type=”text/javascript”>
function fontVelkost() {
var ovladac = document.getElementById(“fontsize”).value;
var text = document.getElementById(“text”);
text.style.fontSize = ovladac + “px”;
}
</script>

 

 

Do výsledného príkladu som pridal ešte zopár štýlov, aby to nejako na stránke vyzeralo. Každý si ho upraví tak, ako bude na stránke potrebovať. Tento príklad používa typ inputu range. Ak chcete iba prepínať medzi napríklad tromi veľkosťami, použijete miesto range napríklad bežný button a event nebude onmousemove ale bežný onclick. Samotná Javascriptová funkcia však bude rovnaká.

 

Keď to celé zlepíme dohromady, výsledný kód bude:

<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title></title>
<style type=”text/css”>
#ovladanie {
margin: 0 auto;
width: 15%;
padding: 2px;
text-align: center;
}
#text {
width: 80%;
padding: 10px;
margin: 0 auto;
background-color: lightgray;
border: 1px solid black;
border-radius: 10px;
}
</style>
<script type=”text/javascript”>
function fontVelkost() {
var ovladac = document.getElementById(“fontsize”).value;
var text = document.getElementById(“text”);
text.style.fontSize = ovladac + “px”;
}
</script>
</head>
<body>
<div id=”ovladanie”>
<input type=”range” onmousemove=”fontVelkost();” id=”fontsize” min=”10″ max=”35″ step=”5″ value=”15″/>
</div>
<div id=”text”>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit nisi dui, eu dignissim erat consectetur et. Nunc viverra quam et augue fringilla, a tempor orci tincidunt. Phasellus tempus fermentum purus, vel suscipit tortor. Donec sagittis lectus sit amet eros porttitor faucibus. Maecenas id ipsum ultricies, molestie diam sit amet, rutrum metus. Nam varius et ex sed porta. Suspendisse ut elit massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam vitae efficitur eros. Mauris sit amet mauris sit amet quam mollis iaculis quis nec leo. Duis dui augue, pulvinar non venenatis imperdiet, eleifend id lacus. Phasellus sodales quis eros eget feugiat. Donec ornare elementum mauris, vel ornare risus semper nec.</p>
</div>
</body>
</html>

 

 

Je to super spôsob, ako pridáte vašej stránke užitočnú funkcionalitu pár riadkami kódu. Navyše nepotrebujete knižnicu jQuery, vystačíte si tu so základným Javascriptom, s ktorým dokáže pracovať každý prehliadač. Veľa zábavy, a ak nebude niečo jasné, ozvite sa 😀
Javascript for Dummies: zmena veľkosti fontu

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *

Táto webová stránka používa Akismet na redukciu spamu. Získajte viac informácií o tom, ako sú vaše údaje z komentárov spracovávané.

PhDr. Ján Sliacky - marketingové poradensvo, Bebravská 3, 821 07 Bratislava, ako správca osobných údajov, spracováva na tomto webe cookies potrebné na fungovanie webových stránok a pre analytické účely a v prípade vášho súhlasu tiež pre remarketing. Viac info

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close