Re: JavaScript und IE

enzinger.th (AT) googlemail (DOT) com wrote:

Welchen Fehler habe ich gemacht?

Du hast hier ca. 340 Zeilen(!) grösstenteils unkommentierten und mangels
Nennung der exakten Fehlermeldung gänzlich irrelevanten Quelltextes
abgekippt, ohne Dich vorher ausreichend mit dem Thema auseinandergesetzt
zu haben.

http://dcljs.de/


PointedEars
--
CSS ist keine Darstellungsvorschrift, sondern ein Darstellungsvorschlag
mit eingebautem "Ich weiß es aber besser"-Recht auf Seiten des userAgent.

(Georg Maaß in dcljs <amuna7$9fbuu$1 (AT) ID-3551 (DOT) news.dfncis.de>)

Servus Thomas,

Welchen Fehler habe ich gemacht?

Du hast hier ca. 340 Zeilen(!) grösstenteils unkommentierten und mangels
Nennung der exakten Fehlermeldung gänzlich irrelevanten Quelltextes
abgekippt, ohne Dich vorher ausreichend mit dem Thema auseinandergesetzt
zu haben.

lol du hast natürlich recht. Ich war gestern einfach nur noch
frustriert ;-). Entschuldigung. Auf ein zweistes mal.

Ich hab mal ein Test-Verzeichnis erstellt und ein paar Pics
geschossen. http://www.enzinger-th.de/test/test.html

1.) In den ersten beiden Bilder kommt mir das Menü etwas spanisch vor.
Firefox und IE 5.5 (PNG-Bilder mit falschem Gamma) stellen dies wie
erwünscht da. Jedoch der aktuelle IE erfindet plötzliche eine
Hintergrundfarbe die nirgendswo definiert ist ??? Könnte dies an dem
PNG-Hintergrundbild liegen?

2.) Bei den nächsten zwei Bilder sind die Bildschirme nach dem Aufruf
der Seite zu sehen. Wie bereits gewohnt stellt der Firefox alles
richtig dar und der IE nicht! Nach einem Klick soll sich nun der
Hintergrund leicht verdunkeln (div-tag mit Background-Image PNG-
Format) und das Bild soll sich im Browser zentrieren. Die
Positionierung erfolgt mittels "fixed" -> der Benutzer soll keine
Aktion ausführen können, bis er das Image wieder schließt.
Nach mehrmaligen Test folgt -> Firefox gut ; IE schlecht :-(

Mein Firefox meldet keine Fehler bzw. ich kenne keinen Weg die
JavaScirpt-Console zu öffnen (ist ja auch nicht notwendig). Die
Fehlermeldungen des IE kann ich nur schwer lessen, aber ich konnte
dennoch eine "mögliche" Fehlerquelle identifizieren, die für mich nach
den DOM-Regeln korrekt ist.
<code>
...
el = document.getElementById(divIdexpandImageToBrowserS ize);
els = el.style;
...
els.width = ""+ w +"px"; // Fehler laut IE
els.height = ""+ h +"px"; // Fehler laut IE
els.visibility = true; // Objekt nicht gefunden laut IE
...
</code>

Irgendwie mekert der IE solchen Stellen? Ist dieser vielleicht nicht
DOM-Kompatible? Früher musste man ja mit get und set arbeiten. Dies
müsste laut http://de.selfhtml.org/javascript/ob...#set_attribute
ab dem IE 5.5 behoben bzw. aufgenommen sein. Mein IE 5.5 auf meinen
alten Rechner setzt dies auch korrekt um! Aber der neue IE nicht mehr!

Hier noch mal der JavaScript code mit Kommentar :-)

<code>
/**
* JavaScript
*
* @Author Enzinger Thomas
* @Version 1.0
*
*/


/**
* Bild im Browserfenster vergrössern
*
* <div id="expandImageToBrowserSize">
* <table id="tableexpandImageToBrowserSize">
* <tr>
* <td class="expandImageToBrowserSize1">
* <img src="" alt="" id="imgIdexpandImageToBrowserSize"
onmouseover="this.style.cursor = 'pointer'"
onmouseoout="this.style.cursor = 'auto'"
onclick="closeImageToBrowserSize()" />
* </td>
* </tr>
*
* <tr>
* <td class="expandImageToBrowserSize2">
* <a href="javascript:closeImageToBrowserSize()"
id="aIdexpandImageToBrowserSize" alt="Fenster schliessen"
class="expandImageToBrowserSize" onmouseover="this.style.cursor =
'pointer'" onmouseout="this.style.cursor = 'auto'"
onclick="closeImageToBrowserSize()">Fenster schliessen</a>
* </td>
* </tr>
* </table>
* </div>
*
* ################################################## ############
* ################################################## ############
*
* Akktivieren mit:
* expandImageToBrowserSize(imageURL, altInfo);
*
* Init.:
* initexpandImageToBrowserSize();
*
*/

// Verweise auf die Id's im HTML-Dokument
var divIdexpandImageToBrowserSize = "expandImageToBrowserSize";
var imgIdexpandImageToBrowserSize = "imgIdexpandImageToBrowserSize";
var aIdexpandImageToBrowserSize = "aIdexpandImageToBrowserSize";
var tableexpandImageToBrowserSize = "tableexpandImageToBrowserSize";

// Aktiviert (true) oder unsichtbar (false)
var statusexpandImageToBrowserSize = false;
// Wert / 2 = Mindestabstand des Bildes vom Browserrand
var randexpandImageToBrowserSize = 100;

// Aktivieren
function expandImageToBrowserSize(imageURL, altInfo) {
// Bild laden
im = new Image();
im.src = imageURL;
im.alt = altInfo;

// Eingaben sperren
el = document.getElementById(divIdexpandImageToBrowserS ize);
els = el.style;

// Panel abmaße
h = parseInt(window.innerHeight);
w = parseInt(window.innerWidth);

els.position = "fixed";
els.left = "0px";
els.top = "0px";
els.width = ""+ w +"px";
els.height = ""+ h +"px";
els.visibility = true;

// Bild ins HTML transferieren
pic = document.getElementById(imgIdexpandImageToBrowserS ize);
pic.src = im.src;
pic.width = im.width;
pic.height = im.height
pic.alt = altInfo;

statusexpandImageToBrowserSize = true;
setexpandImageToBrowserSizePos();

im = null;
}

// Minimieren bzw. Deaktivieren
function closeImageToBrowserSize() {
pic = document.getElementById(imgIdexpandImageToBrowserS ize);
pic.src = "";
pic.alt = "";

statusexpandImageToBrowserSize = false;
setexpandImageToBrowserSizePos();
}


function setexpandImageToBrowserSizePos() {
// Verweise init.
el = document.getElementById(divIdexpandImageToBrowserS ize);
els = el.style;
im = document.getElementById(imgIdexpandImageToBrowserS ize);
ims = im.style;
a = document.getElementById(aIdexpandImageToBrowserSiz e);
as = a.style;
table = document.getElementById(tableexpandImageToBrowserS ize);
tables = table.style;

h = parseInt(window.innerHeight);
w = parseInt(window.innerWidth);

pich = parseInt(im.height);
picw = parseInt(im.width);
r = picw/pich;

if(statusexpandImageToBrowserSize == true) { // Sichtbar
// CSS-Eigenschaften setzen
els.position = "fixed";
tables.position = "fixed";

// div-tag positionieren (Grauer Hintergrund)
els.left = "0px";
els.top = "0px";
els.width = window.innerWidth;
els.height = window.innerHeight;

// Bild ins Fenster einpassen
picw2 = 0;
pich2 = 0;

if( picw > (w - randexpandImageToBrowserSize) ) {
picw2 = w - randexpandImageToBrowserSize;
pich2 = Math.round(picw2/r);
}

if( pich > (h - randexpandImageToBrowserSize) && pich2 == 0 || pich2

(h - randexpandImageToBrowserSize) ) {
pich2 = h - randexpandImageToBrowserSize;

picw2 = Math.round(pich2*r);
}

if(picw2 > 0 || pich2 > 0) {
picw = picw2;
pich = pich2;
r = picw/pich;
}

ims.width = ""+ picw +"px";
ims.height = ""+ pich +"px";

// Bild mit Link über die Tabelle positionieren
tables.left = ""+ Math.round((w - picw) /2) +"px";
tables.top = ""+ Math.round((h - pich - 20) /2 ) +"px";

els.visibility = true;
tables.visibility = true;
ims.visibility = true;
as.visibility = true;

} else {
// CSS-Eigenschaften setzen
els.visibility = false;
tables.visibility = false;
ims.visibility = false;
as.visibility = false;

els.position = "absolute";
tables.position = "static";

els.top = "0px";
els.left = "-100000px";

im.src = "";
im.alt = "";
ims.width = "";
ims.height = "";

tables.left = "";
tables.top = "";
}
}


function initexpandImageToBrowserSize() {
closeImageToBrowserSize();
}


/**
* ++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++
+++++++++++++++++++++++++++++++
*
************************************************** *************************************************
*
* Ende "Bild im Browserfenster vergrössern
*
*
************************************************** *************************************************
* ++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++
+++++++++++++++++++++++++++++++
*/
</code>

enzinger.th (AT) googlemail (DOT) com schrieb:

Mein Firefox meldet keine Fehler bzw. ich kenne keinen Weg die
JavaScirpt-Console zu öffnen (ist ja auch nicht notwendig).

Mein Firefox hat unter Extras eine Fehler-Konsole. Deiner nicht?

Die
Fehlermeldungen des IE kann ich nur schwer lessen, aber ich konnte
dennoch eine "mögliche" Fehlerquelle identifizieren, die für mich nach
den DOM-Regeln korrekt ist.

Es gibt Debugger, die der IE aufrufen kann. Ich glaube, der Windows Script
Debugger kann so etwas:

http://www.microsoft.com/downloads/d...displaylang=de

Dann muss unter Extras-Internetoptionen-Erweitert noch das Skriptdebugging
aktiviert werden.

els.width = ""+ w +"px"; // Fehler laut IE
els.height = ""+ h +"px"; // Fehler laut IE

Trickreich, trickreich ... vielleicht zu trickreich. Wie wäre es denn mit:

els.width = String(w) + 'px';
els.height = String(h) + 'px';

els.visibility = true; // Objekt nicht gefunden laut IE

Man möge mich prügeln, aber visibility ist ein String und zwar "visible"
oder "hidden". Richtig wäre also:

els.visibility = 'visible';

Microsoft hat übrigens auch eine Dokumentation:

http://msdn2.microsoft.com/en-us/lib...36(VS.85).aspx

HTH
viele grüße
ralph

Ralph 'rkhb' Bauer wrote:

enzinger.th (AT) googlemail (DOT) com schrieb:
els.width = ""+ w +"px"; // Fehler laut IE
els.height = ""+ h +"px"; // Fehler laut IE

Trickreich, trickreich ... vielleicht zu trickreich. Wie wäre es denn mit:

els.width = String(w) + 'px';
els.height = String(h) + 'px';

UUOS.

els.width = w + 'px';
els.height = h + 'px';

Der Fehler liegt aber mit an Sicherheit grenzender Wahrscheinlichkeit nicht
an der überflüssigen Konkatenation noch an den anderen Stringbegrenzern,
sondern am Wert von `w' und `h'. Möglicherweise hat der OP auch ein `+'
zuviel geschrieben und w + +"px" == w + "NaN" erzeugt.


PointedEars
--
Lass es mich so ausdrücken: Eigentlich werde ich keine Zeit haben, aber die
fürs Usenet übliche nehme ich mir. Nähme ich mir noch zusätzlich was vor,
würde ich womöglich das tun, um nicht das, das ich tun sollte, tun zu müssen.
-- Christoph Päper in <darw/> <avl5ul$30fp$1 (AT) ariadne (DOT) rz.tu-clausthal.de>

els.visibility = 'visible';

Danke für den Tipp, das hab ich doch glatt übersehen.

On 3 Feb., 18:57, Thomas 'PointedEars' Lahn <PointedE... (AT) web (DOT) de>
wrote:

Ralph 'rkhb' Bauer wrote:
enzinger... (AT) googlemail (DOT) com schrieb:
els.width = ""+ w +"px"; // Fehler laut IE
els.height = ""+ h +"px"; // Fehler laut IE

Trickreich, trickreich ... vielleicht zu trickreich. Wie wäre es denn mit:

els.width = String(w) + 'px';
els.height = String(h) + 'px';

UUOS.

els.width = w + 'px';
els.height = h + 'px';

Der Fehler liegt aber mit an Sicherheit grenzender Wahrscheinlichkeit nicht
an der überflüssigen Konkatenation noch an den anderen Stringbegrenzern,
sondern am Wert von `w' und `h'. Möglicherweise hat der OP auch ein `+'
zuviel geschrieben und w + +"px" == w + "NaN" erzeugt.

Stimmt auch.

Ich hab auf der Doku von Thomas etwas nachgelesen und der Code läuft
bereits ohne Fehler ;-)

Hier der code:

/**
* JavaScript
*
* @Author Enzinger Thomas
* @Version 1.0
*
*/


/**
* Bild im Browserfenster vergrössern
*
* <div id="expandImageToBrowserSize">
* <table id="tableexpandImageToBrowserSize">
* <tr>
* <td class="expandImageToBrowserSize1">
* <img src="" alt="" id="imgIdexpandImageToBrowserSize"
onmouseover="this.style.cursor = 'pointer'"
onmouseoout="this.style.cursor = 'auto'"
onclick="closeImageToBrowserSize()" />
* </td>
* </tr>
*
* <tr>
* <td class="expandImageToBrowserSize2">
* <a href="javascript:closeImageToBrowserSize()"
id="aIdexpandImageToBrowserSize" alt="Fenster schliessen"
class="expandImageToBrowserSize" onmouseover="this.style.cursor =
'pointer'" onmouseout="this.style.cursor = 'auto'"
onclick="closeImageToBrowserSize()">Fenster schliessen</a>
* </td>
* </tr>
* </table>
* </div>
*
* ################################################## ############
* ################################################## ############
*
* Akktivieren mit:
* expandImageToBrowserSize(imageURL, altInfo);
*
* Init.:
* initexpandImageToBrowserSize();
*
*/
var divIdexpandImageToBrowserSize = "expandImageToBrowserSize";
var imgIdexpandImageToBrowserSize = "imgIdexpandImageToBrowserSize";
var aIdexpandImageToBrowserSize = "aIdexpandImageToBrowserSize";
var tableexpandImageToBrowserSize = "tableexpandImageToBrowserSize";

var statusexpandImageToBrowserSize = false;
var randexpandImageToBrowserSize = 100;


function expandImageToBrowserSize(imageURL, altInfo) {
// Bild laden
im = new Image();
im.src = imageURL;
im.alt = altInfo;

// Eingaben sperren
el = document.getElementById(divIdexpandImageToBrowserS ize);
els = el.style;

h = parseInt(window.innerHeight);
w = parseInt(window.innerWidth);

// IE
if(navigator.appVersion.indexOf("MSIE") > -1) {
w = parseInt(screen.availWidth);
h = parseInt(screen.availHeight) - 200;

}

els.position = "fixed";
els.left = "0px";
els.top = "0px";
els.width = ""+ parseInt(screen.width) +"px";
els.height = ""+ parseInt(screen.height) +"px";
els.visibility = "visible";

pic = document.getElementById(imgIdexpandImageToBrowserS ize);
pic.src = im.src;
pic.style.width = ""+ parseInt(im.width) +"px";
pic.style.height = ""+ parseInt(im.height) +"px";
pic.alt = altInfo;

statusexpandImageToBrowserSize = true;
setexpandImageToBrowserSizePos();

im = null;
}


function closeImageToBrowserSize() {
pic = document.getElementById(imgIdexpandImageToBrowserS ize);
pic.src = "";
pic.alt = "";

statusexpandImageToBrowserSize = false;
setexpandImageToBrowserSizePos();
}


function setexpandImageToBrowserSizePos() {
el = document.getElementById(divIdexpandImageToBrowserS ize);
els = el.style;
im = document.getElementById(imgIdexpandImageToBrowserS ize);
ims = im.style;
a = document.getElementById(aIdexpandImageToBrowserSiz e);
as = a.style;
table = document.getElementById(tableexpandImageToBrowserS ize);
tables = table.style;

h = parseInt(window.innerHeight);
w = parseInt(window.innerWidth);

// IE
if(navigator.appVersion.indexOf("MSIE") > -1) {
w = parseInt(screen.availWidth);
h = parseInt(screen.availHeight) - 200;

}
//alert("Browserfenster: "+w+" x "+h);

pich = parseInt(im.height);
picw = parseInt(im.width);
r = picw/pich;

if(statusexpandImageToBrowserSize == true) {
// CSS-Eigenschaften setzen
els.position = "fixed";
tables.position = "fixed";

els.left = "0px";
els.top = "0px";
els.width = ""+ parseInt(screen.width) +"px";
els.height = ""+ parseInt(screen.height) +"px";

// Bild ins Fenster einpassen
picw2 = 0;
pich2 = 0;

//alert(picw+"x"+pich+"\n"+picw2+"x"+pich2+"\n"+im.w idth
+"x"+im.height+"\n\nZuschneiden 1 (width): "+ picw +">"+(w -
randexpandImageToBrowserSize));

if( picw > (w - randexpandImageToBrowserSize) ) {
picw2 = w - randexpandImageToBrowserSize;
pich2 = Math.round(picw2/r);
}

//alert(picw+"x"+pich+"\n"+picw2+"x"+pich2+"\n"+im.w idth
+"x"+im.height+"\n\nZuschneiden 1 (width): "+ picw +">"+(w -
randexpandImageToBrowserSize)+"\nZuschneiden 2 (height): "+pich+">"+(h
- randexpandImageToBrowserSize)+" && "+pich2+"=="+0+" || "+pich2+" > "+
(h - randexpandImageToBrowserSize));

if( pich > (h - randexpandImageToBrowserSize) && pich2 == 0 || pich2

(h - randexpandImageToBrowserSize) ) {
pich2 = h - randexpandImageToBrowserSize;

picw2 = Math.round(pich2*r);
}

//alert(picw+"x"+pich+"\n"+picw2+"x"+pich2+"\n"+im.w idth
+"x"+im.height);

if(picw2 > 0 || pich2 > 0) {
picw = picw2;
pich = pich2;
r = picw/pich;
}

ims.width = ""+ picw +"px";
ims.height = ""+ pich +"px";

//alert(picw+"x"+pich+"\n"+picw2+"x"+pich2+"\n"+im.w idth
+"x"+im.height);
//alert("ims.width: "+ ims.width +"px\nims.height: "+ ims.height +"px
\nim.width: "+ im.width +"px\nim.height: "+ im.height +"px\n");
//alert("w: "+ w +"px\nh: "+ h +"px\npicw"+ picw +"px\npich"+ pich
+"px\n");
//alert("w: "+ w +"px\nh: "+ h +"px\npicw"+ picw +"px\npich"+ pich
+"px\n");
//alert("tables.left: "+ ((w - picw) /2) +"px\ntables.top: "+ ((h -
pich - 20) /2 ) +"px");
//alert("tables.left: "+ Math.round((w - picw) /2) +"px\ntables.top:
"+ Math.round((h - pich - 20) /2 ) +"px");

tables.left = ""+ Math.round((w - picw) /2) +"px";
tables.top = ""+ Math.round((h - pich - 20) /2 ) +"px";
//alert("Position: "+Math.round((w - picw) /2)+" x "+Math.round((h -
pich - 20) /2 )+"\nIst:"+tables.left+" x "+tables.top);

els.visibility = "visible";
tables.visibility = "visible";
ims.visibility = "visible";
as.visibility = "visible";

} else {
// CSS-Eigenschaften setzen
els.visibility = "hidden";
tables.visibility = "hidden";
ims.visibility = "hidden";
as.visibility = "hidden";

els.position = "absolute";
tables.position = "static";

els.top = "0px";
els.left = "-100000px";
els.width = "1px";
els.height = "1px";

im.src = "";
im.alt = "";
ims.width = "";
ims.height = "";

tables.left = "";
tables.top = "";
}
}


function initexpandImageToBrowserSize() {
closeImageToBrowserSize();
}


/**
* ++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++
+++++++++++++++++++++++++++++++
*
************************************************** *************************************************
*
* Ende "Bild im Browserfenster vergrössern
*
*
************************************************** *************************************************
* ++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++
+++++++++++++++++++++++++++++++
*/

enzinger.th (AT) googlemail (DOT) com wrote:

Servus Thomas,

Hallo wieauchimmerDuheizt. Bitte die E-Mail-Adresse durch einen Namen und
die Standardbegrüssung durch eine Standardeinleitungszeile (u.a. Google
Groups gibt bereits eine vor) ersetzen. Beides ist in einem m:n-Medium
wesentlich sinnvoller.

Und das mit dem sinnvollen Posten von Quelltext hast Du auch noch nicht so
ganz verstanden: Waren wieder 250 irrelevante Zeilen in dem Posting, auf das
ich gerade antworte. Soifz. [psf 10.1]

Ich hab mal ein Test-Verzeichnis erstellt und ein paar Pics
geschossen. http://www.enzinger-th.de/test/test.html

1.) In den ersten beiden Bilder kommt mir das Menü etwas spanisch vor.
Firefox und IE 5.5 (PNG-Bilder mit falschem Gamma) stellen dies wie
erwünscht da. Jedoch der aktuelle IE erfindet plötzliche eine
Hintergrundfarbe die nirgendswo definiert ist ??? Könnte dies an dem
PNG-Hintergrundbild liegen?

Das kommt darauf an, wie Du "aktueller IE" definierst. Aktuell ist IE 7.0,
und der hat mit PNGA (PNG mit Alpha-Kanal, der abgestufte Transparenz
ermöglicht) kein Problem mehr. Den gibt's aber nur für Windows XP und
neuer. Der Vorgänger IE 6.0 (SP-1) hat mit PNGA eben das Problem, dass er
es nicht nativ unterstützt; das konnte aber IE 5.5 auch schon nicht.

Ein möglicher Workaround, den ich Dir empfehlen kann, ist der
DirectX-AlphaImageLoader-Filter für ein Hintergrundbild, der im Web auch
gut dokumentiert ist (Google-Suche nach "ie transparent png" genügt).

Fragen zum Webdesign sind jedoch, wie auf http://dcljs.de/ erklärt,
in de.comm.infosystems.www.authoring.misc on-topic. Ich setze mal
ein Followup-To, d.h. wenn Du keine Änderungen vornimmst, landet
Deine Antwort auf dieses Posting automatisch in jener Gruppe.


PointedEars
--
Nimm VerBrecherSCRIPT, denn das ist kein JavaScript-Objekt, wird also bei
keinem vernünftigen Browser geschweige denn auf einer vernünftigen Plattform
funktionieren, so daß Du auch [...] gleich mit VBSCRIPT arbeiten kannst und
dies auch tun solltest. --Georg Maaß, <ao3k78$ije4r$3 (AT) ID-3551 (DOT) news.dfncis.de>