nicht angemeldet
JürgenB
Gunnar Bittersmann
Gunnar Bittersmann
MudGuard
MudGuard
Gunnar Bittersmann
MudGuard
High!
Ich habe vor (da HTML pur diese Möglichkeit ja (noch) nicht bereitstellt), mittels JavaScript eine zweistufige nummerierte Gliederung zu erstellen nach dem Schema
1. Hauptkapitel
1.1. Unterkapitel
1.2. Unterkapitel
1.3. Unterkapitel
2. Nächstes Hauptkapitel
2.1. usw.
Die einzelnen Haupt- und Unterpunkte befinden sich jeweils in einem eigenen Absatz, wobei die Absätze der Unterkapitel wiederum in einem eingerückten Bereich zusammengefasst werden, so dass die HTML-Struktur so aussieht:
<p>Hauptkapitel</p>
<div style="position:relative; left:80px">
<p>Unterkapitel</p>
<p>Unterkapitel</p>
<p>Unterkapitel</p>
</div>
<p>Nächstes Hauptkapitel</p>
<div style="position:relative; left:80px">
<p>usw.</p>
Wie kann ich unter Verwenung von document.getElementsByTagName("p") dafür sorgen, dass nur die Absätze der oberen Schachtelungsebene erfasst werden?
Bis bald im Khyberspace!
Yadgar
Hallo Yadgar,
du kannst mit den getElement...-Methoden auch Elemente in Elementen ansprechen:
<div id="XXX">
<p>Text</p>
</div>
document.getElementById("XXX").getElementByTagName("p")...
sucht das <p> im Element mit der ID "XXX".
Gruß, Jürgen
Hallo Yadgar,
du kannst mit den getElement...-Methoden auch Elemente in Elementen ansprechen:
<div id="XXX">
<p>Text</p>
</div>
Das funktioniert nicht so, wie ich es will - nach wie vor werden auch die Elemente in der unteren Ebene (also innerhalb des <div>-Tags) durchnummeriert!
Bis bald im Khyberspace!
Yadgar
Hallo Yadgar,
Das funktioniert nicht so, wie ich es will - ...
wirklich? Dann zeig mal, wie du es gemacht hast.
Gruß, Jürgen
Hallo Yadgar,
Das funktioniert nicht so, wie ich es will - ...
wirklich? Dann zeig mal, wie du es gemacht hast.
Gruß, Jürgen
O.k., hier ist der Code:
<html>
<head>
<style type="text/css">
h2 { text-align:center; font-family:'Arial' }
h3 { text-align:center; font-family:'Arial' }
p { text-align:justify; font-family:'Arial' }
p.n { margin-bottom:0em; margin-top:0em }
div div p { margin-bottom:0em; margin-top:0em; text-indent:-20px }
div { position:relative; left:10%; width:90% }
</style>
<body bgcolor="#e7c3a4">
</head>
<body>
<div id="haupt" style="position:absolute; left:0px; width:100%">
<h3>Kurs LF3</h3>
<h3>Ausbildung zum/zur Buchhalter/in mit Personalcomputer</h3>
<p>
Vollzeitschulung, montags bis freitags 9.00 bis 16.00 Uhr oder nach Vereinbarung. Ausgenommen Feiertage und Schulferien.
</p>
<p>
<b>Beginn:</b> Jeden 1. Arbeitstag eines Monats, falls nicht anderes angegeben oder vereinbart<br>
<b>Kursdauer:</b> 4 Wochen<br>
<b>Kursgebühr:</b> € 800,- + MWSt.<br>
<b>Vorkenntnisse:</b> Handelsschule, Büro-Berufsausbildung oder 3 Jahre Berufserfahrung als Buchhalter/in
</p>
<h3 style="text-align:left; text-decoration:underline">Kursinhalte:</h3>
<p>Der Personalcomputer, Teile, Benutzung</p>
<p>Einfache Buchhaltung, Einnahmen-Überschussrechnung</p>
<div>
<p>Belegerfassung, Journal</p>
<p>Konten, Saldenliste, Umsatzsteuer</p>
<p>Übungen</p>
</div>
<p>Buchführungs-Grundlagen</p>
<div>
<p>Die Doppelte Buchführung</p>
<p>Datenerfassung, Journal</p>
<p>Kontenrahmen, Kontenplan</p>
<p>Anlagenbuchhaltung, Lagerbuchhaltung</p>
<p>Abschlussversionen: Bilanz, Gewinn- und Verlustrechnung, Einnahmenüberschussrechnung, Umsatzsteuer</p>
<p>Übungen auf dem Personalcomputer</p>
</div>
<p>Lohnbuchhaltung</p>
<div>
<p>Rechtliche Vorschriften</p>
<p>Hilfsmittel der Lohnbuchhaltung</p>
<p>Übungen auf dem Personalcomputer</p>
</div>
<p>Rechtliche Vorschriften</p>
<div>
<p>Buchführungsvorschriften</p>
<p>Vorschriften des Finanzamtes, Steuerrecht</p>
</div>
<p>Information über Software-Varianten für die Buchhaltung</p>
<div>
<p>Handelsbuchhaltung</p>
<p>Handwerkerbuchhaltung</p>
<p>Industriebuchhaltung</p>
<p>DATEV</p>
</div>
</div>
<script src="nav.js" type="text/javascript"></script>
<script>
var i=1;
while (i <= 6)
{
num = document.createTextNode(i.toString() + ". ");
OuterPar=document.getElementById("haupt").getElementsByTagName("p")[0];
OuterPar.insertBefore(num, OuterPar.firstChild);
i++;
}
</script>
</body>
</html>
Hallo Yadgar,
noch mehr Code ging wohl nicht...
Zu deinem Problem: du musst auch den richtigen divs die ID geben und nicht dem um alles liegenden. Oder du sprichst p in div in div_mit_id an. man kann die getElementBy... (fast) beliebig schachteln.
Gruß, Jürgen
Hallo Yadgar,
noch mehr Code ging wohl nicht...
Na ja, der Kontext wäre sonst schlecht ersichtlich geworden...
Zu deinem Problem: du musst auch den richtigen divs die ID geben und nicht dem um alles liegenden.
Die <p>'s, die ich zunächste einmal (oberste Hierarchieebene) ansprechen will, sind allesamt unmittelbare Kindknoten von "haupt", also dem "um alles liegenden" <div>!
Oder du sprichst p in div in div_mit_id an. man kann die getElementBy... (fast) beliebig schachteln.
Gruß, Jürgen
hi,
so dass die HTML-Struktur so aussieht:
<p>Hauptkapitel</p>
<div style="position:relative; left:80px">
<p>Unterkapitel</p>
<p>Unterkapitel</p>
<p>Unterkapitel</p>
</div>
<p>Nächstes Hauptkapitel</p>
<div style="position:relative; left:80px">
<p>usw.</p>
Diese Struktur ist ziemlicher Quark, und obendrein nicht valide: P darf keine weiteren Blockelemente enthalten, also weder DIV noch weitere P.
eine zweistufige nummerierte Gliederung zu erstellen nach dem Schema
- Hauptkapitel
1.1. Unterkapitel
1.2. Unterkapitel
1.3. Unterkapitel- Nächstes Hauptkapitel
2.1. usw.
Du willst also eigentlich eine Liste darstellen, richtig?
Dann nimm auch eine Liste.
gruß,
wahsaga
High!
Du willst also eigentlich eine Liste darstellen, richtig?
Dann nimm auch eine Liste.
Bei einer Liste (in diesem Fall <ol>) kann ich aber vor dem Aufzählungszeichen nicht nachträglich noch einen Textknoten einfügen... oder irre ich mich?
Bis bald im Khyberspace!
Yadgar
Bei einer Liste (in diesem Fall <ol>) kann ich aber vor dem Aufzählungszeichen nicht nachträglich noch einen Textknoten einfügen...
Doch, Yadgar.
oder irre ich mich?
Ja:
<ol>
<li>1 Foo
<ol>
<li>1.1 Bar</li>
<li>1.2 Baz</li>
</ol>
</li>
<li>2 Quz</li>
</ol>
Wo ist das Problem?
Live long and prosper,
Gunnar
High!
Ja:
<ol>
<li>1 Foo
<ol>
<li>1.1 Bar</li>
<li>1.2 Baz</li>
</ol>
</li>
<li>2 Quz</li>
</ol>
>
> Wo ist das Problem?
Sind denn, um bei deinem Beispiel zu blieben, "1", "1.1" oder "1.2" auch jeweils Bestandteile des Textknotens in <li>?
Worauf ich hinaus will: die Standard-"Ordered List" in HTML (<ol>) kennt zwar gestaffelte Einrückung, aber keine hierarchisch gestaffelte Nummerierung. Dein Beispiel sähe in Standard-HTML so aus:
1\. Foo
1. Bar
2. Baz
2\. Quz
Gehören die Nummern auch schon zum Textknoten im jeweiligen <li>, min anderen Worten, kann ich das fehlende "1." mit insertBefore einfügen?
Bis bald im Khyberspace!
Yadgar
Worauf ich hinaus will: die Standard-"Ordered List" in HTML (<ol>) kennt zwar gestaffelte Einrückung, aber keine hierarchisch gestaffelte Nummerierung. Dein Beispiel sähe in Standard-HTML so aus:
- Foo
1. Bar
2. Baz- Quz
Gehören die Nummern auch schon zum Textknoten im jeweiligen <li>, min anderen Worten, kann ich das fehlende "1." mit insertBefore einfügen?
Ja, Yadgar, die Numerierung hab ich zur Verdeutlichung mit reingeschrieben; das willst du ja nicht.
Automatische Numerierung mit Unterkapiteln ginge mit CSS: [CSS2@de §12.5, link:http://www.w3.org/TR/CSS21/generate.html#counters@title=CSS21 §12.4]. IIRC ist Opera gegenwärtig der einzige Browser, der das umsetzt.
Worauf ich hier hinauswollte: vernünftiges Markup steht einer JavaScript-Lösung nicht im Wege: statt
<div>
<p>Foo</p>
<div>
<p>Bar</p>
<p>Baz</p>
</div>
<p>Quz</p>
</div>
schreibst du
<ol>
<li>Foo
<ol>
<li>Bar</li>
<li>Baz</li>
</ol>
</li>
<li>Quz</li>
</ol>
und hast über DOM genauso Zugriff auf die Elemente.
Live long and prosper,
Gunnar
PS. Damit die Numerierung auch bei Clients ohne JavaScript vorhanden ist, solltest du über serverseitige Realisierung nachdenken.
Hi,
Automatische Numerierung mit Unterkapiteln ginge mit CSS: [...] IIRC ist Opera gegenwärtig der einzige Browser, der das umsetzt.
YDRC ;-)
Firefox 1.5 (RC3 gerade nochmal nachgeprüft, afair aber schon seit Deer Park Alpha 1) kann das auch.
Konqueror 3.4.0 (unter Cygwin) kanns auch.
cu,
Andreas
Hallo MudGuard.
Automatische Numerierung mit Unterkapiteln ginge mit CSS: [...] IIRC ist Opera gegenwärtig der einzige Browser, der das umsetzt.
YDRC ;-)
Firefox 1.5 (RC3 gerade nochmal nachgeprüft, afair aber schon seit Deer Park Alpha 1) kann das auch.
Aber leider nur fehlerhaft.
Das SELFHTML-Beispiel füllt der RC3 mit 1 für die Überschrifren und 0.1 für die Zwischenüberschriften...
Konqueror 3.4.0 (unter Cygwin) kanns auch.
Ich muss wirklich einmal meine kdelibs aktualisieren.
Einen schönen Freitag noch.
Gruß, Ashura
Hi,
Firefox 1.5 (RC3 gerade nochmal nachgeprüft, afair aber schon seit Deer Park Alpha 1) kann das auch.
Aber leider nur fehlerhaft.
Oh - Tatsache. Ein
body { counter-reset:Ebene01; }
korrigiert zumindest den äußeren Zähler.
cu,
Andreas
YDRC ;-)
MudGuard,
Is’ das ’ne im Netjargon geläufige Akü?
Heißt das “You do remember correctly”?
Live long and prosper,
Gunnar
Hi,
YDRC ;-)
Is’ das ’ne im Netjargon geläufige Akü?
Heißt das “You do remember correctly”?
Ne, natürlich You Don't Remember Correctly.
cu,
Andreas
Hi,
Diese Struktur ist ziemlicher Quark, und obendrein nicht valide: P darf keine weiteren Blockelemente enthalten, also weder DIV noch weitere P.
Aber DIV darf P enthalten - und *das* ist hier gegeben. =:-)
Du willst also eigentlich eine Liste darstellen, richtig?
Dann nimm auch eine Liste.
Sowieso. ;-)
Gruß, Cybaer
hi,
Aber DIV darf P enthalten - und *das* ist hier gegeben. =:-)
Stimmt, dass das P des Hauptkapitels vor dem Div wieder geschlossen wurde, hatte ich übersehen.
_Das_ wiederum ergibt aber auch wenig Sinn, Haupt- und Unterkapitel, die ja eine hierarchische Struktur darstellen sollen, auf der _selben_ Ebene im Dokument zu belassen.
gruß,
wahsaga
Hi,
_Das_ wiederum ergibt aber auch wenig Sinn,
Ebenfalls: Keine Frage. ;-)
Gruß, Cybaer
Hi,
Wie kann ich unter Verwenung von document.getElementsByTagName("p") dafür sorgen, dass nur die Absätze der oberen Schachtelungsebene erfasst werden?
Ich wuerde mir mal Gedanken ueber die Html-Struktur machen. Vielleicht waere fuer die oberste Ebene eher ein h-tag geeignet, damit faellt die Unterscheidung schon leichter. Weiterhin kannst Du Klassen vergeben, und aus einem Array bestimmter tagNames nur diejenigen Elemente ansprechen, die diesen className besitzen.
Gruesse, Joachim
High!
Ich wuerde mir mal Gedanken ueber die Html-Struktur machen. Vielleicht waere fuer die oberste Ebene eher ein h-tag geeignet, damit faellt die Unterscheidung schon leichter. Weiterhin kannst Du Klassen vergeben, und aus einem Array bestimmter tagNames nur diejenigen Elemente ansprechen, die diesen className besitzen.
Aha, getElementsByTagName berücksichtigt auch Klassen? Die Syntax wäre also getElementsByTagName("div class='x'")[n]?
Bis bald im Khyberspace!
Yadgar
Hi,
Aha, getElementsByTagName berücksichtigt auch Klassen?
Nein.
Die Syntax wäre also getElementsByTagName("div class='x'")[n]?
if(...getElementsByTagName("div")[n].className=="x")
Gruß, Cybaer
Hi,
if(...getElementsByTagName("div")[n].className=="x")
Ich habe zwischenzeitlich eine andere Variante ausprobiert
var i=1;
var knoten = document.getElementById("haupt").getElementsByTagName("p")[2];
while (knoten.className != "n")
{
if (knoten.nodeName == "P")
{
var num = document.createTextNode(i.toString() + ". ");
knoten.insertBefore(num, knoten.firstChild);
i++;
}
if (knoten.nodeName == "DIV")
{
alert("DIV gefunden!");
var j = 1;
subknoten = knoten.firstChild;
while (subknoten != null)
{
var subnum = document.createTextNode(i.toString() + "." + j.toString() + " ");
alert(subknoten.nodeName);
subknoten.insertBefore(subnum, subknoten.firstChild);
j++;
subknoten = subknoten.nextSibling;
}
}
knoten = knoten.nextSibling;
}
Die <p>-Tags der oberen Hierarchieebene werden problemlos gefunden und korrekt nummeriert, bei den <p>-Tags der unteren Ebene (die innerhalb von <div>-Tags stehen, verhält sich das Programm merkwürdig: für "subknoten" wird als nodeName "#text" ausgegeben, nicht etwa "P". Folglich führt insertBefore zu einer Fehlermeldung, da Textknoten keine Kindknoten haben können... wieso ignoriert JavaScript hier die <p>-Tags innerhalb der <div>-Tags?
Bis bald im Khyberspace!
Yadgar
Hi,
Die <p>-Tags der oberen Hierarchieebene werden problemlos gefunden und korrekt nummeriert, bei den <p>-Tags der unteren Ebene (die innerhalb von <div>-Tags stehen, verhält sich das Programm merkwürdig:
Nein. IE und Moz interpretieren hier das W3C-DOM unterschiedlich. Für den IE ist ein Zeilenumbruch im Quelltext z.B. ein eigener Textknoten. Du mußt diese Interpretationsunterschiede also beim Durchhangeln berücksichtigen.
Gruß, Cybaer
Nein. IE und Moz interpretieren hier das W3C-DOM unterschiedlich. Für den IE ist ein Zeilenumbruch im Quelltext z.B. ein eigener Textknoten. Du mußt diese Interpretationsunterschiede also beim Durchhangeln berücksichtigen.
Im Moment teste ich alles mit Mozilla...
Die "Listen"-Stuktur sieht so aus:
<p>Erstes Hauptkapitel</p>
<div>
<p>Erstes Unterkapitel</p>
<p>Zweites Unterkapitel</p>
<p>Drittes Unterkapitel</p>
</div>
usw. usf.
Kann der Fehler seine Ursache darin haben, dass das <div> im Header noch mit einer style-Definition versehen ist ?
Bis bald im Khyberspace!
Hi,
Kann der Fehler seine Ursache darin haben, dass das <div> im Header noch mit einer style-Definition versehen ist ?
Ich möchte nicht deinen JS-Source auseinandernehmen, aber üblicherweise nicht. Das wäre ein Attributknoten.
Gruß, Cybaer
High!
Ich möchte nicht deinen JS-Source auseinandernehmen, aber üblicherweise nicht. Das wäre ein Attributknoten.
Hier ist die Fehlermeldung:
Error: uncaught exception: [Exception... "Node cannot be inserted at the specified point in the hierarchy" code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)" location: "file:///D:/Dokumente%20und%20Einstellungen/diego/Desktop/Benutzer/Bleimann/010.html Line: 120"]
Offensichtlich versucht er, in einen Textknoten einen Kindknoten einzufügen, was natürlich nicht geht - aber wieso Textknoten? Das Kindobjekt unterhalb des <div> ist ein <p>!
Bis bald im Khyberspace!
Yadgar
High!
Offensichtlich versucht er, in einen Textknoten einen Kindknoten einzufügen, was natürlich nicht geht - aber wieso Textknoten? Das Kindobjekt unterhalb des <div> ist ein <p>!
Des Rätsels Lösung: JavaScript interpretiert den im Skriptfile nach <div> stehenden Whitespace (Einrückungen) anscheinend als Text! Nachdem ich die Blanks löschte, wurde der Kindknoten des <div> korrekt erkannt!
Bis bald im Khyberspace!
Yadgar
hi,
Des Rätsels Lösung: JavaScript interpretiert den im Skriptfile nach <div> stehenden Whitespace (Einrückungen) anscheinend als Text!
Wow, bist du mal wieder ein Schnellmerker, Mr. selbsterklärter Turbokapitalist - darauf wies dich Cybaer schon vor über einer Stunde hin.
Auch wenn du hier selbst schon erklärt hast, dass eigenes Denken für dich nur in äußerst eingeschränktem Maße in Frage kommt, weil Zeit ja für dich Geld ist - wenn du mal mit etwas mehr Verstand und etwas aufmerksamer lesen würdest, könntest du davon noch etwas mehr sparen.
gruß,
wahsaga
High!
Wow, bist du mal wieder ein Schnellmerker, Mr. selbsterklärter Turbokapitalist - darauf wies dich Cybaer schon vor über einer Stunde hin.
Damit konnte ich aber erst einmal nichts anfangen, da er offensichtlich Mozilla und IE hinsichtlich ihrer Behandlung von Zeilenumbrüchen im Quelltext verwechselt hatte!
Auch wenn du hier selbst schon erklärt hast, dass eigenes Denken für dich nur in äußerst eingeschränktem Maße in Frage kommt, weil Zeit ja für dich Geld ist
So ist das eben am Standort Deutschland - übrigens nicht nur für die Kapitalisten im eigentlichen Sinne, sondern für schlichtweg JEDEN, der im immer härter werdenden globalen Wettbewerb sein nacktes Überleben sichern will! Warts ab, sehr bald wird es überhaupt keine Staatsknete für Underachiever mehr geben, dann stapeln sich in unseren Städten die Leichen der Verhungerten und Erfrorenen... survival of the fittest, der Börse wird es nur recht sein!
Nun reg' dich mal wieder ab, hier ist ja meine Lösung:
var i=1;
var knoten = document.getElementById("haupt").getElementsByTagName("p")[2];
while (knoten.className != "n")
{
if (knoten.nodeName == "P")
{
var num = document.createTextNode(i.toString() + ". ");
knoten.insertBefore(num, knoten.firstChild);
i++;
}
if (knoten.nodeName == "DIV")
{
var j = 1;
subknoten = knoten.getElementsByTagName("p")[0];
while (subknoten != null)
{
var subnum = document.createTextNode((i-1).toString() + "." + j.toString() + " ");
if (subknoten.nodeName == "P")
{
subknoten.insertBefore(subnum, subknoten.firstChild);
j++;
}
subknoten = subknoten.nextSibling;
}
}
knoten = knoten.nextSibling;
}
Bis bald im Khyberspace!
Yadgar
Hi,
Damit konnte ich aber erst einmal nichts anfangen, da er offensichtlich Mozilla und IE hinsichtlich ihrer Behandlung von Zeilenumbrüchen im Quelltext verwechselt hatte!
LOL
Gruß, Cybaer
hi,
IE und Moz interpretieren hier das W3C-DOM unterschiedlich. Für den IE ist ein Zeilenumbruch im Quelltext z.B. ein eigener Textknoten.
War's nicht genau andersherum IIRC?
gruß,
wahsaga
Hi,
War's nicht genau andersherum IIRC?
Ich würd's nicht beschwören. Und ist mir auch egal, da ich ja ohnehin browserunabhängig programmiere. ;-)
Gruß, Cybaer