nicht angemeldet
Gernot Back
Tim Tepaße
Gernot Back
MudGuard
Gernot Back
MudGuard
Hallöle,
ich habe mal wieder eine große Tabelle (mit PHP erstellt). Sie hat Gruppenüberschriften, dann folgen Zeilen mit Eingabefeldern.
Wegen der Übersichtlichkeit möchte ich NUR die Überschrift anzeigen und bei Klick mit JavaScript die zugehörigen Folgezeilen einblenden.
Aber das Wegblenden in der Tabelle klappt nicht:
#gruppe1 { display:none }
<table>
<tr><td>Gruppe 1</td></tr>
<div id='gruppe1'>
<tr><td>Artikel 1-1: <input ...></td></tr>
<tr><td>Artikel 1-2: <input ...></td></tr>
</div>
<tr><td>Gruppe 2</td></tr>
<div id='gruppe2'>
<tr><td>Artikel 2-1: <input ...></td></tr>
<tr><td>Artikel 2-2: <input ...></td></tr>
</div>
</table>
Wie geht es?
LG Kalle
Hallo,
http://de.selfhtml.org/html/tabellen/aufbau.htm#kopf_koerper_fuss
gruss
Hallo Kalle_Worms,
Aber das Wegblenden in der Tabelle klappt nicht:
da wo du es platziert hast, hat ein <div>-Element ja auch wahrlich nichts verloren. eine ganze Table-Row wegzublenden ist aber kein Problem. Später solltest du es dann auch wieder einblenden über display:table-row. Gib deinen Tabellenzeilen IDs à la A1 für die erste Zeile der Gruppe und A2 für die zweite, leg entsprechende Arrays an dann -denke ich- kannst du die Dinger auch gemeinsam mit JS ein- und ausblenden.
Gruß Gernot
Hi Gernot,
Gib deinen Tabellenzeilen IDs à la A1 für die erste Zeile der Gruppe und A2 für die zweite, leg entsprechende Arrays an dann -denke ich- kannst du die Dinger auch gemeinsam mit JS ein- und ausblenden.
Kann man mit Javascript eigentlich auch die CSS Eigenschaften einer CSS Klasse ändern? Wäre doch wesentlich praktischer hier ;-)
MfG, Dennis.
Hallo Dennis,
Kann man mit Javascript eigentlich auch die CSS Eigenschaften einer CSS Klasse ändern? Wäre doch wesentlich praktischer hier ;-)
http://de.selfhtml.org/javascript/objekte/style.htm
Tim
Hi Tim,
Kann man mit Javascript eigentlich auch die CSS Eigenschaften einer CSS Klasse ändern? Wäre doch wesentlich praktischer hier ;-)
Ich glaube wir reden etwas aneinander vorbei - ich meinte nicht einzelne Elemente direkt formatieren, sondern ein CSS Klasse beeinflussen, also so:
<style type="text/css">
<!--
.meineklasse { color:#0000FF; }
-->
</style>
Und jetzt soll meineklasse den color Wert #FF0000 haben - geht so was auch?
MfG, Dennis.
Hallo Dennis,
Ich glaube wir reden etwas aneinander vorbei - ich meinte nicht einzelne Elemente direkt formatieren, sondern ein CSS Klasse beeinflussen, also so:
<style type="text/css">
<!--
.meineklasse { color:#0000FF; }
-->
</style>Und jetzt soll meineklasse den color Wert #FF0000 haben - geht so was auch?
Guck Dir mal < http://www.quirksmode.org/dom/changess.html> an.
Viele Grüße,
Christian
Hi Christian,
Guck Dir mal http://www.quirksmode.org/dom/changess.html an.
Sieht auf den ersten Blick gut aus - habs mir gebookmarked, werde mir das dann mal bei Gelegenheit zu Gemüte führen. Thx.
MfG, Dennis.
ERROR: Standard-Begrüssung #128 not found
Habe ich mich auch schon oft gefragt...
Ich muss immer so doof ne ganz eigene klasse haben nur weil bei onmouseover an einer stelle der bg blau werden soll...
<MFG>
Sebastian Salzgeber
</MFG>
(aka:Indyaner)
Hallo Sebastian,
Ich muss immer so doof ne ganz eigene klasse haben nur weil bei onmouseover an einer stelle der bg blau werden soll...
Wenn Du das ganze direkt in den Event-Handler im HTML-Element reinschreibst, dann empfiehlt sich das Objekt this, das auf das aktuelle Element Bezug nimmt, hier also auf das aufrufende Objekt.
Tim
Hallo nochmal,
Später solltest du es dann auch wieder einblenden über display:table-row. Gib deinen Tabellenzeilen IDs à la A1 für die erste Zeile der Gruppe und A2 für die zweite, leg entsprechende Arrays an dann -denke ich- kannst du die Dinger auch gemeinsam mit JS ein- und ausblenden.
Ich habe mal was gebastelt, das auch ohne von Hand angelegte Arrays ankommt und stattdessen mit indexOf() arbeitet. Der IE muss display:block haben, um die Zeilen einzublenden, Opera und Mozilla können das hingegen dem Standard entsprechend.
Gunnar Bittersmann
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>Tabellenteile wegblenden</title>
<meta name="author" content="Gernot Back">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<script language="JavaScript">
<!--
[code lang=javascript]
var zeilen;
function init () {
zeilen = document.getElementsByTagName('tr');
}
function einaus (was) {
for (i=0; i<zeilen.length ; i++ ) {
if(zeilen[i].id.indexOf(was)>=0) {
if(zeilen[i].style.display=='none') {
if(document.all&&!window.opera) {
zeilen[i].style.display='block';
} else {
zeilen[i].style.display='table-row';
}
} else {
zeilen[i].style.display='none';
}
}
}
}
//-->
</script>
</head>
<body onLoad="init()">
<table border="1" width="100%">
<tr>
<th colspan="2"><a href="#" onClick="einaus('gruppeA')">Gruppe A</a></th>
</tr>
<tr id="gruppeA1" style="display:none">
<td> </td>
<td> </td>
</tr>
<tr id="gruppeA2" style="display:none">
<td> </td>
<td> </td>
</tr>
<tr id="gruppeA3" style="display:none">
<td > </td>
<td> </td>
</tr>
<tr>
<th colspan="2"><a href="#" onClick="einaus('gruppeB')">Gruppe B</a></th>
</tr>
<tr id="gruppeB1" style="display:none">
<td> </td>
<td> </td>
</tr>
<tr id="gruppeB2" style="display:none">
<td> </td>
<td> </td>
</tr>
<tr id="gruppeB3" style="display:none">
<td> </td>
<td> </td>
</tr>
<tr>
<th colspan="2"><a href="#" onClick="einaus('gruppeC')">Gruppe C</a></th>
</tr>
<tr id="gruppeC1" style="display:none">
<td> </td>
<td> </td>
</tr>
<tr id="gruppeC2" style="display:none">
<td> </td>
<td> </td>
</tr>
<tr id="gruppeC3" style="display:none">
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
[/code]
Gruß Gernot
if(document.all&&!window.opera) {
zeilen[i].style.display='block';
Achtung, diese Abfrage ergibt auch im Konqueror true.
Hi,
if(document.all&&!window.opera) {
zeilen[i].style.display='block';
} else {
zeilen[i].style.display='table-row';
}
Von der bereits erwähnten Fehleranfälligkeit abgesehen, ist dieses Konstrukt sowieso unnötig!
------------------------ schnipp ------------------------
Anmerkung zu unfold: Um ein gefaltetes Element wieder sichtbar zu machen, löscht toggle() den Wert der verwendeten CSS-Eigenschaft display (display=""). So kann man allerdings nur Elemente entfalten, wenn sie vorher auch mit JavaScript gefaltet wurden, aber leider nicht, wenn dies direkt via Style-Angabe geschah (style="display:none"). Zwar sollte man i.d.R. nur mit JavaScript falten, damit sichergestellt ist, daß Browser ohne JavaScript alles darstellen, während man bei JavaScript-Browsern davon ausgehen kann, daß sie auch entfalten können, was sie vorher selbst gefaltet haben, aber die Ausnahme bestätigt bekanntlich die Regel. ;-) Wurde aber nur mit CSS gefaltet, muß explizit die gewünschte Darstellungsart übergeben werden, indem man hinter der gewünschten Aktion, durch einen Doppelpunkt getrennt, auch die gewünschte Darstellungsart übergibt!
------------------------ schnapp ------------------------
Fazit: Zum Entfalten bedarf es nur der korrekten, Browser-abhängigen Angabe, wenn man mit CSS versteckt hat. Nicht aber, wenn dies mit JS geschehen ist, was ja hier ohnehin, aus bereits genannten Gründen, zu bevorzugen ist.
Gruß, Cybaer
Hallo Cybaer,
ich glaube ich sollte dein Schatzkästlein mal systematisch durchwühlen, das lohnt sich ja wirklich.
Ich habe jetzt mal noch eine neue Variante geschrieben, die hoffentlich alle bisherigen Anregungen in diesem Thread berücksichtigt. Dabei sind der JS- und der HTML-Code auch deutlich schlanker geworden. Vor allem ist jetzt auch semantisch gesehen mehr Logik drin, weil die Überschriften jetzt mit zu den Tabellenbereichen gehören, die sie bezeichnen. Gemeinsam ein- und ausgeblendet werden jetzt die td-Nachfahren der jeweiligen tbody-Elemente, deren th-Nachfahren bleiben unberührt.
Allerdings gibt es jetzt mehr CSS. Erstaunlicherweise braucht der IE hier dennoch keine Extrawurst, jedenfalls nicht, was die Display-Eigenschaft angeht. Da er "table-cell" ja meines Wissens nicht versteht, nimmt er halt einfach das, was bei ihm fälschlicherweise als Default-Wert gilt:"block", den er anders als die anderen Browser bei Tabellenzellen dann aber doch wie "table-cell" darstellt.
Für die Borders bei den th-Zellen musste ich dem IE allerdings doch eine Extrawurst braten, sonst wäre es mit dem Collapsing nichts gewesen und ich hätte bei zusammengefalteten Bereichen unerwünschte Abstände gehabt. Für die anderen Browser hätte es eines Typselektors für "th" gar nicht bedurft:
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>Tabellenteile wegblenden - Version 3</title>
<meta name="author" content="Gernot Back">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
<!--
[code lang=css]
table {
width:100%;
border-collapse:collapse;
border:solid 1px #000000;
}
th {
border-top:solid 1px #000000;
}
tbody.hide td{
display:none;
}
tbody.show td{
display:table-cell;
border:solid 1px #000000;
}
-->
</style>
<script type="text/javascript" language="JavaScript">
<!--
function init () {
var grupos = document.getElementsByTagName('tbody');
for (i=0; i<grupos.length; i++ ) {
grupos[i].className='hide';
}
}
function einaus (was) {
var gruppe = was.parentNode.parentNode.parentNode;
if(gruppe.className=='hide') {
gruppe.className='show';
} else {
gruppe.className='hide';
}
}
//-->
</script>
</head>
<body onLoad="init()">
<table>
<tbody>
<tr>
<th colspan="2"><a href="#" onClick="einaus(this)">Gruppe A</a></th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="2"><a href="#" onClick="einaus(this)">Gruppe B</a></th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="2"><a href="#" onClick="einaus(this)">Gruppe C</a></th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>
[/code]
Gruß Gernot
Hi,
ich glaube ich sollte dein Schatzkästlein mal systematisch durchwühlen, das lohnt sich ja wirklich.
Ist ja noch überschaubar. ;-)
Ich habe jetzt mal noch eine neue Variante geschrieben, die hoffentlich alle bisherigen Anregungen in diesem Thread berücksichtigt.
Nein. Es bleibt das Problem, daß bei *großen* Tabellen selbige erst dargestellt, dann erst eingeklappt wird.
Besser: init() in die Tabelle - und: die ohne JS nutzlosen Links raus! =;-o
Und, natürlich, eine Abfrage, ob es überhaupt klappen kann.
Last, but nor least: Daß die Zellenrahmen ans Ausklappen gekoppelt sind, ist sinnlos. Sie sollten auch zu sehen sein, wenn nicht ausgeklappt werden kann (und somit: auch nicht eingeklappt werden konnte! =;-)).
Daraus ergibt sich folgender Code:
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>Tabellenteile wegblenden - Version 4</title>
<style type="text/css">
<!--
table {
width:100%;
border-collapse:collapse;
border:solid 1px #000000;
}
th {
border-top:solid 1px #000000;
}
td {
border:solid 1px #000000;
}
tbody.hide td{
display:none;
}
tbody.show td{
display:table-cell;
}
tbody.hide th{
cursor:pointer; cursor:hand;
}
tbody.show th{
cursor:pointer; cursor:hand;
}
-->
</style>
<script type="text/javascript" language="JavaScript">
<!--
function init () {
if(document.getElementsByTagName) {
var grupos = document.getElementsByTagName('tbody');
for (i=0; i<grupos.length-1; i++ ) {
grupos[i].className='hide';
}
}
}
function einaus (was) {
if(was.parentNode) {
var gruppe = was.parentNode.parentNode;
if(gruppe.className=='hide') {
gruppe.className='show';
} else {
gruppe.className='hide';
}
}
}
//-->
</script>
</head>
<body>
<table>
<tbody>
<tr>
<th colspan="2" onClick="einaus(this)">Gruppe A</th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="2" onClick="einaus(this)">Gruppe B</th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="2" onClick="einaus(this)">Gruppe C</th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
<tbody style="display:none;">
<tr>
<td colspan="2"><script type="text/javascript" language="JavaScript">init()</script></td>
</tr>
</tbody>
</table>
</body>
</html>
Gruß, Cybaer
Hallo Cybaer,
Nein. Es bleibt das Problem, daß bei *großen* Tabellen selbige erst dargestellt, dann erst eingeklappt wird.
Besser: init() in die Tabelle - und: die ohne JS nutzlosen Links raus! =;-o
Hast Recht, solche Links für onClick schreibe ich aus alter Gewohnheit für Netscape4, der hier ja aufgrund gleich mehrerer Objekte und Eigenschaften (node, className) gar nicht erst bedient wird.
Last, but nor least: Daß die Zellenrahmen ans Ausklappen gekoppelt sind, ist sinnlos. Sie sollten auch zu sehen sein, wenn nicht ausgeklappt werden kann (und somit: auch nicht eingeklappt werden konnte! =;-)).
Mist, das hatte ich ursprünglich auch drin;
td,th {
border:solid 1px #000000;
}
... bis ich feststellen musste, dass der IE für th eine Extrawurst bracht, was mich verleitet hat, an falscher Stelle wieder was einzusparen.
Mit deinem init() in der (großen) Tabelle bin ich mir aber nicht so sicher; baut sich diese nicht dennoch erst einmal sichtbar auf, bis das entsprechende Skript erreicht wird und klappt dann erst zu?
Gruß Gernot
Hi,
Mit deinem init() in der (großen) Tabelle bin ich mir aber nicht so sicher; baut sich diese nicht dennoch erst einmal sichtbar auf, bis das entsprechende Skript erreicht wird und klappt dann erst zu?
Ich habe es jetzt nicht konkret ausprobiert, aber wenn ich mit Layout-Tabellen arbeite, ist es so.
Layout-Tabellen haben ja, anders als reines CSS-Layout, den Nachteil, daß der Surfer nicht den Seitenaufbau verfolgen kann. Dieser Nachteil ist aber ein Vorteil, wenn man noch beliebig im Inhalt "rumsauen" möchte! ;-> Der Surfer "wundert" sich dann nicht, was da denn jetzt noch alles passiert ... =;-)
Gruß, Cybaer (ziemlich versaut! >;->)
Hi,
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>Tabellenteile wegblenden - Version 4</title>
<style type="text/css">
<!--
table {
width:100%;
border-collapse:collapse;
border:solid 1px #000000;
}
schade... die (zudem völlig überflüssigen) Kommentare verhindern - ohne erneute Code-Angabe - das Syntax-Highlighting.
freundliche Grüße
Ingo
--
[[barrierefreie Webseitenerstellung](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html)] ([Tanzschritte gesucht?](http://www.1ngo.de/tanz/);-)
Hi,
die (zudem völlig überflüssigen) Kommentare
Wieso "völlig überflüssig"? Das sehe ich anders.
Ich fände es hingegen völlig überflüssig, auf die Kommentar-Tags zu verzichten, nur für ein bißchen überflüssiges Bunti-Bunti! ;->
Gruß, Cybaer
Hi,
die (zudem völlig überflüssigen) Kommentare
Wieso "völlig überflüssig"? Das sehe ich anders.
Für welche Browser willst Du heutzutage noch Script- oder Style-Bereiche auskommentieren?
Aber abgesehen davon, würde es diese Probleme mit dem Syntax-Highlighting nicht geben, wenn die Software Script- und Style-Tags interpretieren könnte und die passenden Code-Blöcke (innerhalb von code lang=html) generieren würde. Aber ich wiederhole mich, sorry.
freundliche Grüße
Ingo
你好 Ingo,
Aber abgesehen davon, würde es diese Probleme mit dem Syntax-Highlighting
nicht geben, wenn die Software Script- und Style-Tags interpretieren
könnte und die passenden Code-Blöcke (innerhalb von code lang=html)
generieren würde. Aber ich wiederhole mich, sorry.
Abgesehen davon geht das nicht, und damit EOD. Ich kann das
Syntax-Highlighting auch einfach wieder ganz deaktivieren, habe ich gar
kein Problem mit.
再见,
克里斯蒂安
Hi,
Wieso "völlig überflüssig"? Das sehe ich anders.
Für welche Browser willst Du heutzutage noch Script- oder Style-Bereiche auskommentieren?
Mal abgesehen vom Umstand, daß ich da noch einige auf meiner Platte habe:
Ich weiß es nicht - und kann es nicht wissen. Deswegen macht man es ja! ;)
Ob da noch ein "Rückständiger" mit z.B. Dreamcast- oder Metabox-Browser surft, oder der User, der seit der ersten Win95-Installation nicht mehr aktualisiert hat (er benutzte den IE 3 zum Surfen). Und solange die Rückwärtskompatibilität noch nicht mal Aufwand erfordert ... =;-)
Aber ich wiederhole mich. ;-)
Aber ich wiederhole mich, sorry.
Hatte ich Dir schon öffentlich aus vollem Herzen zugestimmt? Nein? Sei hiermit nachgeholt! ;-))
Gruß, Cybaer
Hi,
Ich weiß es nicht - und kann es nicht wissen. Deswegen macht man es ja! ;)
hehe - dann wirst Du vom Selfhtml-Update vermulich enttäuscht sein...
Und bei Javascript mußt Du Dich u.U. ohnehin entscheiden, ob Du Uralt-Browser oder XML-Parser zufrieden stellen willst.
freundliche Grüße
Ingo
Hi,
hehe - dann wirst Du vom Selfhtml-Update vermulich enttäuscht sein...
Mag sein. Aber man kann bei einer definierten Zielgrupe, hier: der (angehenden) Webdesigner, sicherlich auch auf bestimmte Softwarevoraussetzungen bestehen. ;-)
Und bei Javascript mußt Du Dich u.U. ohnehin entscheiden, ob Du Uralt-Browser oder XML-Parser zufrieden stellen willst.
Netter Versuch! ;-> Aber da die <script> nicht kennen, werden sie von externen Scripts schonmal gar nicht tangiert! Und ein "<![CDATA[" ist für HTML-Browser ebenfalls ein unbekannter, mithin zu ignorierender Tag. 8-)
Gruß, Cybaer
Hi,
Und bei Javascript mußt Du Dich u.U. ohnehin entscheiden, ob Du Uralt-Browser oder XML-Parser zufrieden stellen willst.
Netter Versuch! ;-> Aber da die <script> nicht kennen, werden sie von externen Scripts schonmal gar nicht tangiert!
das gilt jetzt nicht - oder setzt Du bei einer Auslagerung irgendwo einen HTML-Kommentar?
Und ein "<![CDATA[" ist für HTML-Browser ebenfalls ein unbekannter, mithin zu ignorierender Tag. 8-)
Korrekt - aber ich sprach xml-Parser an und die können den Inhalt von HTML-Kommentaren und damit eine evtl. erforderliche CDATA-Deklaration oder das komplette Script ignorieren.
freundliche Grüße
Ingo
Hi,
das gilt jetzt nicht - oder setzt Du bei einer Auslagerung irgendwo einen HTML-Kommentar?
Nein, aber Scripte lagere ich vorzugweise aus! ;-)
Korrekt - aber ich sprach xml-Parser an und die können den Inhalt von HTML-Kommentaren und damit eine evtl. erforderliche CDATA-Deklaration oder das komplette Script ignorieren.
Natürlich. Aber man nimmt ja *statt* des HTML-Kommentar eben den "unbekannten CDATA-Tag". Das Ergebnis, keine Anzeige des Scripts als Content, ist aus Sicht eines Uralt-HTML-Browsers nicht wesentlich anders! 8-)
Gruß, Cybaer
Hi,
Natürlich. Aber man nimmt ja *statt* des HTML-Kommentar eben den "unbekannten CDATA-Tag". Das Ergebnis, keine Anzeige des Scripts als Content, ist aus Sicht eines Uralt-HTML-Browsers nicht wesentlich anders! 8-)
schön, dann sind wir ja doch einer Meinung, daß der HTML-Kommentar hier ausgedient hat? ;-)
freundliche Grüße
Ingo
Hi,
schön, dann sind wir ja doch einer Meinung, daß der HTML-Kommentar hier ausgedient hat? ;-)
Nein, nicht solange es sich um ein HTML-Dokument handelt! CDATA muß ja mit dem JavaScript-Kommentar // auskommentiert werden und die // sieht man halt in einem uralten Browser! Deswegen schrieb ich auch, daß das aus Sicht eines Uralt-HTML-Browsers "nicht wesentlich anders" sei, keineswegs schrieb ich, daß es "genauso" sei! :) Aber die // sind natürlich zu verschmerzen, wenn man HTML nicht mehr verwendet. Aber solange man es verwendet, solange gibt's den HTML-Kommentar! ;-))
Gruß, Cybaer
Hallo Ingo,
schade... die (zudem völlig überflüssigen) Kommentare verhindern - ohne erneute Code-Angabe - das Syntax-Highlighting.
Nein, das hat damit nichts zu tun. Das war nur ein Problem, wenn man die Blöcke nicht verschachtelt, sondern hintereinander setzt, so wie ich hier:
https://forum.selfhtml.org/?t=103418&m=636960
Im Moment scheint aber gar nichts zu funktionieren mit dem Syntax-Highlighting, offensichtlich weil überall das lang-Attribut verschwunden ist. Oder bin ich der Einzige, bei dem das so ist, möglicherweise aufgrund der Einstellungen an der Benutzeransicht, an der ich gestern gefummelt habe?
Selbst hier, wo Christian die Auszeichnung meines Codes für mich übernommen hat, sehe ich kein Highlighting mehr.
Falls es anderen ebenso geht wie mir, vielleicht erbarmt sich ja dann einer und meldet es dem Bugtracker.
Gruß Gernot
你好 Gernot,
schade... die (zudem völlig überflüssigen) Kommentare verhindern - ohne
erneute Code-Angabe - das Syntax-Highlighting.Nein, das hat damit nichts zu tun. Das war nur ein Problem, wenn man
die Blöcke nicht verschachtelt, sondern hintereinander setzt, so wie ich
hier:
In deinem Posting hatte ich einen Bug, der bereits behoben ist. De Fakto
ist es besser, Code-Bloecke zu verschachteln und nicht hintereinander zu
packen¹, aber es fuehrt nicht dazu, dass nichts mehr geht, im Gegenteil,
das klappt problemlos. Cybaer hat nur halt einfach sein CSS nicht als
solches ausgezeichnet, sondern alles in den lang=html-Block reingepackt.
¹Die verschiedenen Code-Bloecke werden der Reihenfolge nach von innen nach
aussen abgearbeitet. Beispiel:
{code lang=html}
{code lang=javascript}
{/code}
{/code}
{code lang=c}
{/code}
Hier wird zuerst der JavaScript-Block bearbeitet, dann wird dessen Ergebnis
genommen und als HTML-Block verarbeitet. Danach kommt der C-Block dran.
Soweit erstmal zur Funktionsweise des BBCode-Parsers. Das Wissen ist
noetig, um das folgende zu verstehen:
Das Syntax-Highlighting funktioniert mit einer Art Stack-Maschine. Aufgrund
bestimmter Patterns (z. B. <!-- fuer Kommentare) kann man einen “Frame” auf
den Stack packen und bei einem anderen bestimmten Pattern wieder verlassen
(z. B. --> fuer Ende des Kommentars). Macht man nun eine folgende Struktur:
{code lang=html}
...
<!--{/code}
{code lang=javascript}
{/code}
{code lang=html}-->
...
{/code}
dann ist der Parser am Ende des ersten HTML-Blocks im Status "Kommentar".
Den muss er jetzt allerdings verlassen, weil der Block zuende ist, das
heisst also, die Auszeichnung fuer Kommentare wird geschlossen. Dann
beginnt der JavaScript-Block, soweit OK. Danach kommt wieder ein HTML-Block.
Der beginnt mit -->, was eigentlich noch als Kommentar ausgezeichnet werden
muesste. Da aber der Highlighter im falschen Status ist (naemlich dem
Start-Status) und nicht weiss, dass er sich eigentlich im Kommentar-Status
sein sollte, wird es auch nicht als Kommentar ausgezeichnet, sondern
schlicht ignoriert, weil es ein Pattern ist, das keinen Sinn ergibt.
Ich hoffe, jetzt ist klar, warum fuer eine korrekte[tm] Auszeichnung
verschachtelte {code}-Bloecke sinnvoller sind.
Im Moment scheint aber gar nichts zu funktionieren mit dem
Syntax-Highlighting, offensichtlich weil überall das lang-Attribut
verschwunden ist.
Nein, das funktioniert einwandfrei ;-) Du hast es in deiner
User-Konfiguration nur schlicht und ergreifend ausgeschaltet *hrhr*
再见,
克里斯蒂安
Hi,
Ich hoffe, jetzt ist klar, warum fuer eine korrekte[tm] Auszeichnung
verschachtelte {code}-Bloecke sinnvoller sind.
Ich finde sie schon allein deshalb sinnvoller, weil ja auch die zu highlightenden Sprachen ineinander verschachtelt sind.
cu,
Andreas
Hallo Kalle,
<div id='gruppe1'>
<tr><td>Artikel 1-1: <input ...></td></tr>
<tr><td>Artikel 1-2: <input ...></td></tr>
</div>
Wie Du ja schon erfahren hast, ist das div-Element hier fehl am Platz. Eternius hat Dir den richtigen Link in SELFHTMl gepostet, hier noch mal als Quelltext:
<table>
...
<tbody id="gruppe1">
<tr><td>...</td></tr>
<tr><td>...</td></tr>
</tbody>
<tbody id="gruppe2">
...
</tbody>
...
</table>
Das tbody-Element strukturiert eine Tabelle in verschiedene Bereiche über mehrere Zeilen und darf deswegen mehrmals vorkommen. Eventuell möchtest Du dann noch ein thead-Element für Deine Tabellenzellen verwenden, auch wenn mir das nach Deiner Beschreibung der Überschriften nicht ganz so wirklich zu passen scheint.
Tim
Hallo Tim,
Das tbody-Element strukturiert eine Tabelle in verschiedene Bereiche über mehrere Zeilen und darf deswegen mehrmals vorkommen. Eventuell möchtest Du dann noch ein thead-Element für Deine Tabellenzellen verwenden, auch wenn mir das nach Deiner Beschreibung der Überschriften nicht ganz so wirklich zu passen scheint.
danke, das wusste ich auch noch nicht
Weißt du vielleicht das Code-lang-Wort, um JS-Bereiche hier in Postings richtig auszuzeichnen?
lang=javascript scheint falsch zu sein, vielleicht lang=js?
Gruß Gernot
Hallo Gernot.
lang=javascript scheint falsch zu sein, vielleicht lang=js?
Hm?
HTML:
<script type="text/javascript>
alert("Hallo Welt!");
</script>
JavaScript:
alert("Hallo Welt!");
Java (ich weiß, ist ja auch nur ein Versuch. ;) ):
alert("Hallo Welt!");
Gruß, Ashura
Hallo Gernot,
Weißt du vielleicht das Code-lang-Wort, um JS-Bereiche hier in Postings richtig auszuzeichnen? lang=javascript scheint falsch zu sein, vielleicht lang=js?
Eigentlich müßte 'javascript' funktionieren. Hier findest Du eine Auflistung der bisherigen Patterndateien für das Syntaxhightlighting.
Tim
Hallo Tim,
Eigentlich müßte 'javascript' funktionieren. Hier findest Du eine Auflistung der bisherigen Patterndateien für das Syntaxhightlighting.
Na dann gehe ich davon aus, dass das mit den roten Operatoren richtig ist. Das ist meine verbesserte Version, bei der ich die Codeblöcke zur Abwechslung mal nicht verschachtelt habe:
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>Tabellenteile wegblenden</title>
<meta name="author" content="Gernot Back">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<script language="JavaScript">
<!--
var gruppe;
function init () {
gruppe = document.getElementsByTagName('tbody');
}
function einaus (was) {
for (i=0; i<gruppe.length ; i++ ) {
if(gruppe[i].id==was) {
if(gruppe[i].style.display=='none') {
if(document.all&&!window.opera) {
gruppe[i].style.display='block';
} else {
gruppe[i].style.display='table-row-group';
}
} else {
gruppe[i].style.display='none';
}
}
}
}
//-->
</script>
</head>
<body onLoad="init()">
<table border="1" width="100%">
<tr>
<th colspan="2"><a href="#" onClick="einaus('gruppeA')">Gruppe A</a></th>
</tr>
<tbody id="gruppeA" style="display:none">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td > </td>
<td> </td>
</tr>
</tbody>
<tr>
<th colspan="2"><a href="#" onClick="einaus('gruppeB')">Gruppe B</a></th>
</tr>
<tbody id="gruppeB" style="display:none">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
<tr>
<th colspan="2"><a href="#" onClick="einaus('gruppeC')">Gruppe C</a></th>
</tr>
<tbody id="gruppeC" style="display:none">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>
Gruß Gernot
Hi,
kann es sein, daß derartig angegebene HTML-Kommentare:
<script language="JavaScript">
<!--
> ~~~javascript
> var gruppe;
> function init () {
> gruppe = document.getElementsByTagName('tbody');
> }
>
//-->
</script>
</head>
das schöne Syntax-Highlighting hier durcheinander bringen?
freundliche Grüße
Ingo
--
[[barrierefreie Webseitenerstellung](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html)] ([Tanzschritte gesucht?](http://www.1ngo.de/tanz/);-)
Hallo,
kann es sein, daß derartig angegebene HTML-Kommentare:
das schöne Syntax-Highlighting hier durcheinander bringen?
Wahrscheinlich. Aber Gunar hat auch übersehen, daß man Codeblöcke verschachteln kann. Anstatt seiner Variante ..
<code lang=html>
</code>
<code lang=javascript>
</code>
<code lang=html>
</code>
.. hätte ich diese gewählt:
<code lang=html>
<code lang=javascript>
</code>
</code>
(Die spitzen Klammern sind natürlich eckige.)
Tim
Hi,
Wahrscheinlich. Aber Gunar hat auch übersehen, daß man Codeblöcke verschachteln kann. Anstatt seiner Variante ..
stimmt, dann klappts auch mit dem Syntaxhighlighting.
Wobei ich mich frage, ob es nicht viel anwendungsfreundlicher wäre, wenn das Forum den Code selbst entsprechend interpretieren würde. Zumindest innerhalb von code lang=html ausgezeichnete style- und javascript-Bereiche selbständig erkennen würde; analog zur Linkumsetzung natürlich nur korrekt ausgezeichnete Blöcke, also nix mit <script language="JavaScript"> ;-)
Ich würde sogar noch einen Schritt weitergehen und bei [ code ] <html> sinnvoll finden, daß auch das erkannt wird.
freundliche Grüße
Ingo
Hallo Tim,
wahrscheinlich meinst du mich.
Wahrscheinlich. Aber Gunar hat auch übersehen, daß man Codeblöcke verschachteln kann. Anstatt seiner Variante ..
<code lang=html>
</code>
<code lang=javascript>
</code>
<code lang=html>
</code>.. hätte ich diese gewählt:
<code lang=html>
<code lang=javascript>
</code>
</code>(Die spitzen Klammern sind natürlich eckige.)
Nein, das hatte ich nicht übersehen, mir kamen nur bei meinem ersten Posting die knallroten Operatoren im JS-Code komisch vor (knallrot assoziiere ich mit 'Fehler'), sodass ich dachte, entweder stimmt das lang-Attribut nicht, oder man darf vielleicht doch nicht verschachteln.
Jetzt müsste es nur noch mal eine Anleitung zur Codeauszeichnung hier in den FAQs geben und diese auch in der Vorschau funktionieren, sodass man sich kontrollieren kann.
Mal sehen, ob ich heute dazu komme, diese Anregungen auch in den Bugtracker zu schreiben.
Gruß Gernot
Hallo Gernot,
wahrscheinlich meinst du mich.
Ja, entschuldige bitte.
Jetzt müsste es nur noch mal eine Anleitung zur Codeauszeichnung hier in den FAQs geben ...
Ist schon so gut wie drin, der Schuldige an der FAq bin ja ich.
und diese auch in der Vorschau funktionieren, sodass man sich kontrollieren kann.
Ähm, das tut es hier ohne Probleme?
Tim
Hallo Tim,
wahrscheinlich meinst du mich.
Ja, entschuldige bitte.
Keine Ursache, diese seltenen germanischen Namen sind ja sehr verwirrend.
und diese auch in der Vorschau funktionieren, sodass man sich kontrollieren kann.
Ähm, das tut es hier ohne Probleme?
ich bekomme in der Vorschau-Ansicht kein Syntax-Highlighting, obwohl (oder weil?) registrierter Nutzer. Vielleicht bin ich mit dem falschen Browser (IE6) und/oder dem falschen Betriebssystem (Win98) unterwegs.
Gruß Gernot
Hallo Gernot.
ich bekomme in der Vorschau-Ansicht kein Syntax-Highlighting, obwohl (oder weil?) registrierter Nutzer.
Das hat damit nichts zu tun, da ich z. B. auch in der Vorschau-Ansicht Syntax-Highlighting habe.
Vielleicht bin ich mit dem falschen Browser (IE6) und/oder dem falschen Betriebssystem (Win98) unterwegs.
Möglich wäre es. Da der IE sowieso mit nahezu allem ein Problem hat, könnte es durchaus sein, dass er auch hier zickt.
Schon einmal andere Browser ausprobiert?
Gruß, Ashura
Hi,
ich bekomme in der Vorschau-Ansicht kein Syntax-Highlighting, obwohl (oder weil?) registrierter Nutzer. Vielleicht bin ich mit dem falschen Browser (IE6) und/oder dem falschen Betriebssystem (Win98) unterwegs.
Hm. Hast Du evtl. noch ein veraltetes css-File im Cache? (in der Vorschau wird vielleicht ein anderes benutzt als im fertigen Posting?)
Läßt Du Dir das Forum als HTML 4.01 oder als XHTML 1.0 ausliefern (Usereinstellungen - Anzeigefunktionen - ganz oben)
cu,
Andreas
Hallo Andreas,
Läßt Du Dir das Forum als HTML 4.01 oder als XHTML 1.0 ausliefern (Usereinstellungen - Anzeigefunktionen - ganz oben)
da __________________________^^^^^^^^^ hast du mich erwischt. Jetzt hoffe ich dass die Änderung auf XHTML 1.0 bei meinem nächsten Code-Posting auch in meiner Vorschrau was bringt; die von mir gewählten Farben haben sich ja jetzt schon ein weing geändert.
Gruß Gernot
你好 Gernot,
Läßt Du Dir das Forum als HTML 4.01 oder als XHTML 1.0 ausliefern
(Usereinstellungen - Anzeigefunktionen - ganz oben)
da __________________________^^^^^^^^^ hast du mich erwischt. Jetzt hoffe
ich dass die Änderung auf XHTML 1.0 bei meinem nächsten Code-Posting auch
in meiner Vorschrau was bringt; die von mir gewählten Farben haben sich
ja jetzt schon ein weing geändert.
Ob du die HTML4- oder die XHTML-Templates benutzt, macht keinerlei
Unterschied. Der Grund war schlicht, dass Syntax-Highlighting in fo_post
nicht global aktiviert war, sondern User-Abhaengig.
再见,
克里斯蒂安
Hi,
Ob du die HTML4- oder die XHTML-Templates benutzt, macht keinerlei
Unterschied. Der Grund war schlicht, dass Syntax-Highlighting in fo_post
nicht global aktiviert war, sondern User-Abhaengig.
Ein Überbleibsel aus der Zeit, als das Highlighting insgesamt nur für registrierte User ging, falls diese es aktiviert hatten?
cu,
Andreas
你好 MudGuard,
Ob du die HTML4- oder die XHTML-Templates benutzt, macht keinerlei
Unterschied. Der Grund war schlicht, dass Syntax-Highlighting in fo_post
nicht global aktiviert war, sondern User-Abhaengig.Ein Überbleibsel aus der Zeit, als das Highlighting insgesamt nur für
registrierte User ging, falls diese es aktiviert hatten?
Ja.
再见,
克里斯蒂安
你好 Ingo,
kann es sein, daß derartig angegebene HTML-Kommentare:
<script language="JavaScript">
<!--
> > ~~~javascript
> > var gruppe;
> > function init () {
> > gruppe = document.getElementsByTagName('tbody');
> > }
> >
//-->
</script>
</head>
> das schöne Syntax-Highlighting hier durcheinander bringen?
Nein, das war ein Bug, ich habe aus Versehen immer das letzte geladene
Patternfile gewaehlt, nicht das richtige. Das war dann in diesem Fall
JavaScript :)
再见,
克里斯蒂安
--
Fortune: We are all born equal... just some of us are more equal than others.
Wegen der Übersichtlichkeit möchte ich NUR die Überschrift anzeigen und bei Klick mit JavaScript die zugehörigen Folgezeilen einblenden.
Kalle,
Der Ansatz ist falsch, da so User ohne JavaScript keine Mögichkeit haben, die Folgezeilen einblenden.
Lass im Stylesheet alles sichtbar und mache die Folgezeilen per JavaScript unsichtbar, und nach Klick (bzw. Tastendruck – wie können sonst User ohne Maus die Folgezeilen einblenden?) wieder sichtbar.
Gunnar
Hallo Gunnar,
Kalle,
Der Ansatz ist falsch, da so User ohne JavaScript keine Mögichkeit haben, die Folgezeilen einblenden.
Lass im Stylesheet alles sichtbar und mache die Folgezeilen per JavaScript unsichtbar, und nach Klick (bzw. Tastendruck – wie können sonst User ohne Maus die Folgezeilen einblenden?) wieder sichtbar.
Du hast natürlich Recht. Deshalb packe ich das Unsichtbarschalten bei mir auch mal lieber in die init-Funktion, die erst onLoad im Body-Element aufgerufen wird. Und ziehe dort alle inline-styles mit display:none zurück:
function init () {
gruppe = document.getElementsByTagName('tbody');
for (i=0; i<gruppe.length ; i++ ) {
if (gruppe[i].id)
gruppe[i].style.display='none';
}
}
Gruß Gernot
Hi,
Du hast natürlich Recht. Deshalb packe ich das Unsichtbarschalten bei mir auch mal lieber in die init-Funktion, die erst onLoad im Body-Element aufgerufen wird.
Besser ist es IMHO, so etwas direkt nach oder noch besser innerhalb der Tabelle (und sei es eine umfassende) zu tun. Da zuerst die Tabelle fertig gerendert wird, ändert sich dann, anders als bei onLoad, das Erscheinungsbild der Seite nicht mehr nachträglich.
Gruß, Cybaer
Kalle,
Der Ansatz ist falsch, da so User ohne JavaScript keine Mögichkeit haben, die Folgezeilen einblenden.
Nein, ich habe danach gefragt, wie man Zeilen einer Tabelle ausblendet. Du sprichst eine ganz andere Baustelle an, die ich gar nicht eingerichtet habe.
<script type="text/javascript"></script>
document.write("<style type='text/css'>");
document.write("#gruppe1 { display:none }");
document.write("</style>");
</script>
Wer kein JavaScript hat, sieht alles, nur unübersichtlicher.
Kalle
Kalle_Worms,
<script type="text/javascript"></script>
document.write("<style type='text/css'>");
document.write("#gruppe1 { display:none }");
document.write("</style>");
</script>
OK, so geht's auch.
Gunnar