Lexi Help
Partner
www.forumieren.com

Tab-Ansicht - ChangeOnglet Spalten/Menüs werden falsch angezeigt

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Tab-Ansicht - ChangeOnglet Spalten/Menüs werden falsch angezeigt

Beitrag von Cyborg112233 am Sa 19 Nov 2011 - 19:03

Hallo liebe Forumieren Gemeinde Smile

Ich habe in meinem neuen Forum über Temples, CSS und Javascript etwas eingebaut, was ich aus dem Französischen Support habe, und zwar diese ChangeOnglet Spalten, hier der Link: Klick.
Mit Hilfe eines Freundes der sich etwas besser damit auskennt hatte ich auch erste Fehler gefunden, die mir passiert sind Embarassed
Nur habe ich nun das Problem, dass wenn ich mein Forum betrete, oder die Startseite aktualisiere, in Spalte 1 alle Inhalte der 5 Spalten angezeigt werden, sobald ich beispielsweise Spalte 2 anklicke, kommt nur der Inhalt von Spalte 2, so wie es sein soll und wenn ich dann wieder auf Spalte 1 gehe, ist es dort auch richtig, das heißt, es klappt nur nicht in Spalte 1 wenn ich das Forum aktualisiere.
Vorher noch, nicht wundern über die Inhalte, ich wollte erst dieses Problem gelöst bekommen Wink
Aber nun mal ein paar Screens:

Das ist es, wenn ich aktualisiert habe ...

So ist es wenn ich danach auf Spalte 2 gehe -> Perfekt ...

Und das ist Spalte 1 Richtig wie es sein soll ...

Die Codes die ich eingesetzt habe:
Spoiler:

HTML:
Code:
<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet selected" onclick="changeOnglet(this);">Herzlich Willkommen 1</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Wichtige Links 2</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Chatbox 3</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Partnerforen 4</li>
        <li id="o_5" class="mon_onglet" onclick="changeOnglet(this);">News 5</li>
       
      <div class="clear"><div id="mes_contenus">
        <div id="co_1" class="mon_contenu">Hallo lieber Besucher der <a href="/forum">Movie World</a>,<br>
          <br>
          wir freuen uns, dass Du zu uns gefunden hast, solltest Du interessiert an Filmen, Fernsehen und Schauspielern bist, dann bist Du hier genau richtig!<br>
          <br>
          Du kannst Dich ganz einfach <a href="/register">registrieren</a>, falls Du bereits registriert bist, so <a href="login">logge</a> Dich doch <a href="login">ein</a>!<br>
          <br>
          Vielen Dank, das Team 8)</div>
      <div id="co_2" class="mon_contenu" display="none">Test 2</div>
      <div id="co_3" class="mon_contenu" display="none">Test 3</div>
      <div id="co_4" class="mon_contenu" display="none">Test 4</div>
      <div id="co_5" class="mon_contenu" display="none">Test 5</div>     
      </div></div></ul></div>
CSS:
Code:
/*changeOnglet*/
        .mon_onglet{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #00aeff;
          background: #6edaf5;
          background-image:url(http://t2.gstatic.com/images?q=tbn:ANd9GcTs6i4kVC8k8AOvIiK45rhv89g8WQLp8kU6RjCitXA1URCkugC4);
          border: 1px solid #000;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;
       font-size:90%;
        }
        .mon_onglet:hover{
          background: #39dbf0;
        }       
        .mon_onglet_selected{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #6edaf5;
       background-image:url(http://t2.gstatic.com/images?q=tbn:ANd9GcTs6i4kVC8k8AOvIiK45rhv89g8WQLp8kU6RjCitXA1URCkugC4);
          border-top: 1px solid #000;
          border-right: 1px solid #000;
          border-left: 1px solid #000;
          border-bottom: 1px solid #08b1ff;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;
       font-size:90%;}         
        .clear{
          clear: both;
        }
        .mon_contenu{
          color: #000;
          background: #6edaf5;
          background-image:url(http://t2.gstatic.com/images?q=tbn:ANd9GcTs6i4kVC8k8AOvIiK45rhv89g8WQLp8kU6RjCitXA1URCkugC4);
          border: 1px solid #000;
          padding: 10px;
          line-height: normal;
          font-size: 11px;}
        #mes_contenus, #mes_onglets{
          width: 100%;
          margin: auto;}
Javascript:
Code:
function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'mon_onglet_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'mon_onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }           
}

Ich hoffe mir kann jemand helfen Smile

LG, Cyborg

Cyborg112233
Kaiser
Kaiser

Männlich Beiträge : 2362
Anmeldedatum : 08.10.10

Benutzerprofil anzeigen

Nach oben Nach unten

Re: Tab-Ansicht - ChangeOnglet Spalten/Menüs werden falsch angezeigt

Beitrag von #Frank am So 20 Nov 2011 - 13:21

Ich denke das ich deine Fehler gefunden habe:
<div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet selected" onclick="changeOnglet(this);">Herzlich Willkommen 1</li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Wichtige Links 2</li>
<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Chatbox 3</li>
<li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Partnerforen 4</li>
<li id="o_5" class="mon_onglet" onclick="changeOnglet(this);">News 5</li>

<div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu">Hallo lieber Besucher der <a href="/forum">Movie World</a>,<br>
<br>
wir freuen uns, dass Du zu uns gefunden hast, solltest Du interessiert an Filmen, Fernsehen und Schauspielern bist, dann bist Du hier genau richtig!<br>
<br>
Du kannst Dich ganz einfach <a href="/register">registrieren</a>, falls Du bereits registriert bist, so <a href="login">logge</a> Dich doch <a href="login">ein</a>!<br>
<br>
Vielen Dank, das Team Cool</div>
<div id="co_2" class="mon_contenu" display="none">Test 2</div>
<div id="co_3" class="mon_contenu" display="none">Test 3</div>
<div id="co_4" class="mon_contenu" display="none">Test 4</div>
<div id="co_5" class="mon_contenu" display="none">Test 5</div>
</div></div></ul></div>

Die Einträge:
class="mon_contenu" display="none"
sind hier falsch. Richtig muss es heißen:
class="mon_contenu" style="display: none;"
Und dann sind hier noch einige Leerzeilen zu viel.
Du kannst das gerne ausprobieren.
Ich habe hier mal eine Tabelle nach deiner Art mit 11 Fenstern:
Code:
    <div id="mes_onglets">
        <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Reiter 1</li>
                <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Reiter 2</li>
                <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Reiter 3</li>
                <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Reiter 4</li>
                <li id="o_5" class="mon_onglet" onclick="changeOnglet(this);">Reiter 5</li>
                <li id="o_6" class="mon_onglet" onclick="changeOnglet(this);">Reiter 6</li>
                <li id="o_7" class="mon_onglet" onclick="changeOnglet(this);">Reiter 7</li>
                <li id="o_8" class="mon_onglet" onclick="changeOnglet(this);">Reiter 8</li>
                <li id="o_9" class="mon_onglet" onclick="changeOnglet(this);">Reiter 9</li>
                <li id="o_10" class="mon_onglet" onclick="changeOnglet(this);">Reiter 10</li>
                <li id="o_11" class="mon_onglet" onclick="changeOnglet(this);">Reiter 11</li>
                <div class="clear"><div id="mes_contenus">
            <div id="co_1" class="mon_contenu">Das ist der Text des ersten Fensters.</div>
            <div id="co_2" class="mon_contenu" style="display: none;">Das ist der Text des zweiten Fensters.</div>
            <div id="co_3" class="mon_contenu" style="display: none;">Das ist der Text des dritten Fensters.</div>
            <div id="co_4" class="mon_contenu" style="display: none;">Das ist der Text des vierten Fensters.</div>
            <div id="co_5" class="mon_contenu" style="display: none;">Das ist der Text des fünften Fensters.</div>
            <div id="co_6" class="mon_contenu" style="display: none;">Das ist der Text des sechsten Fensters.</div>
            <div id="co_7" class="mon_contenu" style="display: none;">Das ist der Text des siebenten Fensters.</div>
            <div id="co_8" class="mon_contenu" style="display: none;">Das ist der Text des achten Fensters.</div>
            <div id="co_9" class="mon_contenu" style="display: none;">Das ist der Text des neunten Fensters.</div>
            <div id="co_10" class="mon_contenu" style="display: none;">Das ist der Text des zehnten Fensters.</div>
            <div id="co_11" class="mon_contenu" style="display: none;">Das ist der Text des elften Fensters.</div>
        </div></div></ul></div>



Keine Unaufgeforderten PN senden! Unsere Regeln Passwort vergessen ? Info's zu den Gründerdaten
Mein IPad schreibt die tollsten Wörter... Nicht wundern... Einfach geniessen...!

Meine Geduld wird geladen:

Fortschritt: 67%
Never change a running system on Friday!

#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34547
Hinweis : Admin außer Dienst
Anmeldedatum : 13.08.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Re: Tab-Ansicht - ChangeOnglet Spalten/Menüs werden falsch angezeigt

Beitrag von Cyborg112233 am So 20 Nov 2011 - 14:47

Hallo,

also ich habe das jetzt mal so gemacht wie du gesagt hast, die style:display:none Befehle hinzugefügt und Leerzeilen entfernt ( es war eigentlich nur eine die mir aufgefallen war ... )
Naja, leider klappt es immer noch nicht, es sieht so aus wie vorher, der Code im Template ist jetzt:
Code:
<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet selected"
      onclick="changeOnglet(this);">Herzlich Willkommen 1</li>
        <li id="o_2" class="mon_onglet"
      onclick="changeOnglet(this);">Wichtige Links 2</li>
        <li id="o_3" class="mon_onglet"
      onclick="changeOnglet(this);">Chatbox 3</li>
        <li id="o_4" class="mon_onglet"
      onclick="changeOnglet(this);">Partnerforen 4</li>
        <li id="o_5" class="mon_onglet"
      onclick="changeOnglet(this);">News 5</li>
        <div class="clear"><div id="mes_contenus">
        <div id="co_1" class="mon_contenu">Hallo lieber Besucher der <a href="/forum">Movie World</a>,<br>
          <br>
          wir freuen uns, dass Du zu uns gefunden hast, solltest Du interessiert an Filmen, Fernsehen und Schauspielern bist, dann bist Du hier genau richtig!<br>
          <br>
          Du kannst Dich ganz einfach <a href="/register">registrieren</a>, falls Du bereits registriert bist, so <a href="login">logge</a> Dich doch <a href="login">ein</a>!<br>
          <br>
          Vielen Dank, das Team 8)</div>
      <div id="co_2" class="mon_contenu" display="display: none;">Test
        2</div>
      <div id="co_3" class="mon_contenu" display="display: none;">Test
        3</div>
      <div id="co_4" class="mon_contenu" display="display: none;">Test
        4</div>
      <div id="co_5" class="mon_contenu" display="display: none;">Test
        5</div>     
      </div></div></ul></div>
Also ich weiß es nicht, falls ich da was falsch gemacht habe ...
Jedenfalls klappt es immer noch nicht ... Sad

Vielleicht fällt dir ja noch was ein ...

LG, Cyborg

Cyborg112233
Kaiser
Kaiser

Männlich Beiträge : 2362
Anmeldedatum : 08.10.10

Benutzerprofil anzeigen

Nach oben Nach unten

Re: Tab-Ansicht - ChangeOnglet Spalten/Menüs werden falsch angezeigt

Beitrag von #Frank am So 20 Nov 2011 - 14:53

Du hast es wieder Falsch eingegeben:
bei dir:
<div id="co_2" class="mon_contenu" display="display: none;">Test 2</div>
Richtig wäre aber:
<div id="co_2" class="mon_contenu" style="display: none;">Das ist der Text des zweiten Fensters.</div>
Nimm doch einfach mal meinen 11 teiligen Code von oben.
Der Funktioniert, wie du hier sehen kannst:
http://frank3.forumieren.eu/forum



Keine Unaufgeforderten PN senden! Unsere Regeln Passwort vergessen ? Info's zu den Gründerdaten
Mein IPad schreibt die tollsten Wörter... Nicht wundern... Einfach geniessen...!

Meine Geduld wird geladen:

Fortschritt: 67%
Never change a running system on Friday!

#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34547
Hinweis : Admin außer Dienst
Anmeldedatum : 13.08.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Re: Tab-Ansicht - ChangeOnglet Spalten/Menüs werden falsch angezeigt

Beitrag von Cyborg112233 am So 20 Nov 2011 - 14:56

Ach du heilige Maria Rolling Eyes
Das ist ja mal wieder ein Fehler der meiner würdig ist Embarassed
Sorry, hab's geändert und es funktioniert wunderbar Smile

Vielen lieben Dank, da werde ich mich mal öfters dran setzen, damit diese kleinen Fehler aufhören Neutral

Danke Frank Freunde

LG, Cyborg

Cyborg112233
Kaiser
Kaiser

Männlich Beiträge : 2362
Anmeldedatum : 08.10.10

Benutzerprofil anzeigen

Nach oben Nach unten

Re: Tab-Ansicht - ChangeOnglet Spalten/Menüs werden falsch angezeigt

Beitrag von #Frank am So 20 Nov 2011 - 14:58

Du musst hier sehr genau aufpassen, was du da machst. Nur ein Fehler darin und alles ist Essig...
Da das alles durch ein Script gesteuert wird, musst du sehr genau aufpassen was du hier machst. Nur ein vergessenes " Zeichen kann alles durcheinander schmeißen.




Keine Unaufgeforderten PN senden! Unsere Regeln Passwort vergessen ? Info's zu den Gründerdaten
Mein IPad schreibt die tollsten Wörter... Nicht wundern... Einfach geniessen...!

Meine Geduld wird geladen:

Fortschritt: 67%
Never change a running system on Friday!

#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34547
Hinweis : Admin außer Dienst
Anmeldedatum : 13.08.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Re: Tab-Ansicht - ChangeOnglet Spalten/Menüs werden falsch angezeigt

Beitrag von #Frank am So 20 Nov 2011 - 15:02

Noch ein Tipp:
Du solltest dir die "Nachricht auf der Startseite" als eine TXT Datei Speichern und dort deine Änderungen vornehmen.
Dort sieht man mehr als wenn du das in dem kleinen Fenster im Adminbereich selber machst.
So kannst du immer wieder hier was ändern und brauchst dich nicht durch dieses Fenster zu klicken.



Keine Unaufgeforderten PN senden! Unsere Regeln Passwort vergessen ? Info's zu den Gründerdaten
Mein IPad schreibt die tollsten Wörter... Nicht wundern... Einfach geniessen...!

Meine Geduld wird geladen:

Fortschritt: 67%
Never change a running system on Friday!

#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34547
Hinweis : Admin außer Dienst
Anmeldedatum : 13.08.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten