Lexi Help
Die neuesten Themen
» Entfernen von der Popupleiste
von Bigtuber Gestern um 20:14

» [phpBB2] Schriftfarbe nicht vollständig
von Fayé Gestern um 20:14

» [Wichtige Information] Meine Tätigkeit in diesem Support. Von #Frank
von #Frank Gestern um 13:42

» [Update] Neues Theme der mobilen Version V2
von #Frank Gestern um 13:03

» Mobile Ansicht leider Fehlerhaft
von Br0adsw0rd Fr 30 Sep 2016 - 19:31

» [phpBB2] Hintergrund festpinnen
von Fayé Fr 30 Sep 2016 - 16:56

» Mein altes Forum zurückbekommen
von Bigtuber Do 29 Sep 2016 - 22:59

» Impressum
von #Frank Mi 28 Sep 2016 - 23:45

» [phpBB2] Im Beitrag Bild und Text nebeneinander anzeigen
von #Frank Mi 28 Sep 2016 - 23:43

» [phpBB2] Unicode Emojis im Forum
von Mariacher J.E. Mi 28 Sep 2016 - 22:07

» Themen-Icons
von Bigtuber Mi 28 Sep 2016 - 20:46

» [phpBB2] Schriftfarbe in der Expressantwort
von Bigtuber Mi 28 Sep 2016 - 20:09

» Themen fixieren
von inde Mi 28 Sep 2016 - 20:05

» Begriff : "merken"
von Ray Di 27 Sep 2016 - 12:14

» [PunBB] Umzug eines funktionierenden Forums von PunBB auf phpBB?
von inde Di 27 Sep 2016 - 11:07

» Servamp Forum
von Raine Kamiya Mo 26 Sep 2016 - 22:47

Partner
free forum

[phpBB2] JavaScript-Code funktioniert nicht: CSS automatisch ändern

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Offen [phpBB2] JavaScript-Code funktioniert nicht: CSS automatisch ändern

Beitrag von Tierfreund-97 am Fr 1 Apr 2016 - 4:05

Hallöle!

Ich verzweifel seit ein paar (vielen) Stunden dezent an diesem JavaScript-Code, der die CSS-Eigenschaften automatisch anpassen soll, doch egal wie ich es schreibe, es funktioniert nicht auf Forumieren. Auf Jsbin.com funktioniert derzeit folgender Code, doch bei Forumieren geht's nicht. Habe alles mögliche ausprobiert, etliche Versionen der Schreibweise/Variablen geändert, etliche Versionen einer If-Else-Anweisung, etliche Versionen ohne If-Else-Anweisung und ich komm' einfach nicht weiter. Langsam glaube ich, ich habe einen Denkfehler oder so.  confused

Code:
if (document.getElementsByTagName('input').length > 10)
{document.getElementsByTagName('tabs')[0].style.height = '615px';
 document.getElementsByTagName('cont')[0].style.top = '215px';}
if (document.getElementsByTagName('input').length <= 10 )
{document.getElementsByTagName('tabs')[0].style.height = '543px';
 document.getElementsByTagName('cont')[0].style.top = '143px';}
if (document.getElementsByTagName('input').length <= 5)
{document.getElementsByTagName('tabs')[0].style.height = '472px';
 document.getElementsByTagName('cont')[0].style.top = '72px';}

Es geht im Detail um Folgendes: Ich habe eine Galerie mit Tabs gebaut. Dabei kann man Vorschaubilder anklicken und es wird entsprechend das jeweilige Bild angezeigt. Da die Anzahl der Vorschaubilder jedoch variiert je Galerie (ich habe mehrere Galerien und für jede Galerie einzeln ein CSS anzulegen ist mir zu umständlich... dachte ich anfangs; hätte ich gewusst was für Arbeit der JS-Code macht, dann... Rolling Eyes ) und leider ist das Tab-Konstrukt in dieser Art und Weise nicht flexibel, das heißt, ich muss fixe Größen benutzen, damit es überhaupt funktioniert. So, und diese fixen Größen hätte ich gerne automatisch angepasst, sobald die Anzahl der Vorschaubilder größer als x ist (und somit in zwei Zeilen rutscht und nicht mehr in eine passt usw).

Mein HTML-Konstrukt:

Code:
<tabs>
  
<tab><input type="radio" id="tab-1" name="tab-group-1" checked/><label for="tab-1"><img title="Wölfe" src="http://saved.im/mtc2ndg0dhn5/bewohner1.png"/></label>
<cont><img title="Wölfe" src="http://saved.im/mtc2ndg0dhn5/bewohner1.png"/><bes>Wölfe</bes></cont></tab>

<tab><input type="radio" id="tab-2" name="tab-group-1"/><label for="tab-2"><img title="Leoparden" src="http://saved.im/mtc2ndg2d2zz/bewohner20.png"/></label>
<cont><img title="Leoparden" src="http://saved.im/mtc2ndg2d2zz/bewohner20.png"/><bes>Leoparden</bes></cont></tab>

<tab><input type="radio" id="tab-3" name="tab-group-1"/><label for="tab-3"><img title="Pumas" src="http://saved.im/mtc2ndg1z2hs/bewohner6.png"/></label>
<cont><img title="Pumas" src="http://saved.im/mtc2ndg1z2hs/bewohner6.png"/><bes>Pumas</bes></cont></tab>
    
<tab><input type="radio" id="tab-4" name="tab-group-1"/><label for="tab-4"><img title="Löwen" src="http://saved.im/mtc2ndg3a2tu/bewohner18.png"/></label>
<cont><img title="Löwen" src="http://saved.im/mtc2ndg3a2tu/bewohner18.png"/><bes>Löwen</bes></cont></tab>
  
<tab><input type="radio" id="tab-5" name="tab-group-1"/><label for="tab-5"><img title="Gorillas" src="http://saved.im/mtc2ndkycxi4/bewohner17.png"/></label>
<cont><img title="Gorillas" src="http://saved.im/mtc2ndkycxi4/bewohner17.png"/><bes>Gorillas</bes></cont></tab>
  
<tab><input type="radio" id="tab-6" name="tab-group-1"/><label for="tab-6"><img title="Paviane" src="http://saved.im/mtc2ndkzbw1h/bewohner12.png"/></label>
<cont><img title="Paviane" src="http://saved.im/mtc2ndkzbw1h/bewohner12.png"/><bes>Paviane</bes></cont></tab>
  
<tab><input type="radio" id="tab-7" name="tab-group-1"/><label for="tab-7"><img title="Meerkatzen" src="http://saved.im/mtc2ndk0dhd6/bewohner16.png"/></label>
<cont><img title="Meerkatzen" src="http://saved.im/mtc2ndk0dhd6/bewohner16.png"/><bes>Meerkatzen</bes></cont></tab>  

</tabs>

Kann mir jemand helfen?

(Testseite hier: http://solace.rpg-board.net/h21-lexikon-wald#10 / Die Seite ist in einem iframe auf einer anderen Seite eingebunden, um ständiges Neuladen der ganzen Seite zu verhindern, daher ist diese Codierung der Tabs die angenehmste und unkomplizierteste Lösung.)

Liebe Grüße,
Tierfreund-97

Tierfreund-97
Lehrling
Lehrling

Weiblich Beiträge : 166
Hinweis : FUCK THE SYSTEM
Anmeldedatum : 09.04.11
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Offen Re: [phpBB2] JavaScript-Code funktioniert nicht: CSS automatisch ändern

Beitrag von inde am Mo 4 Apr 2016 - 13:59

Wenn ich Dein Problem richtig verstanden habe, dann geht es Dir lediglich um den Import des CSS um dies nicht ständig in allen Seiten einschreiben zu müssen?

Da würde ich dann von einer Lösung per Script ganz von abgehen und das CSS woanders ablegen (CSS auslagern) und dann wiederum auf die jeweiligen Seiten importieren.
Auch solltest Du Dich doch noch einmal mit dem Grundgerüst einer HTML-Datei auseinandersetzen, das ist nämlich auch der Grund für die falsche Schriftanzeige (charset=utf-8 - wäre richtig) sowie einem fehlenden Titel in der Webseite und einem fehlenden Favicon/Logo.

Solltest Du keinen eigenen Webspace o.ä. haben um Dein CSS-Dateien auszulagern, dann empfehle ich Dir einmal diese Seite, ich selbst nutze sie seit einigen Jahren mit guten Erfahrungen. Auch bekommst Du auf der genannten Seite bereits einen fertigen HTML-Code zum einbinden im Kopf (Head).

Mein Tipp: Versuche zunächst einmal so ca. 2-3 einfache Seiten zu erstellen in denen Du das CSS importierst und dann lediglich ein paar einfache Deklaration vergibst z.B.


body
background:
color: ....etc
___________
h1, content usw.


Danach kannst Du das natürlich alles weiter ausbauen.

Hilft Dir das bei Deiner Problematik ein wenig weiter? Immerhin können wir für Dich ja nun nicht die kompletten Seiten schreiben, da bist Du dann schon selbst gefragt.

LG inde

inde
Moderator
Moderator

Männlich Beiträge : 2225
Hinweis : Flash The Scene™
keine
Anmeldedatum : 20.10.11
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Offen Re: [phpBB2] JavaScript-Code funktioniert nicht: CSS automatisch ändern

Beitrag von Tierfreund-97 am Di 5 Apr 2016 - 17:14

Hallo!

Leider hast du mich komplett falsch verstanden. ^^

All das, was du aufgezählt hast, weiß ich doch, und das ist auch gar nicht das Problem - das funktioniert alles super (die Seite wird so "komisch" angezeigt, weil sie eigentlich in einem iFrame eingebunden ist - ich hab den direkten Link reingestellt, damit man nicht suchen muss).

Es geht um einen JavaScript-Code, der das CSS verändern soll, wenn mehr als x Vorschaubilder gezählt wurden.

Liebe Grüße,
Tierfreund-97

Tierfreund-97
Lehrling
Lehrling

Weiblich Beiträge : 166
Hinweis : FUCK THE SYSTEM
Anmeldedatum : 09.04.11
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Forenbefugnisse:
Sie können in diesem Forum nicht antworten