Toggle_visibility ne radi dobro

Web dizajn i grafika
1

Lijepi pozdrav svima!

Na stranici http://www.antonija-horvatek.from.hr/proba-toggle.html je prikazan problem koji me muči.
Naime, tekst “Prikaži/sakrij” prikazuje odnosno sakriva željeni tekst. Prvi takav link radi dobro, no onaj na dnu stranice stvara probleme jer ujedno radi i neželjeni skok na vrh stranice.
Molim vas pogledajte na gornjoj stranici.

Kako izbjeći ovaj neželjeni skok ?

Inače, kod koji koristim je iskopiran odnekud s interneta i dosad sam ga koristila pri vrhu stranice, pa nisam ni uočila problem…

Hvala,
Antonija

2

Jedan quick&dirty hack je da a element zamijeniš button elementom i ukloniš href="#".

Za toogle efekt bi trebala koristiti jQuery i preventdefault().

3

Evo ti primjer

U tvome slucaju mnogo bolja opcija je koristiti slideToggle() metodu.

Pogledaj primjer, vrlo je jednostavno.

A sada sam vidio u cemu je problem, mislim da je dobra opcija uraditi ovo pomocu data-attributes, napisem brzo pa editujem.

Evo edit na brzinu, zurim, nisam nikakav dodatni CSS pisao, tako da izgleda malo cudno.

Ako nije jasno, pojasnim kad se vratim.

1 Like
4

belmine, probala sam kopirati tvoj kod, ali mi ne radi.
http://www.antonija-horvatek.from.hr/proba-toggle-2.html
Gdje griješim?

5

Ne valjda ti struktura koda.

Prvo nemas definiran <!doctype html> tag.Zatim zatvaras </html> tag a nisi ga nigdje ni otvorila, i prebaci jQuery, zajedno sa script tagom, iz head-a neposredno prije </body>

6

Popravila sam, sad je super, http://www.antonija-horvatek.from.hr/proba-toggle-3.html .
Jako je lijepo ovo kako se nakon klika pomalo pomakne tekst prema dolje ili, kod drugog klika, gore.
Hvala!

Dodatno pitanje:
Može li se napraviti da onaj tekst “Klik ovdje” ne bude isti?
Npr. umjesto njega da na početku da piše “Pokaži”, a nakon što se klikne na njega, da umjesto “Pokaži” piše “Sakrij”?
I možda da uz “Pokaži” bude strelica prema dolje, a uz “Sakrij” strelica prema gore?
Ako nije prekomplicirano…

7

Mislim da je to to.Koristio sam font-awesome

8

Da, čini mi se da je to to.
http://www.antonija-horvatek.from.hr/proba-toggle-4.html

Ovo što spominješ font-awesome, znači da moram dodati
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
je li tako?
Tako nađoh na Googleu…

Puno hvala!

Sad idem isprobati to na stranici na kojoj mi treba, pa ako zapnem, javim se…

9

Da, to je to.

10

Ipak dodatno pitanje:
Kad se klikne na taj “Prikaži”, oko njega se napravi neki okvirić istočkani i on tu ostane dok ne kliknem negdje izvan njega. Može li da se ne pojavi taj okvir?

11

Moze li screenshot, ili mozda bolje live demo ?

12

nezeljeni-okvir.png950×541 117 KB

13

Sad sam skužila da se taj okvir pojavi u Firefoxu, ali ne u Chromeu…

14

Probaj

a:focus {
    outline: none;
}

Pricam na pamet, live demo bio bi vise od koristi.

15

focus je popravio stvar.
pusa :slight_smile:

16

Što znači live demo? Snimiti video u kojem se to pokazuje?

17

Ne, vec live / real stranica.

18

Neću dalje pitati o tom live demo, ali ne znam o čemu se radi, što, kako…

Nego, novo pitanje o ovome Prikaži-Sakrij.
Može li se on pojaviti na kraju prošlog reda? To sam pokušala ovdje, ali on ode u novi red…
http://www.antonija-horvatek.from.hr/proba-toggle-5.html

19

Moze ali moras wrapa-ti ga u span.

Znaci na ovaj nacin otprilike:

<p>
  Htjela bih da se na kraju ovog reda pojavi "Prikaži", no on ode u drugi red...
  <span>
    <a href="#">Prikazi</a>
  </span>
</p>
20

Probala sam, ali ne funkcionira.
http://www.antonija-horvatek.from.hr/proba-toggle-6.html