Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> show <div> onclick, pokazywanie i ukrywanie elementu po kliknięciu w obszar poza nim
Black-Berry
post 11.06.2007, 10:05:23
Post #1





Grupa: Zarejestrowani
Postów: 663
Pomógł: 6
Dołączył: 3.06.2007
Skąd: Kraków

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

Napisałem skrypt który pokazuje mi ukryte tagi <div> po kliknięciu na ikonkę. Działa to w ten sposób, że każdy div ma przypisane id ( np id="div_1" ). Po kliknięciu na ikonkę powiązaną z tym divem za pomocą Javascript zmieniam display:none na display:block; - Wtedy ukryty div się pokazuje.

Problem jest teraz taki, że chciałbym po kliknięciu w dowolny element strony ukryć na nowo ten pokazany element. Wie ktoś moze jak sie za to zabrać questionmark.gif

Ten post edytował Black-Berry 11.06.2007, 10:37:40


--------------------
http://www.berry.nazwa.pl/edico/public_html/index.php ----> under construction
Go to the top of the page
+Quote Post
mike
post 11.06.2007, 10:16:59
Post #2





Grupa: Przyjaciele php.pl
Postów: 7 494
Pomógł: 302
Dołączył: 31.03.2004

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

Cytat(Black-Berry @ 11.06.2007, 11:05:23 ) *
Po kliknięciu na ikonkę powiązaną z tym divem za pomocą Javascript zmieniam display:none na display:block; - Wtedy ukryty div się pokazuje.
No chyba logiczne jest że teraz jak zmienisz z block na none to element zostanie ukryty.

Samodzielności trochę.
Go to the top of the page
+Quote Post
sticker
post 11.06.2007, 10:17:19
Post #3





Grupa: Zarejestrowani
Postów: 611
Pomógł: 19
Dołączył: 28.02.2005
Skąd: Wrocław

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

ano nie ma problemu jak podepniesz funkcje js pod każdy link Może i dałoby sie to prościej zrobić jakbys pokazał dom dokumentu


--------------------
linked in profile
Go to the top of the page
+Quote Post
Black-Berry
post 11.06.2007, 10:34:37
Post #4





Grupa: Zarejestrowani
Postów: 663
Pomógł: 6
Dołączył: 3.06.2007
Skąd: Kraków

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

Cytat(mike @ 11.06.2007, 10:16:59 ) *
No chyba logiczne jest że teraz jak zmienisz z block na none to element zostanie ukryty.

Samodzielności trochę.


smile.gif pani admin jak zwykle gromowładna. smile.gif Jasne że to jest logiczne i nie ma problemu jeśli chodzi o jeden element który wiem jakie ma id. Ale Chodzi o to że mam tych div'ów wiele i chciałbym żeby ukrył się dowolny bo inaczej musiałbym pisac funkcję która po kliknięciu ukrywa w pętli wszystkie divy. Dodatkowo musioałbym zdarzenie wywołania tej funkcji podpiąc do każdego elementu strony bo chcę zeby ten wyskakujący panelik ukrył się po kliknięciu w obszar poza nim. A to już problem.

Ten post edytował Black-Berry 11.06.2007, 10:36:35


--------------------
http://www.berry.nazwa.pl/edico/public_html/index.php ----> under construction
Go to the top of the page
+Quote Post
ARJ
post 11.06.2007, 10:38:44
Post #5





Grupa: Zarejestrowani
Postów: 453
Pomógł: 22
Dołączył: 20.09.2004
Skąd: Kraków - NH -

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

chodzi ci o coś takiego?
Kod
function Pokaz(co) {
    if (document.getElementById(co).style.display == "block"){
        document.getElementById(co).style.display = "none";
    }else{
        document.getElementById(co).style.display = "block";
    }
}


--------------------
Warsztat: Windows 7 Pro 64bit | Apache 2.2 | PHP 5.2 | MySQL 5.0 | PHPmyadmin 2.6.4
Go to the top of the page
+Quote Post
Black-Berry
post 11.06.2007, 10:42:53
Post #6





Grupa: Zarejestrowani
Postów: 663
Pomógł: 6
Dołączył: 3.06.2007
Skąd: Kraków

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

@ARJ

To jest właśnie mniej więcej skrypt który teraz używam. Niestety musze przekazywac nim konkretne id. A jak ukryc pokazany div po kliknięciu w obszar poza nim ? Możnaby chyba zapamiętac zmienną która określa który div jest właczony... To załatwiłoby sprawę z petlą. Ale w jakim zdarzeniu, jakiego elementu podpiąć funkcję ukrywającą? Czy jeśli ustawię ją w tagu <body> to załatwi sprawę ?

Ten post edytował Black-Berry 11.06.2007, 10:46:05


--------------------
http://www.berry.nazwa.pl/edico/public_html/index.php ----> under construction
Go to the top of the page
+Quote Post
ARJ
post 11.06.2007, 15:18:47
Post #7





Grupa: Zarejestrowani
Postów: 453
Pomógł: 22
Dołączył: 20.09.2004
Skąd: Kraków - NH -

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

użycie tamtego kodu jest proste. dodajesz np. do innego diva:
Kod
onclick="Pokaz('ukrytyDiv')"

jako parametr do funkcji Pokaz, przekazujesz id diva którego chcesz ukryć/pokazać. czy on ma być widoczny czy nie na samym początku to już ustawiasz w css.


--------------------
Warsztat: Windows 7 Pro 64bit | Apache 2.2 | PHP 5.2 | MySQL 5.0 | PHPmyadmin 2.6.4
Go to the top of the page
+Quote Post
Black-Berry
post 11.06.2007, 17:46:26
Post #8





Grupa: Zarejestrowani
Postów: 663
Pomógł: 6
Dołączył: 3.06.2007
Skąd: Kraków

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

@ARJ

Tak Wiem o co biega. Teraz tylko mam problem jak wywołać ta funkcję po kliknięciu w inny obszar niż pokazany div. Chce zrobić panelik który będzie się pokazywał po naciśnięciu ikonki a ukrywł jeśli uzytkownik zdecyduje że niepotrzebnie go otwarł i kliknie w dowolny obszar strony.


--------------------
http://www.berry.nazwa.pl/edico/public_html/index.php ----> under construction
Go to the top of the page
+Quote Post
abc667
post 11.06.2007, 18:34:32
Post #9





Grupa: Zarejestrowani
Postów: 229
Pomógł: 0
Dołączył: 29.05.2007

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

takie coś wymyśliłem, pod ff działa, pod operą nie sprawdzałem, dla ie trzeba jeszcze podopisywać gdzieniegdzie e no i ładnie to sobie w opakować w funkcje itd

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>...</title>
  4. <script type="text/javascript">
  5. var now = false;
  6.  
  7. function show(id, event)
  8. {
  9. hide();
  10. document.getElementById(id).style.display = 'block';
  11. now = id;
  12. event.stopPropagation();
  13. }
  14.  
  15. var tag;
  16.  
  17. function hide()
  18. {
  19. 	if(now)
  20. 	{
  21. 	document.getElementById(now).style.display = 'none';
  22. 	}
  23. }
  24. </script>
  25. </head>
  26. <body onclick="hide();">
  27. <div onclick="event.stopPropagation();" id="jeden" style="width: 50%; height: 50%; border: 1px solid black; display: none;">fdf1</div>
  28. <div onclick="event.stopPropagation();" id="dwa" style="width: 50%; height: 50%; border: 1px solid black; display: none;">fdf2</div>
  29. <div onclick="event.stopPropagation();" id="trzy" style="width: 50%; height: 50%; border: 1px solid black; display: none;">fdf33</div>
  30.  
  31. <br />
  32. <a href="#null" onclick="show('jeden', event);">jeden</a><br />
  33. <a href="#null" onclick="show('dwa', event);">dwa</a><br />
  34. <a href="#null" onclick="show('trzy', event);">trzy</a><br />
  35. </body>
  36. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Black-Berry
post 11.06.2007, 20:27:30
Post #10





Grupa: Zarejestrowani
Postów: 663
Pomógł: 6
Dołączył: 3.06.2007
Skąd: Kraków

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

@abc667 good job

Super - teraz będzie można zrobić paneliki takie jakie mają na gmailu smile.gif Ale tak jak napisałeś coś jest nie tak w IE. Wiesz może jak to należy zmodyfikować aby działało w IE. Moze chociaż jakiś link do artykułu... (dopiero zaczynam z JS i nie znam tych różnic pomiędy ff i ie )

Ten post edytował Black-Berry 11.06.2007, 20:27:57


--------------------
http://www.berry.nazwa.pl/edico/public_html/index.php ----> under construction
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 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 Wersja Lo-Fi Aktualny czas: 14.08.2025 - 14:55
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn