Reihenfolge: jQuery / mootools

[Sabaid]

Hallo zusammen,
ich versuche grade einige jQuery Plugins und contao-bootstrap per Theme+ in mein Theme einzubinden und möchte dabei den noConflict-Mode verwenden damit diese trotz mootools weiterhin funktionieren. Mootools ist leider für Isotope Ecommerce unerlässlich. Bzgl. der Reihenfolge und dem Include (head / body) bin ich mir nicht sicher, hab schon einige Kombinationen ausprobiert, jedoch scheint eine von beiden Bibliotheken nie zu funktionieren. Einige Beiträge meinten mootools zuerst, andere wiederum jQuery zuerst. Vorschläge? :/

[Spooky]

Ich würde lieber analysieren, warum es mit Bootstrap hier zu Fehlern kommt.

[Sabaid]

Ich würde lieber analysieren, warum es mit Bootstrap hier zu Fehlern kommt.

Habe ich bereits. Das Problem mit dem styled Select und den sich verschwindenden Dropdowns ist bereits bekannt. Mootools reagiert auf das Hide-Event der Selects / Dropdowns und verpasst ihnen ein "display: none". Als Lösung wurde an einigen Stellen der noConflict-Mode vorgeschlagen. Beim Carousel bin ich mir nicht ganz sicher. Momentan hab ich 1 Trennelement, sprich 2 Slides. Beim Wechsel der Slides wird die Höhe des zweiten auf 0 reduziert und beim nächsten Wechsel zum ersten Slide wieder normal gestellt.

[Spooky]

Das ist nicht "warum es mit Bootstrap hier zu Fehlern kommt" - das was du geschrieben hast ist nur die Beobachtung der Fehler . Hast du einen Link zur Seite, wo man das machen kann?

[Sabaid]

Die Seite ist momentan lokal. Woran denkst du könnt es denn liegen?

[Spooky]

Falsches Wrapping von MooTools oder jQuery Code.

[Sabaid]

Wie kann ich das dann prüfen bzw. beheben?

Wenn ich mootools deaktivier, funktioniert abgesehen von den Isotope Funktionalitäten alles (Bootstrap + Plugins).

[Spooky]

Stelle die Website online zur Verfügung, dann kann man sich endlich mal ein Bild davon machen.

[Andreas]

In Contao brauchst du eigentlich keinen noConflict-mode. Du kannst beide Bibliotheken einbinden und alles sollte laufen. Das liegt daran, wie die Scripts in den j_- und moo_-Templates gewrappt sind.

[Sabaid]

Hier der Link zur aktuellen Seite (in Entwicklung):

http://www.anvil.at/ALGE-TIMING/index.php/time-measuring/id-3.html?language=en&

Testfälle:
1. Dropdown 'Information' öffnen und schließen -> display: none
2. Produkt Option: von 'mit Drucker' zu 'ohne Drucker' wechseln, warum nicht "Please select" standardmässig drin ist, konnte mir bisher keiner erklären. Was mir aufgefallen ist sind die zusätzlichen selected-Attribute, hat aber nichts mit dem aktuellen Problem zu tun.
3. Auf der Startseite das Carousel, kurz warten bis zum Wechsel zur zweiten Slide, dann nochmal kurz warten bis zum Wechseln zur ersten Slide

Wenn Testfall 1 und 3 funktionieren, funktioniert 2 dafür nicht mehr. Ich hab vorübergehend styled Selects deaktiviert, da ich sonst die Funktion von Isotope nicht testen konnte. Die Navigation links ist auch auf jQuery basierend und funktioniert teilweise je nach Reihung mit mootools auch nicht immer.

[Spooky]

Dieser Teil ist auf jeden Fall schon mal falsch gewrapped:

<script type="text/javascript">

    // ml-menu init
    (function() {
        var menuEl = document.getElementById('ml-menu'),
            mlmenu = new MLMenu(menuEl, {
                breadcrumbsCtrl : true, // show breadcrumbs
                initialBreadcrumb : 'home', // initial breadcrumb text
                backCtrl : true, // show back button
                itemsDelayInterval : 0, // delay between each menu item sliding animation
                // onItemClick: loadDummyData // callback: item that doesn´t have a submenu gets clicked - onItemClick([event], [inner HTML of the clicked item])
            });
        
        // mobile menu toggle
        var openMenuCtrl = document.querySelector('.action--open'),
            closeMenuCtrl = document.querySelector('.action--close');
        
        $('.action--open').bind('click', openMenu);
        $('.action--close').bind('click', closeMenu);
        
        function openMenu() {
            classie.add(menuEl, 'menu--open');
            // toggle Icon
            $('#nav-toggle').find('i').toggleClass('fa-navicon').toggleClass('fa-close');
            
            // toggle Event-Listener
            $('#nav-toggle').unbind('click', openMenu);
            $('#nav-toggle').bind('click', closeMenu);
        }
        
        function closeMenu() {
            classie.remove(menuEl, 'menu--open');
            // toggle Icon
            $('#nav-toggle').find('i').toggleClass('fa-navicon').toggleClass('fa-close');
            
            // toggle Event-Listener
            $('#nav-toggle').unbind('click', closeMenu);
            $('#nav-toggle').bind('click', openMenu);
        }
    })();
    
    $('#quick-toggle').click(function(){
        $(this).find('i').toggleClass('fa-plus').toggleClass('fa-minus');
    });

</script> 

Sollte eher so aussehen:

<script>

    // ml-menu init
    (function($) {
        var menuEl = document.getElementById('ml-menu'),
            mlmenu = new MLMenu(menuEl, {
                breadcrumbsCtrl : true, // show breadcrumbs
                initialBreadcrumb : 'home', // initial breadcrumb text
                backCtrl : true, // show back button
                itemsDelayInterval : 0, // delay between each menu item sliding animation
                // onItemClick: loadDummyData // callback: item that doesn´t have a submenu gets clicked - onItemClick([event], [inner HTML of the clicked item])
            });
        
        // mobile menu toggle
        var openMenuCtrl = document.querySelector('.action--open'),
            closeMenuCtrl = document.querySelector('.action--close');
        
        $('.action--open').bind('click', openMenu);
        $('.action--close').bind('click', closeMenu);
        
        function openMenu() {
            classie.add(menuEl, 'menu--open');
            // toggle Icon
            $('#nav-toggle').find('i').toggleClass('fa-navicon').toggleClass('fa-close');
            
            // toggle Event-Listener
            $('#nav-toggle').unbind('click', openMenu);
            $('#nav-toggle').bind('click', closeMenu);
        }
        
        function closeMenu() {
            classie.remove(menuEl, 'menu--open');
            // toggle Icon
            $('#nav-toggle').find('i').toggleClass('fa-navicon').toggleClass('fa-close');
            
            // toggle Event-Listener
            $('#nav-toggle').unbind('click', closeMenu);
            $('#nav-toggle').bind('click', openMenu);
        }
    
        $('#quick-toggle').click(function(){
            $(this).find('i').toggleClass('fa-plus').toggleClass('fa-minus');
        });
    })(jQuery);

</script> 

Woher genau kommt das?

Kann aber nicht sagen, ob das die Probleme verursacht.

[Sabaid]

Das ist die Initialisierung der Navigation + mobile Icon Wechsel. Ich hab beim Test mit dem noConflict-Mode genau diesen Wrapper um den Code gelegt, hatte aber nicht viel geholfen. Ich änder das mal schnell ab.

EDIT: Wrapper ergänzt

[Sabaid]

Mir gehen langsam die Ideen aus, woran es liegen könnte. Keiner sonst eine Idee? :/

[Spooky]

Laut Debugging verursacht ein hide Event von jQuery, dass MooTools das Element versteckt.

Wie genau hast du bootstrap installiert? Verwendest du die Paketverwaltung und hast die entsprechende Contao Extension installiert? Oder hast du bootstrap manuell integriert? Wenn du es manuell integrierst hast, versuche mal jQuery 1.11.x statt jQuery 2.x zu verwenden.

[Spooky]

Die MooTools Integration sieht auch nicht Original aus. Wie hast du MooTools integriert? Welche Contao Version verwendest du?