Forum PHP.pl > [PHP][CSS][JavaScript]Jak zrobić dymek, który się pokaże po wcisnieciu?

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [PHP][CSS][JavaScript]Jak zrobić dymek, który się pokaże po wcisnieciu?

Mlody993

29.03.2009, 03:21:41

Witam,
mam problem, nie wiem jak zrobić dymek, który wyświetli się po wciśnięciu linku Opis. Chcę, że jak się kliknie na Opis to obok się pokaże dymek i tam będę mógł napisać, opisać tą rzecz, w prawym roku link o nazwie "Zamknij" który zamyka dymek.

Szukam od godziny na googlach i nic nie mogę znaleźć na ten temat.

korek_a

29.03.2009, 06:56:11

http://docs.jquery.com/Effects/fadeOut#speedcallback

Fifi209

29.03.2009, 09:08:00

Wystarczy javascript do czegoś takiego (o ile nie chcesz super ekstra efektów)

Mlody993

29.03.2009, 11:55:40

Cytat(fifi209 @ 29.03.2009, 10:08:00 )

Wystarczy javascript do czegoś takiego (o ile nie chcesz super ekstra efektów)

No a jak to zrobić??

Nie potrzebuje jakiś tam efektów, byle okienko się wyświetlało z informacjami.

Fifi209

29.03.2009, 12:49:53

Zdarzenie

[HTML] pobierz, plaintext 
onclick
[HTML] pobierz, plaintext

Poczytaj o tym... Może weźmiesz kurs js do rączki i wykombinujesz?

Mlody993

29.03.2009, 13:05:20

No tak, ale według np. tego: http://republika.onet.pl/13965,15343,3,06-01,kursy.html

to mogę ustawić tylko 1 opis... a mam kilka rzeczy i chcę, aby otwierane było okienko z opisem po kliknięciu.

@edit:
Znalazłem coś takiego:

Cytat

<p id="ang_podst_inf">Tekst opis pliku bleslesle</p>

<p onclick="var p = document.getElementById('ang_podst_inf'); p.style.display = 'none'">Zamknij!</p>

Takie coś by mi pasowało, tylko to jest opcja OPIS + zamykanie opisu. I to jest widoczne przy starcie strony. A jak zrobić, żeby to było ukryte i po kliknięciu linku OPIS pojawiło się właśnie to?

@edit2:
Kombinuje coś takiego:

Cytat

<p id="ang_podst_inf" display="none">Inny tekst lballlsldsa</p>

<p onclick="var p = document.getElementById('ang_podst_inf'); p.style.display = 'inline'">Opis</p>

Jednak nadal na starcie pokazuje info "inny tekst..."

@edit3:
O TAKI EFEKT MI DOKŁADNIE CHODZI:
http://www.mbank.pl/przewodnik/faq/?category=39

)))

kamil4u

29.03.2009, 13:22:23

Najłatwiej, choć nie koniecznie najlepiej:
<p>opis opis opis<p style="/*Tu wygląd: display:none; i ustawienie dokładnego miejsca pod tekstem: "pozycjonowanie CSS" <-- poczytaj o tym */">treść -<span>zamknij</span></p></p>

Teraz do pierwszego <p> przypisujesz zdarzenie click (HTML - onClick) - w którym zmienisz display tego drugiego </p> i to samo do "zamknij", gdzie zmienisz display z powrotem na "none".

Poczytaj o:
- referencja JS -> najłatwiej przez document.getElementById
- jak zmienić styl CSS przez JS: referencja.style.xxxx = wartość;
- pozycjonowanie CSS - żeby w odpowiednim miejscu umieścić ten dodatkowy opis

@fifi209:

Cytat

Zdarzenie onclick

Nie ma zdarzenia onClick - jest click, które w HTML określa się poprzez atrybut onClick - taka uwaga

Mlody993

29.03.2009, 13:45:17

Znalazłem takie coś:

Cytat

<a href="#" onclick="link_ukryj()">Opis</a>
<div style="visibility:hidden" id="txt_1"><p class="cytat">Bljauiehsueh opis pliku omgs omgs omgs <br><p onclick="var p = document.getElementById('txt_1'); p.style.display = 'none'" align="right">Zamknij!</p></p></div>
<script type="text/javascript">
link_u=0;
link_c=['visible','hidden'];

function link_ukryj(){
if(link_u>1)return;
document.getElementById('txt_1').style.visibility=link_c[link_u];
link_u++;
}
</script>

No i mam problem bo działa tylko jednorazowo.

Po kliknięciu wyskakuje opis i gdy kliknę zamknij to się zamyka, ale już drugi raz nie mogę otworzyć.

Jeśli w Zamknij! dam link to działa nadal, tyle, że przeładuje stronę, a ja chcę to bez przeładowywania.

kamil4u

29.03.2009, 13:55:34

Kod

<a href="#" onclick="link_ukryj()">Opis</a>
<div style="visibility:hidden" id="txt_1"><p class="cytat">Bljauiehsueh opis pliku omgs omgs omgs <br><p onclick="var p = document.getElementById('txt_1'); link_ukryj();" align="right">Zamknij!</p></p></div>
<script type="text/javascript">
link_u=0;
link_c=['visible','hidden'];

function link_ukryj(){
document.getElementById('txt_1').style.visibility=link_c[link_u%2];
link_u++;
}
</script>

Mlody993

29.03.2009, 14:22:27

No niby wszystko fajnie, super... Ale jedno działa na drugie. :/

Mam np. to:

Cytat

<a href="#" onclick="link_ukryj()">Opis</a>
<div style="visibility:hidden" id="plik1">Opis pliku 111 sxcxzcxfsdfsd</div>
<script type="text/javascript">
link_u=0;
link_c=['visible','hidden'];

function link_ukryj(){
document.getElementById('plik1').style.visibility=link_c[link_u%2];
link_u++;
}
</script>

i w tym samym pliku niżej jest inny plik:

Cytat

<a href="#" onclick="link_ukryj()">Opis</a>
<div style="visibility:hidden" id="plik2">Opis pliku 222 xDaffdsdfsdfsd</div>
<script type="text/javascript">
link_u=0;
link_c=['visible','hidden'];

function link_ukryj(){
document.getElementById('plik2').style.visibility=link_c[link_u%2];
link_u++;
}
</script>

No i tutaj jest błąd, bo gdy w pierwszym pliku wcisnę OPIS to pokazuje opis drugiego, gdy w drugim wciskam to tez pokazuje i zamyka opis drugiego. Opis pierwszego pliku nie chce się wyświetlać.

kamil4u

29.03.2009, 14:32:11

Gotowce - jak ja ich nie lubię...... :

Kod

Jeśli nie chcesz mieć odstępu to daj zamiast visibility -> display i hidden -> none

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.