Bronies.de

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" Pinkie happy

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)

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)

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

Deadend

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.

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.

Danke euch beiden Twilight smile

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.

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.

Ich fühl mich leicht dämlich. FS grins

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

(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.

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

Musst du nicht Pinkie happy

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.

Jannes1503

L

Jannes1503

FiHaZe

Jannes1503

emosewA

Jannes1503

FiHaZe

emosewA