Contao-Camp 2024
Ergebnis 1 bis 4 von 4

Thema: Menü klappt nicht zu, Konflikt zwischen jquery--Dateien?

  1. #1
    Contao-Nutzer
    Registriert seit
    13.03.2010.
    Beiträge
    227

    Standard Menü klappt nicht zu, Konflikt zwischen jquery--Dateien?

    Hallo zusammen,

    bis zur 4.4-Version lief folgendes Menü auf meiner Seite. Nach dem Update auf 4.9 klappt es nun nicht mehr zu.
    Meine js-Kenntnisse tendieren gegen Null, das Template kommt nicht von mir.

    Im Layout steht dies im "Eigenen Javascript-Code":

    PHP-Code:
    <script src="files/theme_files/responsive_navigation/jquery.responsinav.min.js"></script>
    <script>
    $(function(){
        $(window).responsinav({ breakpoint: 1140 });
    });
    </script> 
    Die JS steht in den Theme-Dateien und geht so:

    PHP-Code:
    (function($) {
      $(
    document).ready(function() {
        $.
    fn.responsinav = function(o) {
            var 
    jQuery.extend({
                
    breakpoint480
            
    }, o);
            
    rn_mode undefined;
            
    sub_nav_bind false;
            $(
    window).bind('load resize', function() {
                if ($(
    window).width() <= o.breakpoint) {
                    if (
    rn_mode === || rn_mode === undefined) {
                        
    nav.reset();
                        
    nav.mobile();
                    }
                } else {
                    if (
    rn_mode === || rn_mode === undefined) {
                        
    nav.reset();
                        
    nav.full();
                    }
                }
            });
            
    nav = {
                
    reset: function() {
                    $(
    '.mainmenu>ul li').unbind('mouseenter mouseleave click');
                    $(
    '.mainmenu .sub_nav').unbind('click').remove();
                },
                
    full: function() {
                    
    rn_mode 0;
                    $(
    '.mainmenu>ul').show();
                    $(
    '.mainmenu ul ul').hide();
                    $(
    ".mainmenu>ul li").hover(function() {
                        var 
    timeout = $(this).data("timeout");
                        if (
    timeoutclearTimeout(timeout);
                        $(
    this).children("ul").slideDown(300);
                    }, function() {
                        $(
    this).data("timeout"setTimeout($.proxy(function() {
                            $(
    this).find("ul").slideUp(300);
                        }, 
    this), 300));
                    });
                },
                
    mobile: function() {
                    
    rn_mode 1;
                    $(
    '.mainmenu>ul').hide();
                    if ($(
    '.mainmenu>a.mobile_handle').length === 0) {
                        $(
    '<a class="mobile_handle"><i class="icon-reorder"></i></a>').insertBefore('.mainmenu ul.level_1');
                    }
                    $(
    '.mainmenu>a.mobile_handle').unbind('click');
                    $(
    '.mainmenu>a.mobile_handle').click(function() {
                        $(
    '.mainmenu>ul').slideToggle(300);
                    });
                    if ($(
    '.sub_nav').length === 0) {
                        $(
    '.mainmenu ul li').each(function() {
                            if ($(
    this).children('ul').length 0) {
                                $(
    '<a class="sub_nav"><i class="icon-angle-down"></i></a>').appendTo(this);
                            }
                        });
                    }
                    if (
    sub_nav_bind === false) {
                        $(
    '.mainmenu>ul').delegate('.sub_nav''click', function() {
                            $(
    this).siblings('ul').slideToggle(300);
                            if ($(
    this).children('i').hasClass('icon-angle-down')) {
                                $(
    this).children('i').attr('class''icon-angle-up');
                            } else {
                                $(
    this).children('i').attr('class''icon-angle-down');
                            }
                        });
                        
    sub_nav_bind true;
                    }
                }
            };
        };
      });
    })(
    jQuery); 
    Im Layout sind aktiviert: js_slider und js_autofocus, j_accordion, moo_mediabox, letztere per CDN und lokalem Fallback.

    Kann mir jemand weiterhelfen?

    Marion

    P. S. (jQuery); am Ende hatte ich sogar im eigenen Code einmal ergänzt, nachdem ich hier Spookies Tips mit dem Wrappen gelesen hatte, aber das hat nichts geändert.
    Geändert von thymian (25.02.2021 um 11:43 Uhr)

  2. #2
    Contao-Nutzer
    Registriert seit
    13.03.2010.
    Beiträge
    227

    Standard

    Ich nochmal.

    Hat noch niemand dieses Menü auf 4.9 gebracht und kennt sich ein bisschen mit JS aus? Es kommt aus einem Template von Impression Media.

    In der fe_page, die ich mittlerweile durch die Standard-fe ersetzt habe, war bei 4.4 noch das enthalten:

    PHP-Code:
    <?php if (!$this->disableCron): ?>
        <script>
          <?php if ($this->layout->addJQuery): ?>
            setTimeout(function(){jQuery.ajax("system/cron/cron.txt",{complete:function(e){var t=e.responseText||0;parseInt(t)<Math.round(+(new Date)/1e3)-<?php echo $this->cronTimeout?>&&jQuery.ajax("system/cron/cron.php")}})},5e3)
          <?php else: ?>
            setTimeout(function(){(new Request({url:"system/cron/cron.txt",onComplete:function(e){e||(e=0),parseInt(e)<Math.round(+(new Date)/1e3)-<?php echo $this->cronTimeout?>&&(new Request({url:"system/cron/cron.php"})).get()}})).get()},5e3)
          <?php endif; ?>
        </script>
    Kann es damit zu tun haben? Oder mit dem assets-Ordner? Oder mit der jquery-version?

    Bin weiter um Hilfe dankbar, stelle es aber auch gerne in den Bezahl-Bereich ein, wenn niemand eine Idee hat. Ich habe schon mitbekommen, dass diese alten Templates hier nicht nur Freunde haben, finde die Navi halt sehr schön und praktisch.

  3. #3
    Contao-Nutzer
    Registriert seit
    13.03.2010.
    Beiträge
    227

    Standard

    Für alle, die ein ähnliches Problem mit alten Templates oder Modulen haben: Es war die neue jQuery-Version 3.5, für die die alte Navi nicht mehr passte. Die Einstellung kann man rückwärts in der composer.json anpassen und muss anschließend im CM das Paket updaten. Siehe dieser Post: https://community.contao.org/de/showthread.php?72232-jquery-Version-von-3-3-1-auf-1-11-1-12-umstellen

    Da ich mich mit JS nicht auskenne: Wenn man es up to date haben möchte, muss man dann das JS neu schreiben? An was kann es liegen, dass das für jQuery 3.5 nicht mehr passt?

    Danke für Tipps
    Marion

  4. #4
    Contao-Nutzer
    Registriert seit
    08.07.2010.
    Beiträge
    11

    Standard

    Hallo Marion,

    ich habe gerade ein Update einer Installation von 4.9.31 auf 4.13.6 inkl. jQuery v3.6.0 durchgeführt.

    Bei mir läuft die responsive Navigation mit folgendem Code fehlerfrei:

    PHP-Code:
    (function($) {
        $.
    fn.responsinav = function(o) {
            var 
    jQuery.extend({
                
    breakpoint480
            
    }, o);
            
    rn_mode undefined;
            
    sub_nav_bind false;
            $(
    window).bind('load resize', function() {
                if ($(
    window).width() <= o.breakpoint) {
                    if (
    rn_mode === || rn_mode === undefined) {
                        
    nav.reset();
                        
    nav.mobile();
                    }
                } else {
                    if (
    rn_mode === || rn_mode === undefined) {
                        
    nav.reset();
                        
    nav.full();
                    }
                }
            });
            
    nav = {
                
    reset: function() {
                    $(
    '.mainmenu>ul li').unbind('mouseenter mouseleave click');
                    $(
    '.mainmenu .sub_nav').unbind('click').remove();
                },
                
    full: function() {
                    
    rn_mode 0;
                    $(
    '.mainmenu>ul').show();
                    $(
    '.mainmenu ul ul').hide();
                    $(
    ".mainmenu>ul li").hover(function() {
                        var 
    timeout = $(this).data("timeout");
                        if (
    timeoutclearTimeout(timeout);
                        $(
    this).children("ul").slideDown(300);
                    }, function() {
                        $(
    this).data("timeout"setTimeout($.proxy(function() {
                            $(
    this).find("ul").slideUp(300);
                        }, 
    this), 300));
                    });
                },
                
    mobile: function() {
                    
    rn_mode 1;
                    $(
    '.mainmenu>ul').hide();
                    if ($(
    '.mainmenu>a.mobile_handle').length === 0) {
                        $(
    '<a class="mobile_handle"><i class="icon-reorder"></i></a>').insertBefore('.mainmenu ul.level_1');
                    }
                    $(
    '.mainmenu>a.mobile_handle').unbind('click');
                    $(
    '.mainmenu>a.mobile_handle').click(function() {
                        $(
    '.mainmenu>ul').slideToggle(300);
                    });
                    if ($(
    '.sub_nav').length === 0) {
                        $(
    '.mainmenu ul li').each(function() {
                            if ($(
    this).children('ul').length 0) {
                                $(
    '<a class="sub_nav"><i class="icon-angle-down"></i></a>').appendTo(this);
                            }
                        });
                    }
                    if (
    sub_nav_bind === false) {
                        $(
    '.mainmenu>ul').delegate('.sub_nav''click', function() {
                            $(
    this).siblings('ul').slideToggle(300);
                            if ($(
    this).children('i').hasClass('icon-angle-down')) {
                                $(
    this).children('i').attr('class''icon-angle-up');
                            } else {
                                $(
    this).children('i').attr('class''icon-angle-down');
                            }
                        });
                        
    sub_nav_bind true;
                    }
                }
            };
        };
    })(
    jQuery); 
    Viele Grüße
    Thomas

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •