Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Problem z otwieraniem się elementu po kliknięciu
Forum PHP.pl > Forum > Przedszkole
Mody23
30.12.2011, 11:19:13
Witam!

Mam gotowy kod JS, który powoduje, że po kliknięciu w odnośnik, otworzy się menu. Jednak problem mam taki, że po kliknięciu, nic się nie dzieje. Próbowałem umieszczać kod JS w sekcji head, jak i odtwarzać go z oddzielnego pliku, ale nijak mi nie chce działać.

Kod js:

Kod
<!--
<script type="text/javascript">
var show = 1;
function hide_menu(group_panel) {
document.getElementById("group_panel").style.visibility = "hidden";
show = 1;
}

function menu(group_panel) {

if (show == 1) {
document.getElementById("group_panel").style.visibility = "visible";
show = 0;
}
else {
document.getElementById("group_panel").style.visibility = "hidden";
show = 1;
}
}
//
-->
</script>


A później tak się odwołuję do tego kodu:

[HTML] pobierz, plaintext 
  1. <span onclick="menu(1)" align="left" style="cursor: pointer; color: red; font-weight: bold; text-decoration: underline;">Menu Moderatora</span>
  2. 		<span id="group_panel" style="position:absolute; left:?px; top:?px; z-index:1; visibility:hidden">
  3. 			<table style="border: 1px solid black" cellspacing="0" cellpadding="1" class="forumline">
  4. 				<tr>
  5. 					<td align="center" class="row2" height="25" colspan="2"><b><a href="java script:hide_menu(1)"><span style="color: red; font-weight: bold; text-decoration: underline;">[ MENU - UKRYJ ]</span></a></b></td>
  6. 				</tr>
  7. 				<tr>
  8. 					<td align="center" class="row1" width="36" height="36">{S_TOPIC_MOD_DELETE_IMG}</td>
  9. 					<td class="row1" width="220"><b>{S_TOPIC_MOD_DELETE}</b></td>
  10. 				</tr>
  11. 			</table></span>
[HTML] pobierz, plaintext


Gdzie jest problem?

Pozdr.
Prph
30.12.2011, 11:27:08
Używaj narzędzi do debugowania, np. Firebug dla Firefoksa i Chrome. Jak go włączysz i przełączysz się na zakładkę konsola, to zobaczysz błędy javascript, o ile takie są.

A tak na oko, to coś z position jest nie tak: position:absolute; left:?px; top:?px; z-index:1; visibility:hidden. Skąd te ?px.
Druga sprawa: zamiast visibility używaj display: none i block.
Mody23
30.12.2011, 11:29:33
Tyle, że ja wziąłem ten kod ze strony (gotowiec). Podmieniłem tylko nazwy "group_panel". Wcześniej były inne nazwy. Co ciekawe, tam działa to bez zarzutu.
nospor
30.12.2011, 11:33:51
To pokaż oryginał, bo po kodzie co pokazałeś to na 90% jestem pewien, że te twoje "tylko" jest zrobione źle.
Mody23
30.12.2011, 11:37:10
JS:

Kod
var show = 1;
function hide_menu(moderator_panel) {
document.getElementById("moderator_panel").style.visibility = "hidden";
show = 1;
}

function menu(moderator_panel) {

if (show == 1) {
document.getElementById("moderator_panel").style.visibility = "visible";
show = 0;
}
else {
document.getElementById("moderator_panel").style.visibility = "hidden";
show = 1;
}

}
//-->
</script>


HTML:

[HTML] pobierz, plaintext 
  1. <!-- BEGIN modpanel_link -->
  2. <tr>
  3. 	<td align="left" valign="top" nowrap="nowrap"><span onclick="menu(1)" align="left" style="cursor: pointer; color: red; font-weight: bold; text-decoration: underline;">Menu Moderatora</span>
  4. 		<span id="group_panel" style="position:absolute; left:?px; top:?px; z-index:1; visibility:hidden">
  5. 			<table style="border: 1px solid black" cellspacing="0" cellpadding="1" class="forumline">
  6. 				<tr>
  7. 					<td align="center" class="row2" height="25" colspan="2"><b><a href="java script:hide_menu(1)"><span style="color: red; font-weight: bold; text-decoration: underline;">[ MENU MODERATORA - UKRYJ ]</span></a></b></td>
  8. 				</tr>
  9. 		<!-- BEGIN delete -->
  10. 				<tr>
  11. 					<td align="center" class="row1" width="36" height="36">{S_TOPIC_MOD_DELETE_IMG}</td>
  12. 					<td class="row1" width="220"><b>{S_TOPIC_MOD_DELETE}</b></td>
  13. 				</tr>
  14. 		<!-- END delete -->
  15. 				<tr>
  16. 					<td align="center" class="row2" width="36" height="36">{S_TOPIC_MOD_MOVE_IMG}</td>
  17. 					<td class="row2"><b>{S_TOPIC_MOD_MOVE}</b></td>
  18. 				</tr>
  19. 				<tr>
  20. 					<td align="center" class="row1" width="36" height="36">{S_TOPIC_MOD_MERGE_IMG}</td>
  21. 					<td class="row1"><b>{S_TOPIC_MOD_MERGE}</b></td>
  22. 				</tr>
  23. 				<tr>
  24. 					<td align="center" class="row2" width="36" height="36">{S_TOPIC_MOD_ULOCK_IMG}</td>
  25. 					<td class="row2"><b>{S_TOPIC_MOD_LOCK}</b></td>
  26. 				</tr>
  27. 				<tr>
  28. 					<td align="center" class="row1" width="36" height="36">{S_TOPIC_MOD_SPLIT_IMG}</td>
  29. 					<td class="row1"><b>{S_TOPIC_MOD_SPLIT}</b></td>
  30. 				</tr>
  31. 		<!-- BEGIN sticky -->
  32. 				<tr>
  33. 					<td align="center" class="row2" width="36" height="36">{S_TOPIC_MOD_NSA_IMG}</td>
  34. 					<td class="row2"><b>{S_TOPIC_MOD_NSA}</b></td>
  35. 				</tr>
  36. 		<!-- END sticky -->
  37. 		<!-- BEGIN announce -->
  38. 				<tr>
  39. 					<td align="center" class="row1" width="36" height="36">{S_TOPIC_MOD_NSA2_IMG}</td>
  40. 					<td class="row1"><b>{S_TOPIC_MOD_NSA2}</b></td>
  41. 				</tr>
  42. 		<!-- END announce -->
  43. 				<tr>
  44. 					<td align="center" class="row2" width="36" height="36">{S_TOPIC_MOD_EXPIRE_IMG}</td>
  45. 					<td class="row2"><b>{S_TOPIC_MOD_EXPIRE}</b></td>
  46. 				</tr>
  47. 			</table></span></td>
  48. </tr>
  49. <!-- END modpanel_link -->
[HTML] pobierz, plaintext
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.