|
Poslao: 20 Feb 2018 07:13
|
offline
- Milos ZA
- Super građanin
- Pridružio: 31 Dec 2015
- Poruke: 1267
|
Sada sam u JS napisao ovo i radi.
document.getElementsByClassName("navbar")[0].style.backgroundColor = 'green';
Hvala.
|
|
|
|
|
Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
|
|
|
Poslao: 20 Feb 2018 10:21
|
offline
- E.L.I.T.E.
- Legendarni građanin
- Pridružio: 23 Maj 2012
- Poruke: 4575
|
Milos ZA ::Sada sam u JS napisao ovo i radi.
Da li u potpunosti razumeš šta ta linija koda radi (inače je u redu, samo pitam) ? 
|
|
|
|
|
|
|
Poslao: 20 Feb 2018 17:12
|
offline
- Milos ZA
- Super građanin
- Pridružio: 31 Dec 2015
- Poruke: 1267
|
Napisano: 20 Feb 2018 15:14
Ta komanda vraca sve elemente sa navedenom klasom kao niz i ja onda izaberem odredjen element preko indeksa. Jel sam dobro shvatio?
Dopuna: 20 Feb 2018 16:45
Ne mogu da pronadjem kako da pristupim tagu u tagu. Na primer imam ovaj kod:
HTML
<section class="section-a">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam quod necessitatibus natus optio nemo eligendi et dignissimos, illo tenetur sapiente quae, cumque nam rem. Error maxime fugit laudantium ad ab, atque exercitationem aliquid quibusdam natus eveniet eius at obcaecati placeat, provident consequuntur molestias similique veritatis sed suscipit accusantium. Similique, sequi!</p>
</section>
Kako da preko JS pristupim <p> tagu? Prvo izaberem sekciju preko:
document.getElementsByClassName("section-a")[0]
E sad mi nije jasno kako da nastavim u <p> tag, jer na primer zelim da promenim font-size teksta. Ne znam kako ide sintaksa, a ne znam kako da je pronadjem na Googlu. Ako moze mala pomoc.
Dopuna: 20 Feb 2018 16:53
Skontao sam. Evo kako sam to uradio:
JS
var x = document.getElementsByClassName("section-a")[0];
var y = x.getElementsByTagName("p")[0].style.fontSize = "50px";
Dopuna: 20 Feb 2018 17:12
Opet naidjoh na problem. Napravio sam funkciju u JS:
function myFunction(){
var nav = document.getElementsByClassName("navbar")[0];
var bodyscroll = document.getElementsByClassName("container")[0].scrollTop;
if (bodyscroll >= 50)
nav.style.backgroundColor = 'green';
else
nav.style.backgroundColor = 'yellow';
}
U HTML-u imam ovo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--https://www.w3schools.com/icons/fontawesome_icons_intro.asp-->
</head>
<body>
<div class="container">
<div class="head"></div>
<div class="opacity"></div>
<div class="heading">
<h1>Welcome to</h1>
<h2>world greatest private <br> car collection</h2>
<h2 class="desp">Hope that you will like what we have to offer</h2>
<nav class="navbar">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="index.html">Owner</a></li>
<li><a href="index.html">Gallery</a></li>
<li><a href="index.html">Location</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
</nav>
</div>
<section class="section-a sec">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam quod necessitatibus natus optio nemo eligendi et dignissimos, illo tenetur sapiente quae, cumque nam rem. Error maxime fugit laudantium ad ab, atque exercitationem aliquid quibusdam natus eveniet eius at obcaecati placeat, provident consequuntur molestias similique veritatis sed suscipit accusantium. Similique, sequi!</p>
</section>
<section class="section-b sec">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora perspiciatis quae tempore recusandae consequuntur fugit perferendis incidunt alias omnis totam libero culpa minus, ratione maxime necessitatibus eius dolorem itaque natus mollitia sed nostrum. Nostrum voluptates esse harum magni eos nihil fugiat neque quia perspiciatis aspernatur, alias nobis quis asperiores explicabo.</p>
</section>
<div id="mama"></div>
</div>
<script src="js/main.js"></script>
</body>
</html>
U sustini ispred zatvarajuceg <body> taga sam pozvao eksterni JS fajl u kome se nalazi funkcija koju zelim da upotrebim. Sta ja zelim da postignem. Zelim da mi navigacija bude zuta ako nisam skrolovao, a ako jesam onda da bude zelena. Gde gresim?
|
|
|
|
|
|
|
|
|
Poslao: 21 Feb 2018 07:19
|
offline
- Milos ZA
- Super građanin
- Pridružio: 31 Dec 2015
- Poruke: 1267
|
Nesto mi nije jasno. Jel te komande preko query selektora pripadaju JS ili necem drugom?
|
|
|
|
|
|
|
Poslao: 21 Feb 2018 10:47
|
offline
- Rastafarii
- Moderator foruma
- Pridružio: 22 Mar 2006
- Poruke: 3760
- Gde živiš: 127.0.0.1
|
Cist javascript. Lici malcice na jQuery, ali je cist JS i poprilicno podrzan u svim browserima (cak i u IE8).
Ono sto si ti napisao ovako:
document.getElementsByClassName("section-a")[0]
moze da se napise i ovako:
document.querySelector('.section-a')
sa istim rezultatom (querySelector vraca samo prvi "pogodak"). Ako zelis niz sa svim elementima koji imaju tu klasu, onda koristis querySelectorAll, takodje nad document objektom.
|
|
|
|
|
|
|
Poslao: 24 Feb 2018 20:43
|
offline
- Milos ZA
- Super građanin
- Pridružio: 31 Dec 2015
- Poruke: 1267
|
Imam pitanje vezano za addEventListener. Da li mogu da napravim neki funkciju posebno u JS dokumentu i da je onda pozovem u addEventListener ili moram direktno u njemu da je pisem. Evo ga moj konkretan primer. Funkcija sluzi za Image Slider da se prikaze sledeca slika.
Ovaj kod ne radi.
// RIGHT ARROW SLIDE
function rightArrowSlide() {
if (current === sliderImages.length - 1)
current = -1;
slideRight();
}
// RIGHT ARROW CLICK
rightArrow.addEventListener('click', rightArrowSlide());
Ovaj kod radi kako treba.
// RIGHT ARROW CLICK
rightArrow.addEventListener('click', function(){
if (current === sliderImages.length - 1)
current = -1;
slideRight();
});
|
|
|
|
|
|
|
Poslao: 24 Feb 2018 20:52
|
offline
- Rastafarii
- Moderator foruma
- Pridružio: 22 Mar 2006
- Poruke: 3760
- Gde živiš: 127.0.0.1
|
Mozes, ali ne tako kako si zamislio  Probaj ovako:
// RIGHT ARROW CLICK
rightArrow.addEventListener('click', rightArrowSlide);
Usput, procitaj malo o ++ i -- operaterima, kao i kako se ponasaju kad su iza, a kako kad su ispred promenljive. Ne bi bilo lose da pogledas i Math.max i Math.min funkcije, trebace ti bas za ovo.
|
|
|
|
|
|
|
Poslao: 24 Feb 2018 21:11
|
offline
- Milos ZA
- Super građanin
- Pridružio: 31 Dec 2015
- Poruke: 1267
|
Damn son, where did you find this?  Znao sam da ce neka zagrada ili tacka da me zezne. Citao sam malopre o addEventListener i nisam primetio da kad se poziva nova funkcija da joj se pise samo ime, a ne i zagrade.
Vezano za Math.min i Math.max funkcije, koliko vidim oni izvlace minimum i maksimum iz nekog niza, ali ne vidim kako mi to moze pomoci u mom kodu.
Sto se tice pisanja ++ i -- ispred ili iza varijable to sam citao mali milion puta i ovde na forumu i po internetu i mislim da sam shvatio. Ako stavimo a++ onda cemo prvo iskoristiti vrednost a za neki uslov ili nesto slicno pa cemo tek onda povecati a za 1. Ako napisemo ++a onda cemo prvo a povecati za 1 pa tek onda koristiti novu vrednost za nase potrebe.
|
|
|
|
|
|
|
Poslao: 24 Feb 2018 21:13
|
offline
- E.L.I.T.E.
- Legendarni građanin
- Pridružio: 23 Maj 2012
- Poruke: 4575
|
Rastafarii ti je pokazao tačno rešenje. Razlog što ti kod iz prvog primera nije radio je što si pozvao funkciju rightArrowSlide umesto da je samo proslediš kao argument.
Dakle, rightArrowSlide() poziva funkciju, dok rightArrowSlide vraća funkciju. Ovo možeš da isprobaš i u konzoli:
|
|
|
|
|
|
