Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 06. August 2015 10:34

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

[GELÖST] Inhalt von Tab funktioniert nicht

Hallo!

Ich habe eine Website erstellt - http://bit.ly/1T3pSDG
Im mittleren Bereich habe ich eine Gallery innerhalb eines Tabs des Foundation-Frameworks eingefügt.

Klickt mal im ersten Tab auf ein Bild - die Photoswipe-Gallery lädt und funktioniert einwandfrei.
Wechselt man den Tab funktioniert es nicht mehr!

Was läuft hier falsch - hat da jemand von euch eine Idee?

Vielen Dank!

Beitrag geändert von brandy (11. August 2015 14:07)

Offline

#2 06. August 2015 11:25

Janl
Server-Pate
Ort: Freistadt, Österreich
Registriert: 13. Dezember 2010
Beiträge: 1.227
Webseite

Re: [GELÖST] Inhalt von Tab funktioniert nicht

Was ich so auf dem ersten Blick sehe ist dass jquery 2 x geladen wird, 1 x am Anfang 1 x am Ende.

Meistens wenn so etwas passiert hat es mit fehlende/doppele Scripts zu tun.

MfG
Jan


Ubuntu 16.04 KDE - Kubuntu 18.04 / win10 (1 duo-boot laptop)- LAMP
Raspi 4b mit Ubuntu 20.04 (64bit) und Mate.

Offline

#3 06. August 2015 11:45

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.435

Re: [GELÖST] Inhalt von Tab funktioniert nicht

Uii. Photoswipe gibts aber schon in Version 4.1.0.
Du verwendest noch 1.0.11.

Ansonsten, das hat nichts mit den Tabs zu tun.
Lies mal hier.
Sieht so aus, als würde die Photoswipe-Funktion nur auf Links innerhalb des ersten Elements mit der Klasse "Gallery" angewendet werden. Das liegt an diesem Aufruf:

<script type="text/javascript">
        
        // Set up PhotoSwipe with all anchor tags in the Gallery container
        document.addEventListener('DOMContentLoaded', function(){
            
            Code.photoSwipe('a', '.Gallery');
            
        }, false);
        
</script>

Das hast Du vermutlich aus den Beispielen.
Da gab es auch nur einen einzigen Container mit der ID "Gallery".
Daher kann man da ganz einfach als Schalter bzw. als Container die Selectoren "a" bzw. "#Gallery" an photoSwipe übergeben.

Wird aber als Container ein Selector an photoSwipe übergeben, nimmt es nur den ersten Container, den es anhand dieses Selectors finden kann.
Siehe Quelltext von photoSwipe:

...

	if (Util.isString(containerEl)){
		containerEl = document.documentElement.querySelector(containerEl);
	}

...

Die Funktion querySelector() holt nur das erste Element.

Wenn Du mehrere Container hast, müsstest Du Deinen Code evtl. so abändern:

<script type="text/javascript">
        
        // Set up PhotoSwipe with all anchor tags in the Gallery container
        document.addEventListener('DOMContentLoaded', function(){
            
            Code.photoSwipe( window.document.querySelectorAll('.Gallery a') );
            
        }, false);
        
</script>

D.h. Du übergibst keinen Selector an photoSwipe anhand dessen photoSwipe die Elemente erst noch heraussuchen muss, sondern Du suchst Die Elemente selber zusammen und übergibst sie an photoSwipe.


Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#4 06. August 2015 11:47

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.435

Re: [GELÖST] Inhalt von Tab funktioniert nicht

Janl schrieb:

Was ich so auf dem ersten Blick sehe ist dass jquery 2 x geladen wird, 1 x am Anfang 1 x am Ende.

Meistens wenn so etwas passiert hat es mit fehlende/doppele Scripts zu tun.

MfG
Jan

ist aber die von jQuery unabhängige photoSwipe Version.
Daher dürfte das in diesem Falle nicht die Ursache sein.
(Aber beheben sollte man es trotzdem)


Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#5 06. August 2015 12:11

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: [GELÖST] Inhalt von Tab funktioniert nicht

Hört sich gut an und funktioniert auch...

Ja, ich hab dieses Photoswipe noch in einer alten Version drinnengehabt.
Ich hab mir eh schon mal die aktuelle Dokumentation durchgesehen - ist ja ziemlich umfangreich geworden die aktuelle Version.

Vielen Dank!

Beitrag geändert von brandy (06. August 2015 12:16)

Offline

#6 10. August 2015 07:20

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: [GELÖST] Inhalt von Tab funktioniert nicht

Ich hab mir jetzt mal die aktuelle Photoswipe-Gallery heruntergeladen.
So einfach wie die alte Version, die ich installiert hatte, geht diese nicht mehr zu installieren, oder?

Offline

#7 10. August 2015 08:43

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.435

Re: [GELÖST] Inhalt von Tab funktioniert nicht

Also bei Github kannst Du dir eine ZIP-Datei herunterladen:
https://github.com/dimsemenov/PhotoSwip … master.zip
Da drin gibt es ein Verzeichnis namens "dist" ( = distribution)
Und dort sollte eigentlich alles drin sein, was Du brauchst.


Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#8 11. August 2015 12:20

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: [GELÖST] Inhalt von Tab funktioniert nicht

Anscheinend hab ichs mit den Tabs:
Ich hab jetzt einen Orbit-Slider in einen Tab eingebaut. Dieser wird nicht angzeigt. Das interessante: hin- und wieder schon.
Klickt man nämlich, während die Seite lädt, auf den entsprechenden Button, wird alles angezeigt. Lädt die Seite fertig und betätigt den Button wird nichts angezeigt - das komische daran ist, dass der komplette Code für den Orbit im Quelltext steht.

Ich schätze mal es liegt an der Ladereihenfolge - habt ihr vielleicht einen Tipp - hier der Link:
http://bit.ly/1T3pSDG
Es geht um die Kategorie "Kosmetik"!

Vielen Dank!

Offline

#9 11. August 2015 12:46

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.435

Re: [GELÖST] Inhalt von Tab funktioniert nicht

Ich schätze mal es liegt an der Ladereihenfolge

einige Javascripts im Head benötigen jQuery.
jQuery wird aber erst am Ende kurz vor </body> geladen.

Abgesehen davon ist die Seite nicht valide.
Behebe erstmal die HTML-Fehler.
Relativ weit oben gleich nach dem facebook-Javascript:

 <div class="row">
      <div class="small-12 columns logo">
      <img src="/uploads/images/sabrina-oswald-logo.png"></div> <--- Das </div> ist zu viel
      </div>
    </div> 

Vielleicht tut's das ja schon.


Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#10 11. August 2015 13:15

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: [GELÖST] Inhalt von Tab funktioniert nicht

Peinlich...
Hab jetzt mal den Fehler behoben und das jQuery an den Anfang gestellt...

Wieso kann er es laden wenn man gleich den Kosmetik-Button klickt?

Offline

#11 11. August 2015 14:34

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.435

Re: [GELÖST] Inhalt von Tab funktioniert nicht

Geladen wird es so oder so.
Nur angezeigt nicht.
Ändere einfach mal die Fenstergröße Deines Browser, Du wirst sehen, es "funktioniert" wink
Es hängt also mit einem "Reflow"-Ereignis zusammen.

Das Problem ist, der Orbit-Slider gibt dem Element mit der Klasse "orbit-slides-container" eine konkrete Höhe. Wenn Orbit aber aktiv wird, bevor der Tab sichtbar ist, der diesen Slider beinhaltet, kann er die Höhe nicht korrekt berechnen. Denn unsichtbare Elemente haben die Höhe 0. Also müssen der Tab und alle nachfolgenden Elemente vom Browser neu gezeichnet werden. Ergo: Reflow.

Ist übrigens ein bekanntes Problem für das es offenbar noch keine eingebaute Lösung zu geben scheint:
http://foundation.zurb.com/forum/posts/ … ithin-tabs

Eine "Lösung" wäre, beim Klick auf einen Tab ein sogenanntes "Reflow" Ereignis auszulösen:

<script>
$('.tabs').on('toggled', function (event, tab) {
    $(document).foundation('orbit', 'reflow');
});
</script>

Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#12 11. August 2015 14:52

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: [GELÖST] Inhalt von Tab funktioniert nicht

Ah cool, hab ich auch schon gesehen, und gedacht, dass es passen würde - nur leider hab ich keine Ahnung gehabt wie ich es verwende.
Ich habs jetzt eingebaut - da gibt mir Firebug diesen Fehler:

ReferenceError: Foundation is not defined
Foundation.libs = Foundation.libs || {};

Offline

#13 11. August 2015 18:20

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.435

Re: [GELÖST] Inhalt von Tab funktioniert nicht

brandy schrieb:

Ich habs jetzt eingebaut - da gibt mir Firebug diesen Fehler:

Firebug sagt Dir aber auch wo dieser Fehler auftritt: foundation.orbit.js

brandy schrieb:

Peinlich...
Hab jetzt mal den Fehler behoben und das jQuery an den Anfang gestellt...

Teile am Anfang, Teile am Ende ...  roll

Pack doch mal alles ans Ende.
Und zwar in der Reihenfolge wie es voneinander abhängig ist:

1. jQuery
2. modernizr
3. foundation
4. foundation.orbit
5. Photoswipe (sollte unabhängig von den anderen sein)

Und zum Schluss die inline-scripts. Weil die erst dann Sinn machen, wenn alle externen Scripte da sind (da sie auf Funktionen der externen Scripte zugreifen).

Und dann probier mal, ob Du die Scripte auch mit "defer" zum Laufen kriegst, weil Dein Pagespeed-Wert ist jenseits von *üörks* wink

Das facebook-Script müsstest Du sogar mit "async" laden können, weil davon keine anderen Scripte abhängen dürften.

Und weil ich gerade beim Thema Pagespeed bin ... ich zähle hier 109 Requests ... liegt daran, dass Du alles auf einmal lädst. Hier wäre AJAX zum Nachladen von Bildern bzw. der Tabs angeraten.


Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#14 11. August 2015 18:53

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: [GELÖST] Inhalt von Tab funktioniert nicht

Wow geht!
Mir war nie klar, was sinnvoller ist, am Anfang oder am Ende.
Ich hab mich jetzt mal zu "defer" und "async" eingelesen - hört sich gut an.

Was würde sich aber für defer anbieten - async ist mir klar.
Die anderen Teile benötigt er ja beim Laden der Seite schon?

Offline

#15 11. August 2015 19:21

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.435

Re: [GELÖST] Inhalt von Tab funktioniert nicht

Was würde sich aber für defer anbieten - async ist mir klar.
Die anderen Teile benötigt er ja beim Laden der Seite schon?

Defer ist im Prinzip wie async mit dem Unterschied, dass die Reihenfolge beim Ausführen der geladenen Scripte eingehalten wird und die Scripte erst ausgeführt werden, wenn das HTML-Dokument fertig geparst ist.
Beste Erklärung hierzu, die ich auf die Schnelle finden konnte:
http://www.growingwiththeweb.com/2014/0 … butes.html

Edit:

Bei genauerer Betrachtung wäre bei facebook "defer" die bessere Wahl.
Sehe gerade, dass das Facebook-JS ja auch nur ein inline-Script ist.
Pack das Script lieber ganz nach unten als allerletztes.
Es spielt für die Funktion der Webseite keine wesentliche Rolle.

Async brauchst Du im Prinzip nur dann, wenn das Script ausgeführt werden soll, sobald es geladen ist (egal wann das ist).
So weit ich das erkennen kann, dürfte das bei keinem der Scripte der Fall sein.
Es reicht, wenn die Scripte erst ausgeführt werden, wenn die Seite soweit ist (also defer).

Zum Thema defer/async hatten wir hier aber mal eine kurze Diskussion:
http://www.cmsmadesimple.de/forum/viewtopic.php?id=2008
Wegen der inline-Scripts kann es sein, dass Du defer garnicht verwenden kannst, weil die inline-Scripte dann höchstwahrscheinlich ausgeführt werden, bevor die externen-Scripte geladen wurden.

Dabei fällt mir noch diese Idee ein:

<script type="text/javascript" src="..." defer="true" onload=" funktion die ausgeführt werden soll wenn script geladen"></script>

Also die inline-Scripte direkt als onload-Event zum jeweiligen externen Script hinzufügen.
Weiß aber nicht wie Browser-Kompatibel das mitlerweile ist.
Ich glaube mich zu erinnern, dass es da Probleme gab, wann genau dieses Event ausgeführt wird.
In einem Browser wurde bei defer zuerst die onload-Funktion ausgeführt und dann erst das geladene Script, im anderen genau umgekehrt. (ich glaube IE tanzte da mal wieder aus der Reihe)


Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#16 29. August 2015 22:41

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: [GELÖST] Inhalt von Tab funktioniert nicht

Ich hab wieder eine Frage zu Foundation:
Wenn ich diese Seite - http://bit.ly/1NENQHg - auf meinem Smartphone ansehe sieht alles gut aus. Er passt mir den Inhalt gut an. Bei dieser Seite - http://bit.ly/1T3pSDG - hier verkleinert er mir alles, obwohl er ja das ganze, wie bei der anderen Seite, anpassen sollte - wo liegt der Unterschied?

Offline

#17 29. August 2015 10:04

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.435

Re: [GELÖST] Inhalt von Tab funktioniert nicht

Vergleich doch einfach mal den HTML Code.
Das hier springt mir da sofort ins Auge:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#18 31. August 2015 12:47

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: [GELÖST] Inhalt von Tab funktioniert nicht

Vielen Dank!

Ich hab noch eine Frage zu Photoswipe - anscheinend funktioniert das Ganze jetzt ja ein wenig anders, als die Version, die ich laufen habe - bin ich da richtig?
Früher hat er nach Gallery->li->a gesucht und das dann mit Photoswipe dargestellt.

Ich hab mir mal die Dokumentation angesehen und der Aufbau ist ja folgender:
Link

Habt ihr eine solche schon irgendwo laufen, damit ich mir das mal ansehen kann?

Offline