Hallo

Ich habe mal einen JS-Schnipsel erstellt und getestet, der eine Linkliste zu den einzelnen Abschnitten generiert. Das Skript sammelt die ID der fieldsets und die Texte der dazugehörigen legends ein und baut daraus die Liste, die an das div.cf-tab-content angehängt wird. Die wird an das Ende von div.cf-tab-content gesetzt, was so natürlich nicht den gewünschten Zweck erfüllt.

EDIT: mit prepend geht die Liste natürlich auch an den Anfang. Mann, Mann, Mann …

Später könnte man z.B. aus dem HTML-Code die Tableiste erstellen.

$(document).ready(function(){
	var targetlist = '<ul class="tabswitcher"></ul>', targets = '';
	$('.cf-tab-content').append(targetlist)
	$('.cf-tab-pane').each(function(){
		targets += '<li><a href="#' + this.id + '">' + $(this).children('legend').text() + '</a></li>';
	})
	$('.tabswitcher').append(targets)
})

Tschö, Auge

Hallo Auge,

Ich hab' da nach Rücksprache mit @marctrix mal was vorbereitet. In den Dateien selfforum-settingsmenu.css und selfforum-settingsmenu.js findet sich ein Prototyp für die Aufteilung der Anzeige des Formulars für die Benutzereinstellungen.

Ich hab auch direkt eine Bitte: bitte mit history.pushState()/history.popState() arbeiten, so dass die History nicht kaputt geht und die einzelnen Tabs verlinkbar sind :) Danke!

LG,
CK

Hej Auge,

Könnte ich diese Klasse dazu benutzen, sie, je nach ausgewähltem Abschnitt, zu versetzen?

Klar, tu dir keinen Zwang an ;)

Ich hab' da nach Rücksprache mit @marctrix mal was vorbereitet

Ich finde: das ist viel besser als vorher!

Ich habe allerdings nicht viel dazu beigetragen. Ehre wem Ehre gebührt!

Marc

Hallo Christian Kruse,

Nein, nicht wirklich. Ich kann ja nicht für jeden User eine CSS-Regel erstellen (auch wenn ich es lieber hätte). Das ist einfach nicht praktikabel.

Warum nicht? Jetzt holst du den Pfad zum Avatar doch auch jedesmal aus der DB?

Warum kannst du nicht eine CSS-Ressource erstellen mit

.registered-user > a:first-child::before {
    content: url("/images/thumb/missing.png");
}

.registered-user.ID > a:first-child::before {
    content: url("/images/thumb/ID.png");
}

Und in der Nachricht statt

<span class="registered-user">
	<a href="/users/ID" class="user-link" title="Benutzer Name">
		<img alt="Missing" src="/images/thumb/missing.png" class="avatar">
	</a>
	<a href="/users/ID">Name</a>
</span>

dies

<span class="registered-user ID">
	<a href="/users/ID" title="Benutzer Mona Maciejewski">Mona Maciejewski</a>
</span>

Und im Threadbaum statt

<span class="registered-user">
	<a href="/users/ID" class="user-link" title="Benutzer Name">
		<img alt="Missing" src="/images/thumb/missing.png" class="avatar">
	</a>
	<a href="Link zur Nachricht">Name</a>: </span>
	...
</span>

dies

<span class="registered-user ID">
	<a href="/users/ID" class="user-link" title="Benutzer Name"> </a>
	<a href="Link zur Nachricht">Name</a>: </span>
	...
</span>

Bis demnächst
Matthias

Hej Christian,

Am besten wäre Avatar und Name in einem Link. Der Alternativ-Text für den Avatar wäre dann "Zum Profil vom Benutzer"

Vorgelesen würde dann z. B. "Zum Profil von Benutzer Marctrix"

Und jetzt bitte nochmal in den Threadbaum schauen ;-) das ist so nicht machbar.

erwischt ;-)

Der Avatar könnte dann per CSS eingefügt werden

Nein, nicht wirklich. Ich kann ja nicht für jeden User eine CSS-Regel erstellen (auch wenn ich es lieber hätte). Das ist einfach nicht praktikabel.

;-) nicht zu Ende gedacht - ich hatte ja angedeutet, dass ich das so runter geschrieben habe... - kommt dann leider manchmal so was bei rum. Mir ging es darum, die Probleme und die Vor- und Nachteile verschiedener Lösungsansätze aufzuzeigen, weil ich am Handy eben keine Quellcode-Analyse machen kann, musste ich allgemein bleiben und habe nicht alles bis zum Ende durchdacht. Abgesehen, dass solche Dinge manchmal erst bei der Umsetzung auffallen, weil ein ganzes team nicht an das scheinbar offensichtliche gedacht hat...

Weiter ist zu bedenken, dass title-Attribute von Screenreadern defaultmäßig nicht vorgelesen werden. Diese enthalten einfach zu oft redundante Informationen.

Schade; ich verstehe allerdings die Problematik.

Vielleicht sollte man eher sowas in diese Richtung anstreben:

<span class="author">
  <span class="registered-user">
    <a title="Benutzer marctrix" class="user-link" href="profilelink">
      <span class="visually-hidden">Zum Profil von </span>
      <img class="avatar" src="..." alt="Benutzer Mactrix" title="Zum Profil von Benutzer Mactrix" />
    </a>
    <a href="posting-link" aria-hidden="true">marctrix</a>
  </span>
</span>
<a href="posting-link">
  <time datetime="...">...</time>
</a>

Ich denke, das ist der beste Kompromiss!

Gruß, Marc

@@Christian Kruse

Am besten wäre Avatar und Name in einem Link.

Ja!!1elf Avatar und Name gehören zusammen; der Avatar steht ja für einen Nutzer.

Und jetzt bitte nochmal in den Threadbaum schauen ;-) das ist so nicht machbar.

Wieso „nicht machbar“?

Ich finde es verwirrend, dass der verlinkte Name nicht zum Nutzerprofil führt, sondern zum Posting. Zumal das nicht konsistent ist: bei der Angabe des Autors über einem Posting führt der Name ja doch zum Profil.

Und wie kommt man vom Threadbaum zum Profil von Nutzern, die keinen Avatar haben?

So richtig durchdacht scheint mir die gegenwärtige Lösung nicht zu sein.

LLAP 🖖