Dinamično prepoznavanje širine ekrana

Zadatak 1

 

U ovom zadatku kreiracemo kod koji ce biti u stanju da prepozna da li je sirina ekrana promenjena na neku vrednost (u nasem slucaju granica je 600px) i da u skladu sa tim primeni odgovarajuca CSS pravila. Tacnije, kada je sirina pretrazivaca iznad 600px, bice ucitan bogat.css koji u slucaju da korisnik dinamicki smanji prozor ili ga gleda na ekranu manje sirine od 600px (na primer, telefon) ucita ogoljen.css

NAPOMENA: Ovde se necemo baviti kreiranjem HTML strane i CSS pravilima. Ono sto zelimo je da se taj dogadjaj ‘uhvati’ i zameni set pravila koje odgovaraju sirini ekrana.

 

 

Ono sto nas zanima je kako da pri smanjenju ekrana ispod 600px zamenimo ovaj red koda:

<link type=”text/css” rel=”stylesheet” href=”bogat.css”>

 

sa redom:

<link type=”text/css” rel=”stylesheet” href=”ogoljen.css”>

 

Da bi ovo postigli, prvo sto cemo uraditi je da dodelimo id ovom link tagu (da, bas to J) kako bi mogli da mu pristupimo preko getElementById iskaza. Tada ce link izgledati ovako:

 

<link id=” myCSS” type=”text/css” rel=”stylesheet” href=”bogat.css”>

 

Ono sto treba da znamo je da postoji dogadjaj resize koji se primenjuje na DOM element window pa cemo to iskoristiti za pozivanje funkcije ispitivanje_sirine..

 

window.resize = function(){

prilagodi();

}

 

Sada definisemo funkciju ispitivanje_sirine i u prvih nekoliko redova ispitujemo sirinu ali tako sto prvo proveravamo u kom pretrazivacu se nalazimo. To ne radimo direktno vec preko sintakse koju svaki od njih ima za davanje informacije o sirini prozora. Zavisno od pretrazivaca, prvo ispitujemo da li postoji parametar innerWidth. Ukoliko ne postoji sledeci pretrazivac treba da ima dva elementa: documentElement i clientWidth, i treci koji podrazumeva samo clientWidth kao parametar.

 

function prilagodi() {

var width = 0;

if (window.innerHeight) {

width = window.innerWidth;

} else if (document.documentElement && document.documentElement.clientHeight) {

width = document.documentElement.clientWidth;

} else if (document.body) {

width = document.body.clientWidth;

}

 

Nakon sto to utvrdimo bavimo se upitom da li je pomenuta sirina manja od 600px i ako jeste linku dodeljujemo vrednost ogoljen.css za atribut href. U suprotnom, za href atribut mu dodeljujemo bogat.css stil.

 

if (width < 600) {

document.getElementById(“myCSS”).setAttribute(“href”, “ogoljen.css”);

} else {

document.getElementById(“myCSS “).setAttribute(“href”, “bogat.css”);

}

}

 

Postoji jos jedna stvar koju bi trebalo definisati. Ako bi ostavili da se funkcija ispitivanja_sirine dogadja samo uz dogadjaj resize, na malim ekranima bi se, po defaultu otvarao bogat.css. Zasto? Zato sto pri ucitavanju strane na malom ekranu nije doslo do dogadjaj resize. Iz tog razloga, potrebno je ovu funkciju pozvati i pri osnovnom dogadjaju – window.onload pa ce konacan kod, stavljen u okviru jednog HTML dokumenta izgledati ovako:

 

<!DOCTYPE html>

<html>

<head>

<title>Izmena CSS stilova</title>

<link id=”myCSS” type=”text/css” rel=”stylesheet” href=”bogat.css”>

</head>

<body>

 

<h1>Naslov dokumenta</h1>

<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of “de Finibus Bonorum et Malorum” (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, “Lorem ipsum dolor sit amet..”, comes from a line in section 1.10.32.</p>

<script>

function prilagodi() {

var width = 0;

if (window.innerHeight) {

width = window.innerWidth;

} else if (document.documentElement && document.documentElement.clientHeight) {

width = document.documentElement.clientWidth;

} else if (document.body) {

width = document.body.clientWidth;

}

if (width < 600) {

document.getElementById(“myCSS”).setAttribute(“href”, “ogoljen.css”);

} else {

document.getElementById(“myCSS”).setAttribute(“href”, “bogat.css”);

}

}

 

 

 

window.onresize = function () {

prilagodi();

};

window.onload = function () {

prilagodi();

};

 

</script>

</body>

</html>

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn