Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Pomoc w skrypcie js - ukrywanie warstw
Forum PHP.pl > Forum > Przedszkole
the_php
16.06.2009, 11:20:07
Mam taki skrypt i nie wiem jak zrobić, aby można było wprowadzić kilka warstw do ukrywania na stronce. Jestem początkujący i proszę o pomoc, z góry dzięki.

Kod


<style type='text/css'>
DIV.blok {
text-align: center;
font-size: 12px;
font-weight: 900;
background: #fafafa;
border: red solid 1px;
}
</style>

<script LANGUAGE="JavaScript">
<!--

var widoczna = 1;

function coZrobic (warstwa) {
if (widoczna == 1) ukryj (warstwa);
else pokaz (warstwa);
}

function ukryj (warstwa) {
document.getElementById([warstwa]).style.display = "none";
document.all["kontrolka"].innerHTML = "<a href=javascript:coZrobic('doUkrycia');>Pokaż</a>";
widoczna = 0;
}

function pokaz (warstwa) {
document.getElementById([warstwa]).style.display = "block";
document.all["kontrolka"].innerHTML = "<a href=javascript:coZrobic('doUkrycia');>Ukryj</a>";
widoczna = 1;
}

//-->
</script>

</head>
<body>


<div class="blok">
<span id="kontrolka"><a href=javascript:coZrobic("doUkrycia");>Ukryj</a></span>
<span id="doUkrycia">
To jest do ukrycia</span>
</div>
piecioshka
16.06.2009, 13:25:26
Cześć,
Osobiście to bym proponował coś takiego.
Im mniej zbędnych rzeczy tym lepiej.
Ogranicz liczbę zmiennych do minimum.

Poniżej prościutki przykładzik.

[HTML] pobierz, plaintext 
  1. <html>
  2. 	<head>
  3.  
  4. 		<script type="text/javascript">
  5. 		function showDiv (warstwa) {
  6. 			document.getElementById(warstwa).style.display = "block";
  7. 		}
  8. 		function hideDiv (warstwa) {
  9. 			document.getElementById(warstwa).style.display = "none";
  10. 		}
  11. 		</script>
  12. 	</head>
  13.  
  14. 	<body>
  15.  
  16. 		<a href="javascript:void(0); showDiv('box');">Pokaz</a>
  17. 		<a href="javascript:void(0); hideDiv('box');">Chowaj</a>
  18.  
  19. 		<div id="box">
  20. 			TRaalalalal
  21. 		</div>
  22.  
  23. 	</body>
  24. </html>
[HTML] pobierz, plaintext


Czy dobrze zrozumiałem Twój problem?
Pawel_W
16.06.2009, 13:29:19
na podstawie twojego skryptu warstwy ukrywa się tak:

[HTML] pobierz, plaintext 
  1. <span id="kontrolka"><a href=javascript:coZrobic("nazwa_warstwy_do_ukrycia");>Ukryj</a></span>
  2. <span id="nazwa_warstwy_do_ukrycia">
  3. To jest do ukrycia</span>
[HTML] pobierz, plaintext


gdzie nazwa_warstwy_do_ukrycia można podmienić na dowolną nazwę
Maxik
16.06.2009, 13:34:06
Kod
function $(id){
    return document.getElementById(id);
}


function show_hide(id){
       $(id).style.display=$(id).style.display=='none' ? '' : 'none';
}
the_php
16.06.2009, 14:13:57
Cytat(piecioshka @ 16.06.2009, 14:25:26 ) *
Cześć,
Osobiście to bym proponował coś takiego.
Im mniej zbędnych rzeczy tym lepiej.
Ogranicz liczbę zmiennych do minimum.

Poniżej prościutki przykładzik.

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3.  
  4. <script type="text/javascript">
  5. function showDiv (warstwa) {
  6. document.getElementById(warstwa).style.display = "block";
  7. }
  8. function hideDiv (warstwa) {
  9. document.getElementById(warstwa).style.display = "none";
  10. }
  11. </script>
  12. </head>
  13.  
  14. <body>
  15.  
  16. <a href="javascript:void(0); showDiv('box');">Pokaz</a>
  17. <a href="javascript:void(0); hideDiv('box');">Chowaj</a>
  18.  
  19. <div id="box">
  20. TRaalalalal
  21. </div>
  22.  
  23. </body>
  24. </html>
[HTML] pobierz, plaintext


Czy dobrze zrozumiałem Twój problem?



Skrypcik ok, ale chodzi mi o to, aby w jednym linku klikać aby pokazać div'a i aby go ukryć, chcę to później zamienić na zmieniający się obrazek.
erix
16.06.2009, 14:19:12 
[HTML] pobierz, plaintext 
  1. <a href="javascript:void(0); showDiv('box');">Pokaz</a>
[HTML] pobierz, plaintext

Co to za protokół, java script:? tongue.gif

[HTML] pobierz, plaintext 
  1. <a id="kotw">Pokaz</a>
[HTML] pobierz, plaintext

Kod
document.getElementById('kotw').onclick = function(e){
  e.preventDefault();
  hideDiv('box1');
  showDiv('box2');
}
the_php
16.06.2009, 15:00:17
To może zacznę od nowa, napiszę wam do czego mi to potrzebne... smile.gif
A więc tak...
1. Chciałbym skrypcik, który odkrywa div'a po kliknięciu na tekst i obrazek.
2. Kiedy kliknę, odkryje mi się zawartość div'a a obrazek zmieni się na inny.
3. Kiedy ponownie kliknę by ukryć zawartość div'a, obrazek również wróci do pierwotnego wyglądu.
4. Chciałbym umieścić kilka takich warstw na jednej stronce.

Myślę, że teraz będziecie mi w stanie pomóc. Czekam, a za poprzednie posty dzięki winksmiley.jpg

Pozmieniałem na coś takiego:

Kod
<script type="text/javascript">
<!--
function pokazUkryj(id)
{

document.getElementById(id).style.display = (document.getElementById(id).style.display == "none") ? "block" : "none";
document.getElementById('obrazek').src = (document.getElementById('obrazek').src == "arrow_down.png") ? "arrow_down.png" : "arrow_up.png";

}
-->
</script>



<a href="javascript:pokazUkryj('menu');">Tekst <img id="obrazek" src="arrow_down.png" border=0></a>
<div id="menu" style="display:none;">322222
</div>


Tylko obrazek nie chce wrócić do pierwotnego wyglądu po ponownym kliknięciu sadsmiley02.gif
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.