nicht angemeldet
colspan mit Javascript
Hallo zusammen
Ich habe eine Tabelle als Navigationsleiste erstellt:
<table ID="Navigation" cellspacing="0" width="170">
<col width="128" style="padding-left:16;">
<col width="20" style="padding-left:16;">
<tr height="24"><td ID="Abstand" style="border-bottom: 3pt #ffffff solid; colspan:2"> </td><td></td></tr>
<tr height="70"><td style="margin-left: 6pt; border-bottom: 3pt #ffffff solid" OnMouseOver="className='besucht'" onclick="iframe.location.href='aktuellPrivat.html'" OnMouseOut="className='bereich'" ID="MenueCtl">Aktuelles</td><td> </td><td> </td></tr>
<tr height="70"><td style="margin-left: 6pt; border-bottom: 3pt #ffffff solid" OnMouseOver="className='besucht'" onclick="iframe.location.href='InternetAbfragePrivat.html'" OnMouseOut="className='bereich'" ID="MenueCtl">Interessante Links<br>und Suchabfragen</td><td> </td></tr>
<tr height="70"><td style="margin-left: 6pt; border-bottom: 3pt #ffffff solid" OnMouseOver="className='besucht'" onclick="iframe.location.href='Emailkonten.html'" OnMouseOut="className='bereich'" ID="MenueCtl">Emailkonten</td><td> </td></tr>
</table>
Und jetzt sollen Seiten aus einem IFrame heraus sobald sie geöffnet sind eine Zelle markieren:
{top.Frame1.document.getElementsByName('Bereiche')[i].className = 'offen'};
{top.Frame1.document.getElementsByName('Bereiche')[i].onmouseover = ""};
{top.Frame1.document.getElementsByName('Bereiche')[i].onmouseout = ""};
{top.Frame1.document.getElementsByName('Bereiche')[i].setAttribute("colspan",2)};
Kann aber style oder setAttribute schreiben. Egal, die Zellen werden bei einer markierten Zelle nicht verbunden.
Danke Euch Gruß Andreas
-
Mahlzeit Andreas,
Ich habe eine Tabelle als Navigationsleiste erstellt:
Das ist Dein erstes Problem - Tabellen sind zur Darstellung tabellarischer Daten da, nicht zum Layouten.
<table ID="Navigation" cellspacing="0" width="170">
Für das Layout ist http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=CSS zuständig - sämtliche HTML-Attribute, die in irgendeiner Form das Aussehen von Elementen beeinflussen, solltest Du durch entsprechende Style-Angaben (sinnvollerweise an <http://de.selfhtml.org/css/formate/zentrale.htm@title=zentraler Stelle>) ersetzen.
<col width="128" style="padding-left:16;">
<col width="20" style="padding-left:16;">s.o. - ggf. bietet sich auch eine <http://de.selfhtml.org/css/formate/einbinden.htm#separat@title=externe CSS-Datei> an.
<tr height="70"><td style="margin-left: 6pt; border-bottom: 3pt #ffffff solid" OnMouseOver="className='besucht'" onclick="iframe.location.href='aktuellPrivat.html'" OnMouseOut="className='bereich'" ID="MenueCtl">Aktuelles</td><td> </td><td> </td></tr>
Du solltest Dich bei HTML für Groß- oder Kleinschreibung entscheiden - aber kein "Mixed Case"-Gerümpel nutzen. Im Interesse der (ggf. später) leichteren Portierbarkeit auf XHTML würde ich Dir generell Kleinschreibung empfehlen.
Zu Deinen Eventhandlern: wenn jemand die Maus über Deine Tabellenzeile bewegt, weist Du einer <http://de.selfhtml.org/javascript/sprache/variablen.htm@title=globalen Variable> namens "className" den String 'besucht' zu ... willst Du das wirklich? Oder willst Du nicht vielleicht lieber mittels http://de.selfhtml.org/javascript/sprache/objekte.htm#this@title=this bezug auf das aktuelle Element (in Deinem Fall die Tabellenzeile) nehmen?
Und jetzt sollen Seiten aus einem IFrame heraus sobald sie geöffnet sind eine Zelle markieren:
{top.Frame1.document.getElementsByName('Bereiche')[i].className = 'offen'};
Existiert in dem angegebenen Dokument ein Element mit dem Namen "Bereiche"? In Deinem obigen Code ist das nicht zu erkennen.
{top.Frame1.document.getElementsByName('Bereiche')[i].setAttribute("colspan",2)};
Was hast Du gegen das Attribut http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#td@title=colSpan?
Kann aber style oder setAttribute schreiben. Egal, die Zellen werden bei einer markierten Zelle nicht verbunden.
Bist Du sicher, dass es eine Tabellenzelle mit dem Namen "Bereiche" (was im Übrigen invalides HTML wäre - <http://de.selfhtml.org/html/referenz/attribute.htm#td@title=ein <td> hat ein derartiges Attribut nicht>) gibt?
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
Zu Deinen Eventhandlern: wenn jemand die Maus über Deine Tabellenzeile bewegt, weist Du einer <http://de.selfhtml.org/javascript/sprache/variablen.htm@title=globalen Variable> namens "className" den String 'besucht' zu ...
Für Code im Inline-Event-Handler liegt »this« als erstes in der Scope Chain. Insofern funktioniert das, aber man sollte trotzdem ausdrücklich this davor notieren.
Mathias
-
Mahlzeit molily,
Zu Deinen Eventhandlern: wenn jemand die Maus über Deine Tabellenzeile bewegt, weist Du einer <http://de.selfhtml.org/javascript/sprache/variablen.htm@title=globalen Variable> namens "className" den String 'besucht' zu ...
Für Code im Inline-Event-Handler liegt »this« als erstes in der Scope Chain.
... und so verlässt man sich wieder darauf, dass alle Browser das auch (jetzt und in alle Zukunft) richtig umsetzen - und da habe ich doch so meine Zweifel. Wenn man ständig derartige implizite Geschichten nutzt (wie auch das unsägliche "document.foo.value = 'bar';" usw.), gewöhnt man sich NIE einen sauberen Programmierstil an ... IMHO.
Insofern funktioniert das, aber man sollte trotzdem ausdrücklich this davor notieren.
Ja. IMHO immer.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
... und so verlässt man sich wieder darauf
Sag ich doch gar nicht, dass man das soll. Aber umgekehrt sollte man sich auch nicht darauf verlassen, dass bla = ... eine globale Variable erzeugt, wie deine Aussage suggerierte. Man müsste schon explizit window.bla schreiben, um die Scope Chain zu umgehen. Übrigens ist var bla = ... nochmal eine andere Geschichte, das erzeugt anscheinend eine "lokal" Variable, die nur innerhalb des Inline-Codes verfügbar ist.
Mathias
-
Sag ich doch gar nicht, dass man das soll. Aber umgekehrt sollte man sich auch nicht darauf verlassen, dass bla = ... eine globale Variable erzeugt, wie deine Aussage suggerierte. Man müsste schon explizit window.bla schreiben, um die Scope Chain zu umgehen. Übrigens ist var bla = ... nochmal eine andere Geschichte, das erzeugt anscheinend eine "lokal" Variable, die nur innerhalb des Inline-Codes verfügbar ist.
Ja, tut es. Die Browser erzeugen aus den im HTML-Code notierten Eventhandlern Funktionen, die aufgerufen werden. Dort hat man dann natürlich Funktions-Scope (bereichert um das HTML-Objekt).
--
Reden ist Silber, Schweigen ist Gold, meine Ausführungen sind Platin.
Self-Code: sh:( ch:? rl:( br:> n4:( ie:{ mo:) va:) de:> zu:} fl:| ss:| ls:~ js:|-
Die Browser erzeugen aus den im HTML-Code notierten Eventhandlern Funktionen, die aufgerufen werden.
Danke für den Hinweis, das geht tatsächlich sogar so weit, dass arguments samt arguments.callee (das Funktionsobjekt selbst) verfügbar ist und man damit genau wie this.onXYZ arbeiten kann. In Nicht-IE-Browsern empfängt diese Funktion das Event-Objekt als Parameter mit dem Namen event, im IE löst »event« zu window.event auf.
Mathias
-
Danke Danke Danke
ich bezog mich auf das falsche Objekt. Bitte entschuldigung. Und zeilen lassen sich gut kopieren und ich hab auch var Objekt an einer Stelle.
Ich würd grad ein neues Thema anfangen, doch frag ich hier jetzt mal: Wie bekomme ich denn dann so etwas hin:
-------------! ----------------!
----------\ ! ------------! !
\ ! ! !
Bereich ! das Bereich ! !
ist offen /! onmouseover ! !
/ ! ! !
----------/ ! ------------! !
-------------! ----------------!und es müssen zwei Zellen nebeneinander stehen um auch in der Zweiten Streifen zur Trennung angezeigt wird. Und mit colspan verschiebt sich diese weiter nach rechts.
Ich sehe schon: Da hab ich mir mal wieder etwas unmögliches ausgedacht. Aber ich würde mich über Unterstützung stark freuen. Denn drum herum gestaltett sich daraus meine Webseite und ich hoffe nicht auf ein Neues!
Danke Gruß Andreas
-
-
-
-
-
-
-
Ich habe eine Tabelle als Navigationsleiste erstellt:
Das ist eine sehr schlechte Idee. Auf Tabellen als Layoutmittel solltest und kannst du verzichten. Sonst kommt gerne überladener und unwartbarer HTML-Code heraus, wie du ihn geschrieben hast.
Ich vermute, diese Aufgabe lässt sich viel einfacher mit CSS-basierten Navigationsleisten umsetzen.
<tr height="24"><td ID="Abstand" style="border-bottom: 3pt #ffffff solid; colspan:2"> </td><td></td></tr>
Abstände löst du mit CSS, nicht mit überflüssigen und inhaltslosen HTML-Elementen. Formatierungen solltest du zentral im Stylesheet vornehmen.
<tr height="70"><td style="margin-left: 6pt; border-bottom: 3pt #ffffff solid" OnMouseOver="className='besucht'" onclick="iframe.location.href='aktuellPrivat.html'" OnMouseOut="className='bereich'" ID="MenueCtl">Aktuelles</td><td> </td><td> </td></tr>
Warum so umständlich? Wozu brauchst du die beiden leeren Spalten? Geht es da nur um den visuellen Effekt?
<tr height="70"><td style="margin-left: 6pt; border-bottom: 3pt #ffffff solid" OnMouseOver="className='besucht'" onclick="iframe.location.href='InternetAbfragePrivat.html'" OnMouseOut="className='bereich'" ID="MenueCtl">Interessante Links<br>und Suchabfragen</td><td> </td></tr>
Du kannst eine ID im Dokument nur einmal verwenden. Wenn du alle td-Elemente formatieren willst, schreibst du ins CSS eine Regel #Navigation td {...}
{top.Frame1.document.getElementsByName('Bereiche')[i].className = 'offen'};
Warum diese Schreibweise mit den geschweiften Klammern um jeden Befehl? Das ist unnötig und bedeutet etwas anderes.
Aus Sicht eines iframes, das im Dokument mit der Navigation liegt, brauchst du übrigens nur top zu notieren, um auf das entsprechende window-Objekt zu kommen.Du suchst hier nach Elementen mit dem Namen »Bereiche«. Derartige Elemente gibt es in deinem Quellcode nicht. Du suchst vielmehr nach Elementen mit der Klasse »bereich«, oder? Jetzt könntest du natürlich eine Art »getElementsByClassName« nutzen, aber das gibt es nur in einigen Browsern und du müsstest in anderen eine Helferfunktion verwenden.
Vermutlich soll man im iframe zwischen Seiten wechseln können, sodass diese von sich aus die Navigation aktualisieren müssen. Das wird etwas schwieriger. Am besten gibst du jedem Menüpunkt eine eindeutige ID. Aus den iframe-Dokumenten heraus machst du dann:
updateNavigation("aktuelles"); // Aufruf unterscheidet sich von Dokument zu Dokument
function updateNavigation (id) {
var el = parent.document.getElementById(id);
el.className = "offen";
el.colSpan = 2;
}Das Überschreiben von onmouseover und onmouseout wird noch schwieriger, weil du sie nicht einfach nur löschen willst, sondern beim Wechsel des aktiven Menüpunktes vermutlich auch wiederherstellen willst. Daher würde ich den Klassenwechsel ganz anders lösen. Am besten ganz darauf verzichten, indem du auf ul, li und a zur Auszeichnung deiner Navigation umstellst. Dann kannst du browserübergreifend Styles für a:hover vergeben und sparst dir den Klassenwechsel.
Ansonsten würde ich einen Event-Handler beim übergeordneten Element vergeben, der alle Mouseover-Ereignisse innerhalb der Tabelle behandelt. Der sucht sich das zugehörige tr-Elemente und gibt ihm eine ID »aktiv«. Das Element, das vorher die ID hatte, wurde zwischengespeichert und ihm wird die ID nun weggenommen. Im CSS kannst du dann diese ID formatieren und eine Ausnahmeregel für den aufgeklappten Menüpunkt notieren.
Mathias