DevProTalk

Forumi IT profesionalaca
web development, web design, e-business, SEO


Idite nazad   DevProTalk > DevProTalk > Sva početnička pitanja
Želite da se reklamirate ekskluzivno na ovoj poziciji? Javite se

Sva početnička pitanja Sva početnička pitanja bi trebala da se postavljaju u ovom forumu, a ako se pretvori u kvalitetnu diskusiju interesantnu svima - prebacićemo je u odgovarajući forum. Molimo "znalce" da ne omalovažavaju početnike, ako žele da pomognu svi ćemo biti zahvalni, ako ne žele, neka preskoče ovaj forum.

Odgovori
 
Alati teme Način prikaza
Staro 26. 12. 2011.   #1
Mladen Sevic
novi član
Na probnom radu
 
Datum učlanjenja: 25.07.2011
Poruke: 15
Hvala: 3
0 "Hvala" u 0 poruka
Mladen Sevic is on a distinguished road
Default Active state i anchor pitanje

Pozdrav,
imam prostu HTML stranu sa dosta podataka. U sidebar imam 4-5 linkova tipa <li><a></a></li> koji vode / linkuju ka anchorima na toj istoj strani. Jos sam ubacio i jquery kako bi sve to klizillo kako valja. Ali me interesuje jedna stvar. Zelim da kada kliknem na link on bude u active state tj obojen drugacije od ostalih.
Znaci klik na sidebar link odvede na anchor i da ima drugaciji stil od ostalih linkova npr isti stil kao za hover. Da li je to moguce ostvariti?
Mladen Sevic je offline   Odgovorite uz citat
Staro 26. 12. 2011.   #2
Mladen Sevic
novi član
Na probnom radu
 
Datum učlanjenja: 25.07.2011
Poruke: 15
Hvala: 3
0 "Hvala" u 0 poruka
Mladen Sevic is on a distinguished road
Default

Jos jednostavnije objasnjeno.

Kôd:
<ul>
    <li><a href="#anchor-1">anchor one</a></li>
    <li><a href="#anchor-2">anchor second</a></li>
    <li><a href="#anchor-3">anchor third</a></li>
</ul>
Kako da na klik dodelim klasu tipa .current <a> tagu. I da ona ostane sve dok ne kliknem na drugi <a>tag tj link.
Mladen Sevic je offline   Odgovorite uz citat
Staro 26. 12. 2011.   #3
webarto
expert
Grand Master
 
Avatar webarto
 
Datum učlanjenja: 11.04.2010
Poruke: 998
Hvala: 141
959 "Hvala" u 153 poruka
webarto is on a distinguished roadwebarto is on a distinguished roadwebarto is on a distinguished roadwebarto is on a distinguished roadwebarto is on a distinguished roadwebarto is on a distinguished roadwebarto is on a distinguished roadwebarto is on a distinguished road
Default

Stavi ID sidebar na taj UL.

PHP kôd:
$('#sidebar a').click(function() {
  $(
'#sidebar a').removeClass('current');
  $(
this).addClass('current');
}); 
^ Ovo je jQuery, stavi <script> prije </body>
__________________
Github // LinkedIn // PHP // ZCE // Stackoverflow PHP // Site5 Web Hosting

Poslednja izmena od webarto : 26. 12. 2011. u 22:14.
webarto je offline   Odgovorite uz citat
Staro 26. 12. 2011.   #4
Mladen Sevic
novi član
Na probnom radu
 
Datum učlanjenja: 25.07.2011
Poruke: 15
Hvala: 3
0 "Hvala" u 0 poruka
Mladen Sevic is on a distinguished road
Default

Kôd:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testing</title>
<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="application/javascript">
$('#sidebar a').click(function() {
  $('#sidebar a').removeClass('current');
  $(this).addClass('current');
});  
</script>
<style type="text/css">
.current {
	color:#F00;
}</style>
</head>

<body>
<div id="sidebar">
<ul>
    <li><a href="#anchor-1">anchor one</a></li>
    <li><a href="#anchor-2">anchor second</a></li>
    <li><a href="#anchor-3">anchor third</a></li>
</ul>
</div>
</body>
</html>
ovako nesto?
Mladen Sevic je offline   Odgovorite uz citat
Staro 27. 12. 2011.   #5
ivanhoe
Ivan Dilber
Sir Write-a-Lot
 
Avatar ivanhoe
 
Datum učlanjenja: 18.10.2005
Lokacija: Bgd
Poruke: 5.320
Hvala: 104
2.344 "Hvala" u 583 poruka
ivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svima
Pošaljite poruku preko Skype™ za ivanhoe
Default

ovo ti nece raditi jer se taj javascript izvrsi pre nego sto browser zna da postoje neki linkovi (nije dotle jos stigao u parsiranju, posto ide redom). Zato postoje 2 resenja:

- old school je da samo script pomeris u html-u ispod DOM elementa sa kojim radis, znaci ispod liste u ovom slucaju.
- modernije i vise u duhu jquerija je da js stavis unutar onDomReady handlera, sto se u jQueriju obicno pise ovako: $(function () { //ovde onaj kod }); , a pogledaj ready() metodu u jQuery dokumentaciji za vise informacija

Prednost prvog resenja je sto ne cekas da se ceo DOM izrenderuje, sto ponekad dobro dodje, ali inace u 99% situacija zeleces da koristis ovaj drugi nacin, to je sad standard
__________________
Leadership is the art of getting people to want to do what you know must be done.
ivanhoe je offline   Odgovorite uz citat
"Hvala" ivanhoe za poruku:
Staro 27. 12. 2011.   #6
Mladen Sevic
novi član
Na probnom radu
 
Datum učlanjenja: 25.07.2011
Poruke: 15
Hvala: 3
0 "Hvala" u 0 poruka
Mladen Sevic is on a distinguished road
Default

Pozdrav,
hvala na odgovorima. Ivanhoe probao sam sa ovim fixom da stavim code ispod liste i radi savrseno.

medjutim to sa jQuery nisam razumeo bas najbolje posto sam ja dizajner prevashodno i poceo sam da radim html/css. Tako da mi je sam JS prilicno stran za sada.

Ako bih mogao da dobijem primer jQuery koda bio bih zahvalan, ukoliko ne opet hvala na prvom primeru.
Mladen Sevic je offline   Odgovorite uz citat
Staro 27. 12. 2011.   #7
webarto
expert
Grand Master
 
Avatar webarto
 
Datum učlanjenja: 11.04.2010
Poruke: 998
Hvala: 141
959 "Hvala" u 153 poruka
webarto is on a distinguished roadwebarto is on a distinguished roadwebarto is on a distinguished roadwebarto is on a distinguished roadwebarto is on a distinguished roadwebarto is on a distinguished roadwebarto is on a distinguished roadwebarto is on a distinguished road
Default

http://api.jquery.com/ready/

PHP kôd:
$(document).ready(function() {

$(
'#sidebar a').click(function() {
  $(
'#sidebar a').removeClass('current');
  $(
this).addClass('current');
});  

}); 
Javascript mora da se izvrši kada se HTML (DOM) učita, u tvom slučaju će se izvršiti prije nego što se HTML učita, odnosno neće raditi, ovo "sačeka" da se učita HTML i tek onda okine. Možeš staviti i na dno skripte, i u tom slučaju radiće, jer se učitava odozgo prema dole.
__________________
Github // LinkedIn // PHP // ZCE // Stackoverflow PHP // Site5 Web Hosting
webarto je offline   Odgovorite uz citat
"Hvala" webarto za poruku:
Staro 27. 12. 2011.   #8
Mladen Sevic
novi član
Na probnom radu
 
Datum učlanjenja: 25.07.2011
Poruke: 15
Hvala: 3
0 "Hvala" u 0 poruka
Mladen Sevic is on a distinguished road
Default

Veliko hvala! Radi. Probacu sada za primer koji meni treba.

Usputno pitanje koju literaturu da koristim kao apsolutni pocetnik za ucenje JS/AJAX/jQuery ?
Mladen Sevic je offline   Odgovorite uz citat
Staro 27. 12. 2011.   #9
djipko
član
Certified
 
Avatar djipko
 
Datum učlanjenja: 03.10.2006
Poruke: 96
Hvala: 27
44 "Hvala" u 26 poruka
djipko is on a distinguished road
Default

Ja licno nisam video bolju i jasniju literaturu od ovoga: http://jqfundamentals.com/ Topla preporuka za pocetak.
djipko je offline   Odgovorite uz citat
2 članova zahvaljuje djipko za poruku:
Staro 27. 12. 2011.   #10
Br@nkoR
banned
Professional
 
Avatar Br@nkoR
 
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
Br@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoro
Default

Možeš i ići nešto kao:
Kôd:
$(function() {
  $(window).bind('hashchange load', function() {
    var fragment = location.href.replace(/^[^#]*#?(.*)$/, '$1' );
    $('#sidebar a').removeClass('current');
    $('#sidebar a[href$=#' + fragment + ']').addClass('current');
  });
});
Da bi bilo i selektovano ukoliko korisnik pristupa stranici putem stranica.html#anchor-1
__________________
Don't look at me; I'm lost too.
“If you can't dazzle them with brilliance, baffle them with bul*s**t.”
Br@nkoR je offline   Odgovorite uz citat
Odgovori


Alati teme
Način prikaza

Pravila pisanja
Možete ne započinjati nove teme
Možete ne slati odgovore
Možete ne slati priloge
Možete ne izmeniti svoje poruke
vB kôd je Uključen
Smajliji su Uključen
[IMG] kod je Uključen
HTML kôd je Isključen
Pogledajte forum


Vreme je GMT +2. Trenutno vreme je 18:01.


Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.
Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.
Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.