Tabellenspalte bei :hover markieren

[Matthias Apsel]

Hallo alle,

function markColumn(el,color) {
  var n = $(el).index() + 1; 
  if (n > 2) {
    $('#table td:nth-child('+ n +'):not([colspan]), #table thead th:nth-child('+ n +')').css('background',color); 
  }
}

$('td:not([colspan]), thead th').mouseover(function(){
  markColumn(this,'#fff8dc');
});
$('td:not([colspan]), thead th').mouseout(function(){
  markColumn(this,'');
});

Dieses Script sorgt dafür, dass die Tabellenspalte, über der sich der Mauszeiger befindet, hervorgehoben wird. Für das Wiki hätte ich gern eine JQuery-freie Variante. Wie würde man das umsetzen?

Bis demnächst
Matthias

[Matthias Scharwies]

Servus!

Hallo alle,

function markColumn(el,color) {
  var n = $(el).index() + 1; 
  if (n > 2) {
    $('#table td:nth-child('+ n +'):not([colspan]), #table thead th:nth-child('+ n +')').css('background',color); 
  }
}

$('td:not([colspan]), thead th').mouseover(function(){
  markColumn(this,'#fff8dc');
});
$('td:not([colspan]), thead th').mouseout(function(){
  markColumn(this,'');
});

Dieses Script sorgt dafür, dass die Tabellenspalte, über der sich der Mauszeiger befindet, hervorgehoben wird. Für das Wiki hätte ich gern eine JQuery-freie Variante. Wie würde man das umsetzen?

Hier ist ein Beispiel im Wiki mit Reihen, nicht Spalte:

• CSS/Tutorials/Tabellen_mit_CSS_gestalten#Markierung_von_Zeilen_bei_:hover
  • Beispiel:CSS-Anw-Tabelle-6.html#view_result

Evtl. mit scope="col" als Selektor?

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Chris Coyier macht's mit Pseudoelementen:

https://css-tricks.com/simple-css-row-column-highlighting/

Würd ich aber nicht nachmachen.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Coyier schreibt:

because there is no single HTML element that is parent to table cells in a column

Das ist nicht ganz richtig - zumindest bei neueren Browsern (FF, Chrome, Edge) ist es so, dass ich dies schreiben kann:

<table>
  <colgroup><col><col><col><col></colgroup>
  <tr><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td></tr>
</table>

und dann einem col-Element eine Hintergrundfarbe geben. Daraufhin färbt sich der Spaltenhintergrund. Das klappt auch im IE11.

Man sollte es aber vermeiden, soetwas in Tables zu machen die colspan verwenden. In der Zeile, wo der colspan ist, gibt's Durcheinander.

Rolf

[Linuchs]

Hallo Matthias,

habe diesen Vorschlag:

  /* hover-Markierung innerhalb der Tabelle halten */
  table {
    overflow: hidden;
  }
  tbody td:hover::after {
    position: absolute;
    left: 0;
    top: -100vh;
    display: block;
    content: "";
    width: 100%;
    height: 200vh;
    background: rgba(0,0,0,.05);
    z-index: -1;  /* damit Links klickbar bleiben */
  }

Gruß, Linuchs

[marctrix]

Hej Linuchs,

habe diesen Vorschlag:

Das ist der von Chris Coyier (CSS-Tricks), den Matthias aus guten Gründen nicht wollte.

  /* hover-Markierung innerhalb der Tabelle halten */
  table {
    overflow: hidden;
  }

Ob das bei großen Tabellen noch zugänglich und responsiv machbar ist (ist ja vor der weiteren Spielerei erst mal das Wesentliche, was sichergestellt werden sollte)…

Müsste man erst mal probieren, komme ich aber nicht zu.

  tbody td:hover::after {
    z-index: -1;  /* damit Links klickbar bleiben */
  }

Dank z-index: -1 hat sich das dann erledigt: wie Sol man die Färbung denn noch sehen, wenn man die Farbe hinter die Tabelle legt? - Ich gehe mal davon aus, dass Vordergrundfarbe und Hintergrundfarbe zur Sicherstellung ausreichender Kontraste bereits festgelegt sind?

Wofür benötigt man das überhaupt?

Dass es weitere Probleme schafft, ist hoffentlich klar? - Beispielsweise lenkt es vom Lesen der Inhalte ab.

Und wie bereits erwähnt: zusammengefasste Zellen sind auch ein Problem (nicht, dass man die nicht vielleicht alle lösen könnte, aber das hier vorgestellte ist eben keine Lösung, sondern etwas ziemlich unfertiges von dem Herrn Coyier... - wie so oft. Zumal er selten seine eigenen Ideen verbreitet. Meist sind es ja Gastautoren, die dort inzwischen veröffentlichen…

Marc

[Linuchs]

Hallo Marc,

wie Sol man die Färbung denn noch sehen, wenn man die Farbe hinter die Tabelle legt?

Beim Foto mit Gimp steht der Mauszeiger irgendwo in der Spalte „Funktion“. Die Farbe wird offenbar nicht hinter die Tabelle, sondern hinter die einzelnen Zellen der Spalte gelegt td:hover::after. Ich habe ein sehr transparentes Schwarz gehaucht background: rgba(0,0,0,.05);:

Damit stehen die Zellen-Inhalte (Text) vor dem Hauch und können angeklickt / markiert werden.

Die Markierung der Zeilen (tr) scheint deutlich durch. Sowohl odd/even als auch eine durch Klick grün markierte Zeile. Der Klick dafür erfolgt in die td, die ja über dem Hauch liegt und wird weitergereicht an die tr darunter. Das war vorher schon so, bevor ich die Spalten-Markierung für diesen Faden ausprobiert habe.

Ob das bei großen Tabellen noch zugänglich ...

Der Ausschnitt ist aus einer Tabelle mit 412 Positionen. Groß genug?

Beispielsweise lenkt es vom Lesen der Inhalte ab.

Tja, das war aber der Wunsch des Faden-Eröffners, den Sinn habe ich auch nicht verstanden und habe ihn als Grundlagen-Forschung verbucht. War ein verspäteter Halloween-Spuk, den man durch Löschen der CSS-Einträge spurlos wieder austreiben kann.

Gruß, Linuchs

[marctrix]

Hej Linuchs,

wie Sol man die Färbung denn noch sehen, wenn man die Farbe hinter die Tabelle legt?

Die Markierung der Zeilen (tr) scheint deutlich durch.

Nach der reinen Lehre sollte sie das nicht: Vorder- und Hintergrundfarbe eines Elementes sollten so angegeben werden, dass ausreichende Kontraste sichergestellt sind.

Bei durchsichtigen Zellen könnte ein dahinterliegendes Element für unzureichende Kontraste sorgen.

Die Zelle darf (wie in Deinem Beispiel mit der Zeile auch leicht umsetzbar) dann eine andere Farbe annehmen, wenn der Kontrast dann immer noch ausreicht (4.5:1).

Ob das bei großen Tabellen noch zugänglich ...

Der Ausschnitt ist aus einer Tabelle mit 412 Positionen. Groß genug?

Der Ausschnit zeigt eine Zeilen-Hervorhebung…

Als kritisch habe ich das overflow angemerkt, das ich bei dir jetzt nicht sehe. Setzt du es ein?

Marc

[Felix Riesterer]

Lieber Matthias,

vielleicht so (Demo)?

// old browsers
function toArray(collection) {
  return Array.prototype.slice.call(collection);
}

function markColumn (event) {
  var index = (event.target || event.srcElement).cellIndex,
      table = (event.target || event.srcElement);

  // get <table> ancestor
  while (!table.tagName.match(/^body|table$/i)) {
    table = table.parentNode;
  }

  if (table.tagName == "TABLE") {
    // do something to the cells
    toArray(
      table.querySelectorAll("td:not([colspan]), thead th")
    ).forEach(function (cell) {
      // correct column?
      if (cell.cellIndex === index) {
        // hover on or off?
        if (event.type == "mouseover") {
          // hover on
          cell.setAttribute("data-hover", "hover");
        } else {
          // hover off
          cell.removeAttribute("data-hover");
        }
      }
    });
  }
}

// make (almost) all table cells hover-able
toArray(
  document.querySelectorAll("td:not([colspan]), thead th")
).forEach(function (el) {
  el.addEventListener("mouseover", markColumn);
  el.addEventListener("mouseout", markColumn);
});

Das passende CSS wäre das hier:

[data-hover] {
  /* whatever */
  background: #faa;
}

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Matthias,

ab Internet Explorer 10 geht dies hier:

<table class="hovertable">
  <colgroup><col><col><col><col></colgroup>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
    </tr>
  </thead>
  <tbody>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td colspan=2></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
  </tbody>
</table>    

Das CSS ist egal, und dies ist mein JS. Man kann es bspw. in eine IIFE am Ende des Body stellen. Oder in ein Modul, zusammen mit einem Ready-Handler.

function markColumn(evt) {
  if (!evt.target) return;

  var cell = evt.target;
  if (!(evt.target instanceof HTMLTableCellElement)) return;
  
  var table = cell.parentElement;
  while (table && !(table instanceof HTMLTableElement))
     table = table.parentElement;
     
  if (!table || !table.classList.contains("hovertable")) return;
  
  var n = cell.cellIndex + 1;
  var color = evt.type == "mouseover" ? "#ffccaa" : "";
  if (n > 2) {
    let x = table.querySelector("col:nth-child("+n+")").style.background = color;
  }
}

document.addEventListener("mouseover", markColumn);
document.addEventListener("mouseout", markColumn);

Ich registriere mouseover und mouseout am Dokument und suche das table-Element zur cell im Eventhandler. Statt dessen könnte man auch mit querySelectorAll alle .hovertables suchen und die Events auf den Tables registrieren. Dann bekommt man das table-Element als currentTarget geschenkt. Beides geht, beides hat Vor- und Nachteile.

Es ist jedenfalls falsch, in der markColumns Methode eine irgendwie geartete Kennzeichnung der Table fest zu verdrahten. markColumn darf nicht auf eine spezielle ID oder Klasse festgelegt sein.

Statt der parentElement Suche könnte man auch closest('table') verwenden, das braucht dann einen Polyfill für den Internet Explorer oder der Highlighter funktioniert dort dann nicht. Wenn man das Event auf den tables registriert, hätte man auch eine Erleichterung für die Suche nach dem Table-Element, denn dann ist das currentTarget die Table und man muss sie nicht mehr suchen.

Die classList.contains Eigenschaft funktioniert ab IE10, das ist mMn heutzutage hinreichend.

Statt die Zellen mit Hintergrund zu versehen, setze ich die background Eigenschaft auf dem col-Element. Dazu muss die Table eine Dummy-colgroup-Definition bekommen; das ist jedenfalls deutlich simpler als die Spalte abzulaufen. Es funktioniert nur nicht, wenn die Zellen eine eigene Farbgebung haben.

Um mit colspans klarzukommen, muss man vermutlich über Mauszeigerpositionen arbeiten. Dazu muss man aber erstmal die Beginn-Offsets aller ungespannten Spalten finden, z.B. über die th im thead - die col-Elemente haben keine Position. Und dann hat man das Problem, dass dann, wenn eine Spalte markiert wird wo eine colspan-Zelle drin ist, die Markierung aus der Spalte hinausläuft. Um es visuell ganz sauber zu haben, muss man vermutlich tatsächlich der Table ein Pseudoelement überlagern.

Rolf

[Matthias Apsel]

Hallo Rolf B,

das sind doch mal zwei (Felix' und deiner) gute Vorschläge. Welchen übernehmen wir für das Wiki?

Bis demnächst
Matthias

[1unitedpower]

das sind doch mal zwei (Felix' und deiner) gute Vorschläge. Welchen übernehmen wir für das Wiki?

Mir gefällt an Felix' Lösung besser, dass sie ohne Event-Delagation arbeitet. Mouse-Events können sehr häufig auftreten, da dürfte es etwas sparsamer sein, wenn die Event-Handler direkt an den Zellen registriert werden und nicht am document. Event-Delegation hat dafür den Vorteil, dass sie auch funktioniert, wenn eine Zelle dynamisch nachgeladen wird. Ich weiß nicht, ob es diesen Fall im Wiki gibt.

Außerdem halte ich es für robuster mit cellIndex anstatt mit nth-child zu arbeiten. Dann funktioniert das auch mit colSpan.

Ansonsten sind mir noch ein paar Kleinigkeiten aufgefallen, deshalb habe ich Felix' Version nochmal etwas überarbeitet. Ich habe zwei Versionen daraus gemacht, jenachdem ob der IE11 noch unterstüzt werden soll oder nicht. FF, Chrome und Edge habe ich jeweils in der aktuellen Version getestet. Zu Safari habe ich momentan keinen Zugang.

Nur für FF, Chrome und Edge:

window.addEventListener('DOMContentLoaded', _ => {
  const cells = document.querySelectorAll(
    'table.highlightable-columns td:not([colspan]), table.highlightable-columns th:not([colspan])'
  )
  for (const cell of cells) {
    cell.addEventListener('mouseenter', toggleColumn)
    cell.addEventListener('mouseleave', toggleColumn)
  }

  function toggleColumn (event) {
    const target = event.target
    const table = target.closest('table') || {rows: []}
    for (const row of table.rows) {
      for (const cell of row.cells) {
        const show = event.type === 'mouseenter'
          && cell.cellIndex === target.cellIndex
          && cell.colSpan === 1
        cell.classList.toggle('highlight', show)
      }
    }
  }
})

Die IE11-taugliche Version folgt dem selben Schema wie oben, aber mit extra Funktionen, die nicht nativ unterstützt werden.

window.addEventListener('DOMContentLoaded', function () {
  const cells = document.querySelectorAll(
    'table.highlightable-columns td:not([colspan]), table.highlightable-columns th:not([colspan])'
  )
  forEach(function (cell) {
    cell.addEventListener('mouseenter', toggleColumn)
    cell.addEventListener('mouseleave', toggleColumn)
  }, cells)

  function toggleColumn (event) {
    const target = event.target
    const table = closest('table', target)
    if (table instanceof HTMLTableElement) {
      const cells = table.querySelectorAll('td, th')
      forEach(function (cell) {
        const show = event.type === 'mouseenter'
          && cell.cellIndex === target.cellIndex
          && cell.colSpan === 1
        toggle('highlight', show, cell.classList)
      }, cells)
    }
  }

  function forEach(f, collection) {
    return Array.prototype.forEach.call(collection, f)
  }

  function closest (selector, target) {
    do {
      if (matches(selector, target)) {
        return target
      }
      target = target.parentElement
    } while (target !== null)
    return null
  }

  function matches (selector, target) {
    if (target.matches instanceof Function) {
      return target.matches(selector)
    } else if (target.msMatchesSelector instanceof Function) {
      return target.msMatchesSelector(selector)
    }
  }

  function toggle (className, state, classList) {
    if (state) {
      classList.add(className)
    } else {
      classList.remove(className)
    }
  }
})

Und sollte eine Alternative Bedienmöglichkeit für Touch-Geräte angeboten werden?

[Gunnar Bittersmann]

@@Matthias Apsel

$('td:not([colspan]), thead th').mouseover(function(){
  markColumn(this,'#fff8dc');
});
$('td:not([colspan]), thead th').mouseout(function(){
  markColumn(this,'');

Von jQuery mal abgesehen ist das auch grottenschlecht, weil es Logik und Präsentation vermischt. Die Angabe der Farbe hat im Script nichts zu suchen, sondern gehört ins Stylesheet.

Wie würde man das umsetzen?

☞ Codepen

Anders als Felix verwende ich event delegation. Genau wie Felix verwende ich eine Eventhandler-Funktion für mouseover und mouseout.

Ist das Highlighting ein nettes Obendrauf (Obers, wie die Össis sagen) oder soll das auch bei Tastaturbedienung sein (wenn die Zellen denn interaktive Elemente wären?

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

$('td:not([colspan]), thead th').mouseover(function(){
  markColumn(this,'#fff8dc');
});
$('td:not([colspan]), thead th').mouseout(function(){
  markColumn(this,'');

Von jQuery mal abgesehen ist das auch grottenschlecht, weil es Logik und Präsentation vermischt. Die Angabe der Farbe hat im Script nichts zu suchen, sondern gehört ins Stylesheet.

Ja, das stimmt.

Wie würde man das umsetzen?

☞ Codepen

Auch nett.

Anders als Felix verwende ich event delegation. Genau wie Felix verwende ich eine Eventhandler-Funktion für mouseover und mouseout.

Ist das Highlighting ein nettes Obendrauf (Obers, wie die Össis sagen) oder soll das auch bei Tastaturbedienung sein (wenn die Zellen denn interaktive Elemente wären?

Ich würde es als Obers sehen.

Bis demnächst
Matthias

[Felix Riesterer]

Lieber Gunnar,

☞ Codepen

sehr schönes Script! Mir gefällt die enorme Eleganz Deines Codes! Was für mich noch Neuland ist, sind die ECMA7-Features wie [...collection] oder Node.closest().

Anders als Felix verwende ich event delegation. Genau wie Felix verwende ich eine Eventhandler-Funktion für mouseover und mouseout.

Mir war event delegation zu aufwendig für das kurze Beispiel und weil ich es noch nicht so elegant kann wie Du. Aber Dein Beispiel ist nicht für IE und Edge erst ab 15.

Liebe Grüße

Felix Riesterer

[Matthias Scharwies]

Servus!

Aber Dein Beispiel ist nicht für IE und Edge erst ab 15.

Gute Nachrichten! In 2-3 Monaten kommt Edge 76 mit Chrome-blitzenden Leisten und dann sind alle Fragen nach Browser-Support auf einmal obsolet. Bill Gates, der Philantrop, Steve Jobs, der Profit-Prophet, und Google (Don't be evil!) rufen dann die schöne, neue Welt aus.

Zurück zum Thema: Die Färbung einer Spalte bei :hover zählt für mich zu "nice to have" und nicht zum zwingend notwendigen Feature.

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Matthias Scharwies,

Zurück zum Thema: Die Färbung einer Spalte bei :hover zählt für mich zu "nice to have" und nicht zum zwingend notwendigen Feature.

Für mich auch. Aber ins Wiki könnte es trotzdem.

Bis demnächst
Matthias

[Matthias Scharwies]

Servus!

Hallo Matthias Scharwies,

Zurück zum Thema: Die Färbung einer Spalte bei :hover zählt für mich zu "nice to have" und nicht zum zwingend notwendigen Feature.

Für mich auch. Aber ins Wiki könnte es trotzdem.

ja, in der ES6-Variante, die bald in allen Browsern geht.

Bis demnächst
Matthias

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

ja, in der ES6-Variante, die bald in allen Browsern geht.

bis der IE11 wirklich tot ist, wird es noch ein paar Jahre dauern. Legacy ist hartnäckig.

Rolf

[Gunnar Bittersmann]

@@Rolf B

bis der IE11 wirklich tot ist, wird es noch ein paar Jahre dauern. Legacy ist hartnäckig.

AFAIR wird der Chromium-Edge auch auf älteren Windows-Versionen laufen. Dann hat niemand mehr einen Grund, IE zu verwenden, zumal Edge zur Abwärtskompatibilität bei alten Webseiten – eher Intranet-Seiten – IE emulierten können wird.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

tja, das wird versprochen

Ich bin gespannt ob das funktioniert...

Rolf

[Auge]

Hallo

Hallo Gunnar,

tja, das wird versprochen

Ich bin gespannt ob das funktioniert...

… und ob es überhaupt eingesetzt wird. Vermutlich werden die Firmen, die Legacy-Anwendungen haben, die den Einsatz des IE erfordern diesen auch weiterhin einsetzen/vorschreiben.

Dabei fällt mir ein, dass die IEs ja VB konnten, weshalb sie in Firmen oft als Browser für die firmeneigenen Intranetanwendungen benutzt wurden. Für den Edge wurde publikumswirksam das Abschneiden alter Zöpfe, wozu auch die VB-Unterstützung gehört, verkündet. Wenn nun der Edge einen IE-Legacy-Modus hat, kann der dann wieder VB oder ist der doch VB-lose Legacy-Modus, gerade in Firmennetzen, nicht doch Augenwischerei … ähh … unnützer Ballast?

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Wenn nun der Edge einen IE-Legacy-Modus hat, kann der dann wieder VB oder ist der doch VB-lose Legacy-Modus, gerade in Firmennetzen, nicht doch Augenwischerei … ähh … unnützer Ballast?

Wie ich gehört habe, soll Edge den IE für alte Intranet-Anwendungen vollständig ersetzen können.

LLAP 🖖

[Auge]

Hallo

Wenn nun der Edge einen IE-Legacy-Modus hat, kann der dann wieder VB oder ist der doch VB-lose Legacy-Modus, gerade in Firmennetzen, nicht doch Augenwischerei … ähh … unnützer Ballast?

Wie ich gehört habe, soll Edge den IE für alte Intranet-Anwendungen vollständig ersetzen können.

Wäre schön, wenn's so wäre. Einer unserer Aufraggeber schreibt uns aktuell für einen bestimmten webbasierten Dienst den IE vor ^[1], undzwar – man soll es nicht für möglich halten – Trommelwirbel aus Datenschutzgründen! Dass die den Chrome (und zukünftig den Edge) raushalten wollen, wenn es um Kundendaten geht, kann ich nachvollziehen. Beide funken nach Hause und man weiß nicht so genau, was die alles funken. Aber den IE? Nichtmal mit der expliziten Beschränkung auf die einzige, aktuell noch gepflegte Version 11? Mit all seinen Einschränkungen?

Wäre schön, wenn man den loswürde und auch explizit vom Rechner wegbekäme.

Tschö, Auge

---

1. Für andere webbasierte Dienste soll es unbedingt ein aktueller Firefox sein. Nicht, dass ich damit Probleme hätte, aber könnten die sich mal auf eine Plattform einigen? 😕 ↩︎

[Gunnar Bittersmann]

@@Auge

Wenn nun der Edge einen IE-Legacy-Modus hat, kann der dann wieder VB oder ist der doch VB-lose Legacy-Modus, gerade in Firmennetzen, nicht doch Augenwischerei … ähh … unnützer Ballast?

Hab gerade den Chris Heilmann gefragt (und wenn jemand irgendwas über Edge weiß, dann er).

Edge wird im IE-Modus auch noch VB können.

Edge wird im IE-Modus aber nicht EcmaScript 6 können – also kein Mix von alt und neu.

LLAP 🖖

[Matthias Scharwies]

Servus!

Hab gerade den Chris Heilmann gefragt (und wenn jemand irgendwas über Edge weiß, dann er).

Edge wird im IE-Modus auch noch VB können.

Edge wird im IE-Modus aber nicht EcmaScript 6 können – also kein Mix von alt und neu.

Danke! Und wann wird das ~genau~/ungefähr sein? Das Netz gibt da keinen Termin raus.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Danke! Und wann wird das ~genau~/ungefähr sein? Das Netz gibt da keinen Termin raus.

Ungefähr im Januar nächsten Jahres.

LLAP 🖖

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Danke! Und wann wird das ~genau~/ungefähr sein? Das Netz gibt da keinen Termin raus.

Ungefähr im Januar nächsten Jahres.

Danke! Dann müssen viele Browser-Iconsets im Wiki, z.B. bei SVG-SMIL geändert werden!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Felix Riesterer

Was für mich noch Neuland ist, sind die ECMA7-Features wie [...collection]

[...collection] tut hier dasselbe wie Array.from(collection) (welches im IE freilich auch nicht funktioniert).

oder Node.closest().

Das gab’s schon in jQuery und kam wohl von dort ins native JavaScript. Für alte Browser gibt’s einen einfachen Polyfill.

Mir war event delegation zu aufwendig für das kurze Beispiel

Ist es das? Einfache Abfrage nach dem Auslöser des Events; dafür fällt die Schleife über alle Elemente weg, für die man das Event registrieren will.

Aber Dein Beispiel ist nicht für IE und Edge erst ab 15.

Wie gesagt, ist closest leicht polyfillt. (Oder heißt das Partizip gepolyfillt?) Den Rest kann man auch in alter Syntax notieren (function statt Pfeilfunktion; NodeList mit for-Schleife durchlaufen; …) – dann würde es auch in alten Browsern laufen.

Aber lohnt der Aufwand? Wenn das Highlighting nur Schlagobers ist, kann man sich entspant zurücklehnen: IE kriegt kein Highlighting; die Seite funktioniert auch ohne. Progressive enhancement.

LLAP 🖖

[MudGuard]

Hi,

Wie gesagt, ist closest leicht polyfillt. (Oder heißt das Partizip gepolyfillt?)

polyfiletiert 😉

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

polyfiletiert 😉

Man fragt mich manchmal, mich, den Schlachter:
„So’n Schlachter, sagen Sie, was macht der?“
Worauf ich immer repondiere:
„Ich filetiere viele Tiere.“
—Bodo Wartke

LLAP 🖖

[Auge]

Hallo

polyfiletiert 😉

Man fragt mich manchmal, mich, den Schlachter:
„So’n Schlachter, sagen Sie, was macht der?“
Worauf ich immer repondiere:
„Ich filetiere viele Tiere.“
—Bodo Wartke

Hehe 😀

Repondieren? Nicht doch respondieren?

Tschö, Auge

[Der Martin]

Moin,

Worauf ich immer repondiere:
„Ich filetiere viele Tiere.“*
—Bodo Wartke

Hehe 😀

Repondieren? Nicht doch respondieren?

ich denke, als hochtrabendes Fremswort im Deutschen lehnt es sich eher an die französische Form répondre an als an das englische respond.

Ciao,
 Martin

[Auge]

Hallo

Worauf ich immer repondiere:
„Ich filetiere viele Tiere.“*
—Bodo Wartke

Repondieren? Nicht doch respondieren?

ich denke, als hochtrabendes Fremswort im Deutschen lehnt es sich eher an die französische Form répondre an als an das englische respond.

Klingt plausibel.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Repondieren? Nicht doch respondieren?

Quelle: Internet. 😉 Copied and pasted.

Der Duden kennt „respondieren“; „repondieren“ kennt er nicht.

Ich werd Bodo mal fragen, wenn wir uns mal wieder übern Weg laufen.

LLAP 🖖

[Tabellenkalk]

Hallo,

Der Duden kennt „respondieren“; „repondieren“ kennt er nicht.

Und der Ursprung dafür ist das Lateinische.

Gruß
Kalk

[Auge]

Hallo

Der Duden kennt „respondieren“; „repondieren“ kennt er nicht.

Und der Ursprung dafür ist das Lateinische.

So mutmaßte ich auch (mit „s“). 😉

Wenn's denn aber aus dem Französischen entlehnt wurde, passt's mit ohne „s“.

Tschö, Auge

[Linuchs]

Wenn das Highlighting nur Schlagobers ist, kann man sich entspant zurücklehnen: IE kreigt kein Highlighting; die Seite funktioniert auch ohne.

Ich habe mein Beispiel mit einem Hauch von Schwarz background: rgba(0,0,0,.05)gemacht.

Ist das dann Highdarking oder gar Deepdarking? Es ist ja tiefergelegt mit z-index:-1

Linuchs