Teammitglieder online
Regeln und nützliche Hinweise
Neueste Themen
» Forum löschen, Probleme mit Gründeraccountvon Skouliki Di 9 Apr 2024 - 14:03
» [AwsomeBB] LogIn Farbe Weiß auf weiß
von Skouliki Sa 30 März 2024 - 21:14
» kann man noch Blogs hier erstellen?
von Joost Mi 27 März 2024 - 18:40
» Einstellen der Profilfelder funktioniert nicht
von Skouliki Di 26 März 2024 - 12:54
» Gründer-E-Mail-Adresse ändern
von Skouliki Mo 25 März 2024 - 13:48
» PN's werden nicht mehr rot eingefärbt
von Skouliki Fr 22 März 2024 - 7:44
» Missbrauchsmeldung "Sexueller Inhalt" war (wieder) Werbung/Spam/Scam
von Skouliki Do 21 März 2024 - 9:03
» [phpBB3] Suchfunktion ohne Funktion
von Skouliki Mi 20 März 2024 - 8:41
» Neuer User kann sich anmelden.
von Skouliki Mi 20 März 2024 - 8:38
» Zugangsdaten vergessen/verloren
von Joost Sa 16 März 2024 - 21:07
» Schwierigkeiten mit BBCode
von Skouliki Fr 15 März 2024 - 11:51
» Entdeckt die neue Option Servimg Premium
von Joost Mi 6 März 2024 - 19:50
» Neues YAMAHA XT660-Forum
von gnadenlos Fr 1 März 2024 - 7:33
» Forum nur noch für Eingeloggte sichtbar?
von Skouliki Di 27 Feb 2024 - 7:53
» [phpBB3] Eine Frage zum Forum selbst.
von Skouliki Di 27 Feb 2024 - 7:52
» Beiträge verschwinden
von Skouliki Do 22 Feb 2024 - 7:47
» [Tutorial - alle Versionen] (De)aktiviert die Anzeige von Signaturen aus Eurem Profil
von Eto Do 15 Feb 2024 - 22:17
» Datenback-Dump?
von Skouliki Mo 12 Feb 2024 - 22:02
Beiträge mit den meisten Reaktionen des Monats
» Beitrag von Skouliki in PN's werden nicht mehr rot eingefärbt ( 1 )
» Beitrag von Halbmondfarn in Einstellen der Profilfelder funktioniert nicht
( 1 )
» Beitrag von Eto in Einstellen der Profilfelder funktioniert nicht
( 1 )
» Beitrag von Halbmondfarn in Einstellen der Profilfelder funktioniert nicht
( 1 )
» Beitrag von maddo in [AwsomeBB] LogIn Farbe Weiß auf weiß
( 1 )
Tab Tabelle
2 verfasser
Das Forum der Foren :: Hilfe und Unterstützung :: Probleme mit Scripten oder Codes :: Probleme mit Scripten oder Codes - Archiv
Seite 1 von 1 • Teilen
Tab Tabelle
Hallo,
ich habe im I-net eine Tolle Tab tabelle gefunden und dazu gab es mehrere Codes die alle eingesetzt werden mussten. (HTML/Javascript/Css)
Ich zeige euch eben die Codes und sage euch dann mein problem C:
HTML Code (schon abgeändert von mir):
Hier der Javascript Code:
Hier der CSS Code:
So und wie es aussieht liegt mein Problem in CSS Code,ich möchte nähmlich gerne das die Tabs nicht aussehen wie 1,2,3 sondern wie die Bilder die ich schon im HTML Code eingesetzt habe.
Auf meiner seite sieht man es gleich bei der startseite: http://magicofwolves.ohmyforum.net/
Info: Ich habe nur den HTML Code umgeändert,die anderen Codes nicht!
Ich hoffe ihr könnt mir helfen
Lg,
Traiceyy
ich habe im I-net eine Tolle Tab tabelle gefunden und dazu gab es mehrere Codes die alle eingesetzt werden mussten. (HTML/Javascript/Css)
Ich zeige euch eben die Codes und sage euch dann mein problem C:
HTML Code (schon abgeändert von mir):
- Code:
<div class="tabber">
<div class="tabbertab">
<h2><img src="http://www.abload.de/img/ybupzxkf7bukq.png"></h2>
<p>INHALT</p>
</div>
<div class="tabbertab">
<h2><img src="http://www.abload.de/img/dppeu2owbguia.png"></h2>
<p>INHALT</p>
</div>
<div class="tabbertab">
<h2><img src="http://www.abload.de/img/btfbaexz9wudl.png"></h2>
<p>INHALT</p>
</div>
</div>
Hier der Javascript Code:
- Code:
function tabberObj(argsObj)
{var arg;this.div=null;this.classMain="tabber";this.classMainLive="tabberlive";this.classTab="tabbertab";this.classTabDefault="tabbertabdefault";this.classNav="tabbernav";this.classTabHide="tabbertabhide";this.classNavActive="tabberactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabberid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg];}
this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null;}}
tabberObj.prototype.init=function(e)
{var
childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false;}
if(e.id){this.id=e.id;}
this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1;}}}
DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title='';}
if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"");}
break;}}}
if(!t.headingText){t.headingText=i+1;}
DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabber=this;DOM_a.tabberIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabberid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId;}
DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li);}
e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabber:this});}
return this;};tabberObj.prototype.navClick=function(event)
{var
rVal,a,self,tabberIndex,onClickArgs;a=this;if(!a.tabber){return false;}
self=a.tabber;tabberIndex=a.tabberIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabber':self,'index':tabberIndex,'event':event};if(!event){onClickArgs.event=window.event;}
rVal=self.onClick(onClickArgs);if(rVal===false){return false;}}
self.tabShow(tabberIndex);return false;};tabberObj.prototype.tabHideAll=function()
{var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i);}};tabberObj.prototype.tabHide=function(tabberIndex)
{var div;if(!this.tabs[tabberIndex]){return false;}
div=this.tabs[tabberIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide;}
this.navClearActive(tabberIndex);return this;};tabberObj.prototype.tabShow=function(tabberIndex)
{var div;if(!this.tabs[tabberIndex]){return false;}
this.tabHideAll();div=this.tabs[tabberIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabberIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabber':this,'index':tabberIndex});}
return this;};tabberObj.prototype.navSetActive=function(tabberIndex)
{this.tabs[tabberIndex].li.className=this.classNavActive;return this;};tabberObj.prototype.navClearActive=function(tabberIndex)
{this.tabs[tabberIndex].li.className='';return this;};function tabberAutomatic(tabberArgs)
{var
tempObj,divs,i;if(!tabberArgs){tabberArgs={};}
tempObj=new tabberObj(tabberArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabberArgs.div=divs[i];divs[i].tabber=new tabberObj(tabberArgs);}}
return this;}
function tabberAutomaticOnLoad(tabberArgs)
{var oldOnLoad;if(!tabberArgs){tabberArgs={};}
oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabberAutomatic(tabberArgs);};}else{window.onload=function(){oldOnLoad();tabberAutomatic(tabberArgs);};}}
if(typeof tabberOptions=='undefined'){tabberAutomaticOnLoad();}else{if(!tabberOptions['manualStartup']){tabberAutomaticOnLoad(tabberOptions);}}
/*CODE (c) BY 2006 Patrick Fitzgerald */
Hier der CSS Code:
- Code:
.tabberlive .tabbertabhide { display:none;}
/*--------------------------------------------------
ul.tabbernav = Die Tab Naviliste
li.tabberactive = Der aktive Tab
--------------------------------------------------*/
ul.tabbernav{
margin:0;
padding: 3px 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;}
ul.tabbernav li{
list-style: none;
margin: 0;
display: inline;}
ul.tabbernav li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;}
ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover{
color: #000;
background: #AAE;
border-color: #227;}
ul.tabbernav li.tabberactive a{
background-color: #fff;
border-bottom: 1px solid #fff;}
ul.tabbernav li.tabberactive a:hover{
color: #000;
background: white;
border-bottom: 1px solid white;}
/*--------------------------------------------------
.tabbertab = Die einzelnen Tabseiten (Box mit Ibhalt)
--------------------------------------------------*/
.tabberlive .tabbertab {
padding:5px;
border:1px solid #aaa;
border-top:0;}
.tabberlive .tabbertab h2 {
display:none;}
.tabberlive .tabbertab h3 {
display:none;}
.tabberlive#tab1 {}
.tabberlive#tab2 {}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;}
/*CODE (c) BY 2006 Patrick Fitzgerald */
So und wie es aussieht liegt mein Problem in CSS Code,ich möchte nähmlich gerne das die Tabs nicht aussehen wie 1,2,3 sondern wie die Bilder die ich schon im HTML Code eingesetzt habe.
Auf meiner seite sieht man es gleich bei der startseite: http://magicofwolves.ohmyforum.net/
Info: Ich habe nur den HTML Code umgeändert,die anderen Codes nicht!
Ich hoffe ihr könnt mir helfen
Lg,
Traiceyy
Zuletzt von Traiceheart am Do 8 Nov 2012 - 14:25 bearbeitet; insgesamt 1-mal bearbeitet
Traiceheart- Meister
- Beiträge : 338
Anmeldedatum : 30.04.12
Re: Tab Tabelle
Hallo,
du müsstest das Script bearbeiten, da dadurch diese Zuweisungen entstehen. Einfacher wäre es für dich aber auf Dauer, wenn du einen simpleren und leichter anpassbaren Code verwendest.
Hier findest du eine sehr gute Tab-Tabelle:
Tab-Ansicht - ChangeOnglet Spalten/Menüs werden falsch angezeigt
Im Spoiler des ersten Beitrags befinden sich der CSS-Eintrag und das Script und in Franks Beitrag gleich darunter befindet sich der richtiggestellte HTML-Code für die Startseitennachricht.
Diese Codekombination wurde hier bereits von mehreren Usern erfolgreich verwendet und kann wesentlich einfacher geändert und angepasst werden.
Liebe Grüße
Günther
du müsstest das Script bearbeiten, da dadurch diese Zuweisungen entstehen. Einfacher wäre es für dich aber auf Dauer, wenn du einen simpleren und leichter anpassbaren Code verwendest.
Hier findest du eine sehr gute Tab-Tabelle:
Tab-Ansicht - ChangeOnglet Spalten/Menüs werden falsch angezeigt
Im Spoiler des ersten Beitrags befinden sich der CSS-Eintrag und das Script und in Franks Beitrag gleich darunter befindet sich der richtiggestellte HTML-Code für die Startseitennachricht.
Diese Codekombination wurde hier bereits von mehreren Usern erfolgreich verwendet und kann wesentlich einfacher geändert und angepasst werden.
Liebe Grüße
Günther
Günther- Admin a.D.
- Beiträge : 15349
Anmeldedatum : 16.07.08
Re: Tab Tabelle
hmmm also i-wie habe ich etwas wahrscheinlich übersehen,denn in meinem forum ist es unter einander geschrieben.
Hier mein Verwendeter Code:
Hier mein Verwendeter Code:
- Code:
<div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);"><img src="http://www.abload.de/img/ybupzxkf7bukq.png"</li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://www.abload.de/img/dppeu2owbguia.png"</li>
<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://www.abload.de/img/btfbaexz9wudl.png"</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></div></ul></div>
Traiceheart- Meister
- Beiträge : 338
Anmeldedatum : 30.04.12
Re: Tab Tabelle
Du hast das Script noch nicht (korrekt) eingesetzt.Günther schrieb:Im Spoiler des ersten Beitrags befinden sich der CSS-Eintrag und das Script...
Dazu gehst du zu
AB -> Module -> HTML und JAVASCRIPT -> Javascript Codes Verwaltung,
klickst dort auf "Ein neues Javascript erstellen", wählst einen beliebigen Titel und die Platzierung "Auf der Startseite". Ins große Eingabefeld fügst du jenen Code ein, den du im verlinkten Thread im 1. Beitrag innerhalb des Spoilers findest (Überschrift "Javascript").
Danach klickst du auf "Bestätigen".
Das CSS hast du genauso wenig eingesetzt. Dieses findest du ebenfalls im Spoiler des 1. Beitrags, unter "CSS".
Nur den HTML-Code solltest du nicht aus dem 1. Beitrag verwenden, sondern jenen aus Franks Beitrag.
Günther- Admin a.D.
- Beiträge : 15349
Anmeldedatum : 16.07.08
Re: Tab Tabelle
Ich doof!-Hab die beiden sachen total übersehen!
Naja,ich hab bei mir soweit alles angeglichen,aber es gibt noch eine sache die mir nicht so gut gefällt.
Wenn ich auf einen Tab klicke,wir der Inhalt immer unter Rollenspiel angezeigt,wie mache cih das es unter jedem richtigen feld ist?
Naja,ich hab bei mir soweit alles angeglichen,aber es gibt noch eine sache die mir nicht so gut gefällt.
Wenn ich auf einen Tab klicke,wir der Inhalt immer unter Rollenspiel angezeigt,wie mache cih das es unter jedem richtigen feld ist?
Traiceheart- Meister
- Beiträge : 338
Anmeldedatum : 30.04.12
Re: Tab Tabelle
Das kann schon mal passieren.
Ich habe ihn für dich richtig angepasst, versuche es mal damit:
Du solltest dich nochmals mit dem Bildelement auseinandersetzen. Sieh mal, was du ständig vergessen hast:
Das kommt daher, dass dein HTML-Code fehlerhaft war.Traiceheart schrieb:Wenn ich auf einen Tab klicke,wir der Inhalt immer unter Rollenspiel angezeigt,wie mache cih das es unter jedem richtigen feld ist?
Ich habe ihn für dich richtig angepasst, versuche es mal damit:
- Code:
<div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);"><img src="http://www.abload.de/img/ybupzxkf7bukq.png"></li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://www.abload.de/img/dppeu2owbguia.png"></li>
<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://www.abload.de/img/btfbaexz9wudl.png"></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></div></ul></div>
Du solltest dich nochmals mit dem Bildelement auseinandersetzen. Sieh mal, was du ständig vergessen hast:
<div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);"><img src="http://www.abload.de/img/ybupzxkf7bukq.png"></li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://www.abload.de/img/dppeu2owbguia.png"></li>
<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://www.abload.de/img/btfbaexz9wudl.png"></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></div></ul></div>
Günther- Admin a.D.
- Beiträge : 15349
Anmeldedatum : 16.07.08
Re: Tab Tabelle
Ja das mit dem Bildelementen ist mir dann auch von alleine aufgefallen xD
haha,des kann passieren wenn ich mal nicht richtig hin gucke
jedenfals:
Danke Günther,jetzt ist alles so wie ich es haben wollte C:
haha,des kann passieren wenn ich mal nicht richtig hin gucke
jedenfals:
Danke Günther,jetzt ist alles so wie ich es haben wollte C:
Traiceheart- Meister
- Beiträge : 338
Anmeldedatum : 30.04.12
Re: Tab Tabelle
Das freut mich, bitte.
Denke bitte noch daran, das -Icon zu setzen.
-done-
Denke bitte noch daran, das -Icon zu setzen.
-done-
Günther- Admin a.D.
- Beiträge : 15349
Anmeldedatum : 16.07.08
Das Forum der Foren :: Hilfe und Unterstützung :: Probleme mit Scripten oder Codes :: Probleme mit Scripten oder Codes - Archiv
Seite 1 von 1
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten