Web Programiranje

Saturday, November 19, 2011

JavaScript - pomeranje slike unutar DIV taga

Evo jedne male skriptice za pomeranje pozadinske slike u DIV tagu. Pomeranje slike izgleda ovako:

Ovo je kod:

<html>
<head>
<title></title>
<script type="text/javascript">
function Pomeranje(x, smer, brzina)
{
x += smer * brzina;
if (x <= -400) smer = 1;
if (x >= 0) smer = -1;
document.getElementById("slika").style.backgroundPosition = x + "px 0px";
setTimeout('Pomeranje(' + x + ', ' + smer + ', ' + brzina + ');', 100);
}

</script>
<style type="text/css">

#slika{
width: 200px;
height: 100px;
background: url('slika.png');
background-position: 0px 0px;
margin-left: auto;
margin-right: auto;

}
</style>
</head>

<body OnLoad='Pomeranje(0, -1, 10);'>
<div id='slika'></div>
</body>
</html>

Možete da podešavate početnu poziciju, smer i brzinu kretanja.

Pomeranje (pocetna pozicija, smer, brzina kretanja)

U ovom primeru slika je široka 600 px, a radni prostor (div u kojem se prikazuje slika) je širine 200 px. To znači da sliku pomeramo od 0 do -400 px. Kretanje slike počinje od 0 px i pomera se svaki put za -10 px (na svakih 100ms). Kada dođe do -400px , smer se menja i pomeranje je po +10 px. I tako se slika stalno kreće levo-desno.

Ovu animaciju možete iskoristiti za sliku na vrhu stranice (header image). Ako želite da je postavite unutar posta na blogu, treba da unesete sledeći kod:

<div id='slika' style="width: 200px; height: 100px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmpDjWTLOhWMZAt34apwgJ1WcdfMvr1a16Ptp3WNTeYqYvFbrfMT_jIKEtpe4r2GjojhcGnIVZ_THRiJAfo_-r7yQupeJnQUU95B_qhlGXOfciFp7zbSTYJbgObKvVxNvjrTQZ16RV4g7C/s1600/slika.PNG'); background-position: 0px 0px; margin-left: auto; margin-right: auto;"></div>

<script type="text/javascript">
function Pomeranje(x, smer, brzina)
{
x += smer * brzina;
if (x <= -400) smer = 1;
if (x >= 0) smer = -1;
document.getElementById("slika").style.backgroundPosition = x + "px 0px";
setTimeout('Pomeranje(' + x + ', ' + smer + ', ' + brzina + ');', 100);
}
</script>
<script type="text/javascript">
Pomeranje(0, -1, 10);
</script>

Vodite računa da ubacite odgovarajuće parametre:

width: 200px - stavite željenu širinu div polja u pikselima.
height: 100px - stavite željenu visinu div polja u pikselima
(x <= -400) - umesto -400 stavite odgovarajuću vrednost koju dobijate oduzimanjem širine div-a i širine slike (u ovom slučaju 200 - 600 = -400)
url('http://....') - stavite adresu vaše slike. Slika se mora nalaziti negde na internetu.

Tuesday, November 15, 2011

JavaScript - skripta za odbrojavanje vremena 2.deo

U prošlom članku napisali smo skriptu za odbrojavanje vremena u JavaScript-u. Međutim, ta skripta je prikazivala vreme samo u sekundama i mogla je da broji samo unazad do nule. Sada prikazujemo skriptu koja može da broji u oba smera (napred, nazad) do bilo koje vrednosti i prikazuje vreme o obliku hh:mm:ss.

<html>
<head>
<title></title>
<script type="text/javascript">
function Vreme(t, smer, granica)
{
t += smer;
document.getElementById('ispis-vremena').innerHTML = Format_vremena(t);
if (t != granica)
setTimeout('Vreme(' + t + ',' + smer + ',' + granica + ' );', 1000);
else
alert('Vaše vreme je isteklo !');
}

function Format_vremena(v)
{
var sekunde;
var minuti;
var sati;
sekunde = v % 60;
minuti = ((v - sekunde) / 60) % 60;
sati = parseInt(v / 3600);
if (sati < 10) sati = "0" + sati;
if (minuti < 10) minuti = "0" + minuti;
if (sekunde < 10) sekunde = "0" + sekunde;
return sati + ":" + minuti + ":" + sekunde;
}

</script>
<style type="text/css">

#ispis-vremena{
width: 100px;
height: auto;
margin-top: 200px;
margin-left: auto;
margin-right: auto;
text-align: center;
background: #dfefff;
font-family: Arial;
font-size: 20px;
line-height: 40px;
color: #00007f;
}
</style>
</head>

<body OnLoad='Vreme(0, 1, 300);'>
<div id='ispis-vremena'></div>
</body>
</html>

prilikom poziva, funkciji prosleđujemo 3 parametra:

početno vreme u sekundama (t)
korak i smer (smer)
krajnje vreme u sekundama (granica)

Primeri:

Ako funkciju pozovemo:
Vreme(0, 1, 300);
skripta će brojati od 00:00:00 do 00:05:00

Ako funkciju pozovemo:
Vreme(600, -1, 300);
skripta će brojati unazad od 00:10:00 do 00:05:00

Friday, November 11, 2011

JavaScript - skripta za odbrojavanje vremena 1.deo

Verovatno ste videli na mnogim sajtovima i u skoro svakoj online igrici deo sa odbrojavanjem vremena. Ovo je veoma lako napraviti i zato Vam prikazujemo jednu malu skripticu i primer kako to radi.

<html>
<head>
<title></title>
<script type="text/javascript">
function Vreme(t)
{
document.getElementById('ispis-vremena').innerHTML = t;
t--;
if (t >= 0)
setTimeout('Vreme(' + t + ');', 1000);
else
alert('Vaše vreme je isteklo !');
}
</script>
<style type="text/css">
#ispis-vremena{
width: 100px;
height: auto;
margin-top: 200px;
margin-left: auto;
margin-right: auto;
text-align: center;
background: #dfefff;
font-family: Comic Sans MS;
font-size: 50px;
line-height: 100px;
color: #00007f;
}
</style>
</head>

<body OnLoad='Vreme(10);'>
<div id='ispis-vremena'></div>
</body>
</html>

Da bi ste videli kako ovo radi, u Notepad-u na svom računaru napravite običan tekstualni fajl sa nastavkom .html umesto .txt (npr: index.html ili brojac.html). Zatim kopirajte kompletan kod i snimite. Otvorite u nekom pretraživaču ( FireFox, Opera, Chrome, IE ...)

Kako ovo radi ?

Ceo kod se sastoji iz 3 dela: HTML-a, CSS-a i JavaScript-a. Unutar tagova <script type="text/javascript"></script> pišemo JavaScript kod, a unutar tagova <style type="text/css"></style> pišemo CSS kod. JavaScript i CSS se najčešće piše u posebnim fajlovima, ali pošto je skripta veoma kratka i jednostavna odlučili smo se za varijantu "sve u jednom fajlu".

Kada se učita html stranica pokreće se funkcija Vreme.
<body OnLoad='Vreme(10);'>

Unutar elmenenta čiji je ID="ispis-vremena" ispisujemo vrednost t.

document.getElementById('ispis-vremena').innerHTML = t;

t umanjujemo za 1
t--;

ako je t veće ili jednako od nule po isteku vremena od 1000 ms (tj. 1 sekunde) pokreće se funkcija Vreme, ali kako smo t umanjili za jedan sad se poziva funkcija u obliku Vreme(9).
if (t >= 0)
setTimeout('Vreme(' + t + ');', 1000);
else
alert('Vaše vreme je isteklo !');

ponavljanjem ovog procesa dolazimo do uslova kada će t biti manje od 0. Tada se ispisuje poruka na ekranu i prekida se sa ponovnim pozivanjem funkcije Vreme. Umesto ove poruke, može se nešto drugo uraditi. Npr: ponovo učitati stranica, učitati neka druga stranica, ispisati na ekran neki podatak iz baze...