kleines (oder großes?) javascript-Problem

[Jannes1503]

Hi there HTML und javascript Ponys!

Im Vorraus möchte ich sagen, dass ich mich mit dieser Materie nicht so gut auskenne.

Ich und ein paar Kumpels haben ein kleines Forum aufgesetzt für unsere "Zocker-Gruppe"

Jetzt habe ich nur ein kleines Problem.
Ich benutze die Foren-Software "WoltLab Burning Board Lite 2.1.1 (Aurora)" und habe das Plugin "FP: Tooltip" installiert.
Dieses ersetzt die normalen Tooltips durch einen animierten Tooltip.
Das funktioniert auch wunderbar.
Doch sobald ich im Dateisystem in der Datei "headInclude.tpl" folgendes hinzufüge funktioniert das Plugin nicht mehr:

Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

jQuery

jQuery benötige ich für dieses Script:
scrollen.js

Spoiler (Öffnen)

Code:

$(document).ready(function() {
    $('a[href=#top]').click(function(){
    $('html, body').animate({scrollTop:0}, 'slow');
    return false;
    });
});

Dieses Javascript ist zum animiertem Scrollen sobald man auf einen Link mit "#top" klickt. Funktioniert ebenfalls bestens.

Nun würde ich gerne wissen warum das Plugin nicht mehr funktioniert.
FPTooltip.class

Spoiler (Öffnen)

Code:

/*
    author: Suat Secmen (http://firepanther.pro/)
*/
FPTooltip = {
    currentText: '',
    scrollTop: 0,
    scrollLeft: 0,
    init: function() {
        var tt = $$('[title]'), t = '';
        for (var x in tt) {
            if (tt[x].getAttribute) {
                t = tt[x].getAttribute('title');
                tt[x].removeAttribute('title');
                if (t)
                    tt[x].setAttribute('data-fptooltip', t);
            }
        }
    },
    over: function(event) {
        var target = this.getTarget(event);
        if (!target || !target.getAttribute)
            return;
        var level = 0;
        while ((!target.getAttribute || !target.getAttribute('data-fptooltip')) && level < 5) {
            level++;
            target = target.parentNode;
            if (!target) {
                this.hide();
                return;
            }
        }
        if (target && target.getAttribute && target.getAttribute('data-fptooltip') != this.currentText) {
            this.hide();
            if (target.getAttribute('data-fptooltip')) {
                this.currentText = target.getAttribute('data-fptooltip');
                this.show(target);
            }
        }
    },
    getTarget: function(event) {
        if (event.target)
            return event.target;
        else if (event.srcElement)
            return event.srcElement;
        else if (event.toElement)
            return event.toElement;
        else
            return false;
    },
    show: function(target) {
        var t = this.currentText, // text
            d = target.getDimensions(), // dimensions
            w = d.width, // width
            h = d.height, // height
            p = this.getPosition(target), // position
            x = p.x+w/2, // x-coord
            y = p.y, // y-coord
            // tooltip
            tt = new Element('div', {
                    style:    'background: '+FPToolTipOptions[0]+';'+
                            'color: '+FPToolTipOptions[4]+';'+
                            'font-family: arial;'+
                            'font-size: 13px;'+
                            'position: absolute;'+
                            'z-index: 2000;'+
                            'padding: 3px 7px;'+
                            'left: -1000px;'+
                            (tooltopCheckOpacityCheck ? 'opacity: 0;' : '')+
                            'border: '+FPToolTipOptions[5]+'px solid '+FPToolTipOptions[1]+';'+
                            (FPToolTipOptions[3] ? 'border-radius: '+FPToolTipOptions[3]+'px;' : ''),
                    className: 'FPTooltip',
                    onmouseover: 'FPTooltip.remove(this);FPTooltip.currentText="";'
            }).update('<div style="max-width: 500px; max-height: 70px; overflow: hidden;">'+t+'</div>'),
            // tooltip arrow
            tta = new Element('div', {
                    style:    'display: inline-block;'+
                            'border-width: 5px;'+
                            'border-style: solid;'+
                            'border-color: '+FPToolTipOptions[0]+' transparent transparent transparent;'+
                            'bottom: -10px;'+
                            'left: 50%;'+
                            'margin-left: -5px;'+
                            'position: absolute;'+
                            'z-index: 1;'
            }),
            // tooltip arrow bottom
            ttab = new Element('div', {
                    style:    'display: inline-block;'+
                            'border-width: 5px;'+
                            'border-style: solid;'+
                            'border-color: '+FPToolTipOptions[1]+' transparent transparent transparent;'+
                            'bottom: -'+(10+FPToolTipOptions[5])+'px;'+
                            'left: 50%;'+
                            'margin-left: -5px;'+
                            'position: absolute;'
            });
        document.body.appendChild(tt);
        tt.appendChild(tta);
        tt.appendChild(ttab);
        var tt_d = tt.getDimensions(),
            tt_h = tt_d.height+10,
            tt_x = x-tt_d.width/2,
            tt_x = tt_x < 5 ? 5 : tt_x,
            b = p.y < tt_h + this.scrollTop + 5 ? 1 : -1; // bottom
        if (b == 1) {
            // switch direction
            tt.className += ' ttb';
            tta.style.borderColor = 'transparent transparent '+FPToolTipOptions[0]+' transparent';
            tta.style.top = '-10px';
            tta.style.bottom = 'auto';
            ttab.style.borderColor = 'transparent transparent '+FPToolTipOptions[1]+' transparent';
            ttab.style.top = '-'+(10+FPToolTipOptions[5])+'px';
            ttab.style.bottom = 'auto';
            y += h+15;
        } else {
            y -= tt_h+5;
        }
        tt.style.left = tt_x+'px';

        tt.style.top = (y+10*b)+'px';
        new Effect.Morph(tt, { style: 'top:'+y+'px;'+(tooltopCheckOpacityCheck ? 'opacity: '+(FPToolTipOptions[2]/100)+';' : ''), duration: .2 });
    },
    hide: function() {
        var tt = $$('.FPTooltip'), r = 0, top;
        if (!tt.length) {
            // e.g. internet explorer
            var tt = document.getElementsByTagName('div');
            for (var x in tt) {
                if (tt[x].remove && tt[x].getAttribute('className') && tt[x].getAttribute('className').match(/(^|\s)FPTooltip($|\s)/) && ++r) {
                    /*top = parseInt(tt[x].style.top);
                    if (tt[x].getAttribute('className').indexOf('ttb') != -1)
                        top += 10;
                    else
                        top -= 10;
                    new Effect.Morph(tt[x], { style: 'top:'+top+'px;opacity:0;', duration: .1 });
                    setTimeout(function() {*/
                        FPTooltip.remove(tt[x]);
                    //}, 110);
                }
            }
        } else {
            for (var x in tt) {
                if (tt[x].className && ++r) {
                    top = parseInt(tt[x].style.top);
                    if (tt[x].className.indexOf('ttb') != -1)
                        top += 10;
                    else
                        top -= 10;
                    new Effect.Morph(tt[x], { style: 'top:'+top+'px;opacity:0;', duration: .1 });
                    setTimeout(this.remove, 110, tt[x]);
                }
            }
        }
        if (r)
            this.currentText = '';
    },
    remove: function(tt) {
        if (tt && tt.parentNode && tt.parentNode.removeChild)
            tt.parentNode.removeChild(tt);
    },
    getPosition: function(target){
        var curleft = 0, curtop = 0, tsx, tsy;
        if (target.offsetParent){
            while (target){
                curleft += target.offsetLeft;
                curtop += target.offsetTop;
                target = target.offsetParent;
            };
        } else if (target.x && target.y) {
            curleft += target.x;
            curtop += target.y;
        }
        return { x: curleft, y: curtop };
    },
    scroll: function(event) {
        var sx = 0,
            sy = 0;
        if (document.html && (document.html.scrollTop != 0 || document.html.scrollLeft != 0)) {
            sx = document.html.scrollLeft;
            sy = document.html.scrollTop;
        }
        if (document.body.scrollTop != 0 || document.body.scrollLeft != 0) {
            sx = document.body.scrollLeft;
            sy = document.body.scrollTop;
        }
        if (window.pageXOffset != 0 || window.pageYOffset != 0) {
            sx = window.pageXOffset;
            sy = window.pageYOffset;
        }

        if (sy != this.scrollTop)
            dsy = sy - this.scrollTop;
        if (sx != this.scrollLeft)
            dsx = sx - this.scrollLeft;
        this.scrollTop = sy;
        this.scrollLeft = sx;
    }
}

var tooltopCheckOpacityDiv = document.createElement('div');
var tooltopCheckOpacityCheck = typeof tooltopCheckOpacityDiv.style.opacity === 'undefined' ? 0 : 1;
delete tooltopCheckOpacityDiv;

onloadEvents.push(FPTooltip.init);
if (document.addEventListener) {
    document.addEventListener('mouseover', function(e){ FPTooltip.over(e); });
    document.addEventListener('scroll', function(e){ FPTooltip.scroll(e); });
} else if (document.attachEvent) {
    document.attachEvent('onmouseover', function(e){ FPTooltip.over(e); });
    document.attachEvent('onscroll', function(e){ FPTooltip.scroll(e); });
}

FPTooltip.class.php

Spoiler (Öffnen)

Code:

<?php
require_once(WCF_DIR.'lib/system/event/EventListener.class.php');
require_once(WCF_DIR.'lib/system/style/StyleManager.class.php');

// author: Suat Secmen (http://firepanther.pro)

class FPTooltip implements Eventlistener {
    /**
     * @see EventListener::execute()
     */
    public function execute ($eventObj, $className, $eventName) {
        if (MODULE_FPTOOLTIP)
            WCF::getTPL()->append(
                'specialStyles',
                '<script type="text/javascript">var FPToolTipOptions = new Array('.
                    '"'.escapeString(FPTOOLTIP_BACKGROUND).'", '.
                    '"'.escapeString(FPTOOLTIP_BORDER).'", '.
                    intval(FPTOOLTIP_OPACITY).', '.
                    intval(FPTOOLTIP_RADIUS).', '.
                    '"'.escapeString(FPTOOLTIP_FONTCOLOR).'", '.
                    intval(FPTOOLTIP_BORDERWIDTH).
                ')</script>'.
                '<script type="text/javascript" src="'.RELATIVE_WCF_DIR.'js/FPTooltip.class.js"></script>'
            );
    }
}
?>

Ich weiß, dass das nur nichtiger Schnick-Schnack ist den niemand braucht, aber ich würde trotzdem gerne erfahren aus welchem Grund das Plugin nicht mehr läuft.

LG
Jannes1503

[L]

Deadend

[Jannes1503]

Danke dir

Sobald jQuery eingebunden ist, erscheinen diese Fehlermeldungen:

Code:

[18:28:29.842] TypeError: L.dispatchEvent is not a function @ http://lpt.broarts.de/admin/js/3rdParty/protoaculous.1.8.2.min.js:1

Code:

[18:28:30.702] NS_ERROR_ILLEGAL_VALUE: Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIDOMXPathEvaluator.evaluate] @ http://lpt.broarts.de/admin/js/3rdParty/protoaculous.1.8.2.min.js:1

Leider kann ich damit nichts anfangen.

[FiHaZe]

Sry falls ich bullshit schreibe, bin mehr der Applikationsentwickler und kann Webmässig nur html, css und php.

(04.09.2012)Jannes1503 schrieb:  

Code:

[18:28:29.842] TypeError: L.dispatchEvent is not a function @ http://lpt.broarts.de/admin/js/3rdParty/protoaculous.1.8.2.min.js:1

L.dispatchEvent wird als eine Funktion verwendet, ist aber keine.

(04.09.2012)Jannes1503 schrieb:  

Code:

[18:28:30.702] NS_ERROR_ILLEGAL_VALUE: Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIDOMXPathEvaluator.evaluate] @ http://lpt.broarts.de/admin/js/3rdParty/protoaculous.1.8.2.min.js:1

Du hast eine falsche Variabel verwendet.

[Jannes1503]

Danke euch beiden

Ich habe das Problem durch Google gelöst.
Offentsichtlich liegt hier ja ein Konflikt zwischen 2 Frameworks vor, die beide "$" benutzen. (Ist doch richtig, oder?)
Ich habe einfach

Code:

jQuery.noConflict();

eingebunden um jQuery im non conflict mode aufzurufen.
Dann einfach im Script '$' gegen 'jQuery' getauscht und es läuft.

[emosewA]

Etwas genauer: Woltlab benutzt die JavaScript Bibliothek prototype. Dieses verwendet die Variablen $ (document.getElementById) und $$ (document.querySelector). jQuery überschreibt dieses $ allerdings, und dann hat es eine andere Bedeutung. Ich empfehle dir aber jQuery wieder herauszuschmeißen! Wegen diesem kleinen Script eine zweite Bibliothek einzubinden, die exakt das gleiche tut wie prototype ist ineffizient. Verwende lieber das hier:

Code:

document.observe("dom:loaded", function() {
  (function() {
    var scrollTop = function() {
      Effect.ScrollTo($$('body')[0], { duration:'2' });
    };
    
    $$('a[href="#top"]').each(function (el) {
      el.observe("click", function(e) {
        scrollTop();
        e.preventDefault ? e.preventDefault() : event.returnValue = false;
      });
    });
  })();
});

Macht das gleiche, nur ohne jQuery.

[Jannes1503]

Ich fühl mich leicht dämlich.

Danke, kennt vielleicht jemand eine Methode javascript zu erlernen? Sei es ein Buch, eine Tutorial-Reihe oder sonstiges.

[FiHaZe]

(05.09.2012)Jannes1503 schrieb:  Ich fühl mich leicht dämlich.

Danke, kennt vielleicht jemand eine Methode javascript zu erlernen? Sei es ein Buch, eine Tutorial-Reihe oder sonstiges.

Vielleicht findest du hier etwas.
http://www.galileocomputing.de

Sonst gehst du in nem Bücherladen oder suchst im Internet nach Tutorials.

[emosewA]

(05.09.2012)Jannes1503 schrieb:  Ich fühl mich leicht dämlich.

Musst du nicht
Kann ja nicht jeder wissen. Meine Lösung verwendet außerdem prototype und script.aculo.us (weils halt in Woltlab benutzt wird) und damit muss man sich nun wirklich nicht auseinandersetzen. jQuery ist um einiges schöner.

(05.09.2012)Jannes1503 schrieb:  Danke, kennt vielleicht jemand eine Methode javascript zu erlernen? Sei es ein Buch, eine Tutorial-Reihe oder sonstiges.

Internet würde ich sagen. Aber bitte w3schools meiden! Die erzählen ziemlich viel Schwachsinn. Absolute Pflicht ist es auch dieses Dokument hier zu "studieren". Mit JavaScript kann man sehr viel Scheiße bauen, und da stehen so die wichtigsten Regeln drin an die man sich halten sollte. Wenn man schon ein paar Skills aufgebaut hat, ist auch dieses Quiz sehr interessant. Das sollte man unbedingt drauf haben! Da ist auch Dmitry Baranovskys JS Test verlinkt. Auch angucken! Aber wie gesagt, erst später. Als Anfänger kann man das noch nicht wissen.