Javascript

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Liebe/-r Experte/-in,

ein Freund hat folgendes Ebay-Template erstellt:

http://www.mpb-design.de/mpp/produkte.html

Dieses Template wird im Firefox richtig angezeigt, aber im IE 8 werden alle Grafiken beim Laden der Seite untereinander angezeigt und erst wenn man auf ein Thumb klickt passt es.
Das Gleiche passiert unten mit den Texten Kaufabwicklung Zahlungsabwicklung, Versand, …

Das JavaScript sieht so aus (+diverse Bearbeitungen):
function schaltebild(id2)
{
document.getElementById(‚bild1‘).style.display = „none“;
document.getElementById(‚bild2‘).style.display = „none“;
document.getElementById(‚bild3‘).style.display = „none“;

if (id2 == 3)
document.getElementById(‚bild1‘).style.display=„block“;

if (id2 == 2)
document.getElementById(‚bild2‘).style.display=„block“;

if (id2 == 1)
document.getElementById(‚bild3‘).style.display=„block“;
}

oder auch mit style.visibility = „hidden“ bzw. „visible“

Aber keine Version funktioniert im IE 8

aufgerufen werden die Bilder mit

… natürlich mit schaltebild(2) und 3 für die anderen Bilder.

die Bilder selbst sind in einem Div-Tag:

Es ist als ob der IE den display-Befehl nicht kennen würde.

Was läuft hier falsch?

PS: Es ist leider nicht möglich (weil die Grafiken durch Template-Platzhalter ersetzt werden) den Grafiken eine ID oder name zu verpassen.
Damit würde es dann auch im IE funktionieren, aber darf halt nicht sein :frowning:

Danke für die Hilfe

Danke

#2

Hallo,

solche Fehler sind natürlich ärgerlich.
Ich habe Ihre Seite besucht um mir ein Bild von dem
Problem zu machen.

Als ich die Webseite mit dem IE angesurft hatte, waren
dort zunächst die drei großen Bilder (welche nicht da
sein sollten, zumindest bis auf eines) zu sehen.
Urplötzlich erhielt ich die Anfrage „darf Adobe Flash
Installer verwendet werden?“.
Egal wie ich diese Frage beantworte, der Fehler ist
nach dem schließen dieser MessageBox sofort aufgelöst.

Zu meiner Vermutung wann anders. Zuerst:

Haben Sie bereits versucht direkt in die Bilder, welche
unsichtbar sein sollen - in dem von Ihnen gesendeten
Link, wäre das und -
direkt mit dem weiteren Tag style=„display:none“ zu
versehen? Also bereits fest im HTML-Code - ganz ohne
Javascript - implementiert?

Sollte das auch nicht funktionieren gibt es zwei
weitere Möglichkeiten:

  • haben Sie das Flashprodukt möglicherweise in Ihren
    Webauftritt implementiert und mischt sich dieses beim
    Aufbau der Seite mit ein?

  • sind unter Umständen im eingebundenen CSS-File
    bestimmte style-Eigenschaften für 's oder 's
    vorgegeben?

Vermutlich beinhaltet Ihre Webseite irgendwo einen
solchen Fehler.
Die gängigen Browser, außer dem IE, sind hier etwas
kulanter. Der IE setzt ziemlich hart das durch, was
vorgegeben ist, ohne Rücksicht auf Darstellungsfehler.

Ich hoffe ich konnte Ihnen mit meinen Vorschlägen
weiterhelfen und Sie kommen dem Problem auf die Spur.

Es wäre schön wenn Sie das gelöste Problem oder eine
kurze Info hier veröffentlichen könnten.

Bei weiteren Fragen dürfen Sie sich gerne melden.

Viele Grüße,
Michael (VBMichi)

Liebe/-r Experte/-in,

ein Freund hat folgendes Ebay-Template erstellt:

http://www.mpb-design.de/mpp/produkte.html

Dieses Template wird im Firefox richtig angezeigt,

aber im IE

8 werden alle Grafiken beim Laden der Seite

untereinander

angezeigt und erst wenn man auf ein Thumb klickt passt

es.

Das Gleiche passiert unten mit den Texten

Kaufabwicklung

Zahlungsabwicklung, Versand, …

Das JavaScript sieht so aus (+diverse Bearbeitungen):
function schaltebild(id2)
{
document.getElementById(‚bild1‘).style.display =

„none“;

document.getElementById(‚bild2‘).style.display =

„none“;

document.getElementById(‚bild3‘).style.display =

„none“;

if (id2 == 3)
document.getElementById(‚bild1‘).style.display=„block“

;

if (id2 == 2)
document.getElementById(‚bild2‘).style.display=„block“

;

if (id2 == 1)
document.getElementById(‚bild3‘).style.display=„block“

;

}

oder auch mit style.visibility = „hidden“ bzw.

„visible“

Aber keine Version funktioniert im IE 8

aufgerufen werden die Bilder mit

… natürlich mit schaltebild(2) und 3 für die anderen

Bilder.

die Bilder selbst sind in einem Div-Tag:

Es ist als ob der IE den display-Befehl nicht kennen

würde.

Was läuft hier falsch?

PS: Es ist leider nicht möglich (weil die Grafiken

durch

Template-Platzhalter ersetzt werden) den Grafiken eine

ID oder

name zu verpassen.
Damit würde es dann auch im IE funktionieren, aber

darf halt

nicht sein :frowning:

Danke für die Hilfe

Danke

#3

Hallo,

auf HTML-Elemente, die im Code weiter unten vorkommen, sollte man per JavaScript oben nicht zugreifen.

Einfaches Beispiel:

...  
  
// dieser javascript code wird zuerst ausgeführt document.getElementById('kaufabwicklung').style.display = "block";   
 Lorem ipsum  
  
...

Genau das passiert in dem Template auf der Seite

http://www.mpb-design.de/mpp/produkte.html

Der erste JavaScript Fehler ist schon in Zeile 20. Dieser kann dazu führen, dass die Verarbeitung folgender JavaScript Zeilen unterbrochen wird. Dann wird auch die Bildergalerie nicht korrekt initialisiert.

Korrigiere diese Fehler, danach sollte es funktionieren. Am einfachsten ist es, wenn der ganze JavaScript Code an das Ende des Dokuments vor dem schließenden body-Tag eingefügt wird. Dann sind auch alle HTML-Elemente geladen.

Beispiel:

[code]
…

// hier den ganzen js code aus dem head-tag einfügen

#4

Hallo Markus,
dein geschildertes Problem tritt bei mir im Internet Explorer 8 nicht (mehr) auf, womöglich hast du es entzwischen gefixt.

Grüße

#5

Hallo Markus,

ich bin mir nicht hundert prozentig sicher, aber mir
scheint das der i.e die onLoad funktion erst später
ausführt als die anderen browse, das führt bei mir dazu
das ich kurz nach dem aufurf der seite noch die Bilder
sehe und sie dann verschwinden.

Da kann das skript „leider“ nichts für daher ist es
schwieriger hierfür eine Lösung anzubieten.

Folgende Tipps:

versuch die zwei Aufrufe im onload attribut zu einem
zusammenzufassen.
anstatt zweier funktionen rufst du eine auf die die
gewünschten anderen funktionen aufruft.

Vergebe den Bildern gleich vom start an das css
attribut visibility hidden. Das macht sie zwar
unsichtbar aber sie nehmen trotzdem ihrem Platz im
Layout in anspruch.

Viel erfolg weiterhin und frohes schaffen.

#6

Hallo Markus,

bei mir sieht die Seite im IE7, IE8 und Firefox 3.6RC2 absolut identisch aus und funktioniert auch so, wie du dir das denkst.

Ich kann mir allerdings vorstellen, was dein Problem ist: Das Javascript, das die Bilder initial versteckt liegt ja im -Bereich der Seite und wird abgearbeitet, sobald der Browser den schließenden -Tag erhalten hat. Je nach Rendering- und Download-Geschwindigkeit existieren zu diesem Zeitpunkt die Elemente aber noch gar nicht, können dadurch also auch nicht versteckt werden.

Lösen lässt sich das Ganze beispielsweise bei der Benutzung von jQuery so: http://www.learningjquery.com/2006/09/introducing-do…
Die Benutzung von jQuery empfehle ich sowieso - da schreibst du dann statt document.getElementById(‚xyz‘) nur noch $(‚xyz‘) und hast auch schöne Abkürzungen wie $(‚xyz‘).hide().

Alternativ kannst du das initiale Verstecken der Bilder in eine Funktion packen und diese beim Laden der Seite aufrufen:

function beimLaden() {
document.getElementById(‚bild1‘).style.display=„none“;
…
}

…

Hoffe, das hilft.

Gruß

Dennis

#7

vielen Dank.
wir konnten es bisher so lösen dass wir in den body ein onLoad=„bilder(1)“ eingebaut haben.

Die lösung fanden wir kurz nachdem ich diese Email schrieb :wink:

Dadurch wird beim Start ein Wert ins Script geladen und das Script initialisiert. Dann hats endlich funktioniert.

bleibt nur die Frage warum es im FF sofort funktioniert hat und im IE erst nach der Initialisierung im OnLoad.

#8

vielen Dank.
wir konnten es bisher so lösen dass wir in den body ein onLoad=„bilder(1)“ eingebaut haben.
Die lösung fanden wir kurz nachdem ich diese Email schrieb :wink:
Dadurch wird beim Start ein Wert ins Script geladen und das Script initialisiert. Dann hats endlich funktioniert.

Welche Zeile genau meinst du mit „Zeile 20“?

#9

Im Quellcode der Seite is in Zeile 20 folgender JavaScript-befehl drin:

document.getElementById('kaufabwicklung').style.display = "block";

Diese Zeile ist nicht in einer Funktion, wird also vom Browser beim Laden der Seite sofort verarbeitet.

Das Element, da damit angesprochen werden soll, ist in Zeile 448.

...  
   
...

Daher wird hier ein Fehler geworfen.

Gruß
Murat

#10

Du versuchst auf ein nicht-definiertes Attribut
zuzugreifen. Lösung: Entweder style=„display:inline“ in
den Tags definieren oder (sauberer:smile: setAttribute benutzen
(http://de.selfhtml.org/javascript/objekte/style.htm#…
ttribute)