Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Tylko jeden onclick
Forum PHP.pl > Forum > Przedszkole
Dapi
8.07.2010, 19:58:43
Witam.

Czy da się zrobić tak, żeby był wykonywany tylko jeden onclick?

Fragment kodu:
[HTML] pobierz, plaintext 
  1. <script language="javascript" type="text/javascript">
  2.    	function zwin(co){
  3. 	    var obiekt = document.getElementById(co); 
  4.             if (obiekt.style.display == 'block') { 
  5.                obiekt.style.display = 'none'; 
  6.             }
  7.    	}
  8. 	function rozwin(co){
  9. 	    var obiekt = document.getElementById(co); 
  10.             if (obiekt.style.display == 'block') { 
  11.                obiekt.style.display = 'none'; 
  12.             } else { 
  13.                obiekt.style.display = 'block'; 
  14.             }
  15.    	}
  16. </script>
  17. <div onclick="zwin('lista')" style="position: absolute; z-index: 10; width: 100%; height: 100%;">
  18. <div onclick="rozwin('lista');" style="position: absolute; z-index: 11;">Jakiś tekst</div>
  19. </div>
[HTML] pobierz, plaintext


W tej chwili lista się nie otwiera. Jak usunę onclick z pierwszego diva to jest ok.


Prosiłbym o pomoc. winksmiley.jpg
kapuch
8.07.2010, 20:02:01
a nie lepiej tak:
[JAVASCRIPT] pobierz, plaintext 
  1. function showHide(msg_id)
  2. {
  3. 	var element = document.getElementById(msg_id);
  4. 	element.style.display=element.style.display=='none' ? 'block' : 'none';
  5. }
[JAVASCRIPT] pobierz, plaintext

i html
[HTML] pobierz, plaintext 
  1. <a onclick="showHide('span1');">rozwin/zwin</a>
  2. <span id="span1">sfdsfdsf</span>
[HTML] pobierz, plaintext
Dapi
8.07.2010, 20:08:39
Ale ja potrzebuję, żeby po kliknięciu poza divem lista się zwijała.
Coś na wzór "onclickout" które jakby było, ułatwiłoby sprawę winksmiley.jpg
kapuch
8.07.2010, 20:14:27
Cytat(Dapi @ 8.07.2010, 21:08:39 ) *
Ale ja potrzebuję, żeby po kliknięciu poza divem lista się zwijała.
Coś na wzór "onclickout" które jakby było, ułatwiłoby sprawę winksmiley.jpg

No i w czym problem?
Przeciez mozesz dac ten onclick do elementu poza tym divem, ktorego chcesz zamknac.
Poza tym w swoim kodzie odwolujesz sie do id=lista ktorego nie widac nigdzie...
Dapi
8.07.2010, 20:19:16
W tym problem, że jak ten onclick ukrywający listę jest to lista się wcale nie pokazuje ;/
Jak go nie ma to się pokazuje. :|


Lista jest, wkleiłem tylko to co najważniejsze winksmiley.jpg
cniak
8.07.2010, 20:22:22 
[HTML] pobierz, plaintext 
  1. <div onclick="zwin('lista')" style="position: absolute; z-index: 10; width: 100%; height: 100%;">
  2. <div onclick="rozwin('lista');" style="position: absolute; z-index: 11;">Jakiś tekst</div>
[HTML] pobierz, plaintext

masz dwa div'y w jednym i dodatkowo tylko ten jeden jest zakończony. Moze to jest bład?
kapuch
8.07.2010, 20:23:36
Cytat(Dapi @ 8.07.2010, 21:19:16 ) *
Lista jest, wkleiłem tylko to co najważniejsze winksmiley.jpg

Fajnie by bylo wiedziec/widziec co chcesz ukryc, ale skoro uwazasz ze wkleiles to co najwazniejsze to OK.
Ja na podstawie twojego kodu nie jestem ci w stanie pomoc, bo dla mnie np. wazne jest abym widzial co chcesz ukrywac.
Bo jak narazie to w kodzie nie ma ZADNEGO diva z id=lista - kumasz?

Cytat(cniak @ 8.07.2010, 21:22:22 ) *
[HTML] pobierz, plaintext 
  1. <div onclick="zwin('lista')" style="position: absolute; z-index: 10; width: 100%; height: 100%;">
  2. <div onclick="rozwin('lista');" style="position: absolute; z-index: 11;">Jakiś tekst</div>
[HTML] pobierz, plaintext

masz dwa div'y w jednym i dodatkowo tylko ten jeden jest zakończony. Moze to jest bład?

div drugi jest wewnatrz diva pierwszego winksmiley.jpg
A w ostatniej linijce ten pierwszy jest domykany.
Ale ja nadal zastanawiam sie co tu ma byc ukrywane, skoro zaden z tych divow nie ma ID='lista".
Dapi
8.07.2010, 20:25:05
Zakończone są oba winksmiley.jpg
[HTML] pobierz, plaintext 
  1. <div onclick="zwin('lista')" style="position: absolute; z-index: 10; width: 100%; height: 100%;">
  2. <div onclick="rozwin('lista');" style="position: absolute; z-index: 11;">Jakiś tekst</div>
  3. </div>
[HTML] pobierz, plaintext

przeoczyłeś chyba linijkę 19 winksmiley.jpg

kapuch
8.07.2010, 20:27:17
Cytat(Dapi @ 8.07.2010, 21:25:05 ) *
Zakończone są oba winksmiley.jpg
[HTML] pobierz, plaintext 
  1. <div onclick="zwin('lista')" style="position: absolute; z-index: 10; width: 100%; height: 100%;">
  2. <div onclick="rozwin('lista');" style="position: absolute; z-index: 11;">Jakiś tekst</div>
  3. </div>
[HTML] pobierz, plaintext

przeoczyłeś chyba linijkę 19 winksmiley.jpg

Juz mu o tym napisalem, ale najwazniejsze jest to co Ty przeoczyles.
Kumasz juz, czy trzeci raz mam napisac?

Poza tym zalozenie twojego kodu jest glupie, bo jak zamkne ktoregos diva (display:none;) to juz go nie otworze, bo elementy z display:none; tak jakby NIEISTNIEJA, wiec zastanawiam sie jak masz zamiar go kliknac.
Chyba ze do pierwszego diva dasz rozwin(), a do drugiego (tego co ma byc zwijany) zwin();
Dapi
8.07.2010, 20:28:00
kapuch, żaden problem winksmiley.jpg

[HTML] pobierz, plaintext 
  1. <div onclick="rozwin('lista');" style="position: absolute; z-index: 11; cursor: pointer">
  2. 					<div style="position: absolute; margin-left: 22px; color: #7e7e7e; width: 139px; height: 25px; background: #04070B; float: left;">
  3. 					    <div style="height: 1px"></div>
  4. 					    <div style="margin-left: 1px; color: #7e7e7e; width: 137px; height: 23px; background: #0D1014;">
  5. 						    <div style="height: 1px"></div>
  6. 					        <div style="margin-left: 1px; color: #7e7e7e; width: 135px; height: 21px; background: #04070B;">
  7. 							    Planeta wybrana
  8. 					        </div>
  9. 						</div>
  10. 					</div>
  11. 					<div style="position: absolute; margin-left: 161px; color: #7e7e7e; width: 26px; height: 25px; background: #04070B; float: right;">
  12. 					    <div style="height: 1px"></div>
  13. 					    <div style="margin-left: 1px; color: #7e7e7e; width: 24px; height: 23px; background: #0D1014;">
  14. 						    <div style="height: 1px"></div>
  15. 					        <div style="margin-left: 1px; width: 22px; height: 21px; color: #1F2226; background-color: #04070B; background: url(rozwin.png);">.</div>
  16. 						</div>
  17. 					</div>
  18. 					</div><div style="height: 1px"></div>
  19. 					<div id="lista" style="display: none; position: absolute; margin-bottom: 4px; margin-top: 23px; margin-left: 22px; width: 165px; background: #04070B;">
  20. 					    <div style="height: 1px"></div>
  21. 					    <div style="margin-left: 1px; width: 163px; margin-bottom: 2px; background: #0D1014;">
  22. 						    <div style="height: 1px"></div>
  23. 					        <div onmouseover="this.style.background='#111820'" onmouseout="this.style.background='#04070B'" style="margin-left: 1px; color: #7e7e7e; background: #04070B; width: 161px; height: 21px; text-align: left;">
  24. 							    <span style="width: 100%; margin-right: 26px; text-align: left; margin-left: 10px;">opcja</span>
  25. 					        </div>
  26. 							<div style="height: 1px"></div>
  27. 							<div onmouseover="this.style.background='#111820'" onmouseout="this.style.background='#04070B'" style="margin-left: 1px; color: #7e7e7e; width: 161px; height: 21px; background: #04070B; text-align: left;">
  28. 							    <span style="width: 100%; margin-right: 26px; text-align: left; margin-left: 10px;">opcja</span>
  29. 					        </div>
  30. 							<div style="height: 1px"></div>
  31. 							<div onmouseover="this.style.background='#111820'" onmouseout="this.style.background='#04070B'" style="margin-left: 1px; color: #7e7e7e; width: 161px; height: 21px; background: #04070B; text-align: left;">
  32. 							    <span style="width: 100%; margin-right: 26px; text-align: left; margin-left: 10px;">opcja</span>
  33. 					        </div>
  34. 							<div style="height: 1px"></div>
  35. 						</div>
  36. 					</div>
[HTML] pobierz, plaintext


tak to wygląda winksmiley.jpg
kapuch
8.07.2010, 20:46:50
Sprawdzilem u siebie i kod dziala, wiec jestem pewny na 1000000%
ze nie dodales odpowiedniego naglowka dla strony np. takiego:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
[HTML] pobierz, plaintext

Dapi
8.07.2010, 20:59:02
Mam:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
[HTML] pobierz, plaintext


Pisząc strony zawsze zwracam uwagę na poprawność kodu, więc nie ma mowy, żebym o tym zapomniał winksmiley.jpg
U mnie jak walidator nie pokazuje "0 błędów/0ostrzeżeń" to spać po nocach nie mogę ;P
kapuch
8.07.2010, 21:05:19
No to nie wiem, u mnie dziala, takze kod jest ok, chyba ze nie wkleiles calosci.
A tak jeszcze cos mi wpadlo do glowy, czy czasami ten pierwszy div ze zwin() nie przykrywa calosci?
no bo on ma z-index wiekszy od tego drugiego, wiec dlatedo nie da sie kliknac rozwin, bo ciagle go zwija?questionmark.gif
nie wiem czy to cos da, ale tak sobie pomyslalem...
Zwin jest na pierwszym planie, a chyba powinien byc pod rozwin?

Pozatym funkcja rozwin by ci wystarczyla, bo ona zwija i rozwija, wiec po co ci to zwin?
Dapi
9.07.2010, 08:47:34
rozwin() rozwija i zwija, używam ją podczas klikania na listę.
zwin() tylko zwija.

Z tego co ja wiem, to div z mniejszym z-index, będzie na spodzie, czyli tak jak być powinno.
Chociaż jak podglądam kod firebugiem, to faktycznie wygląda na to, że div rozwijający jest schowany pod zwijającym...
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.