document.getElementById Problem

[Peet]

Folgendes dummes Problem:

Weil der IE für CSS zu blöd ist möchte ich eine Infobox per Javascript einblenden. Das problem ist, dass es das HTML dynamisch mit der Smarty Schablone erzeugt wird. Dieser Teil steht also in einer Schleife. Ergebnis ist, dass es nun die id="info" mehrmals gibt.

Expertenmeinungen:<br />
<a href="../images/person/{$latestProduct.pic}" onmouseover="show()" onmouseout="hide()">{$latestProduct.name_f} {$latestProduct.name_l}</a>
<div id="info">
<img src="../images/person/{$latestProduct.pic_person}" alt="{$latestProduct.name_f} {$latestProduct.name_l}" /><br />
            {$latestProduct.comment}
</div>

<script language="JavaScript" type="text/javascript">
<!--
function hide() {
    if (navigator.appName == "Microsoft Internet Explorer") {
        if(document.getElementById) {
            document.getElementById("info").style.display = "none";
 }
    }
}

function show() {
    if (navigator.appName == "Microsoft Internet Explorer") {
        if(document.getElementById) {
            document.getElementById("info").style.display = "block";
 }
    }
}

Erkennt jemand das Problem und hat einen Lösungsvorschlag?

[peter]

Hi,

wenns in ner schleife steht, sollte man eine variable hochzählen können, z.B. INFONUMMER

<a href="../images/person/{$latestProduct.pic}" onmouseover="show(INFONUMMER)" onmouseout="hide(INFONUMMER)">{$latestProduct.name_f} {$latestProduct.name_l}</a>
<div id="info+INFONUMMER">
<img src="../images/person/{$latestProduct.pic_person}" alt="{$latestProduct.name_f} {$latestProduct.name_l}" /><br />
            {$latestProduct.comment}
</div>

<script language="JavaScript" type="text/javascript">
<!--
function hide(nr) {
     if (navigator.appName == "Microsoft Internet Explorer") {
        if(document.getElementById) {
             document.getElementById("info"+nr).style.display = "none";
  }
     }
 }

function show(nr) {
     if (navigator.appName == "Microsoft Internet Explorer") {
         if(document.getElementById) {
             document.getElementById("info"+nr).style.display = "block";
  }
     }
 }

gruß
peter

[Peet]

Na so ein Zufall. Genau so habe ich gerade gelöst:

<script language="JavaScript" type="text/javascript">
<!--
function hide(n) {
    if (navigator.appName == "Microsoft Internet Explorer") {
        if(document.getElementById) {
            document.getElementById("info"+n).style.display = "none";
 }
    }
}

function show(n) {
    if (navigator.appName == "Microsoft Internet Explorer") {
        if(document.getElementById) {

document.getElementById("info"+n).style.display = "block";
document.getElementById("info"+n).style.position = "relative";
document.getElementById("info"+n).style.background-color = "#fff";
document.getElementById("info"+n).style.width = "300px";
document.getElementById("info"+n).style.top. = "0";
document.getElementById("info"+n).style.right = "20px";
document.getElementById("info"+n).style.border = "1px dashed black";
document.getElementById("info"+n).style.padding = "15px";
}
}
}
//-->
</script>

Hier gibt der IE aber eine Fehlermeldung. Einer der styles scheint er nicht zu akzeptieren. Wenn ich nur die erste nehme,dann klappt es.
Wieso verwendet der nicht die, die ich für das DID Element im Stylesheet angegeben habe(wie oben). Dann bräuchte ich nur das "display" ein und auschalten (none & block)?

[Malte]

document.getElementById("info"+n).style.background-color = "#fff";
Hier gibt der IE aber eine Fehlermeldung. Einer der styles scheint er nicht zu akzeptieren.

du musst im JavaScript statt wie im CSS-Code selbst die Bindestriche weglassen und den Buchstaben danach Groß schreiben, es muss also so heißen:

document.getElementById("info"+n).style.backgroundColor = "#fff";

[Peet]

Danke!

Problem gelöst.

[Peet]

Kann man mit Javascript rausbekommen wie weit der Besucher runtergescrollt hat, um dann das div dann so zu positionieren, dass es im Viewport ist ?

[Ingo Turski]

Hi,

Weil der IE für CSS zu blöd ist möchte ich eine Infobox per Javascript einblenden.

warum nicht alleine über CSS? Warum schließt Du unnötiger Weise einige Besucher aus?

Das problem ist, dass es das HTML dynamisch mit der Smarty Schablone erzeugt wird.

Kann man die essen? ;-)
Wenn dies Dein Problem ist, hast Du den falschen Thenenbereich gewählt.

dass es nun die id="info" mehrmals gibt.

Daß das fehlerhaft ist, bei Formatierung über CSS zu Anzeigeproblemen führen kann und natürlich document.elementById() ausschließt, ist Dir klar?

<a href="../images/person/{$latestProduct.pic}"

serverseitiger Code ist hier nicht von Interesse, sondern das, was beim Browser ankommt.

wenn Du dieses DIV löscht und den nachfolgenden Inhalt in das A-Element setzt, von einem span umgeben, dann kannst Du diesen über CSS wie gewünscht anspechen.

freundliche Grüße
Ingo