Probleme mit Javascript-Reiter

[erazor2106]

Hallo Leute,

habe ein kleines Problem einen "Reiter" welchen ich im Netz gefunden habe bei mir einzubinden:
Useful Javascript Tab Bar Navigation Codes
Undzwar Nummer 1)

Wenn ich normalen Text in so ein Reitercontroll schreibe ist alles bestens. Will aber ein jqplot-Diagramm anzeigen lassen. Entweder zeigt er mir garnichts an oder alle Reiter die ich habe untereinander

Habt ihr eine Idee?

 

[Sentence]

Quelltext? Beispielseite?
Sonst ist es schwer zu sehen, wo der Fehler liegt.
Am besten nen Link auf die Seite.

MfG

 

[erazor2106]

Ok :-)

Hier der Teil wo der Reiter in die Seite eigebunden wird:

   <ul class="tabset_tabs">
      <li><a href="#tab1" class="active">Balkendiagramm</a></li>
      <li><a href="#tab2">Kuchendiagramm</a></li>
   </ul>
   
   
   <div id="tab1" class="tabset_content">
        <h2 class="tabset_label">Balkendiagramm</h2>
        <div id="chart1" style="width:480px; height:260px;"></div>
   </div>
   
   <div id="tab2" class="tabset_content">
        <h2 class="tabset_label">Kuchendiagramm</h2>
        <div id="chart1a" style="width:350px; height:260px"></div>
   </div>

Wobei chart1 und chart1a jqplot-Diagramme sind. Die werden ohne Probleme angezeigt wenn ich sie außerhalb des Reiters platziere. Hier die CSS des Reiters:

.tabset_tabs    { margin:0; padding:0; list-style-type:none; position:relative; z-index:2; white-space:nowrap }
.tabset_tabs li    { margin:0; padding:0; display:inline }
.tabset_tabs a    { color:#339 ! important; background-color:#def ! important; border:1px solid #99c; text-decoration:none; padding:0 0.6em; border-left-width:0; border-bottom:none }
.tabset_tabs a:hover    { color:#00c ! important; background-color:#eff ! important }
.tabset_tabs a.active    { color:black ! important; background-color:white ! important; border-color:black; border-left-width:1px; cursor:default; border-bottom:white; padding-top:1px; padding-bottom:1px }

.tabset_tabs li.firstchild a    { border-left-width:1px }

.tabset_content    { border:1px solid black; background-color:white; position:relative; z-index:1; padding:0.5em 1em; display:none }
.tabset_label    { display:none }

.tabset_content_active    { display:block }

@media aural{
    .tabset_content,
    .tabset_label    { display:block }
}

wenn ich

.tabset_content    { border:1px solid black; background-color:white;  position:relative; z-index:1; padding:0.5em 1em; display:none }

durch folgendes ersetze werden beide Reiter mit den Diagrammen darin untereinander angezeigt.

.tabset_content    { border:1px solid black; background-color:white;  position:relative; z-index:1; padding:0.5em 1em; display:block}

Aber das bringt mir ja nix weil ich dann nicht mehr umschalten kann :-)

 

[Sentence]

Ich dachte du nimmst das erste Beispiel aus deiner verlinkten Seite?
Das wären Tabs mit jQuery UI - Tabs Demos & Documentation
Hast du auch jQuery UI eingebunden? Dann wäre obiges CSS nämlich hinfällig.

jQuery UI Tabs, ohne das CSS der jQuery UI ist sowieso nicht besonders gut.

Schau dir mal das Beispiel zu den Tabs dort an.

 

[erazor2106]

Oh, danke für den Hinweis, das muss nicht Nummer 1) sondern Nummer 14) heißen :-)

 

[Sentence]

OK, dann solttest du auf Beispiel 1 umsteigen ;)
Du nutzt ja eh jQuery, dann nimm auch die UI dazu.

Nummer 14 ist 8! Jahre alt... wahrscheinlich beißen sich funktionen zwischen jQuery, jQPlot und dem Tab Dingens.

MfG