# Scripts "stören sich gegenseitig"



## Carrear (13. Januar 2010)

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  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:


```
$(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ü


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

 $(document).ready(function(){					
	my_kwicks();
});
```


----------



## Avorin (13. Januar 2010)

Was sagt den die IE Fehlerkonsole? in welcher Datei entsteht der Fehler(entsteht überhaupt einer?)


----------



## Carrear (13. Januar 2010)

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


```
/*
    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);
```


----------



## Avorin (13. Januar 2010)

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.


----------



## Carrear (13. Januar 2010)

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.



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


----------



## Avorin (14. Januar 2010)

ich sehe gerade das ich einen Denkfehler gemacht habe: Der Fehler betrifft folgende Zeile:


```
var kwicks = container.children('li');
```

Aber nicht den Aufruf der children() Methode, sondern ja das 4te Zeichen, also die Variablendeklaration.
Versuche mal anstatt

```
container = $(this);
```


```
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?


----------



## Carrear (14. Januar 2010)

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.


----------



## Avorin (14. Januar 2010)

immer reinposten, bin ja nicht der einzige hier im forum ^^
bin noch ein bisschen wach, kein Problem.


----------



## Carrear (14. Januar 2010)

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 " :


```
var L=0;
function z(W,V){W._id=W._id||(W.id==l?"_fc"+L++:W.id+"");
```
Viele Grüße


----------



## Avorin (14. Januar 2010)

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?


----------



## Carrear (14. Januar 2010)

Ich würde dir gerne die ganze Datei senden, aber wenn ich die in meinem Programm öffne, ist einfach alles in eine Zeile geschrieben  Ich hänge sie mal an.


----------



## Avorin (14. Januar 2010)

Das mit der Zeile ist normal, die Datei ist komprimiert(minified, deshalb das .min) im header stand aber die Adresse des Plugins, lade dir von hier: http://arshaw.com/fullcalendar/download/   mal die 1.4.3 zip herunter und nutze die fullcalender.js nicht die .min.js.(auch den Aufruf in der html nicht vergessen , dadurch können wir besser debuggen.


----------



## Carrear (14. Januar 2010)

Okay, jetzt zeigt er mir den Fehler an einer ganz anderen Stelle an  (4 Zeile : event ...) Fehlermeldung bleibt die gleiche.


```
var fakeID = 0;

function normalizeEvent(event, options) {
    event._id = event._id || (event.id == undefined ? '_fc' + fakeID++ : event.id + '');
    if (event.date) {
        if (!event.start) {
            event.start = event.date;
        }
        delete event.date;
    }
    event._start = cloneDate(event.start = parseDate(event.start));
    event.end = parseDate(event.end);
    if (event.end && event.end <= event.start) {
        event.end = null;
    }
    event._end = event.end ? cloneDate(event.end) : null;
    if (event.allDay == undefined) {
        event.allDay = options.allDayDefault;
    }
    if (event.className) {
        if (typeof event.className == 'string') {
            event.className = event.className.split(/\s+/);
        }
    }else{
        event.className = [];
    }
}
```


----------



## Avorin (14. Januar 2010)

Die Datei enthält ja auch im endeffekt dasselbe, nur formatiert und besser benannt 

suche mal nach dem Aufruf von: addEventSource der Parameter der da übergeben wird dürfte für den Fehler sorgen.


----------



## Carrear (14. Januar 2010)

Dazu habe ich folgendes gefunden:


```
addEventSource: function(source) {
                eventSources.push(source);
                fetchEventSource(source, function() {
                    eventsChanged();
                });
            },
```


----------



## Avorin (14. Januar 2010)

dahin war ich auch gekommen, aber das ist nur die Definierung der Funktion nicht der Aufruf... Hm. In welcher Datei rufst du den Kalender denn auf? gibt es da einen Aufruf für addEventSource?


----------



## Carrear (14. Januar 2010)

oh achsooo  okay wait ... die events trage ich im head bereich der index.php ein... aber da steht nicht mit addEvent: 

```
<script type='text/javascript'>
    $(document).ready(function() {
    
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            editable: false,
            events: [
                {
                    title: 'Training',
                    start: new Date(2010, 0, 8),
                    agenda: '20:30{ - 22:00}'
                },
                {
                    title: 'Krumping Workshop',
                    start: new Date(2010, 0, 12),
                    agenda: '20:30{ - 22:00}',
                    url: 'http://www.random-shox.com/index.php?p=blog_content&bid=7'
                },
                {
                    title: 'Training',
                    start: new Date(2010, 0, 15),
                    agenda: '20:30{ - 22:00}'
                },
            ]
        });
        
    });
</script>
```

Okay, dieses Problem scheint tiefer zu sitzen und verstehe das jetzt auch, wenn du keinen bock hast hier die ganze nacht mit mir in den script dateien zu wühlen


----------



## Avorin (14. Januar 2010)

Die Lust ist nicht das Problem, eher das ich auch nicht mehr wirklich weiter weis, da hilft eigentlich nur Try & Error, der Fehler tritt immer sofort(also quasi onload, ohne das du mit der Seite interagierst) auf oder? Tritt der Fehler auch im FF auf? Wär gut wenn du mal den aktuellen Stand hochladen könntest, bsw in einem Testbereich(deineDomain.de/Test, oder test.DeineDomain.de) sodass andere auch mal die Fehler begutachten können ^^

Die ursprungszeile:


```
event._id = event._id || (event.id == undefined ? '_fc' + fakeID++ : event.id + '');
```

soll soweit ich sie richtig verstehe genau diesen Fehler verhindern, nämlich das event._id undefiniert ist. Naja, soweit erstmal bis morgen.

gute Nacht

Avorin


----------

