Javascriptets button sidder i bunden af siden.
Her ses koden:
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>FuriaxGamerz</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="text.js"></script>
<meta name="Keywords" content="furiaxgamerz, furiax, gamerz, furiaxgamerz.dk, anders jacobsen, spil, musik, " />
<meta name="Description" content="Hjemmesiden er en CV-side omkring Anders Jacobsen. Sitet består af Anders Jacobsens kvaliteter inden for Multimedie Design og interesser.">
</head>
<body>
<section id="wrapper">
<header>
<a href="index.html" class="a1"><img src="elements/element_02.png" width="520px" height="64px" id="logo" alt="Logo"/></a>
</header>
<section id="page">
<nav>
<a href="index.html"><img src="elements/element_35.png" width="123px" height="30px" id="forside" alt="Forside"/></a>
<a href="about.html"><img src="elements/element_41.png" width="123px" height="30px" id="ommig" alt="Om Mig"/></a>
<a href="quotes.html"><img src="elements/element_42.png" width="123px" height="30px" id="citater" alt="Citater"/></a>
<a href="work.html"><img src="elements/element_43.png" width="123px" height="30px" id="arbejde" alt="Arbejde"/></a>
<a href="contact.html"><img src="elements/element_44.png" width="123px" height="30px" id="kontakt" alt="Kontakt"/></a>
</nav>
<section id="box1">
<h2 class="h01">OM MIG</h2>
<p class="p5">Navn: Anders C. Bennekou Jacobsen</p>
<p class="p5">Praktik: DR Byen</p>
<p class="p5">Folkeskole: Ejby Folkeskole</p>
<p class="p5">Gymnasium: Køge Handelsskole</p>
<p class="p5">Videregående: EASJ Multimediedesign</p>
<section id="sociallogo1">
<a href="https://twitter.com/Furiax666" target="_blank"><img src="elements/element_06.png" width="95px" height="95px" id="twitter" alt="Twitter"/></a>
<a href="https://plus.google.com/u/0/106978830890403871032/posts" target="_blank"><img src="elements/element_07.png" width="95px" height="95px" id="gplus" alt="GooglePlus"/></a>
<a href="http://www.facebook.com/anders.bennekou" target="_blank"><img src="elements/element_08.png" width="95px" height="95px" id="facebook" alt="Facebook"/></a>
</section>
<section id="sociallogo2">
<a href="http://furiax666.tumblr.com" target="_blank"><img src="elements/element_09.png" width="95px" height="95px" id="tumblr" alt="Tumblr"/></a>
<a href="http://www.flickr.com/photos/furiaxphotos/" target="_blank"><img src="elements/element_10.png" width="95px" height="95px" id="flickr" alt="Flickr"/></a>
<a href="http://www.youtube.com/user/furiax666" target="_blank"><img src="elements/element_11.png" width="95px" height="95px" id="youtube" alt="YouTube"/></a>
</section>
</section>
<section id="box2">
<h2 class="h02">CITATER</h2>
<p class="p1">"Strength does not come from physical capacity.</p>
<p class="p1">It comes from an indomitable will”. </p>
<h3 class="h03">- Mahatma Gandhi</h3>
<br/>
<p class="p1">“The definition of insanity is doing the same thing</p>
<p class="p1">over and over again and expecting different results".</p>
<h3 class="h03">- Albert Einstein</h3>
<br/>
<p class="p1">"I’m tryna learn something new. I’m Tryna</p>
<p class="p1">surround myself with people that inspire me</p>
<p class="p1">or at least inquire similar desires".</p>
<h3 class="h03">- Kendrick Lamar</h3>
<br/>
<p class="p1">"All our dreams can come true, if we have the</p>
<p class="p1">courage to pursue them".</p>
<h3 class="h03">- Walter "Walt" Elias Disney</h3>
</section>
<section id="box3">
<h2 class="h02">ARBEJDE FRA TILDLIGERE OPGAVER</h2>
<a href="work.html"><img src="images/csforside.png" width="360px" height="230px" id="csforside" alt="Camellia Sinensis"/></a>
<a href="work.html"><img src="images/edrforside.png" width="360px" height="230px" id="edrforside" alt="Escuela de Ritmo"/></a>
</section>
<footer>
<img src="elements/element_01.png" width="780px" height="29px" id="footer" alt="Footer"/>
<button type="button" onclick="increaseFontSize()">Større Tekst</button>
<button type="button" onclick="decreaseFontSize()">Mindre</button>
<button type="button" onclick="resetFontSize()">Reset</button>
</footer>
</section>
</section>
</body>
</html>
JAVASCRIPT
var min=8;
var max=18;
function increaseFontSize() {
var p = document.getElementsByTagName('p');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 16;
}
if(s!=max) {
s += 1;
}
p[i].style.fontSize = s+"px"
}
}
function decreaseFontSize() {
var p = document.getElementsByTagName('p');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 16;
}
if(s!=min) {
s -= 1;
}
p[i].style.fontSize = s+"px"
}
}
function resetFontSize() {
var p = document.getElementsByTagName('p');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 16;
}
if(s!=min) {
s = 16;
}
p[i].style.fontSize = s+"px"
}
}
Javascriptet fungere så ved følgende kode:
Som det ses er standard størrelsen på teksten 16px - nedenunder står der s+=1; - dette gør, at tekstens størrelse stigger med 1px for hver gang man trykker på knappen.
I midten ses samme koden, men med s-=1; - her gør teksten det modsatte, altså laver teksten mindre med 1px.
Den sidste kode er s = 16; - dette er en reset funktion som gør, at teksten bliver standard størrelse igen.
KODEN FUNGERER SÅLEDES
Der er lavet standard buttons inde på HTML-dokumentet - disse knapper hjælper med funktionen, så man selv kan justere tekstens størrelse.Javascriptet fungere så ved følgende kode:
Som det ses er standard størrelsen på teksten 16px - nedenunder står der s+=1; - dette gør, at tekstens størrelse stigger med 1px for hver gang man trykker på knappen.
I midten ses samme koden, men med s-=1; - her gør teksten det modsatte, altså laver teksten mindre med 1px.
Den sidste kode er s = 16; - dette er en reset funktion som gør, at teksten bliver standard størrelse igen.
