Forum PHP.pl > ukrywanie i pokazywanie warstw

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: ukrywanie i pokazywanie warstw

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

wassago

18.06.2004, 10:55:44

I znow problemy. Cala moja przygoda z JS zaczela sie kilka postow nizej, wiec delikatnie i lopatologicznie prosze

Problem jest nastepujacy: mamy 3 div'y o display'u default'owym, ulozone jeden pod drugim - schematycznie wyglada to tak:

Kod

+--------------------------------+
|                                | <- div #1
+--------------------------------+
|                                | <-|
|                                | <-|- div #2
|                                | <-|
+--------------------------------+
|                                | <- div #3
+--------------------------------+

W duzym uproszczeniu: potrzebuje skryptu, ktory pokazywalby div'a #2 po nacisnieciu div'a #1. Dodatkowo gdy nacisne drugi raz na div'a #1 - div'a #2 powinien sie schowac.

Idac tropem, ktory mi podal Paul w moim poprzednim poscie doszedlem do takiego momentu:

[HTML] pobierz, plaintext 
<div style="background-color: yellow;" onClick="d2.style.height = 'auto';">a</div>
<div id="d2" style="background-color: orange; height: 1px; overflow: hidden;">b</div>
<div style="background-color: red;">c</div>
[HTML] pobierz, plaintext

Kod teoretycznie powinien dzialac pod IE jak i MOZ lecz dziala tylko pod IE, na dodatek nie tak jak bym sobie to wymazyl, potrzebuje aby div #2 byl calkowicie schowany, a w kodzie widac "height: 1px" - gdy ustawie "height: 0px", div #2 wogole nie jest chowany. No i jak juz wczesniej wspomnialem potrzebuje jeszcze akcje schowania div'a #2 po nastepnym kliknieciu.

Jako kompletny JSnewbie, prawdopodobnie zabralem sie do pisania tego od dupy stony, ale zeby nie bylo, ze nie probowalem

Zreszta, przyznaje sie do tego, ze pomysl z ukrywaniem tresci poprzez overflow jest dosc sredni, ale jakos nie mam innego pomyslu jak na razie.

cagrET

18.06.2004, 15:02:40

Kod

<html>
<head>
    <style type="text/css">
    #d1 {
        background: yellow;
    }
    #d2 {
        background: orange;
        display: none;
    }
    #d3 {
        background: red;
    }
    </style>
</head>
<body>

    <div id="d1">a</div>
    <div id="d2">b</div>
    <div id="d3">c</div>

    <script type="text/javascript">
    document.getElementById("d1").onclick = function() {
        el = document.getElementById("d2");
        if (el.style.display == "block") {
            el.style.display = "none";
        } else {
            el.style.display = "block";
        }
    }
    </script>

</body>
</html>

Działa na IE, Mozilli, Operze

Rush

28.09.2007, 19:29:53

A jak przerobic ten kod aby dzialal na ponizszej zasadzie?

Strona zbudowana bylaby z kilku warstw - jedna pod druga:

Warstwa1
Warstwa2
Warstwa3
Warstwa4
Warstwa5
Warstwa6

Domyslnie byloby widac Warstwa1, Warstwa2 oraz Warstwa6.

Dodatkowo na stronie znajdowaloby sie menu napisane w CSS z odnosnikami do Warstwa2-5.
Po kliknieciu w menu na odnosnik do Warstwa2 (jezeli ta warstwa akurat bylaby widoczna) nic by sie nie dzialo. Jednakze w tej samej sytuacji po kliknieciu na odnosnik do Warstwa4, nasza widoczna Warstwa2 ukrylaby sie, a Warstwa4 pokazala. Analogicznie po kliknieciu pozniej w Warstwa3, warstwa ta pokazuje sie a Warstwa4 ukrywa.

Jezeli chodzi o menu to jak mialby wygladac przykladowy odnosnik do pokazywania/ukrywania warstw np do Warstwa3? <a href.. ?

Dzieki za pomoc!

spit

28.09.2007, 22:50:36

W twoim przypadku lepiej będzie skorzystać z jQuery - tam buduje się takie rzeczy łatwo (sam się przekonałem, jest tu gdzieś nawet mój topic, gdzie wszystko ładnie pokazane co do ukrywania i pokazywania warstw).

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.