Forum PHP.pl > [JavaScript][CSS] Pokazywanie/ukrywanie dwóch div'ów na raz

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][CSS] Pokazywanie/ukrywanie dwóch div'ów na raz

Ok-a

8.09.2009, 16:13:06

Szukałam rozwiązania już w wielu miejscach, ale jeżeli jest tu gdzieś na forum i je przegapiłam, to byłabym wdzięczna za linka.

Chodzi o to, aby pokazać/ukryć dwa różne bloki tekstu, klikając na jeden odnośnik. Bloki te znajdują się w różnych częściach strony.

W tej chwili mam jakiś skrypt, który świetnie radzi sobie z rozwijaniem jednego bloku. Niestety o skryptach Javy nie wiem prawie nic, więc nie wiem, czy da się tam coś dopisać, żeby to działało też na ten drugi blok (i czy w ogóle coś takiego jest możliwe).

W HEAD to wygląda tak (mam nadzieję, że nie ma błędów - już nawet nie pamiętam skąd to skopiowałam...):

[JAVASCRIPT] pobierz, plaintext 
 <script type="text/javascript">
  function toggleLayer( blok1 )
  {
   var elem, vis;
   if( document.getElementById )
     elem = document.getElementById( blok1 );
   vis = elem.style;
   if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
     vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
   vis.display = (vis.display==''||vis.display=='block')?'none':'block';
  }
 </script>
[JAVASCRIPT] pobierz, plaintext

W BODY:

[HTML] pobierz, plaintext 
<a href="java script:toggleLayer('blok1')">więcej</a>
 
<div id="blok1">Ukryty tekst</div>
[HTML] pobierz, plaintext

Naiwnie próbowałam tak samo nazwać te dwa bloki

ale nadal rozwijało tylko jeden.
Będę wdzięczna za jakąkolwiek pomoc

wookieb

8.09.2009, 16:16:16

...

[JAVASCRIPT] pobierz, plaintext 
function toggleBlocks(b1, b2)
{
toggleLayer(b1);
toggleLayer(b2);
}
[JAVASCRIPT] pobierz, plaintext

A teraz sprawdzimy czy będziesz umiała odpowiednio jej użyć. Podpowiem użyj w href.

kilas88

8.09.2009, 16:34:29

Cytat(wookieb @ 8.09.2009, 17:16:16 )

Podpowiem użyj w href.

To i ja podpowiem: przeglądarki z wyłączoną obsługą JavaScript nie obsłużą takiego rozwiązania. Lepiej już zastosować zewnętrzną obsługę zdarzeń i przypisać obiektom zdarzenia onclick.

wookieb

8.09.2009, 16:38:39

Cytat(kilas88 @ 8.09.2009, 17:34:29 )

Stary jesteś boski. Jak masz wyłączony javascript to onclick też ci nie zadziała.

kosma

9.09.2009, 03:44:57

Jeśli wystarczy tylko odkryć lub schować kilka bloków jednocześnie to wystarczy onclick

[HTML] pobierz, plaintext 
<a href="#" onClick="document.getElementById('blok_1').style.display='block';document.getElementById('blok_2').style.display='block';">Odkryj</a>
<div style="display: none" id="blok_1">Ukryty tekst blok 1</div>
<div style="display: none" id="blok_2">Ukryty tekst blok 2</div>
[HTML] pobierz, plaintext

A z funkcją toggleLayer można odkrywać i zakrywać tak:

[HTML] pobierz, plaintext 
<a href="java script:toggleLayer('blok');toggleLayer('blok2');">kliknij</a>
<div style="display: none" id="blok">ukryty 1</div>
<div style="display: none" id="blok2">ukryty 2</div>
[HTML] pobierz, plaintext

Jeden blok rozwijało Ci dlatego ponieważ w dokumencie tylko jeden element może przybrać określony numer id i jeśli kilka bloków określisz id=blok to tylko jeden z nich przyjmie ten identyfikator, a jak pewnie zauważyłaś funkcja operuje document.getElementById czyli identyfikatorem z danego dokumentu.

edit:
uwaga na javascript w kodzie - ma być razem lecz forum rozdziela na dwa słowa (w plaintext i pobierając też wyświetla z błędem!).
W swoim skrypcie js nic nie zmieniaj...

kilas88

9.09.2009, 09:40:58

Cytat(wookieb @ 8.09.2009, 17:38:39 )

Stary jesteś boski. Jak masz wyłączony javascript to onclick też ci nie zadziała.

Ok, a teraz przeczytaj jeszcze raz, ale uważnie.

Dla jasności, piszę tutaj o usability strony. Oznacza to, że kod wygląda mniej więcej tak:

[HTML] pobierz, plaintext 
<a href="/link1.html" id="menu1">Menu 1</a>
[HTML] pobierz, plaintext

Następnie dołączamy zewnętrzny plik JavaScript, w którym dodajemy zdarzenie onClick (dzięki np. bind w jQuery) dla wybranych linków.

Rozwiązanie to wspaniale hula, zarówno w przeglądarkach z obsługą JavaScript, jak i bez. Poza tym nie zaśmieca kodu zagnieżdżonym JS.

Ok-a

10.09.2009, 10:26:25

kosma - podwójne wpisanie toggleLayer (bez spacji) niestety nie działa. Nadal rozwija tylko pierwszy blok (a wszystko mam zdefiniowane tak jak podałeś).

Cytat(wookieb @ 8.09.2009, 17:16:16 )

...

[JAVASCRIPT] pobierz, plaintext 
function toggleBlocks(b1, b2)
{
toggleLayer(b1);
toggleLayer(b2);
}
[JAVASCRIPT] pobierz, plaintext

A teraz sprawdzimy czy będziesz umiała odpowiednio jej użyć. Podpowiem użyj w href.

Sprawdziliśmy. Nie umiem

Robiłam różne rzeczy z tym, co podałeś, no ale jak się nie zna podstaw działania JS, to się wiele nie nawojuje

Będę wdzięczna za kolejne wskazówki (gotowe rozwiązania?)

kilas88 - niestety tego, co napisałeś też nie umiem zastosować

flashdev

10.09.2009, 10:33:22

Cytat(wookieb @ 8.09.2009, 17:38:39 )

Stary jesteś boski. Jak masz wyłączony javascript to onclick też ci nie zadziała.

Chyba umknął Ci gdzieś sens tego rozwiązania.

Użycie sposobu, jaki przedstawił @kilas88 jest lepsze ponieważ:
- atrybut href można użyć do przekierowania na statyczną stronę z zawartością diva
- w przypadku wyłączonego js nie będzie na stronie nieaktywnych linków
- google lepiej traktuje strony, które nie mają skryptów inline

CyberDuck_

10.09.2009, 14:07:23

Masz tu, a oni niech sie kloca

Kiedys cos takiego potrzebowalem i zmienilem nieco kod dla
swoich potrzeb. Dzieki temu mozna :
1. schowac lub wyswietlic na przemian pojedyncze bloki
2. schowac lub wyswietlac kilka blokow na raz
3. schowac lub wyswietlic kilka blokow na przemian.
Znaczy jesli jeden jest widoczny to drugi schowany, itd ...

[PHP] pobierz, plaintext 
function ShowOrHide(d1, d2, d3, d4, d5, d6, d7, d8, d9, d10, d11, d12, d13, d14, d15, d16, d17, d18, d19, d20, d21, d22, d23, d24 , d25, d26, d27, d28, d29, d30) {
 
		if (d1 != '') DoDiv(d1);
      if (d2 != '') DoDiv(d2);
	   if (d3 != '') DoDiv(d3);
	   if (d4 != '') DoDiv(d4);
	   if (d5 != '') DoDiv(d5);
	   if (d6 != '') DoDiv(d6);
	   if (d7 != '') DoDiv(d7);
	   if (d8 != '') DoDiv(d8);
	   if (d9 != '') DoDiv(d9);
	   if (d10 != '') DoDiv(d10);
	   if (d11 != '') DoDiv(d11);
	   if (d12 != '') DoDiv(d12);
	   if (d13 != '') DoDiv(d13);
	   if (d14 != '') DoDiv(d14);
	   if (d15 != '') DoDiv(d15);
	   if (d16 != '') DoDiv(d16);
	   if (d17 != '') DoDiv(d17);
	   if (d18 != '') DoDiv(d18);
	   if (d19 != '') DoDiv(d19);
	   if (d20 != '') DoDiv(d20);
	   if (d21 != '') DoDiv(d21);
	   if (d22 != '') DoDiv(d22);
	   if (d23 != '') DoDiv(d23);
	   if (d24 != '') DoDiv(d24);
	   if (d25 != '') DoDiv(d25);
		if (d26 != '') DoDiv(d26);
		if (d27 != '') DoDiv(d27);
		if (d28 != '') DoDiv(d28);
		if (d29 != '') DoDiv(d29);
		if (d30 != '') DoDiv(d20);
 
        }
 
        function DoDiv(id) {
          var item = null;
          if (document.getElementById) {
                item = document.getElementById(id);
          } else if (document.all){
                item = document.all[id];
          } else if (document.layers){
                item = document.layers[id];
          }
          if (!item) {
          }
          else if (item.style) {
                if (item.style.display == "none"){ item.style.display = ""; }
                else {item.style.display = "none"; }
          }else{ item.visibility = "show"; }
}
 
function ShowOrHideAll(d1, d2, d3, d4, d5, d6, d7, d8, d9, d10, d11, d12, d13, d14, d15, d16, d17, d18, d19, d20, d21, d22, d23, d24 , d25, d26, d27, d28, d29, d30) {
 
		if (d1 != '') DoDivAll(d1);
      if (d2 != '') DoDivAll(d2);
	   if (d3 != '') DoDivAll(d3);
	   if (d4 != '') DoDivAll(d4);
	   if (d5 != '') DoDivAll(d5);
	   if (d6 != '') DoDivAll(d6);
	   if (d7 != '') DoDivAll(d7);
	   if (d8 != '') DoDivAll(d8);
	   if (d9 != '') DoDivAll(d9);
	   if (d10 != '') DoDivAll(d10);
	   if (d11 != '') DoDivAll(d11);
	   if (d12 != '') DoDivAll(d12);
	   if (d13 != '') DoDivAll(d13);
	   if (d14 != '') DoDivAll(d14);
	   if (d15 != '') DoDivAll(d15);
	   if (d16 != '') DoDivAll(d16);
	   if (d17 != '') DoDivAll(d17);
	   if (d18 != '') DoDivAll(d18);
	   if (d19 != '') DoDivAll(d19);
	   if (d20 != '') DoDivAll(d20);
	   if (d21 != '') DoDivAll(d21);
	   if (d22 != '') DoDivAll(d22);
	   if (d23 != '') DoDivAll(d23);
	   if (d24 != '') DoDivAll(d24);
	   if (d25 != '') DoDivAll(d25);
		if (d26 != '') DoDivAll(d26);
		if (d27 != '') DoDivAll(d27);
		if (d28 != '') DoDivAll(d28);
		if (d29 != '') DoDivAll(d29);
		if (d30 != '') DoDivAll(d30);
 
        }
 
        function DoDivAll(id) {
          var item = null;
          if (document.getElementById) {
                item = document.getElementById(id);
          } else if (document.all){
                item = document.all[id];
          } else if (document.layers){
                item = document.layers[id];
          }
          if (!item) {
          }
          else if (item.style) {
                if (item.style.display == "yess"){ item.style.display = ""; }
                else {item.style.display = "none"; }
          }else{ item.visibility = "show"; }
}
[PHP] pobierz, plaintext

Mozna chowac najwiecej do 30 blokow. Dla wiekszosci stron to w zupelnosci wystarcza.
Teraz jak to wywolac ...
Oczywiscie kod umieszczasz w sekcji head np tak :

[PHP] pobierz, plaintext 
<script language="JavaScript" type="text/javascript" src="tablepokazschowaj.js"></script>
[PHP] pobierz, plaintext

Teraz kawalki kodu :

[PHP] pobierz, plaintext 
<tr id="opis02" style="display:none">
[PHP] pobierz, plaintext

Tak wlasnie oznaczasz sobie dowolna nazwa bloki. W tym wypadku jest to ramka tabeli, ale
moze to byc cala tabela lub div czy cokolwiek innego w czym da sie dopisac id i style.
Na jednej stronie mozesz umiescic jednoczesnie kilka takich blokow i czy maja
one zostac przy starcie strony uwidocznione czy nie decydujesz wpisem :

[PHP] pobierz, plaintext 
style="display:none" lub style="display:yess"
[PHP] pobierz, plaintext

Wywolanie jest banalnie proste :

[PHP] pobierz, plaintext 
<a href="java script:ShowOrHide('opis02')">Lista folderów</a>
[PHP] pobierz, plaintext

Jesli potrzebujesz jednoczesnie wyswietlic lub schowac lub zrobic to naprzemiennie
to podajesz wiecej parametrow :

[PHP] pobierz, plaintext 
<a href="java script:ShowOrHide('opis02','opis03','opisN')">Lista folderów</a>
[PHP] pobierz, plaintext

Powodzonka

flashdev

10.09.2009, 14:51:06

Cytat(CyberDuck_ @ 10.09.2009, 15:07:23 )

[PHP] pobierz, plaintext 
function ShowOrHide(d1, d2, d3, d4, d5, d6, d7, d8, d9, d10, d11, d12, d13, d14, d15, d16, d17, d18, d19, d20, d21, d22, d23, d24 , d25, d26, d27, d28, d29, d30) {
...
}
[PHP] pobierz, plaintext

[JAVASCRIPT] pobierz, plaintext 
function sugestia(){
	var i;
	for( i = 0; i < arguments.length; i++ ){
		alert("argument "+i+":\t"+arguments[i]);
	}
}
sugestia("tego", "się", "tak", "nie", "robi", ";)");
[JAVASCRIPT] pobierz, plaintext

pablo89pl

10.09.2009, 15:17:18

o w d**e ....jaki zawijas...;]
proponuje jQuery i prosta funkcje

CyberDuck_

10.09.2009, 16:03:32

Wiecie co mi po Waszych tego sie tak nie robi jesli
to dziala i to bardzo sprawnie ?
Mozna skrocic sobie jak komus nie pasuje
do mniejszej ilosci.
Tysiac postow przed moim i taki laik jak ja
znalazl rozwiazanie, a poza tym tylko madrowanie
czytalem ... 'proponuje' ... a moze jeszcze 12000 postow
zanim ktos poda konkretne rozwiazanie ?
Wez sie jeden z drugim do roboty, a nie
"o przepraszam jQery nie dziala

" ...

A przyklad na to ze nie jestem goloslowny :
http://www.bluelan.pl/przyklad_gd/tabela.php
Komu nie dziala co ? Moze glowa Wam nie dziala ?

kosma

10.09.2009, 22:43:59

Ok-a oba przykłady które podałem działają, ja cienki jestem w te klocki i dlatego też przed wysłaniem posta sprawdziłem. Działa na 100%
Skopiuj i wklej co ja tu wkleiłem, zmień jedynie java script na javascript i musi działać!
Sprawdź sobie na czystym dokumencie...

I ja na szybko zrobiłem demo aby nie być gołosłownym => d e m o n s t r a c j a

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.