Heh, ako sam uspio u naslovu postaviti kompletno pitanje.
Znači, zanima me postoji li neko CSS rješenje da se navigacija napravi na način:
-ako ne stanu svi itemi u horizontalnu liniju, prelama se u novi red
-ono što je ostalo u prvoj liniji, ispunjava prostor 100%
Ako pitanje nije jasno…znači nakon što se navigacija prelomi, ostaje onaj komadić prostora koji nije bio dovoljno velik da stane u njega item na kojem se prelomilo. E sada, taj komadić prostora će ostati sigurno negdje (ako je font fiksan) …samo bi ja da se taj slobodni prostor raspodjeli podjednako u “width” svakog itema koji je ostao gore u navigaciji.
To je otprilike analogno situaciji kada se za tekst postavi {text-align: justify;} pa je tekst onako uredno strukturiran od ruba do ruba.
Pomoglo bi i ako postoji način da se zada klasa koja će imati utjecat na element ako je isti prelomljen u novi red…i koja neće imati utjecaj na element ako isti nije prelomljen.
Ne baš. Buttoni ili kako ih ja zovem itemi …oni su ti koji trebaju ispuniti prostor 100%.
I kada se prelomi, pa neki item ode u drugi red…oni koji su ostali, opet bi trebali zauzimati 100%.
Zanimljivo, gore sam napisao kao objašnjenje ponašanja primjer sa {text-align: justify;} …a da dosad nisam išao to probati. I probam to maloprije i to zaist rasporedi buttone da zauzimaju 100% i to baš za one granične slučajeve kada prirodno jesu blizu 100%. Neće tipa rasporediti na 100% ako prirodno zauzimaju tek 40% prostora. Znači isto kao sa tekstom kada je podešen na justify.
Jedino, što mi se ne sviđa što justify to raspoređuje tako da stvara prazan prostor između dva susjedna itema …bilo bi bolje kada bi se moglo da se prostor ispuni porastom paddinga na item-ima tako da hover state ide od jednog do drugog susjednog itema.
Nije loše, ali nije baš ni ono što treba jer ne prebacuje u novi red kada se previše stisnu itemi. Ali čini se da bi se dalo na toj bazi složiti nešto sa malo JS-a.
Nego, ja u međuvremenu složio da mi JS drži navigaciju kako treba i sve fino radi osim jednog. JS nema pojma kada su elementi spremni za rad. Naime …JS da bi to održavao mora imati pristup informacijama width svakog elementa, a na onload stranice je to kaos…pogotovo ako se čeka i neka ikonica da se učita.
Mislim, napravim event koji čeka da se sve slikice učitaju…ali opet nešto zeza…
Funkcija dobro odrađuje svoj posao, i na window.onresize radi odlično …ali jednostavno fali na onload stranice. I to kod prvog loadanja koji duže traje…kod naknadnih refreshova odradi dobro.
Mislim, ovdje ću i preživjeti bez ovog JS-a …ali to mi je inače baš muka što je JS nepouzdan za dohvaćanje gabarita elemenata kada je svježi load stranice.
Znate ono…koliko puta treba neke tekstove podesiti prema pripadajućem boxu …i to se sve radi na onload …a JS je tu nepouzdan da kaže koliko je neki element velik. Jel ima neki sigurni način da se tome doskoči…da bude baš onako pouzdano…tipa event: on_page_rendered , heh…
Iskreno, radit layout s JS ne preporucam. JS-om se rade naprednije stvari, dinamicki content, itd… Jedan od razloga zasto je jQuery tako popularan je to sto odradjuje upravo ovo sto tebi treba, da li se dokument ucitao do kraja. U suprotnom je jako tesko pogodit kada ce browser ucitati element (browser nista ne garantira po tom pitanju).
Zato se takve stvari odradjuju css-om
Tvoj problem ( barem kako ga ja vidim) je sto kod premalo elemenata cijeli ul nece biti popunjen, a kod previse se ne prebacuje u drugi red. Ukoliko znas da ce elemenata uvijek biti vise, onda jednostavno stavis float:left na li i sve ce se samo preklapati. Mozda ovaj primjer moze bit od pomoci. http://jsfiddle.net/leaverou/HdfaT/?utm_source=website&utm_medium=embed&utm_campaign=HdfaT
Nekakva prerada, barem da se content inicijalno loada, a kasnije mozes JS-om nove elemnte dodavat (ako se dinamicki generiraju)
Zanmljivo je ovo, znam da se iza ovih “flex” opcija kriju čuda…pa sam se u tom području nadao da bi nešto iskočilo i za moj slučaj.
Ali konkretno ovo što si dao, tu preskače u novi red kada se item smanji ispod nekog zadanog widtha…dok u mom slučaju je width nepoznat, jer riječ koja se nalazi u itemu može biti različitih dužina. Kod mene bi kriterij preskakanja u novi red bio kada nekoj riječi postane “tijesno” u njezinoj kučici. Točnije, kako bi se sužavao prostor tako bi svaki item gubio na širini ravnomjerno te bi u nekom trenutku svim riječima postalo tijesno u njihovim kučicama. Kada bi ponestalo prostora za riječi, zadnja kučica bi preskočila u novi red…a slobodni prostor koji bi nastao, ravnomjerno bi se raspodjelio na kučice koje su ostale gore.
Algoritamski je vrlo jednostavno:
var luft=...; //slobodni prostor u liniji
var item_count=...; //broj itemea u liniji do preloma
var add_space_to_item = luft/item_count;
each(items as item)
{
item.padding_left_add(add_space_to_item/2);
item.padding_right_add(add_space_to_item/2)
}
Napisao sam algoritamski, jer je to zapravo preciznije objašnjnje koje se teže može shvatiti dvosmisleno.
Nisi mi baš jasan, kažeš ne sa JS-om, pa da je jQuery alat. Pa jQuery jeste JS, napisan je u javascriptu.
Ako se spominje da se nešto radi sa JS-om, to sporazumjeva da je najvjerovatnije korišten i jQuery kao framework već oblikovanih JS funkcija. Sorry na suvišnoj opaski ako nisam shvatio što si točno htio reći…
Uglavnom, slažem se da JS nije za layout, dok se može sa CSS-om …ali tamo gdje je CSS ograničen, tko će drugi popraviti stvar ako neće JS?
Ma prebacio sam se s teme na temu. jQuery rijesava problem ucitavanja elemenata, tj.kada je browser spreman raditi promjene nad elementima.
To ne znaci da se css stvari trebaju rijesavati s JS, tj. jQueryem.
Nemaš pouzdanu garanciju da ćeš zaista dobiti traženi width. Ako bi isto pozvao na “duboki” onload stranice, onda si siguran da ćeš dobiti traženo, barem se još nisam sreo s problemom u toj varijanti.
Ali na “svježi” onload, browseri vole trigirati .ready funkciju a da još nisu zaista renderirali sav layout.
E sada, ako me sjećanje ne vara, u tom slučaju će jQuery vratiti točan width samo u slučaju ako je on striktno zadan putem CSS-a ili gdje već …no ako je width elementa posljedica broja slova u njemu, ili bilo kako ako ovisi o layoutu ostalih elemenata …onda je jQuery “slijep” i neće vratiti točan width dok se layout zaista ne renderira.
Možda postoji pouzdan način da se dohvati taj width, ali ja ga trenutno neznam. Ako spominješ da je jQuery alat koji rješava problem ucitavanja elementa, možda znaš kako se treba ispravno pristupiti ovom problemu??
I bilo bi mi jasno kada bi gornji problem ovisio o čekanju da se učita neka slika…ali se dešava i kada nema slike. Možda je problem u delayu dok se učita font…nemam pojma…
Nije preddefinirano što je unutra. Mislim, user nakon što oblikuje nove iteme, oni se prikazuju tek nakon refresha stranice. Nema client-side-dinamike …ali to ne mijenja puno stvar.
Btw. trenutno sam na tragu rješenja sa CSS-om, znači samo ovo:
Ono što mi je bila do sada nepoznanica da se može dodati: flex-wrap: wrap;
Nego, gornji pristup je skoro idealan, ali ima manu:
-ako bi u novi red preskočila samo tri itema, oni će se raširiti da zauzmu cijelu drugu liniju. A ovdje to nije poželjno prema analogiji justfy contenta…da se zauzme cijeli prostor samo ako je content ionako blizu kraja linije. To se može spriječiti sa max-width za item, ali nije neko rješenje jer što vrijedi ograničiti item na max-width tipa 200px, ako ne znamo hoće li unutra biti riječ od 3 ili 33 slova.
Ovo zapravo u ovom primjeru i pravovremeno reagira…jeste da je tu neželjeni delay veći nego sa onReady, ali barem napravi posao bez greške.
Iako, nisam sada baš ispitivao da li bi ovo radilo u svim situacijama gdje sam sreo nepouzdanost dohvaćanja tih nekih atributa na onload…
…biti će zanimljivo vidjeti teorijsku razliku između document.ready i window.load …
Što se tiče rješenja sa CSS-om, evo rješenja:
Uglavnom se ponaša točno kako treba, osim što ako samo jedan ili dva itema preskoče u novi red…onda je neželjeno da zauzmu sav prostor. To sam u ovom jsfiddle primjeru limitirao sa max-width, ali problem i dalje postoji.
Konkretno u mom slučaju radim tako da uzmem true-width pomoću funkcije koja iz veličine fonta i slova računa width elementa …i na temelju toga postavljam max-width sa JS-om. (Nemere bez JS-a xd)
Bilo bi zanimljivo ako postoji neki jednostavan način da se dodje do originalnog widtha elementa?
P.S. tu je još justify-content: center; nisam htio u startu komplicirati pitanje s time…
razlika izmedju document i windows load je u tome sto document ceka dok se DOM ucita, tj. html kod same stranice, a windows ceka da se cijeli prozor ucita ukljucujuci i JS scripte i fonovi (koji pretpostavljam da rade problem u tvom slucaju)…
identacija, po meni odličan način prikazivanja “odlomaka”. Inače, ako sl. neznaš …u pythonu niti nemaš vitičaste zagrade…dovoljno je identacijom programu reći što se odnosi na koga. Vrlo uredno, a i prisiljava da se piše pregledan code.
Ja sam počeo s pythonom…i kada sam došao u web područje, meni je ta struktura izgledalo kaotično…
Mislim i ovo ima svoju strukturu i ne mislim da je jedna čitkija od druge, stvar je navike u što gledaš. Ja kada gledam u blokove koji nisu strukturirani po mom …doslovice moram preslagati code da bi ga razumio. U budućnosti očekujem samo da kažem računalu “prikaži code u mom stilu” …i editor će generirati layout code-a prema programeru koji ga gleda/piše. Ta budućnost nije uopće daleko …prije bi se bacio osobno na izradu tako nečega nego 11 godina navike mijenjao
