• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

window.event Problem im Firefox

W

w0rck

Neues Mitglied
Hey Leute, hab ein kleines Problem mit meinem Code. Die Seite findet ihr unter http://w0rck.bplaced.net/Stadt/
Das Problem ist, dass sie Seite unter IE und Chrome so dargestellt wird wie sie soll aber unter FF nichts funktioniert. ;) Hab die leise Vermutung das es mit window.event zu tun hat. Kann mir jemand helfen? Hab den Code aus einer der .js hier angefügt.

Code: 
var whichstyle = 1;

function onbutton1() {

    if (whichstyle == 1) {

        document.getElementById("button1").style.backgroundColor = "#726c72";
        document.getElementById("leiste").style.backgroundColor = "#726c72";


    } else if (whichstyle == 2) {

        document.getElementById("button1").style.backgroundColor = "#a59e31";
    document.getElementById("leiste").style.backgroundColor = "#a59e31";
    }

}



function offbutton1() {

    if (whichstyle == 1) {

        document.getElementById("button1").style.backgroundColor = "#4a464a";

        document.getElementById("leiste").style.backgroundColor = "#4a464a";

        document.getElementById("button1").style.borderBottom = "1px solid #888";

    } else if (whichstyle == 2) {

        document.getElementById("button1").style.backgroundColor = "#d6c900";
        document.getElementById("leiste").style.backgroundColor = "#d6c900";


        document.getElementById("button1").style.borderBottom = "1px solid #888";

    }

}



function onbutton() {

    if (whichstyle == 1) {

        document.getElementById(window.event.srcElement.id).style.backgroundColor = "#726c72";

    } else if (whichstyle == 2) {

        document.getElementById(window.event.srcElement.id).style.backgroundColor = "#a59e31";

    }

}



function offbutton() {

    if (whichstyle == 1) {

        document.getElementById(window.event.srcElement.id).style.backgroundColor = "#4a464a";

    } else if (whichstyle == 2) {

        document.getElementById(window.event.srcElement.id).style.backgroundColor = "#d6c900";

    }



}



function switchstyle() {

    if (window.event.srcElement.id == "aa") {

        document.getElementById("aa").style.border = "2px solid #000000";

        document.getElementById("bb").style.border = "";

        document.getElementsByTagName('link')[0].href = "css/style.css";

        document.getElementById("button1").style.backgroundColor = "#4a464a";

        document.getElementById("button2").style.backgroundColor = "#4a464a";

        document.getElementById("button3").style.backgroundColor = "#4a464a";

        document.getElementById("button4").style.backgroundColor = "#4a464a";

        document.getElementById("button5").style.backgroundColor = "#4a464a";

        document.getElementById("button6").style.backgroundColor = "#4a464a";





        whichstyle = 1;



    } else if (window.event.srcElement.id == "bb") {

        document.getElementById("bb").style.border = "2px solid #FFFFFF";

        document.getElementById("aa").style.border = "0px";

        document.getElementsByTagName('link')[0].href = "css/alternativestyle.css";

        document.getElementById("button1").style.backgroundColor = "#d6c900";

        document.getElementById("button2").style.backgroundColor = "#d6c900";

        document.getElementById("button3").style.backgroundColor = "#d6c900";

        document.getElementById("button4").style.backgroundColor = "#d6c900";

        document.getElementById("button5").style.backgroundColor = "#d6c900";

        document.getElementById("button6").style.backgroundColor = "#d6c900";





        whichstyle = 2;



    }

}



var xmlHttpObject = false;



if ( typeof XMLHttpRequest != 'undefined') {

    xmlHttpObject = new XMLHttpRequest();

}

if (!xmlHttpObject) {

    try {

        xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP");

    } catch(e) {

        try {

            xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");

        } catch(e) {

            xmlHttpObject = null;

        }

    }

}



function loadContent() {

    loadhtml();

    loadgalery();

}



function loadgalery() {

    if (window.event.srcElement.id == "button2") {



        document.images[1].src = "img/poi2/1.jpg";

        document.getElementById('1').href = "img/poi2/1.jpg";



    }

    if (window.event.srcElement.id == "button3") {



        document.images[3].src = "img/poi2/1.jpg";

        document.getElementById('1').href = "img/poi2/1.jpg";



    }



    if (window.event.srcElement.id == "button4") {



    }

    if (window.event.srcElement.id == "button5") {



    }

    if (window.event.srcElement.id == "button6") {



    }

}



function loadhtml() {

    if (window.event.srcElement.id == "button2") {

        xmlHttpObject.open('get', 'pages/poi1.html');

    } else if (window.event.srcElement.id == "button3") {

        xmlHttpObject.open('get', 'pages/poi2.html');

    } else if (window.event.srcElement.id == "button1") {

        document.getElementById("button1").style.borderBottom = "0px";

    } else if (window.event.srcElement.id == "button4") {

        xmlHttpObject.open('get', 'pages/poi3.html');

    } else if (window.event.srcElement.id == "button5") {

        xmlHttpObject.open('get', 'pages/poi4.html');

    } else if (window.event.srcElement.id == "button6") {

        xmlHttpObject.open('get', 'pages/poi5.html');

    } else if (window.event.srcElement.id == "startseite") {

        xmlHttpObject.open('get', 'pages/startseite.html');

    } else if (window.event.srcElement.id == "impressum") {

        xmlHttpObject.open('get', 'pages/impressum.html');

    } else if (window.event.srcElement.id == "feedback") {

        xmlHttpObject.open('get', 'pages/feedback.html');

    }

    xmlHttpObject.onreadystatechange = handleContent;

    xmlHttpObject.send(null);

    return false;

}



function handleContent() {

    if (xmlHttpObject.readyState == 4) {

        document.getElementById('textfeld').innerHTML = xmlHttpObject.responseText;

    }

}
 
Danke, weiß selber nicht warum ich sowas vergessen habe. Allerdings löst dies nicht mein Problem. Andere Ideen?
@threadi Die Seite ist by the way nun valide!
 
Hab die leise Vermutung das es mit window.event zu tun hat. Kann mir jemand helfen?
Zum Vergrößern anklicken....

Wieso "leise Vermutung"? Das wusstest du doch bereits nach einem Blick in die Konsole, oder?

Das Script besteht zum überwiegenden Teil aus Redundanzen und ist von der Syntax her Anno Tobak. Wenn du nur Styles switchen willst, mache das mit jQuery und addClass(). Damit lassen sich deine 95 Zeilen Code auf 5-10 verringern.
 
diese Seite ist mein erstes richtiges Web Projekt. Logischerweise kann ich nicht gleich alles richtig machen. Dankeschön für den Tipp mit jquery. Allerdings ist das nicht des Problems Lösung. Wenn man sich den Text anschaut erkennt man das es sich hierbei nicht nur um einen style switch handelt. Hast du die nur die ersten Zeilen angeschaut? Kann mir irgendjemand erklären was genau Firefox hier nicht annimmt?
 
window.event existiert in firefox nicht.

jQuery ist browserunabhängig also wäre es schon die Lösung deines Problem - ansonsten musst du halt deinen code anpassen

So z.b.
 
Danke für deine Antwort thecain. Ich verstehe nur nicht ganz wie ich das nun abändern muss. Kannst du mir vielleicht genauer was dazu sagen?
 
Code: 
function onbutton(e) {
    if (whichstyle == 1) {

        document.getElementById(e.target.id).style.backgroundColor = "#726c72";

    } else if (whichstyle == 2) {

        document.getElementById(e.target.id).style.backgroundColor = "#a59e31";

    }

}

Wäre mal für eine Funktion entsprechend w3c


/e Beim Aufruf dann natürlich auch entsprechend event der Funktion übergeben
/e2: Syntax error :(
 
Zuletzt bearbeitet:
Hab das ganze ja auch so probiert wie du beschreibst. Also in der .html onmouseover="onbutton(e)" eingesetzt und den Code der .js angepasst. Allerdings tut sich auch da nichts :/
// Link ist nun

w0rck.bplaced.net/Stadt2/
 
Bei mir ist keine zuviel. Daran liegt es leider nicht.


In der Console steht so auch nur "e is not defined" drinnen. Ich merk schon das ich hier ziemlichen mist baue.
 
Wie kann man denn per jQuery onclick entscheiden welches Element die Funktion ausführt und je nach dem bestimmten Text aus einer .html nachladen?

Entschuldige diese ganzen Fragen. :/

onbutton(event) ging auch nicht.
 
Doku

Da steht alles gut beschrieben mit beispielen. Braucht vielleicht ein bisschen einarbeitungszeit, dafür hast du dann alles browserübergreifend
 
Ich merk schon, mein Feiertag wird jetzt mit Kaffee und dieser Doku vollgestopft. Danke für deine Antworten. Man wird am Anfang des Studiums doch ziemlich ins kalte Wasser geworfen. Ich melde mich wenn ich mich ein wenig eingearbeitet habe falls das okay ist.
 
Wie kann man denn per jQuery onclick entscheiden welches Element die Funktion ausführt und je nach dem bestimmten Text aus einer .html nachladen?
Zum Vergrößern anklicken....

Meinst du tatsächlich: welches (unbestimmte) Element die Funktion ausführt? Dann wäre es, wie bereits erwähnt, event.target. Aber geht es nicht eher darum, welches (festgelegte) Element die Funktion ausführen soll?

Um dir etwas konzeptionelle Unterstützung zu geben:

HTML:
HTML: 
<div id="switcher">
  <p data-style="grey-style"></p>
  <p data-style="black-style"></p>
</div>

jQuery:
Code: 
$('#switcher p').on('click', function() { // Beim Klick auf das Element
  var style = $(this).data('style'); // schreibe dessen data-Attribut in style
  if (style == 'grey-style' ) { //Wenn der aktuelle style grey ist
     // manipuliere das Styling mit Funktionen wie addClass(), removeClass() und css()
   } else { // Wenn der aktuelle style black ist ...
    ..............
  }
})
 
Du könntest mittels der if-else-Abfrage natürlich auch die Stylesheets im Head tauschen. Deshalb meinte ich, dass sich so etwas mit wenigen Zeilen Code lösen lässt.

Was deine Ajax-Funktion betrifft, überlege erstmal:

- Was soll den Ajax-Call auslösen?
- Was soll die Funktion tun?
- Wird dazu tatsächlich Ajax benötigt?
 
@Tronjer Eigentlich meine ich es so, dass wie jetzt bei meinem code auf w0rck.bplaced.net/Stadt/ in Chrome ausgeführt, onclick auf die Buttons in der Navi was in das Textfeld geladen wird und die Bilder in der Slideshow ausgetauscht werden. Nur eben Browserübergreifend.. Ich war ziemlich stolz auf mich als das alles funktionierte, zumindest bis dann jemand die Seite mit FF geöffnet hat.

Jetzt habe ich das Gefühl ich muss alles neu schreiben ^^
Die Hover Effekte habe ich nun in jQuery geschrieben (hoffe das sage ich richtig). Ich werde mir jetzt etwas über addClass() usw. aneignen, denn momentan weiß ich noch nicht was du meinst.
 
Um Bilder auszutauschen reicht so etwas wie:
Code: 
$('img').prop('src', 'new_img.png');

Falls dein Slider damit nicht umgehen kann, musst du das Event stoppen und restarten. Meistens bieten diese Plugins bereits eigene Methoden an. Ajax ist hier nicht wirklich notwendig und falls doch, wäre auch das mit jQuery einfacher, zumal dadurch die Browserkompatibilität sichergestellt ist.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben