echtplanlos: Tab-Layout troubleshooting

SELF-Forum

Tab-Layout troubleshooting

echtplanlos
– Informationen zu den Bewertungsregeln

ich hätte da mal was reichlich eigenartiges: ein script dass im IE funktioniert, aber in keinem ordentlichen browser (firefox, opera) und ich finde den fehler einfach nicht...

danke an jeden, der sich da mal ran macht.

es geht um ein tab-layout, hier der quellcode:
(bislang funzt es im ff bis zum retrieve des alten 'active', aber dann hapert es an der zuweisung des neuen 'active')

<html>
<head>
<title></title>
<style type="text/css">
<!--
.tab {width:80px; line-height:25px; height:25px; padding:2px; border:1px solid gray; border-bottom:none; background:white; float:left;}
.hover, .active, .tabinfo {border:1px solid black; background:#B3E3B5; cursor:pointer;}
.hover, .active {border-bottom:none;}
.active, .tabinfo {cursor:default;}

.tabinfo {padding:3px; position:relative; display:none;}
.show {display:block;}

.nobor {width:78px; height:1px; background:#b3e3b5; position:absolute; top:0px; font-size:1px;}
-->
</style>

</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<script type="text/javascript">
<!--
function ap (id,mode,child) {
var id,mode,child;
var p = document.getElementById(id).className;
  if (mode == '+') {
    if (child == 'active') {
      /* retrieve 'active'/'show' per schleife durch alle id='tab+i' */
      for (i = 1; i <= document.getElementById('tabmenu').childNodes.length; i++) {
        /* tabs oben */
        if (document.getElementById('tab'+i).className == 'tab active') {
          var ta = document.getElementById('tab'+i).className.replace(/ active/g,""); /* tmp-var a (kein replace im cmd mgl) */
          document.getElementById('tab'+i).className = ta; /* wertzuweisung */
        }
        else {};
        /* tabinfo unten */
        if (document.getElementById('ntab'+i).className == 'tabinfo show') {
          var tb = document.getElementById('ntab'+i).className.replace(/ show/g,""); /* tmp-var b (kein replace im cmd mgl) */
          document.getElementById('ntab'+i).className = tb; /* wertzuweisung */
        }
        else {};
      }
    var tc = document.getElementById('n'+id).className;
    document.getElementById('n'+id).className = tc + ' show';  /*<-- hier scheints zu haken */
    }
  document.getElementById(id).className = p +' '+ child; /*<-- hier scheints zu haken */
  }
  if (mode == '-') {
    if (child == 'hover') {
      var pn = document.getElementById(id).className.replace(/ hover/g,"");
      document.getElementById(id).className = pn;
    }
    else {};
  }
  else {};
}
//-->
</script>
<noscript>JS aktivieren</noscript>
<table border="0">
 <tr>
  <td id="frame" width="611"><!--left-->
   <div id="tabmenu">
    <div id="tab1" title="zur Rubrik 1" class="tab active" onclick="ap('tab1','+','active');" onmouseover="ap('tab1','+','hover');" onmouseout="ap('tab1','-','hover');">Tab 1</div>
    <div id="tab2" title="zur Rubrik 2" class="tab" onclick="ap('tab2','+','active');" onmouseover="ap('tab2','+','hover');" onmouseout="ap('tab2','-','hover');">Tab 2</div>
    <div id="tab3" title="zur Rubrik 3" class="tab" onclick="ap('tab3','+','active');" onmouseover="ap('tab3','+','hover');" onmouseout="ap('tab3','-','hover');">Tab 3</div>
    <div id="tab4" title="zur Rubrik 4" class="tab" onclick="ap('tab4','+','active');" onmouseover="ap('tab4','+','hover');" onmouseout="ap('tab4','-','hover');">Tab 4</div>
    <div id="tab5" title="zur Rubrik 5" class="tab" onclick="ap('tab5','+','active');" onmouseover="ap('tab5','+','hover');" onmouseout="ap('tab5','-','hover');">Tab 5</div>
    <div id="tab6" title="zur Rubrik 6" class="tab" onclick="ap('tab6','+','active');" onmouseover="ap('tab6','+','hover');" onmouseout="ap('tab6','-','hover');">Tab 6</div>
    <div id="tab7" title="zur Rubrik 7" class="tab" onclick="ap('tab7','+','active');" onmouseover="ap('tab7','+','hover');" onmouseout="ap('tab7','-','hover');">Tab 7</div>
   </div>
  <br clear="all">
  <div id="ntab1" class="tabinfo show"><span class="nobor" style="left:-3px;">&nbsp;</span>
  <pre>per js auf klassen zugreifen:
   - append, substract 'active' res 'hover' via onmouseover res out
   - append, substract 'show' via onclick zu zugehörigem tabinfo:
     - find obj with class 'active' > id ermitteln
     - substract from obj via id
     - append to new active obj</pre>
   </div>
   <div id="ntab2" class="tabinfo"><span class="nobor" style="left:77px;">&nbsp;</span>
   </div>
   <div id="ntab3" class="tabinfo"><span class="nobor" style="left:157px;">&nbsp;</span>
   </div>
   <div id="ntab4" class="tabinfo"><span class="nobor" style="left:237px;">&nbsp;</span>
   </div>
   <div id="ntab5" class="tabinfo"><span class="nobor" style="left:317px;">&nbsp;</span>
   </div>
   <div id="ntab6" class="tabinfo"><span class="nobor" style="left:397px;">&nbsp;</span>
   </div>
   <div id="ntab7" class="tabinfo"><span class="nobor" style="left:477px;">&nbsp;</span>
   </div>
  </td>
  <td width="211"><!--right-->
  </td>
 </tr>
</table>
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Tab-Layout troubleshooting

    ChrisB
    – Informationen zu den Bewertungsregeln

    Hi,

    if (document.getElementById('tab'+i).className == 'tab active') {

    var ta = document.getElementById('tab'+i).className.replace(/ active/g,""); /* tmp-var a (kein replace im cmd mgl) */

      
Wenn du auf genau einen, fixen Wert abfragst, wieso nutzt du dann eine Mustersuche, um von diesem dir total und bis ins kleinste bekannten Wert etwas zu entfernen - anstatt gleich den "Rest" als festen Wert zuzuweisen?  
  

>     ~~~javascript

document.getElementById('n'+id).className = tc + ' show';  /*<-- hier scheints zu haken */  

>     }  
>   document.getElementById(id).className = p +' '+ child; /*<-- hier scheints zu haken */

    </hilfe/charta.htm#tipps-fuer-fragende> /*<-- hier hakt's auf jeden fall */

    MfG ChrisB

    --
    “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. GELÖST: Tab-Layout troubleshooting

    echtplanlos
    – Informationen zu den Bewertungsregeln

    Des Rätsels Lösung: Der FF zählt mehr Kindknoten als der IE.

    ich hatte eine Schleife benutzt, um die Kindelemente (DIVs) einer übergordneten DIV zu durchsuchen und ggf. den Klassennamen zu ersetzen mit der Stopbedingung i <= childNodes.length

    <div id="tabmenu">
     <div id="tab1" class="tab active">Tab1</div>
     <div id="tab2" class="tab">Tab2</div>
     <div id="tab3" class="tab">Tab3</div>
     <div id="tab4" class="tab">Tab4</div>
     <div id="tab5" class="tab">Tab5</div>
     <div id="tab6" class="tab">Tab6</div>
     <div id="tab7" class="tab">Tab7</div>
    </div>

    Für den IE hat div#tabmenu 7 childNodes und er hat die Schleife 7 mal durchlaufen und dann die weitere Ausführung des Codes ermöglicht.

    Für den FF hat div#tabmenu 15 childNodes (jeweils die <div id="tab.."> und das anschließende Leerzeichen / den Absatz im Code UND das Leerzeichen / den Absatz nach '<div id="tabmenu">' als Textknoten) - Ergo: Fehler beim letzten Schleifendurchlauf und Funktionsstop weil childNodes[15] kein Objekt oder null ist... tralala

    Also mit solchen Fiesematenten hat ich's auch noch nich zu tun, wenigstens Leerzeichen und Absätze als Einrückungen und Codestrukturier-Hilfen sollten doch vom Browser als solche verstanden und beim childNode-Zählen ignoriert werden.

    Grüße

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. GELÖST: Tab-Layout troubleshooting

      ChrisB
      – Informationen zu den Bewertungsregeln

      Hi,

      Also mit solchen Fiesematenten hat ich's auch noch nich zu tun, wenigstens Leerzeichen und Absätze als Einrückungen und Codestrukturier-Hilfen sollten doch vom Browser als solche verstanden und beim childNode-Zählen ignoriert werden.

      Nein, sollten sie nicht. Auch Whitespace zwischen Elementen stellt im DOM Textknoten dar.

      Dass der IE dies falsch macht, ist seit Urzeiten bekannt.
      http://de.selfhtml.org/javascript/objekte/node.htm#child_nodes

      MfG ChrisB

      --
      “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. GELÖST: Tab-Layout troubleshooting

        Don P
        – Informationen zu den Bewertungsregeln

        Hallo,

        Dass der IE dies falsch macht, ist seit Urzeiten bekannt.
        http://de.selfhtml.org/javascript/objekte/node.htm#child_nodes

        Wie hast du nur so lange überleben können? Hast sicher den Mose noch persönlich gekannt, stimmt's?

        Gruß, Don P

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. GELÖST: Tab-Layout troubleshooting

      Don P
      – Informationen zu den Bewertungsregeln

      Hallo,

      Also mit solchen Fiesematenten hat ich's auch noch nich zu tun, wenigstens Leerzeichen und Absätze als Einrückungen und Codestrukturier-Hilfen sollten doch vom Browser als solche verstanden und beim childNode-Zählen ignoriert werden.

      Ist leider bei den childNodes nicht (immer) so.
      Es gibt aber eine in SELFHTML undokumentierte HTMLCollection namens children, die das leistet, was du dir vorstellst. Nimm' diese statt der childNodes, und alles wird gut.

      Gruß, Don P

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln