[javascript] getElementById & style problemen

Pagina: 1
Acties:

  • Alarmnummer
  • Registratie: Juli 2001
  • Laatst online: 09-07-2024
Ik ben op dit moment bezig om een html pagina te laten genereren waar een boom zin zit van labels mbv java en xml. zie http://www.bassist.org voor het idee. Onder ie6 werkt dus goed, maar onder opera (mijn browser dus) werkt dit niet. Als ik style laat afdrukken zegt hij undefined (zelfs nog gecontroleerd met de alart ;) functie en die zegt dan undefined. schijnbaar word de waarde niet gezet). Het heeft schijnbaar te maken met een DOM (document object model) en verschillende versies hiervan tussen browser. Maar ik kan er verder niet wijs uit worden. Weet een van jullie wat ik moet doen om dit aan de praat te krijgen?
code:
1
2
3
4
5
6
7
8
9
10
11
function menuExpand(pageObject)
                {
                    if (document.getElementById(pageObject).style.display == 'none')
                    {
                        document.getElementById(pageObject).style.display = 'block';
                    }
                    else
                    {
                        document.getElementById(pageObject).style.display = 'none';
                    }
                }

Verwijderd

hoe roep je het aan?

met onclick="menuExpand(this);" ?

  • Alarmnummer
  • Registratie: Juli 2001
  • Laatst online: 09-07-2024
ongeveer..
stukje van div code:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="pages" class="subMenu">
        <a href="pages" onClick="menuExpand('pagesContent'); return false;">pages</a>
        <div id="pagesContent" class="subMenuContent">
            <div id="vvv" class="menuItem">
                <a href="label2" onClick="showPage('')">label2</a>
            </div>
            <div id="vvv" class="menuItem">
                <a href="label3" onClick="showPage('')">label3</a>
            </div>
            <div id="vvv" class="menuItem">
                <a href="label3" onClick="showPage('')">label3</a>
            </div>
            <div id="javaPages" class="subMenu">
                <a href="java" onClick="menuExpand('javaPagesContent'); return false;">java</a>
                <div id="javaPagesContent" class="subMenuContent">
                    <div id="vvv" class="menuItem">
                        <a href="label2" onClick="showPage('')">label2</a>
                    </div>
                    <div id="vvv" class="menuItem">
                        <a href="label3" onClick="showPage('')">label3</a>
                    </div>
                    <div id="vvv" class="menuItem">
                        <a href="label3" onClick="showPage('')">label3</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

  • Alarmnummer
  • Registratie: Juli 2001
  • Laatst online: 09-07-2024
stukje van de xml code *D
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE menu SYSTEM "http://90.0.0.10/menu.dtd">

<menu>
    <menuItem text="label1" id="label1" class="menuItem" onClick="showPage('')" />
    <menuItem text="label2" id="vvv" class="menuItem" onClick="showPage('')" />
    <menuItem text="label3" id="vvv" class="menuItem" onClick="showPage('')" />
    <menuItem text="label3" id="vvv" class="menuItem" onClick="showPage('')" />
    <subMenu  text="pages" id="pages" class="subMenu">
        <menuItem text="label2" id="vvv" class="menuItem" onClick="showPage('')" />
        <menuItem text="label3" id="vvv" class="menuItem" onClick="showPage('')" />
        <menuItem text="label3" id="vvv" class="menuItem" onClick="showPage('')" />
        <subMenu  text="java" id="javaPages" class="subMenu">
            <menuItem text="label2" id="vvv" class="menuItem" onClick="showPage('')" />
            <menuItem text="label3" id="vvv" class="menuItem" onClick="showPage('')" />
            <menuItem text="label3" id="vvv" class="menuItem" onClick="showPage('')" />
        </subMenu>
    </subMenu>
</menu>

Verwijderd

code:
1
<a href="pages" onClick="menuExpand('pagesContent'); return false;">pages</a>

dat gaat volgens mij niet altijd goed...

probeer eens het volgende?
code:
1
<a href="javascript: menuExpand('pagesContent');">pages</a>

[edit]
|:( ik zie nu pas dat het om XML zooi gaat...
wacht effe, dan moet ik het nog eens goed bekijken :P

  • Alarmnummer
  • Registratie: Juli 2001
  • Laatst online: 09-07-2024
ik plak het er ff in..

Verwijderd

Ik zie het al :)
Je mag eigenlijk ook niet meerdere id's met dezelfde naam hebben.

Opera zuigt, en goed hard ook trouwens...

  • Alarmnummer
  • Registratie: Juli 2001
  • Laatst online: 09-07-2024
ik heb nu alle divs een aparte label gegeven en dat maakt niet uit. Ik ga nu die andere script aanroep erin zetten

  • Alarmnummer
  • Registratie: Juli 2001
  • Laatst online: 09-07-2024
Op zaterdag 15 december 2001 19:39 schreef Cheatah het volgende:
code:
1
<a href="pages" onClick="menuExpand('pagesContent'); return false;">pages</a>

dat gaat volgens mij niet altijd goed...

probeer eens het volgende?
code:
1
<a href="javascript: menuExpand('pagesContent');">pages</a>

[edit]
|:( ik zie nu pas dat het om XML zooi gaat...
wacht effe, dan moet ik het nog eens goed bekijken :P
ik gebruik het xml bestand alleen om de boom te genereren. wat je zei heeft wel gewoon betrekking op html.

  • Alarmnummer
  • Registratie: Juli 2001
  • Laatst online: 09-07-2024
oke.. hier is het hele document. Het werkt dus nog steeds niet :(
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<HTML>
    <HEAD>
        <TITLE> Dynamic Menu for bassist.org </TITLE>

        <LINK HREF="master.css" REL="stylesheet" TYPE="text/css">
        <LINK HREF="menu.css" REL="stylesheet" TYPE="text/css">
        <STYLE TYPE="text/css">
            <!--
            -->
        </STYLE>

        <SCRIPT TYPE="text/javascript">
            <!--
                var out = "Bassist's Home Page";

                function initializeMenu()
                {
                    var menuElements = document.getElementById('menu').getElementsByTagName('div');
                    for (i = 0; i < menuElements.length; i++)
                    {
                        if (document.getElementsByTagName && document.getElementById)
                        {
                            if ((menuElements[i].getAttribute('class') == 'subMenu') || (menuElements[i].getAttribute('class') == 'subMenuContent'))
                            {
                                //  menuElements[i].style.display = 'none';
                            }
                            else if ((menuElements[i].className == 'subMenu') || (menuElements[i].className == 'subMenuContent'))
                            {
                                //menuElements[i].style.display = 'none';
                            }
                        }
                    }
                }

                function menuExpand(pageObject)
                {
                    if (document.getElementById(pageObject).style.display == 'none')
                    {
                        document.getElementById(pageObject).style.display = 'block';
                    }
                    else
                    {
                        document.getElementById(pageObject).style.display = 'none';
                    }
                }

                function showPage(page)
                {

                }

            // -->
        </SCRIPT>
    </HEAD>

    <BODY onLoad="initializeMenu();">
        <DIV ID="menu" CLASS="menu">
        <div>
    <div id="1" class="menuItem">
        <a href="label1" onClick="showPage('')">label1</a>
    </div>
    <div id="2" class="menuItem">
        <a href="label2" onClick="showPage('')">label2</a>
    </div>
    <div id="3" class="menuItem">
        <a href="label3" onClick="showPage('')">label3</a>
    </div>
    <div id="4" class="menuItem">
        <a href="label3" onClick="showPage('')">label3</a>
    </div>
    <div id="pages" class="subMenu">
        <a href="javascript: menuExpand('pagesContent');">pages</a>
        <div id="pagesContent" class="subMenuContent">
            <div id="5" class="menuItem">
                <a href="label2" onClick="showPage('')">label2</a>
            </div>
            <div id="6" class="menuItem">
                <a href="label3" onClick="showPage('')">label3</a>
            </div>
            <div id="7" class="menuItem">
                <a href="label3" onClick="showPage('')">label3</a>
            </div>
            <div id="javaPages" class="subMenu">
                <a href="javascript: menuExpand('javaPagesContent');">java</a>
                <div id="javaPagesContent" class="subMenuContent">
                    <div id="8" class="menuItem">
                        <a href="label2" onClick="showPage('')">label2</a>
                    </div>
                    <div id="9" class="menuItem">
                        <a href="label3" onClick="showPage('')">label3</a>
                    </div>
                    <div id="10" class="menuItem">
                        <a href="label3" onClick="showPage('')">label3</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
        </DIV>
    </BODY>
</HTML>

en alles met div in lowercase is gegenereerd.. vandaar de belabberde tabs.

Verwijderd

Alarmnummer: heb je dat ook getest in Mozilla of Netscape?

Van Opera is het bekend dat het niet echt goed omgaat met dynmische dingen. Het is jammer, maar waar. Het kan zich wat mij betreft nog lang niet onder de 6e generatie browsers rekenen.

Ik houd dan ook geen rekening meer met Opera als ik dynamische dingen wil...

[edit: typo]

  • Alarmnummer
  • Registratie: Juli 2001
  • Laatst online: 09-07-2024
ie6 en opera 6

  • Alarmnummer
  • Registratie: Juli 2001
  • Laatst online: 09-07-2024
ik heb een link gevonden waarin staat de oa opera5 de 'display' methode/property niet ondersteund. Oke.. hier kan ik mee leven, maar is er niet een soortgelijk commando??

http://www.xs4all.nl/~ppk/js/display.html

das gek.. hier staat dat hij wel ondersteund wordt.
http://www.xs4all.nl/~ppk/css2tests/intro.html
Pagina: 1