Scripts "stören sich gegenseitig"

Carrear

Carrear

Erfahrenes Mitglied
Hi Leute,

auf meiner Seite benutze ich einige JavaScripts. Ich habe dabei versucht Überschneidungen zu verhindern, indem ich durch abfrage von $_GET Variabeln im PHP Code nur die jeweils für die Seite notwendigen JS Dateien einbinde. Allerdings habe ich ein Kwicks Menü und ein Login Slide Panel, (beides JQuery Plugins) die beide auf allen Seiten benötigt werden. Plötzlich funktionierte im Internet Explorer beides nicht mehr. Im Firefox gab es keine Probleme.

Wenn ich jetzt die JS Dateien vom Kwicks Menü rausnehme, dann gibt es keine Probleme mehr. Aber das geht ja nicht :D Kann man dagegen irgendwas tun? Siehe http://www.random-shox.com


Also ich schicke hier mal die 2 Scripts. eins ist sehr kurz und eines etwas länger. Vielleicht sieht ja einer wo die Überschneidung ist.

Die vom SlidePanel:

Code: 
$(document).ready(function() {
    
    // Expand Panel
    $("#open").click(function(){
        $("div#panel").slideDown("slow");
    
    });    
    
    // Collapse Panel
    $("#close").click(function(){
        $("div#panel").slideUp("slow");    
    });        
    
    // Switch buttons from "Log In | Register" to "Close Panel" on click
    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });        
        
});

Und die von dem Kwicks Slide Menü

Code: 
 function my_kwicks(){
    $('.kwicks').kwicks({
		duration: 300,   
        max: 120,  
        spacing:  0  
    });
}  

 $(document).ready(function(){					
	my_kwicks();
});
 
Zuletzt bearbeitet:
Ich weiß nicht was die Fehlerkonsole ist ehrlich gesagt. Unten in der Zeile ist ganz links so nen gelbes Dreieck und das spuckt folgendes (siehe Bild im Anhang)

Eigentlich dürfte das Problem damit aber nichts zu tun haben. Denn die dort genannte Kwicks.js kann ich includet lassen, und trotzdem funktioniert das Login Panel. Nur die dazugehörige custom.js (oben gepostet) muss ich rausnehmen,damit es funktioniert. Aber ich poste hier trotzdem mal die Kwicks.js , falls es doch daran liegen könnte. Vorher aber noch eine kleine Anmerkung. Das Menü, dass auf der Kwicks.js und der Custom.js basiert funktioniert im Internet Explorer so oder so nicht, da kann ich machen was ich will. Das hat mich aber bis hierhin nicht gestört, weil nur die Animation ausbleibt, die Verlinkung an sich aber funktioniert. So jetzt - Kwicks.js

Code: 
/*
    Kwicks for jQuery (version 1.5.1)
    Copyright (c) 2008 Jeremy Martin
    http://www.jeremymartin.name/projects.php?project=kwicks
    
    Licensed under the MIT license:
        http://www.opensource.org/licenses/mit-license.php

    Any and all use of this script must be accompanied by this copyright/license notice in its present form.
*/

(function($){
    $.fn.kwicks = function(options) {
        var defaults = {
            isVertical: false,
            sticky: false,
            defaultKwick: 0,
            event: 'mouseover',
            spacing: 0,
            duration: 500
        };
        var o = $.extend(defaults, options);
        var WoH = (o.isVertical ? 'height' : 'width'); // WoH = Width or Height
        var LoT = (o.isVertical ? 'top' : 'left'); // LoT = Left or Top
        
        return this.each(function() {
            container = $(this);
            var kwicks = container.children('li');
            var normWoH = kwicks.eq(0).css(WoH).replace(/px/,''); // normWoH = Normal Width or Height
            if(!o.max) {
                o.max = (normWoH * kwicks.size()) - (o.min * (kwicks.size() - 1));
            } else {
                o.min = ((normWoH * kwicks.size()) - o.max) / (kwicks.size() - 1);
            }
            // set width of container ul
            if(o.isVertical) {
                container.css({
                    width : kwicks.eq(0).css('width'),
                    height : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px'
                });                
            } else {
                container.css({
                    width : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px',
                    height : kwicks.eq(0).css('height')
                });                
            }

            // pre calculate left or top values for all kwicks but the first and last
            // i = index of currently hovered kwick, j = index of kwick we're calculating
            var preCalcLoTs = []; // preCalcLoTs = pre-calculated Left or Top's
            for(i = 0; i < kwicks.size(); i++) {
                preCalcLoTs[i] = [];
                // don't need to calculate values for first or last kwick
                for(j = 1; j < kwicks.size() - 1; j++) {
                    if(i == j) {
                        preCalcLoTs[i][j] = o.isVertical ? j * o.min + (j * o.spacing) : j * o.min + (j * o.spacing);
                    } else {
                        preCalcLoTs[i][j] = (j <= i ? (j * o.min) : (j-1) * o.min + o.max) + (j * o.spacing);
                    }
                }
            }
            
            // loop through all kwick elements
            kwicks.each(function(i) {
                var kwick = $(this);
                // set initial width or height and left or top values
                // set first kwick
                if(i === 0) {
                    kwick.css(LoT, '0px');
                } 
                // set last kwick
                else if(i == kwicks.size() - 1) {
                    kwick.css(o.isVertical ? 'bottom' : 'right', '0px');
                }
                // set all other kwicks
                else {
                    if(o.sticky) {
                        kwick.css(LoT, preCalcLoTs[o.defaultKwick][i]);
                    } else {
                        kwick.css(LoT, (i * normWoH) + (i * o.spacing));
                    }
                }
                // correct size in sticky mode
                if(o.sticky) {
                    if(o.defaultKwick == i) {
                        kwick.css(WoH, o.max + 'px');
                        kwick.addClass('active');
                    } else {
                        kwick.css(WoH, o.min + 'px');
                    }
                }
                kwick.css({
                    margin: 0,
                    position: 'absolute'
                });
                
                kwick.bind(o.event, function() {
                    // calculate previous width or heights and left or top values
                    var prevWoHs = []; // prevWoHs = previous Widths or Heights
                    var prevLoTs = []; // prevLoTs = previous Left or Tops
                    kwicks.stop().removeClass('active');
                    for(j = 0; j < kwicks.size(); j++) {
                        prevWoHs[j] = kwicks.eq(j).css(WoH).replace(/px/, '');
                        prevLoTs[j] = kwicks.eq(j).css(LoT).replace(/px/, '');
                    }
                    var aniObj = {};
                    aniObj[WoH] = o.max;
                    var maxDif = o.max - prevWoHs[i];
                    var prevWoHsMaxDifRatio = prevWoHs[i]/maxDif;
                    kwick.addClass('active').animate(aniObj, {
                        step: function(now) {
                            // calculate animation completeness as percentage
                            var percentage = maxDif != 0 ? now/maxDif - prevWoHsMaxDifRatio : 1;
                            // adjsut other elements based on percentage
                            kwicks.each(function(j) {
                                if(j != i) {
                                    kwicks.eq(j).css(WoH, prevWoHs[j] - ((prevWoHs[j] - o.min) * percentage) + 'px');
                                }
                                if(j > 0 && j < kwicks.size() - 1) { // if not the first or last kwick
                                    kwicks.eq(j).css(LoT, prevLoTs[j] - ((prevLoTs[j] - preCalcLoTs[i][j]) * percentage) + 'px');
                                }
                            });
                        },
                        duration: o.duration,
                        easing: o.easing
                    });
                });
            });
            if(!o.sticky) {
                container.bind("mouseleave", function() {
                    var prevWoHs = [];
                    var prevLoTs = [];
                    kwicks.removeClass('active').stop();
                    for(i = 0; i < kwicks.size(); i++) {
                        prevWoHs[i] = kwicks.eq(i).css(WoH).replace(/px/, '');
                        prevLoTs[i] = kwicks.eq(i).css(LoT).replace(/px/, '');
                    }
                    var aniObj = {};
                    aniObj[WoH] = normWoH;
                    var normDif = normWoH - prevWoHs[0];
                    kwicks.eq(0).animate(aniObj, {
                        step: function(now) {
                            var percentage = normDif != 0 ? (now - prevWoHs[0])/normDif : 1;
                            for(i = 1; i < kwicks.size(); i++) {
                                kwicks.eq(i).css(WoH, prevWoHs[i] - ((prevWoHs[i] - normWoH) * percentage) + 'px');
                                if(i < kwicks.size() - 1) {
                                    kwicks.eq(i).css(LoT, prevLoTs[i] - ((prevLoTs[i] - ((i * normWoH) + (i * o.spacing))) * percentage) + 'px');
                                }
                            }
                        },
                        duration: o.duration,
                        easing: o.easing
                    });
                });
            }
        });
    };
})(jQuery);
 

Anhänge

  • fehler.jpg
    fehler.jpg
    154,7 KB · Aufrufe: 64
Avorin hat gesagt.:
Ist das Element eine <ul>? Der Aufruf der den Fehler verursacht ist die suche nach children des Elements $(".kwicks) die ein <li> sind, aber .kwicks hat ja li als childs.

Spann die .js doch einfach in ein Conditional Comment http://de.wikipedia.org/wiki/Conditional_Comments so dass es nicht ausgeführt wird wenn es im IE ist.
Zum Vergrößern anklicken....

Also siehst du da keine Möglichkeit das auch im IE zum laufen zu bringen? Denn im Firefox klappts ja auch.

Viele Grüße
und erstmal danke für den Tipp
 
ich sehe gerade das ich einen Denkfehler gemacht habe: Der Fehler betrifft folgende Zeile:

Code: 
var kwicks = container.children('li');

Aber nicht den Aufruf der children() Methode, sondern ja das 4te Zeichen, also die Variablendeklaration.
Versuche mal anstatt
Code: 
container = $(this);
Code: 
var container = $(this);
zu schreiben.(in der zeile darüber: 26)

ansonsten bin ich mir auch nicht sicher was sonst helfen könnte, denn eigentlich müsste es funktionieren ^^

Vielleicht kann Quaese was dazu sagen?
 
Hehe Dankee !! Jetzt funktioniert alles. Aber er zeigt mir ein paar andere Fehler an. Wärst bereit mir hier noch ein paar Minuten Support zu leisten? Dann poste ich die mal.
 
Okay, also ich hab die meisten Fehler jetzt weg bekommen. Die meisten kamen deshalb zustande, dass ich alle JS Dateien auf allen Seiten eingebunden hatte, auch wenn es nicht nötig war und dann haben dem Browser die passenden Objekte gefehlt.

Jetzt habe ich noch 2 Probleme. Nummer 1 ist, dass er mir einen Fehler in diesem Bereich einer JS Datei anzeigt ( Das {W ist die Stelle an der mir die Fehlerkonsole das Problem anzeigt) - Fehlermeldung lautet " 'undefined' ist Null oder kein Objekt " :

Code: 
var L=0;
function z(W,V){W._id=W._id||(W.id==l?"_fc"+L++:W.id+"");
Viele Grüße
 
Das heist das die Funktion z, welcher 2 Parameter übergeben werden, W und V, einen Fehler wirft. W ist nicht definiert, das heist du musst herausfinden wo die Funktion z aufgerufen wird um herauszufinden was als W übergeben wird. in welcher datei befindet sich diese Funktion denn? Gibt es womöglich eine unkomprimierte Version?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück