Forum PHP.pl > Sprawdzanie czy div ma display: visible;

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Sprawdzanie czy div ma display: visible;

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

eko_moto

24.01.2006, 20:26:17

mam taki kod w JS:

Kod

oraz HTML:

[HTML] pobierz, plaintext 
<a href="#" onClick="sh('galeria');">Pokaz/Ukryj Galeria</a>
<a href="#" onClick="sh('home');">Pokaz/Ukryj Home</a>
<div style="display: none;" id="galeria">tutaj tresc gallery</div>
<div style="display: none;" id="home">tutaj tresc home</div>
[HTML] pobierz, plaintext

i chodzi mi o to, że jak klikniemy w np. "Pokaz/Ukryj Galeria" a
<div id="home"> bedzie mial display:visible; to zamknie
<div id="home"> a wyswietli <div id="galeria">
To ma być taki sprawdzacz czy dwa div-y nie bedą otwarte.

Pytanie: Czy da się to napisać w JS? Jeśli się da to proszę o poradę, jak.

LBO

24.01.2006, 21:11:29

musisz stworzyc predefiniowana tablice z idkami ktore ma obslugiwac menu...

Kod

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="Javascript">
function sh(id) {
    /*
  predefiniowana tablica z
  elementami obslugiwanymi
  przez menu
    */
    modules = new Array('galeria', 'home');
    for (i = 0; i < modules.length; i++) {
     if (i != id) {
            //alert(modules[i] + ' != ' + modules[id]);
            document.getElementById(modules[i]).style.display = 'none';
        } else {
            //alert(modules[i] + ' == ' + modules[id]);
            document.getElementById(modules[i]).style.display = 'block';
        }
    }
}
</script>
</head>

<body>
<a href="#" onClick="sh(0);">Pokaz/Ukryj Galeria</a><br />
<a href="#" onClick="sh(1);">Pokaz/Ukryj Home</a>
<div style="display: none;" id="galeria">tutaj tresc gallery</div>
<div style="display: none;" id="home">tutaj tresc home</div>
</body>
</html>

dziala pod IE 5, IE 6, Firefoxem, Netscape 7/8, Opera 7/8, Mozila 1.7/1.8

eko_moto

24.01.2006, 21:40:05

wielkie dzięki, chodzi śpiewająco!

LBO

24.01.2006, 21:46:45

do atrybucie HREF wpisz:

Kod

javascript:void(0);

wtedy w przegladarka nie traktuje tego jako czysty link, bo inaczej robi sie zapis w historii browsera, i uaktywnia sie przycisk BACK

TAMLYN

10.01.2007, 18:10:31

Znalazłem ten kod przypadkiem, ale jest czymś czego od dawna szukałem

Tylko mam jedno pytanko... Co zrobić, aby wszystkie div'y się "zamknęły"?

---------------------

Ok, znalazłem rozwiązanie

Wystarczy stworzyć "pustego" div'a

Ale natrafiłem także na błąd

Jeżeli wewnątrz jednego div'a wstawię drugiego, nawet o innym id niż jest w skrypcie, to wszystko się sypie i wyświetla mi wszystkie div'y prócz tego "pustego" (chyba, bo jego nie widzę

)

Jest na to jakaś rada?

---------------------

Ok, błąd był po mojej stronie

Przepraszam za zaśmiecanie tematu

Zajec

10.01.2007, 23:33:58

Przy okazji planuję zapomnieć o wszystkim innym niż document.getElementById. To rozwiązanie jest obsługiwane przez:
IE5 wzywć, Operę 7 wzwyż i Firefoksa 1 wzwyż. Więc nie ma obaw, że jakaś popularna przeglądarka sobie nie poradzi.

TAMLYN

11.01.2007, 09:05:30

Czyli powinno zostać coś takiego?

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function sh(id) {
   /*
 predefiniowana tablica z
 elementami obslugiwanymi
 przez menu
*/
   modules = new Array('galeria', 'home');
   for (i = 0; i < modules.length; i++) {
    if (i != id) {
           document.getElementById(modules[i]).style.display = 'none';
       } else {
           document.getElementById(modules[i]).style.display = 'block';
       }
}
}
</script>
</head>
 
<body>
<ul>
 <li><a href="java script:void(0);" onClick="sh(0);">Pokaz/Ukryj Galeria</a></li>
 <li><a href="java script:void(0);" onClick="sh(1);">Pokaz/Ukryj Home</a></li>
</ul>
<div style="display: none;" id="galeria"><p>tutaj tresc gallery</p></div>
<div style="display: none;" id="home"><p>tutaj tresc home</p></div>
</body>
</html>
[HTML] pobierz, plaintext

Nie znam się dobrze na Javie i JS

"

------------------
W kodzie uwzględniłęm poprawki @zajec'a i @LBO

Zajec

11.01.2007, 10:24:00

Niby dobrze, poza pewnymi innymi błędami... Bezpośrednio w body nie można wstawiać tekstu. Należy w jakiś blok go wrzucić. Listę ondośników (jak sądzę, to chcesz zrobić) należy zrobić za pomocą listy, czyli <ul> i <li>.

No i osoby bez JavaScript nie będą mogli przechodzić pomiędzy działami. Po co takie udziwnienie, nie można po prostu dwóch podstron zrobić?

TAMLYN

11.01.2007, 12:10:39

Mój skrypt wygląda zupełnie inaczej

Trochę go przerobiłem... I nie chcę robić z tego menu, a zastąpić tym iframkę

Ne razie tylko się domyślam, że to zadziała

Co do osób z Java

Ta strona jest dla osób mających Flash'a i Jave

Później zrobię drugą wersję - alternatywną

Uważam to za dobre rozwiązanie

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.