[css/javascript] Hoe display: none; weer zichtbaar maken? - Softwareontwikkeling

zondag 24 november 2002 13:56

Acties:

0 Henk 'm!

Anoniem: 58567

Topicstarter

Ik ben bezig met een site (dat had je niet gedacht he

) en daarbij heb ik een menu over de content heen (zeg maar uitklapbaar), tenminste dat is de bedoeling. Het lukt me alleen niet om het menu zichtbaar te maken, het begint natuurlijk ingeklapt. De ingekorte CSS (zit PHP in omdat IE moeite heeft met CSS

):

code:

<?php
header('Content-Type: text/css');
?>
#root
{
    width:          600px;
    height:         300px;
    position:       absolute;
}
#menucast
{
    position: absolute;
    right:    15px;
    bottom:   15px;
}
#menu
{
    position: absolute;
    right:    80px;
    bottom:   15px;
}
.menunoview
{
    display: none;
}
.menuview
{
    display: block;
}

Mijn HTML bestand ziet ingekort er zo uit:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.php" media="screen" />
    <script type="text/javascript">
        function viewMenu() {
            document.menu.style = "display: block;";
        }
    </script>
</head>
<body>
    <div id="root" name="root">
        <!-- ...andere dingen hier... -->
        <div id="menu" class="menunoview" name="menu">
            bie
        </div>
        <div id="menucast">
            [img]"image/menucast.gif"[/img]
        </div>
    </div>
</body>
</html>

Als je over menucast (lees: het plaatje in menucast) heen gaat, moet menu zicht baar worden. Andere dingen die ik geprobeerd heb:

code:

<script type="text/javascript">
    function viewMenu() {
        document.root.menu.style = "display: block;";
        document.menu.className = "menuview";
        document.root.menu.className = "menuview";
        document.menu.classname = "menuview";
        document.root.menu.classname = "menuview";
        document.menu.display = "block";
        document.root.menu.display = "block";
    }
</script>

Ik kom er niet meer uit

Weet iemand hoe het wel moet? Hoe kan me niet schelen, als het maar iets met CSS te maken heeft

BTW De Mozilla Javascipt Console geeft dingen aan als: document.menu has no properities of document.root.menu has no properities. IE geeft aan dat document.menu of document.root.menu leeg of geen object is.

zondag 24 november 2002 14:14

Acties:

0 Henk 'm!

Anoniem: 40135

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <style type="text/css">
            #tohide {
                display: none;
            }
        </style>
        <script type="text/javascript">
            function toggle() {
                lyr = document.getElementById('tohide');
                if (lyr.style.display != 'block') {
                    lyr.style.display = 'block';
                } else {
                    lyr.style.display = 'none';
                }
            }
        </script>
    </head>
    <body>
        <div id="tohide">
            dit zou moeten verdwijnen en weer verschijnen
        </div>
        <a href="javascript:toggle();">Toggle</a>
    </body>
</html>

Dit is een klein stukje code dat ik net geschreven heb, het werkt allemaal prima. Op een een of andere manier is de display van een element in mozilla in het begin leeg. Dus ik controleer eerst of de display niet block is. als dat zo is dan zet ik de display op block. Zo niet dan zet ik het op none. Zou je controleren of de display none is dan pakt hij hem de eerste keer niet omdat mozilla de display op '' laat in het begin.

ik gebruik dus ook altijd

HTML:

1
2
3

element.style.display = 'block';
<!-- en niet -->
element.style = "display: block;";

[ Voor 18% gewijzigd door Anoniem: 40135 op 24-11-2002 14:16 . Reden: iets toegevoegd ]

zondag 24 november 2002 15:06

Acties:

0 Henk 'm!

Anoniem: 58567

Topicstarter

Heel erg bedankt het werkt