Archive

Posts Tagged ‘Firefox’

Stolperfalle: Ids bei clientseitigen Events

Heute bin ich mal wieder über einen Fehler gestolpert, welchen ich schonmal begangen habe, und dadurch mal wieder viel Zeit verloren habe. Deshalb landets jetzt hier, in der Hoffnung dass ichs mir auch endlich mal merke =)

Ich hatte ein xp:div Element, welches eingebettet einen Text und ein Bild hatte. Mit einem onMouseover Event wollte ich die URL des zu verwendeten Bildes ändern. Leider reagierte das Element auf keinen MouseOver.

Dies kann man übrigens auf 2 Arten erreichen:

document.getElementById("#{id:zielElement}").src = "url_zum_bild.gif";

oder wenn man sich auf das aktuelle Element beziehen möchte, auf welchem das Event liegt:

try{
	if (thisEvent.originalTarget) {
		thisEvent.originalTarget.src = "btn_go_Hover.gif";
	} else {
		thisEvent.srcElement.src = "btn_go_Hover.gif";
	}
}catch(e){}

Die If-Abfrage hat den Hintergrund dass der Internet Explorer “srcElement” braucht und nicht auf originalTarget zugreifen kann.

Dass mein xp:div auf kein Event gehört hat lag einfach daran dass mein xp:div Element keine ID hatte.

MERKEN: Elemente mit einem clientseitgen Event brauchen IMMER eine ID!!

Btw: Wo wir gerade bei xp:div sind:

Mann sollte immer, wenn man nur ein einfaches div in der Seite braucht, xp:div verwenden. xp:panel hat zwar das gleiche Ergebnis, allerdings werden bei xp:panel noch ein paar Sachen im Hintergrund geladen die es ermöglichen eine Datasource anzubinden. Wenn man dies beachtet kann man noch ein paar Quäntchen Performance aus der Applikation herausholen. Besonders wenn man diese Elemente in einem xp:repeat loopt.

Tools: Austauschen von schlechten Website-Designs im eigenen Browser

Ab und an kommt es ja mal vor, dass man auf eine Website gerät, auf der man augenblicklich Augenkrebs bekommt. Wenn das nun eine Seite ist die man recht häufig nutzen möchte, wie z.B. ein Forum, dann ist das natürlich sehr ärgerlich.

Mit ein paar Kenntnissen in Webdesign, bzw. dem Schreiben von CSS-Stylesheets, muss das aber nicht sein.
Firefox bietet die Möglichkeit an eigene Styles für bestimmte Seiten zu definieren. Dazu muss einfach nur eine Datei im Firefox ProfilVerzeichnis angelegt werden.

Die Datei heißt userContent.css und muss sich in einem Verzeichnis namens “Chrome” befinden.

Bei Windows 7 sähe das in etwa so aus:

C:\Users\Benutzername\AppData\Roaming\Mozilla\Firefox\Profiles\profilnummer.default\Chrome\userContent.css

Dort kann man mit Firefox-spezifischen CSS Befehlen eine Domain ansteuern und CSS Definitionen kapseln:

@-moz-document domain(“Domain-mit-schlechtem-Design.com”) {
.screwedStyleClass{…}
}

Nun kann man seine eigenen Styles für jede beliebige Seite definieren. Das ganze funktioniert übrigens auch im Aurora, wobei es da Diskrepanzen bei der Interpretierung des Stylesheets geben kann. Bei einem Anwendungsfall bei mir sah das Ergebnis im Aurora anders aus als im Firefox. Da Aurora und Firefox bei paralleler Installation auf das gleiche profil zugreifen muss man die Styles dementsprechend auch nur einmal ablegen.

Wer genauere Informationen zu diesem Thema und rund um das Thema Firefox haben möchte, dem kann ich diese Seite hier empfehlen:

Holger Metzger – Mozilla Tipps & Tricks

Diese Geschichte mit der userContent.css befindet sich in der Mozilla FAQ unter Kapitel 9

Tools: Mozilla Aurora 11

28/12/2011 2 comments

Mozilla hat mit dem Aurora 11 eine, meiner Meinung nach, sehr schöne Version herausgebracht. Ich bin bisher noch nicht dazu gekommen ihn komplett zu testen, aber eine Funktion ist mir direkt ins Auge gefallen. Im Paket der Web-Developer Tools gibt es im Untersuchen-Werkzeug eine 3D-Funktion. Damit kann man sich seine Seite in 3D anschauen. Alle Elemente werden als Box gestapelt angezeigt. Dadurch kann man sehr intuitiv und einfach bestimmte Konstrukte und Elemente genauer anschauen, ohne sich durch Code durchwühlen zu müssen oder zu hoffen dass man mit der Maus das richtige Element erwischt, was besonders bei stark geschachtelten Konstrukten schwierig und zeitaufwändig sein kann. Natürlich beinhaltet das Paket nicht alle Funktionen die man mit dem Firebug oder den Web Development Tools (das Plugin) hat, aber als Ergänzung definitiv zu empfehlen.

Hier ein Screenshot als erster Eindruck von der Funktion:

Allgemein kann ich diese Version bisher sehr empfehlen, alle Plugins welche ich, privat oder auf der Arbeit, verwende, funktionieren problemlos in der neuen Version. Auch fällt die allgemeine Performance positiv auf. Das ist natürlich nur mein rein subjektiver Eindruck.

Bekommen kann man die Version hier.

Categories: Tools Tags: , , , , ,
%d bloggers like this: