Avatar billede inteeeL Nybegynder
07. marts 2011 - 20:48 Der er 11 kommentarer og
1 løsning

Problemmer med toggle

Hej eksperter..

Jeg har fundet et toggle script, som er meget relevant til det, jeg ønsker. I min tabel skal man kunne klikke på en række, hvorefter en ny række dukker frem under. Jeg har denne kode indtil videre:

<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Test</title>
<script language="javascript" type="text/javascript">
function expand(sec)
{
    thisSec = eval(\'e\' + sec);
    if (thisSec != null){
          if (thisSec.length){
              if (thisSec[0].style.display != \'none\'){
                    for (var i=0;i<thisSec.length;i++) {thisSec[i].style.display = \'none\'}
              }
              else{
                    for (var i=0;i<thisSec.length;i++) {thisSec[i].style.display = \'inline\'}
              }
          }
          else{
                        if (thisSec.style.display != \'none\')    {thisSec.style.display = \'none\'}
              else{thisSec.style.display = \'inline\'}
          }
    }

}
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="950" border="0">
    <tr OnClick="location.href=\'java script:expand('1')\'">
            <td>toggle      abbbccaaaaa</td>
            <td align="right"> 75</td>
            <td align="right"> 12</td>
            <td align="right"> 325</td>
            <td align="right"> 115</td>
            <td align="right"> 105</td>
    </tr>
    <tr id="e1'" style="display:none">
    <td colspan="99">
                <table border="0">
                <tr><td>column1</td><td>column2</td></tr>
                <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
                <tr><td>1</td><td>abadd</td></tr>
                <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
                <tr><td>5</td><td>cddad</td></tr>
                <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
                <tr><td>30</td><td>asfddf</td></tr>
                <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
                </table>
    </td>
    </tr>
    <tr OnClick="location.href=\'java script:expand('2')\'">
            <td>toggle      abbbccaaaaa</td>
            <td align="right"> 75</td>
            <td align="right"> 12</td>
            <td align="right"> 325</td>
            <td align="right"> 115</td>
            <td align="right"> 105</td>
    </tr>
    <tr id="e2'" style="display:none">
    <td colspan="99">
                <table border="0">
                <tr><td>column1</td><td>column2</td></tr>
                <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
                <tr><td>1</td><td>abadd</td></tr>
                <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
                <tr><td>5</td><td>cddad</td></tr>
                <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
                <tr><td>30</td><td>asfddf</td></tr>
                <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
                </table>
    </td>
    </tr>
</table>
</body>
</html>

(Indholdet i tabellen er ikke relevant, det er blot en test).

Det virker i samtlige browsere - og så alligevel ikke. Den gider ikke "show/hide" i Firefox. Og jeg har fundet ud af, hvor "problemet" er;
Hvis jeg fjerner :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

virker det også i firefox, men doctypen kan jeg jo ikke bare fjerne.

Nogen forslag?
Avatar billede michaelfranz Nybegynder
07. marts 2011 - 20:53 #1
Et dirty-hack ville være at lave et browser-tjek og give den en anden doctype for brugere med firefox.
Avatar billede keysersoze Ekspert
07. marts 2011 - 21:01 #2
Det er korrekt at du ikke bare kan fjerne din doctype - til gengæld skal du placere den korrekt, den skal være det absolut første i dit dokument, ikke under html-tagget som i ovenstående.

Der er flere halvmystiske ting i dit script så - udover at placere doctype korrekt - prøv med følgende;

<tr onclick="expand(1)">

function expand(sec)
{
  thisSec = document.getElementById('e' + sec);
  if (thisSec){
    if (thisSec.style.display != 'none'){
      thisSec.style.display = 'none'
    }
    else{
      thisSec.style.display = 'inline'
    }
  }
  }
}
Avatar billede inteeeL Nybegynder
07. marts 2011 - 21:52 #3
michaelfranz
- Jeg vil vente lidt med dirty-hack, håber der kunne være en anden løsning. Men tak for forslaget.

keysersoze
Hov, det var en fejl, at doctypen kom efter html-tagget, bestemt ikke meningen. Jeg har prøvet med din kode, dog uden hjælp. Kan simpelthen ikke se, hvad der går galt.

Andre forslag?
Avatar billede keysersoze Ekspert
07. marts 2011 - 22:10 #4
fortæl hvilken fejl der sker eller giv et link - ellers bliver det umuligt at gætte.
Avatar billede inteeeL Nybegynder
07. marts 2011 - 22:41 #5
Link: http://www.praxicweb.dk/toggle.htm

Fejlen er, at der ikke sker noget. Det er jo meningen, at når man klikker på rækken, skal rækken med det pågældende e-id vise sig under - ingenting sker i Firefox
Avatar billede keysersoze Ekspert
07. marts 2011 - 23:20 #6
du kører stadig med din egen kode - jeg ville gerne se hvor mit eksempel fejlede.
Avatar billede olebole Juniormester
08. marts 2011 - 00:07 #7
<ole>

Der sker da i allerhøjeste grad noget i Firefox  =)

Jeg får en fejl:

Fejl: e1 is not defined
Kildefil: http://www.praxicweb.dk/toggle.htm
Linje: 8


- og det er jo ikke så mærkeligt. Brug nu keysersozes kode - så slipper du for den fejl, og scriptet vil formodentligt virke

/mvh
</bole>
Avatar billede olsensweb.dk Ekspert
08. marts 2011 - 10:47 #8
#8 >Brug nu keysersozes kode - så slipper du for den fejl, og scriptet vil formodentligt virke
det virker, hvis man lige fjerner den overskydende } til slut
function expand(sec)
{
  thisSec = document.getElementById('e' + sec);
  if (thisSec){
    if (thisSec.style.display != 'none'){
      thisSec.style.display = 'none'
    }
    else{
      thisSec.style.display = 'inline'
    }
  }
}
Avatar billede inteeeL Nybegynder
08. marts 2011 - 14:26 #9
Sådan, fik det til at virke nu. Det må have været scriptet, der ikke lige var, som det skulle være.

Smid endelig et svar keysersoze.

Tak for hjælpen..
Avatar billede keysersoze Ekspert
08. marts 2011 - 22:21 #10
svar :)
Avatar billede olebole Juniormester
09. marts 2011 - 00:02 #11
- men hvis der er flere af de der overskuds Tuborg, jeg hørte rygter om tidligere, må du gerne kaste en videre til mig, Soze  *D
Avatar billede keysersoze Ekspert
10. marts 2011 - 18:35 #12
Du skal være yderst velkommen til at kigge forbi til en overskuds-tuborg - eller carls eller royal for den sags skyld (:
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester