Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript]Pomoc w skrypcie js - ukrywanie warstw
the_php
post
Post #1





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 21.03.2008

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

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>
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 6)
piecioshka
post
Post #2





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 13.05.2007

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

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?
Go to the top of the page
+Quote Post
Pawel_W
post
Post #3





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

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

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ę
Go to the top of the page
+Quote Post
Maxik
post
Post #4





Grupa: Zarejestrowani
Postów: 726
Pomógł: 129
Dołączył: 10.01.2008
Skąd: Gdańsk

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

Kod
function $(id){
    return document.getElementById(id);
}


function show_hide(id){
       $(id).style.display=$(id).style.display=='none' ? '' : 'none';
}
Go to the top of the page
+Quote Post
the_php
post
Post #5





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 21.03.2008

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

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.
Go to the top of the page
+Quote Post
erix
post
Post #6





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




 
[HTML] pobierz, plaintext 
  1. <a href="javascript:void(0); showDiv('box');">Pokaz</a>
[HTML] pobierz, plaintext

Co to za protokół, java script:? (IMG:http://forum.php.pl/style_emoticons/default/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');
}
Go to the top of the page
+Quote Post
the_php
post
Post #7





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 21.03.2008

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

To może zacznę od nowa, napiszę wam do czego mi to potrzebne... (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/sadsmiley02.gif)
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: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

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

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