Probleme mit innerHTML
Jim Panse
- javascript
hi!
ich hab folgendes problem mit javascript oder besser gesagt mit dem IE. ich habe mit asp ein fotoalbum programmiert, das wunderbar funktioniert, so wie ich es will!
das design des fotoalbum, sieht so aus, dass ich 12 bilder als vorschau um eine überschrift in der mitte anordne. in der mitte befinden sich außerdem links zu den weiteren seite der jeweiligen gallerie (seite 2 = bilder 13 -24, seite 3 = bilder 25 - 36 ....) wenn der benutzer auf eines der bilder scrollt (onMouseOver-event) wird anstelle der überschrift in der mitte das bild etwas größer angezeigt. scrollt der benutzer vom bild weg (onMouseOut-event)werden wieder die überschirft und die links angezeigt, das erreiche ich mit document.subtable.innerHTML = "blablabla". außerdem hat ist jeder der 12 vorschaubilder auch ein link zu einer weiteren asp, die das foto als popup anzeigt. soweit so gut.
Das PROBLEM ist folgendes:
Wenn der benutzer auf ein bild scrollt und dann zu schnell in die mitte scrollt, dann kann man die links zu den anderen seite 2 - x, je nachdem wieviel bilder die galerie hat, nicht mehr nutzen. scrollt der benutzer ganz gemütlich in die mitte kann man die links nutzen. ich will jedoch, dass man die links immer nutzen kann, denn seien wir doch mal ehrlich, wer scrollt schon langsam und gemütlich *g*.
es stellt sich mir die frage warum ist das so? scrolle ich auf ein bild, erscheint in der stautsleiste "javascript:window.open( 'pfad/pfad/popup2.asp?folder=pfad?imcSrc=bild.jpg')", scrolle ich zu schnell in die mitte, bleibt dieser inhalt in der statusleiste und ich kann die links nicht mehr nutzen, die in der mitte sind. ich muss erst wieder aus der mitte raus, dann löscht sich auch die stausleiste und dann wieder in die mitte rein. es ist offensichtlich so, dass der IE probleme hat, den verweis zu "löschen", bevor er den inhalt in der mitte ändert!
ich hoffe, ihr habt das problem verstanden und könnt mir helfen!
ps: bitte als lösung nicht ein setTimeout posten, das bringt nur neue probleme und löst die alten nicht!
cu
Das PROBLEM ist folgendes:
Da bei den meisten hier, sowohl innerHTML als auch setTimeout prima funktioniert und du nicht eine Zeile Code (bevor du hier alles ablädst, entweder nur den relevanten Code oder eine URL posten) preisgibst, artet das nur in eine Ratestunde aus.
Ob da jemand Lust zu hat weiß ich nicht, ich würd mich an deiner Stelle nicht drauf verlassen, also wenn du geholfen bekommen möchtest, bitte so das es auch möglich ist.
es stellt sich mir die frage warum ist das so? scrolle ich auf ein bild, erscheint in der stautsleiste "javascript:window.open( 'pfad/pfad/popup2.asp?folder=pfad?imcSrc=bild.jpg')", scrolle ich zu schnell in
Das ist schon millionen mal gepostet worden. So ein Link ist Mist, da er ohne JS nicht mehr funktioniert und das unnötigerweise:
<a href="pfad/pfad/popup2.asp?folder=pfad?imcSrc=bild.jpg"
onclick="window.open(this.href);return false">
ist die bessere Variante.
Struppi.
hi! erstmal danke für deine hilfe, dass mit dem popups hab ich sofort umgesetzt! ich will euch den code natürlich nicht vorenthalten und es ist wahrscheinlich auch besser wenn ihr seht was los ist! hier der code ( asp habe ich rausgenommen!)
<html>
<head> <basefont face="Comic Sans MS"> <title>Fotoalbum Übersicht</title>
<script language="JavaScript"> <!--
function ShowImage( imgSource, imgName) {
window.document.all.subtable.innerHTML = "<table border='2' height='100%' rules='none' width='100%'>" +
" <tr height='20%'>" + " <td align='center' colsapn='2' valign='middle' width='100%'>" + " <h2 align='center'>" + imgName + "</h2>" + " </td>" + " </tr>" +
" <tr height='80%'>" + " <td align='center' colspan='2' rowspan='2' valign='middle' width='100%'>" + " <img alt='" + imgName + "' height='200' src='" + imgSource + "' width='256'>" + " </td>" + " </tr>" +
"</table>";
}
function ShowMenu( ) {
window.document.all.subtable.innerHTML = "<table border='2' height='100%' rules='none' width='100%'>" +
" <tr height='20%'>" + " <td align='center' valign='middle' width='100%'> </td>" + " </tr>" +
" <tr height='30%'>" + " <td align='center' valign='middle' width='100%'>" + "<h1 align='center'>Meeting Kassel 12.2002 - Seite 1</h1>" + " </td>" + " </tr>" +
" <tr height='30%'>" + " <td align='center' valign='middle' width='50%'>" + "<font size='4'><a href='foto2.asp?folder=%5CFotos%5CMeeting+Kassel+12%2E2002&curPage=1' onClick='window.location.href = this.href'>Seite 1</a>, </font><font size='4'><a href='foto2.asp?folder=%5CFotos%5CMeeting+Kassel+12%2E2002&curPage=2' onClick='window.location.href = this.href'>Seite 2</a>, </font><font size='4'><a href='foto2.asp?folder=%5CFotos%5CMeeting+Kassel+12%2E2002&curPage=3' onClick='window.location.href = this.href'>Seite 3</a>, </font>" + " </td>" +
" <tr height='20%'>" + " <td align='center' valign='middle' width='100%'> </td>" + " </tr>" +
"</table>";
}
//--> </script>
</head>
<body onLoad="window.setTimeout( 'ShowMenu( )', 1)" style="margin:0">
<table border="0" height="100%" width="100%">
<tr height="25%"> <td align="center" valign="middle" width="25%"> <a href='popup.asp?folderPath=Meeting Kassel 12.2002&imgSrc=Leeds Stadtmauer 2.JPG' onClick='window.open( this.href, "new_win", "height=600,widht=550");return false;'> <img alt='Leeds Stadtmauer 2' border='1' height='125' name='Leeds Stadtmauer 2' onMouseOut='ShowMenu( )' onMouseOver='ShowImage( this.src, this.name)' src='http:\knebel\gerbig\Fotos\Meeting Kassel 12.2002\Leeds Stadtmauer 2.JPG' width='160'> </a> </td>
<td align="center" valign="middle" width="25%"> <a href='popup.asp?folderPath=Meeting Kassel 12.2002&imgSrc=Leeds Stadtmauer 2.JPG' onClick='window.open( this.href, "new_win", "height=600,widht=550");return false;'> <img alt='Leeds Stadtmauer 2' border='1' height='125' name='Leeds Stadtmauer 2' onMouseOut='ShowMenu( )' onMouseOver='ShowImage( this.src, this.name)' src='http:\knebel\gerbig\Fotos\Meeting Kassel 12.2002\Leeds Stadtmauer 2.JPG' width='160'> </a>
</td>
<td align="center" valign="middle" width="25%"> <a href='popup.asp?folderPath=Meeting Kassel 12.2002&imgSrc=Leeds Stadtmauer 2.JPG' onClick='window.open( this.href, "new_win", "height=600,widht=550");return false;'> <img alt='Leeds Stadtmauer 2' border='1' height='125' name='Leeds Stadtmauer 2' onMouseOut='ShowMenu( )' onMouseOver='ShowImage( this.src, this.name)' src='http:\knebel\gerbig\Fotos\Meeting Kassel 12.2002\Leeds Stadtmauer 2.JPG' width='160'> </a>
</td>
<td align="center" valign="middle" width="25%"> <a href='popup.asp?folderPath=Meeting Kassel 12.2002&imgSrc=Leeds Stadtmauer 2.JPG' onClick='window.open( this.href, "new_win", "height=600,widht=550");return false;'> <img alt='Leeds Stadtmauer 2' border='1' height='125' name='Leeds Stadtmauer 2' onMouseOut='ShowMenu( )' onMouseOver='ShowImage( this.src, this.name)' src='http:\knebel\gerbig\Fotos\Meeting Kassel 12.2002\Leeds Stadtmauer 2.JPG' width='160'> </a>
</td> </tr>
<tr height="25%"> <td align="center" valign="middle" width="25%"> <a href='popup.asp?folderPath=Meeting Kassel 12.2002&imgSrc=Leeds Stadtmauer 2.JPG' onClick='window.open( this.href, "new_win", "height=600,widht=550");return false;'> <img alt='Leeds Stadtmauer 2' border='1' height='125' name='Leeds Stadtmauer 2' onMouseOut='ShowMenu( )' onMouseOver='ShowImage( this.src, this.name)' src='http:\knebel\gerbig\Fotos\Meeting Kassel 12.2002\Leeds Stadtmauer 2.JPG' width='160'> </a> </td>
<td align="center" colspan="2" height="15%" valign="middle" rowspan="2" width="50%"> <span id="subtable"> </span> </td>
<td align="center" valign="middle" width="25%"> <a href='popup.asp?folderPath=Meeting Kassel 12.2002&imgSrc=Leeds Stadtmauer 2.JPG' onClick='window.open( this.href, "new_win", "height=600,widht=550");return false;'> <img alt='Leeds Stadtmauer 2' border='1' height='125' name='Leeds Stadtmauer 2' onMouseOut='ShowMenu( )' onMouseOver='ShowImage( this.src, this.name)' src='http:\knebel\gerbig\Fotos\Meeting Kassel 12.2002\Leeds Stadtmauer 2.JPG' width='160'> </a> </td> </tr>
<tr height="25%"> <td align="center" valign="middle" width="25%"> <a href='popup.asp?folderPath=Meeting Kassel 12.2002&imgSrc=Leeds Stadtmauer 2.JPG' onClick='window.open( this.href, "new_win", "height=600,widht=550");return false;'> <img alt='Leeds Stadtmauer 2' border='1' height='125' name='Leeds Stadtmauer 2' onMouseOut='ShowMenu( )' onMouseOver='ShowImage( this.src, this.name)' src='http:\knebel\gerbig\Fotos\Meeting Kassel 12.2002\Leeds Stadtmauer 2.JPG' width='160'> </a> </td>
<td align="center" valign="middle" width="25%"> <a href='popup.asp?folderPath=Meeting Kassel 12.2002&imgSrc=Leeds Stadtmauer 2.JPG' onClick='window.open( this.href, "new_win", "height=600,widht=550");return false;'> <img alt='Leeds Stadtmauer 2' border='1' height='125' name='Leeds Stadtmauer 2' onMouseOut='ShowMenu( )' onMouseOver='ShowImage( this.src, this.name)' src='http:\knebel\gerbig\Fotos\Meeting Kassel 12.2002\Leeds Stadtmauer 2.JPG' width='160'> </a> </td> </tr>
<tr height="25%"> <td align="center" rowspan="2" valign="middle" width="25%"> <a href='popup.asp?folderPath=Meeting Kassel 12.2002&imgSrc=Leeds Stadtmauer 2.JPG' onClick='window.open( this.href, "new_win", "height=600,widht=550");return false;'> <img alt='Leeds Stadtmauer 2' border='1' height='125' name='Leeds Stadtmauer 2' onMouseOut='ShowMenu( )' onMouseOver='ShowImage( this.src, this.name)' src='http:\knebel\gerbig\Fotos\Meeting Kassel 12.2002\Leeds Stadtmauer 2.JPG' width='160'> </a> </td>
<td align="center" valign="middle" width="25%"> <a href='popup.asp?folderPath=Meeting Kassel 12.2002&imgSrc=Leeds Stadtmauer 2.JPG' onClick='window.open( this.href, "new_win", "height=600,widht=550");return false;'> <img alt='Leeds Stadtmauer 2' border='1' height='125' name='Leeds Stadtmauer 2' onMouseOut='ShowMenu( )' onMouseOver='ShowImage( this.src, this.name)' src='http:\knebel\gerbig\Fotos\Meeting Kassel 12.2002\Leeds Stadtmauer 2.JPG' width='160'> </a> </td>
<td align="center" valign="middle" width="25%"> <a href='popup.asp?folderPath=Meeting Kassel 12.2002&imgSrc=Leeds Stadtmauer 2.JPG' onClick='window.open( this.href, "new_win", "height=600,widht=550");return false;'> <img alt='Leeds Stadtmauer 2' border='1' height='125' name='Leeds Stadtmauer 2' onMouseOut='ShowMenu( )' onMouseOver='ShowImage( this.src, this.name)' src='http:\knebel\gerbig\Fotos\Meeting Kassel 12.2002\Leeds Stadtmauer 2.JPG' width='160'> </a> </td>
<td align="center" valign="middle" width="25%"> <a href='popup.asp?folderPath=Meeting Kassel 12.2002&imgSrc=Leeds Stadtmauer 2.JPG' onClick='window.open( this.href, "new_win", "height=600,widht=550");return false;'> <img alt='Leeds Stadtmauer 2' border='1' height='125' name='Leeds Stadtmauer 2' onMouseOut='ShowMenu( )' onMouseOver='ShowImage( this.src, this.name)' src='http:\knebel\gerbig\Fotos\Meeting Kassel 12.2002\Leeds Stadtmauer 2.JPG' width='160'> </a> </td> </tr>
</table>
</body>
</html>
jetzt scrollt mal von einem bild aus, schnell in die mitte und veruscht da einen link zu klicken, es funktioniert nicht. scrollt langsam von einem bild aus in die mitte und es geht!
cu
hi!
erstmal danke für deine hilfe, dass mit dem popups hab ich sofort umgesetzt! ich will euch den code natürlich nicht vorenthalten und es ist wahrscheinlich auch besser wenn ihr seht was los ist! hier der code ( asp habe ich rausgenommen!)
soweit so gut, aber bei diesem Umfang solltest du eine Berispiel seite (url) angeben, da der HTML Code so nicht umsetztbar ist (es fehlen die Bilder)
Struppi.
ich glaub ihr wollt mich verarschen. ihr müsst doch den code einfach nur markieren strg + c drücken in eine textdatei mit strg + v einfügen und das ganze als html datie speichern. auf die bilder kommt es im übrigen überhaupt nicht an! es geht einfach nur darum, dass man die LINKS in der mitte nicht mehr nutzen kann, wenn man von einem bild aus, zu schnell in die mitte scrollt. jetzt checkt das doch bitte mal aus!
ich glaub ihr wollt mich verarschen. ihr müsst doch den code einfach nur markieren strg + c drücken in eine textdatei mit strg + v einfügen und das ganze als html datie speichern. auf die bilder kommt es im übrigen überhaupt nicht an! es geht einfach nur darum, dass man die LINKS in der mitte nicht mehr nutzen kann, wenn man von einem bild aus, zu schnell in die mitte scrollt. jetzt checkt das doch bitte mal aus!
Bitte, erst denken dann motzen.
In deinem Beispiel sind Bilder drin und was weiß ich, dann fang ich doch nicht rum zubasteln um irgendwas halbwegs ähnliches wie du siehst zu bauen.
DU willst geholfen bekommen, nicht ich.
Struppi.
Bitte, erst denken dann motzen.
hab ich gemacht, sonst würde ich das hier nicht posten!
In deinem Beispiel sind Bilder drin und was weiß ich, dann fang ich doch nicht rum zubasteln um irgendwas halbwegs ähnliches wie du siehst zu bauen.
du BRAUCHST NICHTS ZU BASTELN, sondern einfach nur den code kopieren und die seite dann laden, dann siehst du die bilder zwar nicht, aber das ist uninteressant für den FEHLER.
cu
ps: wenn du die bilder unbedingt sehen willst, kann ich sie dir gerne per mail schicken :p
Bitte, erst denken dann motzen.
hab ich gemacht, sonst würde ich das hier nicht posten!
Sieht nicht so aus.
In deinem Beispiel sind Bilder drin und was weiß ich, dann fang ich doch nicht rum zubasteln um irgendwas halbwegs ähnliches wie du siehst zu bauen.
du BRAUCHST NICHTS ZU BASTELN, sondern einfach nur den code kopieren und die seite dann laden, dann siehst du die bilder zwar nicht, aber das ist uninteressant für den FEHLER.
OK, ich hab's dir zu liebe mal gemacht: ich seh einfach ein paar Kästchen mit Links und wenn ich auf einen Link klicke kommt eine Fehlermeldung das die Seite nicht existiert. Ist also alles in Ordnung, oder was meinst du?.
Dir scheint nicht klar zu sein, wie Mozilla Seiten anzeigt wenn die Bilder nicht existieren.
Struppi.
Dir scheint nicht klar zu sein, wie Mozilla Seiten anzeigt wenn die Bilder nicht existieren.
ich seh auch grade, die Seite funktioniert gar nicht im Mozilla, da du IE 4.01 Syntax verwendest.
Struppi.
was sag ich denn die ganze zeit? oder hab ich es nicht gesagt?
kannst du die seite denn mal mit dem IE angucken?
danke im voraus!
hi!
es geht doch nicht um die links, die mit den bilder verknüpft sind, sondern um die links, "seite 1", "seite 2", "seite 3". und es geht mir auch nicht um mozilla, sondern um den Internet Explorer, da auf mozilla das script eh nicht geht!
cu
es geht doch nicht um die links, die mit den bilder verknüpft sind, sondern um die links, "seite 1", "seite 2", "seite 3". und es geht mir auch nicht um mozilla, sondern um den Internet Explorer, da auf mozilla das script eh nicht geht!
ich hab mal meinen IE angeworfen und da geth alles so wie vermute das es gehen soll.
Aber es ist sicher kein guter Stil, ein Skript mit völlig veralteter Syntax ins Netz stellen zu wollen. document.all ist IE 4, die neueren IE's kennen die DOM Funktionen, die auch Opera, Mozilla usw. benutzen.
Struppi.
ich hab mal meinen IE angeworfen und da geth alles so wie vermute das es gehen soll.
du hast keine probleme mit dem script? das kann doch gar nicht sein. versuch mal von einem bild aus ganz schnell in die mitte zu scrollen und dann einen link zu drücken, also bei mir geht das nicht!
cu
ich hab mal meinen IE angeworfen und da geth alles so wie vermute das es gehen soll.
du hast keine probleme mit dem script? das kann doch gar nicht sein. versuch mal von einem bild aus ganz schnell in die mitte zu scrollen und dann einen link zu drücken, also bei mir geht das nicht!
bei mir schon, wenn du mit scrollen meinst, daß ich den Mauszeiger dahin bewegen soll, denn zum Scrollen hab ich nichts auf dere Seite.
Struppi.
hmm,
das ist komisch, kann eigentlich nicht sein, muss mal schauen woran das liegt, dass es bei mir nicht geht, aber danke für deine hilfe!
cu
hi,
du hast keine probleme mit dem script? das kann doch gar nicht sein. versuch mal von einem bild aus ganz schnell in die mitte zu scrollen und dann einen link zu drücken, also bei mir geht das nicht!
ich hab mir deinen code jetzt auch mal angesehen ...
und erst jetzt wird mir klar, was du die ganze zeit meinst, wenn du von "scrollen" redest - nicht etwa "scrollen", sondern den mauszeiger bewegen (zu scrollen gibt es ja gar nichts).
und ja, ich kann dein problem nachvollziehen im IE 5.0 - und wenn ich noch ein wenig länger hektisch mit der maus über die bilder fahre, verabschiedet sich dieser - sogar reproduzierbar - mit einem "anwendungsfehler, speicheradresse sowieso ...", will sagen, er stürzt mir richtig hart ab.
was schliesse ich darauf?
ein script auf diese weise einsetzen zu wollen, so wie du es vorhast, scheint nicht besonders sinnvoll zu sein.
durch das viele ersetzen von innerHTML-werten geht der browser irgendwann über den jordan.
warum verwendest du stattdessen nicht vorher fest definierte bereiche, die du mittels dynamisch per JS geänderter CSS-eigenschaften an der gewünschten position ein- und ausblendest?
gruss,
wahsaga
hi,
hier der code ( asp habe ich rausgenommen!)
<html>
< [... hier natürlich die KOMPLETTE seite ...]
</html>
hättest du vielleicht such struppis hinweis,
(bevor du hier alles ablädst, entweder nur den relevanten Code oder eine URL posten)
berücksichtigen können?
sich das alles durchzulesen, darauf hat wahrscheinlich immer noch keiner lust.
jetzt scrollt mal von einem bild aus, schnell in die mitte und veruscht da einen link zu klicken, es funktioniert nicht. scrollt langsam von einem bild aus in die mitte und es geht!
mit einem online-beispiel hast du wohl die besten chancen, dass man überhaupt erstmal _nachvollziehen_ kann, wo dein problem liegt.
gruss,
wahsaga