Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [PHP][CSS][JavaScript]Jak zrobić dymek, który się pokaże po wcisnieciu?
Mlody993
post
Post #1





Grupa: Zarejestrowani
Postów: 81
Pomógł: 0
Dołączył: 12.02.2009

Ostrzeżenie: (0%)
-----

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. (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)
Go to the top of the page
+Quote Post
korek_a
post
Post #2





Grupa: Zarejestrowani
Postów: 115
Pomógł: 9
Dołączył: 26.09.2008
Skąd: krzesło

Ostrzeżenie: (0%)
-----

http://docs.jquery.com/Effects/fadeOut#speedcallback
Go to the top of the page
+Quote Post
Fifi209
post
Post #3





Grupa: Zarejestrowani
Postów: 4 655
Pomógł: 556
Dołączył: 17.03.2009
Skąd: Katowice

Ostrzeżenie: (0%)
-----

Wystarczy javascript do czegoś takiego (o ile nie chcesz super ekstra efektów)
Go to the top of the page
+Quote Post
Mlody993
post
Post #4





Grupa: Zarejestrowani
Postów: 81
Pomógł: 0
Dołączył: 12.02.2009

Ostrzeżenie: (0%)
-----

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ć??(IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) Nie potrzebuje jakiś tam efektów, byle okienko się wyświetlało z informacjami.

Ten post edytował Mlody993 29.03.2009, 12:12:11
Go to the top of the page
+Quote Post
Fifi209
post
Post #5





Grupa: Zarejestrowani
Postów: 4 655
Pomógł: 556
Dołączył: 17.03.2009
Skąd: Katowice

Ostrzeżenie: (0%)
-----

Zdarzenie 
[HTML] pobierz, plaintext 
  1. onclick
[HTML] pobierz, plaintext


Poczytaj o tym... Może weźmiesz kurs js do rączki i wykombinujesz?
Go to the top of the page
+Quote Post
Mlody993
post
Post #6





Grupa: Zarejestrowani
Postów: 81
Pomógł: 0
Dołączył: 12.02.2009

Ostrzeżenie: (0%)
-----

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

(IMG:http://forum.php.pl/style_emoticons/default/smile.gif) )))

Ten post edytował Mlody993 29.03.2009, 13:24:56
Go to the top of the page
+Quote Post
kamil4u
post
Post #7





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Mlody993
post
Post #8





Grupa: Zarejestrowani
Postów: 81
Pomógł: 0
Dołączył: 12.02.2009

Ostrzeżenie: (0%)
-----

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. (IMG:http://forum.php.pl/style_emoticons/default/sad.gif) Po kliknięciu wyskakuje opis i gdy kliknę zamknij to się zamyka, ale już drugi raz nie mogę otworzyć. (IMG:http://forum.php.pl/style_emoticons/default/sad.gif) Jeśli w Zamknij! dam link to działa nadal, tyle, że przeładuje stronę, a ja chcę to bez przeładowywania. (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
kamil4u
post
Post #9





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

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>


Ten post edytował kamil4u 29.03.2009, 13:57:19
Go to the top of the page
+Quote Post
Mlody993
post
Post #10





Grupa: Zarejestrowani
Postów: 81
Pomógł: 0
Dołączył: 12.02.2009

Ostrzeżenie: (0%)
-----

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ć. (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)
Go to the top of the page
+Quote Post
kamil4u
post
Post #11





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

Gotowce - jak ja ich nie lubię...... :
Kod
<script type="text/javascript">
function link_ukryj(x){
document.getElementById('plik'+x).style.visibility=(document.getElementById('plik'+x).style.visibility == 'hidden' ?  '': 'hidden');
}
</script>
<a href="#" onclick="link_ukryj(1)">Opis</a>
<div style="visibility:hidden" id="plik1">Opis pliku 111 sxcxzcxfsdfsd<br> <span onClick="link_ukryj(1);">Zamknij</span></div>

<a href="#" onclick="link_ukryj(2)">Opis</a>
<div style="visibility:hidden" id="plik2">Opis pliku 111 sxcxzcxfsdfsd<br> <span onClick="link_ukryj(2);">Zamknij</span></div>

<a href="#" onclick="link_ukryj(3)">Opis</a>
<div style="visibility:hidden" id="plik3">Opis pliku 111 sxcxzcxfsdfsd</div>


Jeśli nie chcesz mieć odstępu to daj zamiast visibility -> display i hidden -> none
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 10.10.2025 - 13:27
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn