Einbindung von Javascript jQuery in Contao 4 - Anleitung

Hi Leute,

ich versuch mal hier ein kleine Anleitung für Anfänger zu eröffnen, wie sich
eigener Javascript / jQuery Code in Contao 4 einbinden lässt.

Ausgangssituation:

Ich habe im Seitenlayout unter dem Punkt "Eigener Javascript-Code"
folgenden Code eingebunden:

Code:

---

<script>
$('nav.mod_navigation ul li.submenu > a').click(function() {
$(this).parent().siblings().find('ul').slideUp(300);
        $(this).next('ul').stop(true, false, true).slideToggle(300);
        return false;
});
</script>

---

siehe Foto:
Anhang 19954

Das Ganze funktioniert auch.

Nun stellt sich die Frage, belässt man das so,oder gibt es
einen effektiveren Weg den Code einzubinden?
Z.B. mit einer eigenen Datei j_script.html im templates Ordner?

Was wären die Vor- und Nachteile und wie genau muß man dabei vorgehen?

Ich verwende immer den Weg über das Template, da das editieren über den eigenen Editor bei weitem bequemer ist.

Ich binde generell in "eigener headercode" und in "eigenes js" ein Template ein, da ich dann bequem den editor nutzen kann.

Gesendet von meinem SM-N910F mit Tapatalk

dito.

Ich benutze auch j_-Templates, z.B. j_misc.html5.

Schau dir die j_-Templates vom Core an. Du solltest deine Scripts genauso escapen wie das dort gemacht ist. Über dieses Template hast du die Möglichkeit das Script in den HEAD oder ans Ende vom Body zu bekommen.

PHP-Code:

---

$GLOBALS['TL_HEAD'][] = '<script>...</script>';
$GLOBALS['TL_BODY'][] = '<script>...</script>'; 


---

(Wobei TL_BODY ungefähr das gleiche ist, als würdest du das Script direkt dort hin schreiben.)

Über das Template kannst du auch direkt eine eigene Datei files/js/misc.js laden, entweder im Head oder am Ende vom Body oder mit dem Flag "|static" kannst du sie auch mit in die kombinierte Datei packen.

PHP-Code:

---

$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/misc.js|static'; 


---

Zitat:

---

Zitat von Schnippel

ich versuch mal hier ein kleine Anleitung für Anfänger zu eröffnen, wie sich
eigener Javascript / jQuery Code in Contao 4 einbinden lässt.

---

Habe ich gestern nicht dran gedacht. Bei Rocksolid gibt es eine Superanleitung zu diesem Thema. https://rocksolidthemes.com/de/conta...eit-optimieren (Schritt 4). Ist zwar damals für Contao 3 entstanden, gilt aber für Contao 4 m.E. genauso.

Euch erstmal vielen Dank für die hilfreichen Infos.

Frage zu den Templates:

Es gibt j_xxx.html5 und js_xxx.html5..

Wann nehme ich welches Template als Vorlage?

Hier nochmal der Code:

Code:

---

<script>
$('nav.mod_navigation ul li.submenu > a').click(function() {
$(this).parent().siblings().find('ul').slideUp(300);
        $(this).next('ul').stop(true, false, true).slideToggle(300);
        return false;
});
</script>

---

Zitat:

---

Zitat von Schnippel

Es gibt j_xxx.html5 und js_xxx.html5..

Wann nehme ich welches Template als Vorlage?

---

js_ Templates sind für JavaScript ohne Abhängigkeit zu MooTools oder jQuery.
j_ Templates sind für JavaScripts, die jQuery benötigen.
moo_ Templates sind für JavaScripts, die MooTools benötigen.

Zitat:

---

Zitat von Schnippel

...
Hier nochmal der Code:
...

---

Escape deinen Code, so wie Conato das in den j_- und moo_-Templates auch macht.

Folgender Lösungs-Ansatz funktioniert:

Schritt 1:
Ein Template j_xxx.html5 angelegt.
Darin den alten Code gelöscht und folgenden Code eingetragen:

Code:

---

<script>
$('nav.mod_navigation ul li.submenu > a').click(function() {
$(this).parent().siblings().find('ul').slideUp(300);
        $(this).next('ul').stop(true, false, true).slideToggle(300);
        return false;
});
</script>

---

Schritt 2:
Im BA > Seitenlayout ist unter dem Punkt "jQuery-Templates" dieses eben angelegte Template zu sehen.
Da Häckchen rein zum Aktiviert.

Das Ganze funktioniert auch.

Ist das so okay?
Oder macht man das anders?


### Folgender Lösungsweg funktoniert bei mir nicht ###

Bei meinen Recherchen hier im Forum finde ich immer wieder,
daß eine js-Script-Datei angelegt werden muss, auf die dann in dem Template zu verweisen ist.
Dieser Weg funktionierte aber bei mir nicht:

Hier die Script-Datei "mein_script.js" , die im Ordner files/js abgelegt ist:

Code:

---

$('nav.mod_navigation ul li.submenu > a').click(function() {
$(this).parent().siblings().find('ul').slideUp(300);
        $(this).next('ul').stop(true, false, true).slideToggle(300);
        return false;
});

---

Im j_xxx - Template habe ich dann folgendes eingetragen:

Code:

---

<?php
$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/mein_script.js';
?>

---

Der Ordner ist öffentlich freigegeben und im BA > Seiteneinstellung das angelegte jQuery-Template aktiviert.
Aber es funktioniert so nicht.
Woran kann das liegen?

Das wird im <head> eingebunden. Zu diesem Zeitpunkt existieren noch keine DOM Elemente und kannst daher auch nichts damit anfangen. Du brauchst zumindest ein $(document).ready. Außerdem solltest du deinen eigenen JavaScript Code korrekt wrappen.

Warum präsentierst du deinen Code hier nicht sauber eingerückt?

PHP-Code:

---

$('nav.mod_navigation ul li.submenu > a').click(function() {
  $(this).parent().siblings().find('ul').slideUp(300);
  $(this).next('ul').stop(true, false, true).slideToggle(300);
  return false;
});

<?php
$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/mein_script.js';
?>

---

1. Wie ich oben bereits sagte, escapen, wie Contao das auch macht.

Für jQuery

PHP-Code:

---

(function($) {

  // your code

})(jQuery); 


---

2. Soll das Script irgendetwas mit Elementen auf der Seite unternehmen, dann darf das Script erst starten, wenn der DOM existiert. Also so:

PHP-Code:

---

(function($) {
  $(document).ready(function() {

    // your code

  });
})(jQuery); 


---

3. Ist das Script abhängig von einem anderen Script, welches vorher geladen werden muss, dann muss das andere Script vorher geladen werden ;). Z.B. ist dein Code, wenn du die jQuery-Schreibweise benutzt davon abhängig, dass jQuery geladen ist. Oder wenn du Colorbox-Funktionen benutzt, dann muss die JS-Klasse Colorbox vorher geladen werden.

Du siehst also, dass man nur etwas analytisch an die Sache herangehen muss um dann zu sehen "Ah ja, kann ja nicht gehen, weil ...".

Edit: Ah, Spooky hat mitlerweile ähnliches erzählt. Hatte ich noch nicht gesehen.

Vielen Dank für Eure Hilfe,
jetzt funktioniert es :-)


Wenn ich mir den Quellcode anschaue,
dann liegt das Script im Head-Bereich.
Durch die Anweisung

Code:

---

$(document).ready(function() { ..

---

bekommt es sozusagen gesagt, daß es erst ausgeführt werden soll, wenn die Seite (oder Dokument) geladen ist.

Ist es jetzt egal, ob das Script im Head-Bereich steht, oder gibt es Vorteile, wenn man es im Body einbaut (vielleicht bessere Ladezeiten ? ) ?

Ja, wenn du es am Ende des <body> hast, blockiert das Script nicht das Rendering der Seite.

Zitat:

---

Zitat von Schnippel

...
daß es erst ausgeführt werden soll, wenn die Seite (oder Dokument) geladen ist.
...

---

Man spricht da immer vom DOM, nicht von der Seite oder Dokument, weil es auch noch ein anders Event gibt, welches erst feuert, nachdem auch alle Ressourcen, wie Scripte, CSS, Bilder usw. geladen sind. Das wäre das load Event. Das DOMContentLoaded Event (in jQuery ready, in MooTools domready) feuert schon, sobald das DOM bekannt ist.

• https://developer.mozilla.org/de/doc...MContentLoaded
• https://developer.mozilla.org/en-US/...eb/Events/load

@Spooky: Ich habe meine Scripte auch meistens am Ende der Seite, aber den Vorteil, den du beschreibst, verstehe ich nicht so ganz.

1. Im HEAD

HTML-Code:

---

<head>
  <script src="path/to/jquery.js"></script>
  <script>
    (function($) {
      $(document).ready(function() {
        $('div').css('backround', 'tomato');
      });
    })(jQuery);
  </script>
</head>
<body>
  <div>Content</div>
</body>

---

2. Im BODY unten

HTML-Code:

---

<head>
  <script src="path/to/jquery.js"></script>
</head>
<body>
  <div>Content</div>
  <script>
    (function($) {
      $(document).ready(function() {
        $('div').css('backround', 'tomato');
      });
    })(jQuery);
  </script>
</body>

---

Ist es in diesem Beispiel nicht sogar besser, wenn es oben wäre? Bei 2 rendert der Browser das DIV und setzt dann das CSS auf. Bei 1 setzt der Browser das CSS auf sobald das DOM vorhanden ist, und dann rendert der Browser das DIV.

In deinem Beispiel bleibt jQuery im <head>, dadurch hast du also keinerlei Vorteil. Wäre jQuery auch am Ende des <body>, kann die Seite schneller angezeigt werden. Wenn dein JavaScript aber für die Darstellung von above-the-fold Inhalten gebraucht wird, dann sollte es natürlich in den <head>. Wobei das dann auch wieder in deinem Beispiel keine Rolle spielt, da du sowieso auf document.ready wartest ;)

Dann wäre die Colorbox z.B., so wie Contao die aufsetzt (am Ende) dort richtig, weil das ja nur ein Feature ist, welches erst beim Klick auf Bilder zum Einsatz kommt. Das Accordion könnte aber oben besser aufgehoben sein, damit die Accordions möglichst schnell zugeklappt sind? Habe ich das jetzt so in etwa richtig verstanden?

Also spätestens wenn etwas unschön ist, Springen, Flackern usw. Haben wir jetzt mit dem kompletten Hintergrundwissen die Möglichkeit auf die Suche nach einer besseren Einbindungsweise zu gehen ;)

Bremst denn das

HTML-Code:

---

<script src="path/to/jquery.js"></script>

---

im HEAD tatsächlich das Rendering? Wartet der Browser wirklich zuerst, bis dieses Script eingelesen ist? Ich meine immer beobachtet zu haben, dass ich trotzdem die Seite sehe (z.B. wenn per CDN geladen und der Anbieter klemmt). Was, wenn diese Ressource nicht erreichbar ist, dann sehe ich doch auch trotzdem die Seite (sprich es wird gerendert).

Zitat:

---

Zitat von Andreas

Bremst denn das

HTML-Code:

---

<script src="path/to/jquery.js"></script>

---

im HEAD tatsächlich das Rendering? Wartet der Browser wirklich zuerst, bis dieses Script eingelesen ist? Ich meine immer beobachtet zu haben, dass ich trotzdem die Seite sehe (z.B. wenn per CDN geladen und der Anbieter klemmt). Was, wenn diese Ressource nicht erreichbar ist, dann sehe ich doch auch trotzdem die Seite (sprich es wird gerendert).

---

Ja, probiere es selbst aus. Erzeuge dir eine wait.php mit

PHP-Code:

---

<?php sleep(20);

---

und füge

HTML-Code:

---

<script src="wait.php"></script>

---

im <head> ein. Öffne dann die Seite in einem neuen Tab. Es wird mindestens 20 Sekunden dauern, bis dass dir der Browser überhaupt etwas von der Seite anzeigt.

Das gleiche passiert, wenn du

HTML-Code:

---

<script src="…"></script>

---

irgendwo mitten im Content hast. Erreicht der Browser beim rendern diesen <script> Tag, rendert der Browser nicht mehr weiter und es sieht kurz so aus, als würde die Seite dort aufhören. Sobald das Script geladen ist, rendert der Browser weiter.

Siehe dazu auch die aktuelle Diskussion in diesem Ticket: https://github.com/contao/core-bundle/issues/1123

Kann ich nicht bestätigen. Ok, das mit dem sleep() ist klar, weil der Server mit der Auslieferung wartet. Aber mit "foo.js", "wait.php" oder "..." ist die Seite sofort da. FF und Chrome. (Die Dateien existieren nicht).

Habe es in Eigene Head-Tags eingefügt.

Zitat:

---

Zitat von Andreas

Ok, das mit dem sleep() ist klar, weil der Server mit der Auslieferung wartet.

---

Darum geht es ja. Der Browser rendert erst weiter, wenn das JavaScript geladen ist. Mit sleep(20) simulierst du, dass das Laden der externen JavaScript Datei besonders lange dauert - nur um die Thematik zu verdeutlichen.

Fritz hat schon Recht und versucht lediglich den Sachverhalt plausibel zu verdeutlichen. Dieses Verhalten ist und war schon immer in allen Browsern gleich und beschäftigt uns daher leider immer wieder.

In Bezug auf Contao verschärft sich diese Problematik - meiner persönlichen Ansicht nach - durch das saudumme Verhalten von Contao, dass es Entwicklern ermöglicht mit Modulen/ Bundles JS auszuliefern, welches quasi an beliebiger Stelle im Quellcode platziert werden kann.

Ich habe jetzt mal einen Test mit einer 50 MB großen JS-Datei gemacht. Die Seite wird trotzdem sofort angezeigt. FF und Chrome. Datei dürfte nicht aus dem Cache kommen, da ich sie umbenannt habe. Ich nehme mal für kurze Zeit den Passwortschutz raus, damit ihr testen könnt.

https://c3demo.andreasburg.de/de/testseite.html
Die Datei heißt files/bar.js

FireFox blocked auf jeden Fall, bis dass die Datei runtergeladen ist. Chrome genau so.

Zitat:

---

Zitat von Spooky

Mit sleep(20) simulierst du, dass das Laden der externen JavaScript Datei besonders lange dauert - nur um die Thematik zu verdeutlichen.

---

Ich denke, dass dies etwas anders ist. Mit sleep() gibt der Browser erst gar nicht die Anfrage zurück, erst wenn das PHP abgearbeitet ist.

Wie groß eine Datei ist, welche mit

HTML-Code:

---

<script src="files/bar.js"></script>

---

im <head> steht, interessiert die Auslieferung der HTML-Seite erstmal nicht. Der Browser liest ja dann aus dem HTML, dass er diese Ressource laden soll und kümmert sich darum.

Zitat:

---

Zitat von Andreas

Ich denke, dass dies etwas anders ist. Mit sleep() gibt der Browser erst gar nicht die Anfrage zurück, erst wenn das PHP abgearbeitet ist.

---

Nein, das siehst du falsch. Die sleep() Anweisung steht ja nicht im Request der Seite - sondern im Request für die (vermeintliche) JavaScript Datei. Die sleep() Anwiesung in wait.php hat ja überhaupt keine Auswirkung auf das, was in Contao passiert und somit keine Auswirkung auf den Main Request, der dir die Seite zurück gibt.

Zitat:

---

Zitat von Andreas

Wie groß eine Datei ist, welche mit

HTML-Code:

---

<script src="files/bar.js"></script>

---

im <head> steht, interessiert die Auslieferung der HTML-Seite erstmal nicht. Der Browser liest ja dann aus dem HTML, dass er diese Ressource laden soll und kümmert sich darum.

---

Ja - aber der Browser rendert nicht, solange files/bar.js nicht runtergeladen ist.


Übrigens, deine files/bar.js mag zwar 50 MB groß sein, tatsächlich übertragen werden aber nur 168 KiB, da dein Webserver die gzip Komprimierung aktiv hat ;). Darum glaubst du uns auch nicht - weil 168 KiB sind natürlich schnell geladen.

Du solltest es nicht mit dieser Datei testen, sondern so wie von mir beschrieben. Oder teste es mit einer JS Datei, die mehrere 100 Megabyte groß ist und schalte die automatische Komprimierung des Webservers ab.

Ah, ja klar, die wait.php hat ja nichts mit dem HTML zu tun, sondern ist eine weitere Anfrage, ok.

Und verdammt, ich hatte mich schon gewundert, warum Chrome und Opera 169kB anzeigen, der FF aber 50MB. Ah, jetzt sehe ich, der FF zeigt auch Übertragen: 169kB und Größe: 50MB. (Die Größe zeigen Chrome und Opera nicht.) Ganz schön krass dieses gzip, aus 50 mach 0,17. (Ich weiß, liegt am Inhalt, aber trotzdem.)

Da bin ich ja mal gespannt, was sich da in Contao ändern wird.

Wenn ich aber mit jQuery-JS das Layout manipuliere, dann sollte es trotzdem vor dem Rendern geladen werden, sonst sähe man ja die Umstellung vor/nach JS. Richtig?

Zitat:

---

Zitat von Andreas

Wenn ich aber mit jQuery-JS das Layout manipuliere, dann sollte es trotzdem vor dem Rendern geladen werden, sonst sähe man ja die Umstellung vor/nach JS. Richtig?

---

Jein. Bei deinem Beispiel Code ist es egal, da du das JavaScript sowieso erst ausführen lässt, wenn der gesamte DOM geladen ist. Der Browser rendert ja schon bevor der gesamte DOM geladen ist.

Zitat: “Da bin ich ja mal gespannt, was sich da in Contao ändern wird.“

Das bin ich auch. Ich fürchte nur - und hoffe, dass ich mich irre - dass Leo es auch in diesem Punkt leider - einmal mehr - vergeigen wird.

Das hier müsste aber schneller gehen

1. jQuery laden (blockiert 1sec)
2. DOM wird gerendert (ist also sichtbar)
3. Manipulation wenn DOM komplett

als das hier

1. DOM wird gerendert (ist also sichtbar)
2. jQuery laden (blockiert 1sec)
3. Manipulation wenn DOM komplett

Ja, aber hier gilt die "above-the-fold" Problematik zu beachten. Idealerweise brauchst du für den above-the-fold Inhalt keine externen Ressourcen. Wenn du die Website darauf hin optimiert hast, kannst du alle externen Libraries erst am Ende des <body> laden lassen. Somit wird die Seite dem Besucher dann schnellst-möglich dargestellt.

Nur mal als Beispiel die Seite hier achim-zeman.de/fly_high.html. Da habe ich das Menü ganz schön mit JS bearbeitet und dann ist da noch der Slider. Das ist doch alles above-the-fold. D.h. da sollte sowas erst gar nicht gemacht werden? Also keinen Slider above-the-fold?

Zitat:

---

Zitat von mandrake

Das bin ich auch. Ich fürchte nur - und hoffe, dass ich mich irre - dass Leo es auch in diesem Punkt leider - einmal mehr - vergeigen wird.

---

Das oben verlinkte github-issue wurde im letzten öffentlichen Mumble-Call am 05.10. durchgesprochen. Es wäre doch sicher eine gute Idee, wenn Du vielleicht beim nächsten Mumble Call dabei sein kannst und etwas dazu sagst. Ich war bei dieser Thematik eher stiller Zuhörer.
Die Problematik an sich ist mir zwar prinzipiell bekannt, aber wie man das sauber in Contao lösen kann, insbesondere auch in Bezug auf Erweiterungen das sind für mich "Böhmische Dörfer".

Wie verhält sich das ganze eigentlich mit HTTP/2 und HTTP/2 Push. So ganz im Detail ist mir das in dem Fall noch nicht klar. Ich glaube mal verstanden zu haben, dass das Laden von Skripten im Header, dann nicht mehr so kritisch ist.
https://www.webhosting-franken.de/wa...ringt-mir-das/

Hier wird für HTTP/2 Push sogar eine Extension für Contao erwähnt, habe ich aber bisher noch nicht getestet bzw. mich nicht intensiv damit beschäftigt.

Über HTTP1 und HTTP2 hab ich auch schon was gelesen.

Prinzipell ist es doch so, daß Contao alles Dateien wie CSS (mehrere CSS-Dateien Interene und Externe), JS in eine jeweils komprimierte Datei packt und diese dann mit einmal ausliefert, oder?
Das sollte man wohl auch so machen bei HTTP1.

Wenn ich das mit HTTP2 richtig verstanden habe, sollte die Ladezeit kürzer sein, wenn die einzelnen Dateien nicht zu einer großen Ganzen zusammengefasst werden, sondern einzeln stehen bleiben, weil diese parallel geladen werden können, oder?

Kombinierte Datei, nicht komprimierte.

Jein, Contao macht das mit den CSS-Dateien, welche man im Layout anhaken kann

• CSS-Framework
• Interne Stylesheets
• Externe Stylesheets

Bei Erweiterung ist man darauf angewiesen, dass der Entwickler das Flag "|static" benutzt damit sie in den Combiner kommt.

PHP-Code:

---

$GLOBALS['TL_CSS'][] = 'path/to/style.css|static'; 


---

Selber kann man auch noch CSS-Dateien einbinden, welche nicht in den Combiner kommen. Im Layout Eigene Head-Tags oder direkt im fe_-Template.

Die JS-Dateien welche über die j_/moo_-Templates eingebunden werden kommen nicht in den Combiner.

Bei JS-Dateien in Erweiterungen entscheidet auch wiederum der Entwickler - im HEAD, am Ende von BODY, mit |static in den Combiner, oder per Script dynamisch in den HEAD gesetzt.

Zitat:

---

Zitat von Andreas

Nur mal als Beispiel die Seite hier achim-zeman.de/fly_high.html. Da habe ich das Menü ganz schön mit JS bearbeitet und dann ist da noch der Slider. Das ist doch alles above-the-fold. D.h. da sollte sowas erst gar nicht gemacht werden? Also keinen Slider above-the-fold?

---

Wenn du ganz oben einen Slider hast, dann muss man mehr oder weniger damit leben, dass die Seite halt erst mal (beim ersten Besuch) nicht gleich sofort gezeigt wird. Je nach Budget und Anspruch programmiert man sich den above-the-fold Content so effizient wie möglich ;).

Hi Leute,

hab da noch ein paar Fragen:

Frage 1:

die Einbindung meines jQuery funktioniert. Es steht aber im HEAD-Bereich.
Wie bekomme ich es in den BODY?

Hier nochmal die Script-Datei:

Code:

---

(function($) {
  $(document).ready(function() {
    $('nav.mod_navigation ul li.submenu > a').click(function() {
          $(this).parent().siblings().find('ul').slideUp(300);
          $(this).next('ul').stop(true, false, true).slideToggle(300);
            return false;
    });
  });
})(jQuery);

---

... welche in einem eigenem Template liegt:

PHP-Code:

---

<?php
 $GLOBALS['TL_JAVASCRIPT'][] = 'files/js/navi_dropdown_click.js|static';
?>

---

Weiter oben wurde von Andreas beschrieben, daß man mit

PHP-Code:

---

$GLOBALS['TL_BODY'][] = 'string'; 


---

dies in den BODY bekommt.

Für mich als Anfänger stellt sich jetzt die Frage, was ich wo machen muß.

Wenn ich diese Anweisung in mein Tempalte einbinde,

PHP-Code:

---

<?php
$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/navi_dropdown_click.js|static';
$GLOBALS['TL_BODY'][] = 'files/js/navi_dropdown_click.js|static'; 
?>

---

dann passiert bei mir nix. Alles noch im HEAD-Bereich.
Was muß wie getan werden?

Frage 2:

Die zweite Frage, die ich mir stelle ist folgende:
Das Script spricht die Navigation an. Da dies ein wichtiges Element auf der Seite ist,
macht es dann Sinn, diese im BODY zu packen, oder doch lieber im HEAD zu lassen?
Wobei ja mit der Anweisung

Code:

---

$(document).ready(function() {....

---

die Ausführung eh erst passiert, wenn alles geladen wurde. Oder?


Frage 3:

Andreas schreibt:

Zitat:

---

Ich benutze auch j_-Templates, z.B. j_misc.html5.

---

Dieses Template finde ich nicht. Ist dies eine Erweiterung, die ich erst noch installieren muß?

Nein, das ist ein Template das du selbst anlegst. Dort schreibst du entweder direkt deinen JavaScript Code hinein oder

HTML-Code:

---

<script src="files/js/navi_dropdown_click.js"></script>

---

Und dann aktivierst du das Template in deinem Seitenlayout. Damit erübrigt sich auch Frage 1 ;)

Zitat:

---

Zitat von Schnippel

Frage 2:

Die zweite Frage, die ich mir stelle ist folgende:
Das Script spricht die Navigation an. Da dies ein wichtiges Element auf der Seite ist,
macht es dann Sinn, diese im BODY zu packen, oder doch lieber im HEAD zu lassen?
Wobei ja mit der Anweisung

Code:

---

$(document).ready(function() {....

---

die Ausführung eh erst passiert, wenn alles geladen wurde. Oder?

---

Eben, daher ist es prinzipiell egal. Du könntest dein Script als HTML Modul direkt nach dem Navigationsmodul im Seitenlayout einfügen - und dann ohne $(document).ready. Dann wird dein Script sofort ausgeführt, wenn das Navigationsmodul im DOM bereitsteht.

Zitat:

---

Zitat von Schnippel

Weiter oben wurde von Andreas beschrieben, daß man mit

PHP-Code:

---

$GLOBALS['TL_BODY'][] = 'string'; 


---

---

Ich habe das oben nochmal verbessert. Mit String war ein HTML-String gemeint - <script>...
https://community.contao.org/de/show...l=1#post453044

Zitat:

---

Zitat von Schnippel

PHP-Code:

---

<?php
...
$GLOBALS['TL_BODY'][] = 'files/js/navi_dropdown_click.js|static';
?>

---

---

Dies geht nicht. Einen Pfad kannst du nur bei TL_JAVASCRIPT benutzen. Siehe auch oben in dem verbesserten Thread

Zitat:

---

Zitat von Schnippel

die Ausführung eh erst passiert, wenn alles geladen wurde. Oder?

---

Hatte ich glaube ich oben erklärt, dass sich das ready Event nicht auf "alles" bezieht. Nur auf den DOM.

Zitat:

---

Zitat von Spooky

Dann wird dein Script sofort ausgeführt, wenn das Navigationsmodul im DOM bereitsteht.

---

Spooky hat natürlich Recht, aber du brauchst dir deswegen IMHO kein Bein auszureißen. In der Praxis reicht meisten der Aufruf nach DOM ready und wird das meistens ans Ende von <body> oder in einer eigenen JS-Datei, welche entweder im HEAD oder am Ende von <body> geladen wird reingebracht.

Das kann man pauschal nicht sagen. In seinem Fall würde es durchaus Sinn machen das so zu machen. Bedient der User die Navigation schon bevor der DOM fertig aufgebaut ist (was durchaus hin und wieder passieren kann), wird das Klick Event nicht abgefangen und der Link direkt aufgerufen, anstatt das Submenu ausgefahren.

Hi Leute,

wie lässt sich bei einer DropDown per KLICK - Navigation das geöffnete Submenü wieder schließen, wenn man irgendwo auf der Seite klickt, ohne dabei einen Link klicken zu müssen?

Anhang 20223

Das DEMO ist hier zu sehen: http://html-tuts.com/demo/jquery-dro...nu/click-fade/

Was eben fehlt ist die Möglichkeit des Schließens bei klick, auch wenn kein Link angeklickt wird.

Falscher Thread, siehe Thread-Titel.

Sowas fragst du auch am besten den Entwickler des JS-Menüs, welches du da im Einsatz hast. Als Ansatz kann ich dir schon mal sagen, dass du wohl einen Click-Event-Listener auf den gewünschten Bereich aufsetzen musst und wenn dann geklickt wid darauf reagieren musst.

Hi Leute,
ich brauche nochmal Eure Hilfe, um paar Dinge zu verstehen.

Ich habe folgendes gemacht:

Schritt 1: Eine Datei mit dem Namen scrolling.js angelegt, die folgenden Code beinhaltet:

Code:

---

(function($) {
        $(document).ready(function(){
          $(window).scroll(function() {
                if ($(document).scrollTop() > 50) {
                  $("body").addClass("down");
                } else {
                  $("body").removeClass("down");
                }
          });
        });
})(jQuery);

---

Diese dient dazu, daß beim Scrollen der Body die Klasse .down erhält. Über das CSS werden dann bestimmte Dinge umgestaltet, sobald .down im Body steht.



Schritt 2: Template mit dem Namen j_scrolling.html5 angelegt, das folgenden Inhalte hat:

PHP-Code:

---

<?php
$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/scrolling.js';
?>

---

Schritt 3: im BA > Seitenlayout dieses Template bei jQuery aktivert.

Das Ganze funktioniert auch.

Jetzt zu meinen Fragen:

Frage 1:
Was bedeutet im Template genau das hier ROT-Markierte mit dem TL_JAVASCRIPT ?

Code:

---

<?php
$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/scrolling.js';
?>

---

Frage 2:
Im Quelltext ist das Script zu sehen im HEAD-Bereich. Wenn ich das hier im Forum richtig verstanden habe, dann sollte man
nicht ganz so wichtige Scripte wegen der Ladegeschwindigkeit nicht im HEAD-Bereich, sondern im BODY unten unterbringen.

Wie bekomme ich das Ganze nun in den BODY runter? Was muß ich da wo genau eintragen?

Frage 3:
Wozu dient nochmal genau |static ?

Wenn ich im Template dies mit einfüge, so wie hier...

Code:

---

<?php
$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/scrolling.js|static';
?>

---

... dann ist das Script weder im HEAD noch im BODY zu sehen. Was passiert da im Hintergrund?

PHP-Code:

---

$GLOBALS['TL_JAVASCRIPT'] 


---

Das ist ein PHP-Array. Du kannst es testen mit

PHP-Code:

---

print_r($GLOBALS['TL_JAVASCRIPT']); 


---

Mit dem "[]" übergibst du diesem Array eine neue Variable. In deinem Fall den Pfad zu einer JS-Datei als String.

Mit dem Flag "|static" teilst du mit, dass Contao diese Datei über den Combiner mit in die eine große JS-Datei packen soll, welche im FE aus dem assets/-Ordner geladen wird.

Die Templates j_, moo_ und js_ werden über das fe_-Template am Ende des BODYs ausgegeben. Du kannst dort also z.B. direkt den Aufruf einer Datei in HTML reinschreiben.

j_scrolling.html5:

HTML-Code:

---

<script src="files/js/scrolling.js"></script>

---

Befindet man sich in einem Template, welches nicht bereits am Ende des BODYs ausgegeben wird, dann kann man diesen HTML-Code auch über TL_BODY dort hin bekommen:

PHP-Code:

---

$GLOBALS['TL_BODY'][] = '<script src="files/js/scrolling.js"></script>'; 


---

Zitat:

---

Mit dem Flag "|static" teilst du mit, dass Contao diese Datei über den Combiner mit in die eine große JS-Datei packen soll, welche im FE aus dem assets/-Ordner geladen wird.

---

Und diese JS-Datei steht dann am Ende von BODY? Ich seh da in der Quelltext-Ansicht aber nix...

Anhang 20322

Nein, das was du in TL_BODY einfügst steht am Ende des body.

Hallo,

ich stehe gerade etwas auf dem Schlauch.
Wie binde ich denn folgendes Script im Body ein?

Code:

---

<script>
        var mymap = L.map("mapid").setView([<?= $this->latitude ?>, <?= $this->longitude ?>], 13);

        L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw", {
                maxZoom: 18,
                id: "mapbox.streets"
        }).addTo(mymap);
       
        L.marker([<?= $this->latitude ?>, <?= $this->longitude ?>]).addTo(mymap);
</script>

---

Das Problem sind die PHP Variablen im Script. Mit $GLOBALS['TL_BODY'][] = funktioniert das nicht.

Du fügst das in ein Template ein, erzeugst dir das Template in PHP, parst es und fügst es dann in den body ein.

Sorry, ich kann Dir noch nicht ganz folgen.

Ich habe mir z.B. ein eigenes Inhaltselement mit dem Rocksolid Custom Elements gebastelt und würde nun gerne in diesem Template (rsce_meinelement.html) den JS Code einbauen. Das funktioniert auch, doch der JS Code steht so mitten i Quelltext und nicht unten am Body.

Mit

Code:

---

$GLOBALS['TL_BODY'][] = '<script>...</script>';

---

funktioniert es nicht, weil ich ja PHP Variablen im Script einsetzen möchte.

Wie würde also Dein "Trick" aussehen?

du erzeugst dir eine neue Datei namens /templates/my_script.html5, fügst dort deinen JavaScript Code ein, lädst das Template in deinem RSCE Template und fügst es in den Body ein:

PHP-Code:

---

$template = new \Contao\FrontendTemplate('my_script');
$template->setData(…);
$GLOBALS['TL_BODY'][] = $template->parse(); 


---

Aber wie kann ich dann z.B. die Variable

Code:

---

<?= $this->latitude ?>

---

an mein Script übergeben, wenn dieses ja unter my_script.html5 ausgelagert ist?
Das ist mir noch nicht ganz klar.
Wird das dann mit

Code:

---

$template->setData(…);

---

gemacht? Was kommt da genau zwischen die Klammern?

Also ich habe es nach Deiner Anleitung umgesetzt. In meiner script_trackingcode.html steht folgendes:

Code:

---

<script>
        var mymap = L.map('mapid').setView([<?= $this->latitude; ?>, <?= $this->longitude; ?>], 13);

        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
                maxZoom: 18,
                id: 'mapbox.streets'
        }).addTo(mymap);
       
        L.marker([0, 0]).addTo(mymap);
</script>

---

und mit meinem rsce Template folgendes:

Code:

---

<?php
$template = new \Contao\FrontendTemplate('script_trackingcode');
$template->setData($this->arrData = $arrData);
$GLOBALS['TL_BODY'][] = $template->parse();
?>

---

Die Werte der beiden Variablen '<?= $this->latitude; ?>' und '<?= $this->longitude; ?>' werden nicht übergeben.
Was mache ich falsch?

Zitat:

---

Zitat von dirksche

Code:

---

$template->setData($this->arrData = $arrData);

---

---

Wieso übergibst Du in setData() eine Zuweisung als Parameter? Du solltest den Datenarray übergeben, in dem Du vorher Deine Daten gespeichert hat.

Und $arrData ist vermutlich leer?

Und wie übergebe ich die Werte in $arrData? So?:

Code:

---

$template->setData($this->arrData = $this->latitude);

---

Das Contao Forum sollte eigentlich keine grundsätzliche PHP Lernhilfe sein, aber ok ;)

Mit setData wäre es so:

PHP-Code:

---

$template->setData([
  'latitude' => $this->latitude,
  …
]); 


---

Du kannst es auch so machen:

PHP-Code:

---

$template->latitude = $this->latitude;
… 


---

Brauchst du das JavaScript überhaupt am Ende des <body>? Wenn du damit eine Google Map erzeugst, wo das RSCE Template auch den Container ausgibt, schadet es ja nicht, wenn das <script> gleich direkt danach kommt.

Ahhh, Danke Dir Spooky für diesen kleinen PHP Exkurs.
Du hast mit den Tag gerettet... mal wieder ;-)