jQuery Script "Portamento" verwenden in Contao 3.1 - Verzweifle ...

Hallo zusammen,

das einfache Einbinden von Javascripts, definieren einiger Klassen in den Templates bereitet mir oft Probleme - insbesonere seit 3.0
Ich nutze theme_plus um das Javascript einzubinden. Aber ich weiß schon mal garnicht, ob das Script überhaupt reingeladen wird, da ich noch ni

Bei CSS-Dateien habe ich nun den Assetic Filter CSS-Rewrite je Datei aktiviert. Ich schätze die CSS-Datei oder das Snipet oder auch ein JavaScript wird sonst nicht geldan? ...


Möchte in einen JS-Import Filter erstellen, kommt bei mir schon mal folgende Fehlermeldung.

Zitat:

---

Fatal error: Call to a member function next() on a non-object in /var/www/vhosts/../httpdocs/system/modules/assetic/classes/src/ContaoAssetic/DataContainer/AsseticFilter.php on line 101

---

Brauche ich einen solchen Filter? Weiß ich leider nicht. :-)

Ich würde gerne

http://simianstudios.com/portamento/ für die Sidebar rechts anwenden.

Also lade ich über theme_plus die portamento-min.js rein und aktiviere sie mal auf allen Seiten.

jQuery und Mootools sind im Seitenlayout geladen , Mootools eigentlich nur für den BGslider.

Eigenes Javascript:

Code:

---

<script>
$('#sidebar').portamento({wrapper: $('#content-wrapper')}); // set #wrapper as the visual coundary of the panel
</script>

---

Folgendes CSS habe ich dazu eingefügt:

HTML-Code:

---

#wrapper {overflow: hidden; position:relative;}
                        #content {width:486px; margin-right:10px; min-height:1200px;}
                        #sidebar {width:284px; padding:10px; background: #eee; height:400px; position:absolute; right:0; top:0;}
                                               
                        #portamento_container {position:absolute; right:0; top:0;} /* take the absolute positioning of the sidebar */
                        #portamento_container #sidebar {}
                        #portamento_container #sidebar.fixed {position:fixed; right:auto; top:auto;} /* become fixed position, but reset the top and right values */

---

In der fe_page habe ich die sidebar noch im div mit der ID #portamento_container eingeschlossen.
Dann habe ich es getestet, aber keinerlei Wirkung erzielt.

Vielleicht gehe ich an soetwas viel zu umständlich dran - hat mir jemand einen Vorschlag?

Ich rege mich über mich selbst auf - nicht über Contao oder Erweiterungen - ich weiß ja, dass alles funktionieren muss. ;-)

Viele Grüße :-)

Sieht auf den ersten Blick nicht falsch aus .. hast mal nen Link?

Was um Himmels Willen ist Assetic Filter? Hab gegoogelt und https://github.com/kriswallsmith/assetic gefunden ... wozu brauchst Du ein "asset management framework for PHP"?

Bzgl Javascript-Einbindung ... wenn ich ein JS auf allen Seiten brauche nutze ich das Feld zusätzliche Headtags im Template - sehr viel unkomplizierter. Ansonsten empfehle ich Dir http://ck2013.may17.de/javascript-einbinden.html

Zitat:

---

Zitat von Bas

Sieht auf den ersten Blick nicht falsch aus .. hast mal nen Link?

Was um Himmels Willen ist Assetic Filter? Hab gegoogelt und https://github.com/kriswallsmith/assetic gefunden ... wozu brauchst Du ein "asset management framework for PHP"?

Bzgl Javascript-Einbindung ... wenn ich ein JS auf allen Seiten brauche nutze ich das Feld zusätzliche Headtags im Template - sehr viel unkomplizierter. Ansonsten empfehle ich Dir http://ck2013.may17.de/javascript-einbinden.html

---

Er benutzt Theme+ 4.x, dort wird Assetic für das asset management verwendet. Seine JavaScript Dateien bindet er daher über Theme+ ein (welcher wiederum von Assetic verarbeitet werden).

@djo: einen speziellen Filter für die JavaScript Dateien brauchst du nicht. Welche Version von Theme+ verwendest du aktuell?

Hast du beachtet, das portamento.js im body positioniert sein muß ("Positionierung von JavaScript Dateien" in Theme+)?

Wieso sollte das im Body positioniert werden? Wenn er es mit theme+ reinholt ist es besser, wenn die alle an der gleichen Stelle geladen werden, weil theme+ aus allen Dateien eine einzige macht.

@bas Das ist dann auch der Vorteil von theme+ nur eine Serveranfrage für alle JSs. Assetic kann man glaube ich aber auch übergehen, braucht man nur, wenn man nochmal was mit den Dateien anstellen möchte, z.B. komprimieren, oder bei CSS mit less bearbeiten.

Die Reihenfolge ist aber wichtig, erst jQuery, dann portamento und dann mit portamento die Instanz erzeugen. Am besten mal mit nem Debug-Tool nach JS-Fehlern sehen. Firebug od. Webtools von FF. Wenn du gleichzeitig noch mootools nutzt, dann schau dir in den j_xxx Templates von Contao ab, wie jQuery Plugins korrekt nach dem domready aufgesetzt werden.

Zitat:

---

Zitat von Andreas

Wieso sollte das im Body positioniert werden?

---

Weil ich es, vermutlich im Gegensatz zu dir, ausprobiert habe. Für ein wieso, weshalb, warum müsstest du allerdings den Entwickler fragen.

Das Script portamento.js ist von domready abhängig, sowas programmiert man eigentlich nicht. Es sollte gewrappt werden in

Code:

---

$(document).ready(function() {
// code here ...
});

---

Danach kannst du es überall einbinden.

Zitat:

---

Zitat von Andreas

Wieso sollte das im Body positioniert werden? Wenn er es mit theme+ reinholt ist es besser, wenn die alle an der gleichen Stelle geladen werden, weil theme+ aus allen Dateien eine einzige macht.

---

Er meinte ja auch nur, dass (zumindest wegen Portamento, ohne eigene Modifikation) die JavaScripts im body, statt im head geladen werden sollen, eben über Theme+. Du kannst ja bei Theme+ auswählen, ob das JavaScript (also die von Theme+ zusammengefasste Datei) entweder im head oder im body eingebunden werden soll.

Wie gesagt, ich kann hier nur meine Erfahrungen berichten. Sobald die portamento.js über Theme+ in den head geladen wird, funktioniert es nicht.
Versucht man es mit Lazyload und head, funktioniert es manchmal, aber spätestens bei einem reload versagt es wieder. Einzige sichere Vorgehensweise war bisher das laden über Theme+ in den body.
Der Code ist natürlich wie folgt "gewrappt", da ja mootool und jQuery eingebunden sind.

Code:

---

<script>
  (function($) {
    $(document).ready(function() { 
        $('#example').portamento({gap: 250});
    });
  })(jQuery);
</script>

---

Das wie , weshalb, warum ist mir dabei egal - ich versuche djo nur zu zeigen, wie es funktionieren könnte.

Wie gesagt, portamento.js funtioniert nur, wenn es geladen wird, und der DOM zu diesem Zeitpunkt schon vollständig aufgebaut ist. Wenn's im head geladen wird, wird das wohl nicht der Fall sein. Wenn es im body geladen wird kann man Glück haben, dass der DOM schon kompl. ist.

Deswegen hätte der Entwickler innerhalb der portamento.js darauf achten sollen, dass sein Script erst ausgeführt wird, wenn der DOM komplett ist.

Code:

---

(function($) {
    $(document).ready(function() {
        // Script here
    });
})(jQuery);

---

Zitat:

---

Zitat von wulf

Der Code ist natürlich wie folgt "gewrappt", da ja mootool und jQuery eingebunden sind.

Code:

---

<script>
  (function($) {
    $(document).ready(function() { 
        $('#example').portamento({gap: 250});
    });
  })(jQuery);
</script>

---

---

Das ist an dieser Stelle schon zu spät, da nicht nur das Aufsetzen der Instanz, sondern bereits die portamento.js von domready abhängig ist. Seltsam programmiert.

Hmmm ... Verwende die aktuelle Theme+ Version unter Contao 3.1.2
Es sieht eigentlich auch danach aus, dass es eingebunden wird.

Ich teste es nochmal wie empfohlen. Danke für die Hinweise. :-)

Hallo nochmal,

wenn ich einen Assetic Filter für "JS Import" anwählen möchte, erhalte ich immernoch folgenden Fehler:

Zitat:

---

Fatal error: Call to a member function next() on a non-object in /www/htdocs/../../system/modules/assetic/classes/src/ContaoAssetic/DataContainer/AsseticFilter.php on line 101

---

Woran könnte das liegen,
Danke, liebe Grüße,
Daniel