Hovering Effect ohne Mauszeiger "simuliert" auslösen?

[hmm]

Hi Leute,

ich habe folgendes Framework gegeben, dass mir Zeilen einer tabelle genau dann färbt, wenn man mit dem Mauszeiger darüber fährt. Ich möchte diese zeile allerdings immer gefärbt haben und so wie es ausieht, gibt es dafür keinen Knopf im Framework.

Frage: Kann ich, z.B. mit JavaScript, dafür sorgen, dass mein Browser denkt, dass ich mit meiner Maus über jedem Element bin? 8so das auf diese Weise die besagten zeilen gefärbt werden...)

Hier ist das Framework: http://www.fusioncharts.com/dev/gauge-and-widgets-guide/gantt-chart/configuring-cosmetics.html

[Gunnar Bittersmann]

@@hmm

Kann ich, z.B. mit JavaScript, dafür sorgen, dass mein Browser denkt, dass ich mit meiner Maus über jedem Element bin? 8so das auf diese Weise die besagten zeilen gefärbt werden...)

Du ziehst das Pferd von hinten auf. Du willst nicht ein Hover simulieren, du willst Tabellenzeilen stylen. Dazu ist nicht Hover simulieren Mittel der Wahl, sondern CSS.

Also „die besagten [Z]eilen“ (welche immer das sind) selektieren und stylen.

LLAP 🖖

[hmm]

joa, leider weiß ich nicht welche ID die jeweiligen zeilen haben. Das ganze ist ein JavaScript Framework das mir eine GUI anhand eines JSONs bastelt. Kann ich die ID irgendwie rauskriegen bzw. setzen?

Wenn ich mir das im Webinspektor von Firefox angucke, sehe ich, dass jede zeile ein "tspan" ist, aber ich finde keine id.

Kann ich das was ich gerade Clientseitig über den Webinspektor sehe irgendwie nutzen um ids zu verteilen? z.b. indem ich sage "setze eine ide für jeden tspan"?

<text stroke="none" text-anchor="start" fill="#000000" y="919.579545454546" x="17" font-style="normal" font-weight="normal" font-size="11px" font-family="Verdana,sans" style="text-decoration: none; font-family: Verdana,sans; font-size: 11px; font-weight: normal; font-style: normal; fill: rgb(0, 0, 0); text-anchor: start; cursor: default; stroke: none;"><tspan x="17" dy="4.500016645952201">Setup racks</tspan></text>

[dedlfix]

Tach!

joa, leider weiß ich nicht welche ID die jeweiligen zeilen haben.

Wenn du das Element nicht identifizieren kannst, kannst du es auch nicht zum Hovern bringen. Und wenn du es kannst, kannst du es direkt stylen.

Wenn ich mir das im Webinspektor von Firefox angucke, sehe ich, dass jede zeile ein "tspan" ist, aber ich finde keine id.

Hat es andere eindeutige Merkmale in anderen Attributen? Oder eine eindeutige Position im Baum?

dedlfix.

[hmm]

ich glaube es könnte auch so ein rect sein:

<rect stroke="#000000" ry="0" rx="0" stroke-width="0" fill="#6baa01" fill-opacity="0.25" height="37.84090909090912" width="154" y="408.72727272727275" x="15" style="fill-opacity: 0.25; fill: rgb(107, 170, 1); cursor: default; stroke: rgb(0, 0, 0);"></rect>

ich weiß welche zeile ich wie färben möchte, wenn ich von oben nach unten durchzähle. kann ich mir nicht einfach alle rect's oder tspan mit jquery geben lassen und dann einfach durchzählen?

[Gunnar Bittersmann]

@@hmm

ich glaube es könnte auch so ein rect sein:

Wir sind also nicht bei HTML-Tabellen, sondern bei SVG? (Was für CSS jetzt auch nicht den Unterschied macht.)

ich weiß welche zeile ich wie färben möchte, wenn ich von oben nach unten durchzähle.

Wenn du uns an dem Wissen teilhaben lassen würdest, könnten wir dir weiterhelfen.

kann ich mir nicht einfach alle rect's oder tspan mit jquery geben lassen und dann einfach durchzählen?

Nein. Einfach nein. Vergiss jQuery, vergiss JavaScript. Du willst stylen. Du willst CSS.

LLAP 🖖

[hmm]

"Wir sind also nicht bei HTML-Tabellen, sondern bei SVG? (Was für CSS jetzt auch nicht den Unterschied macht.)" jo, ich glaube. ich weiß nicht genau wie dieses javascript framework aus dem json eine grafik macht, aber im code inspector von firefox steht ein svg tag.

"Wenn du uns an dem Wissen teilhaben lassen würdest, könnten wir dir weiterhelfen."

die ersten drei zeilen... nur leider weiß ich nicht, wie ich sie ansprechen kann. der code inspector zeigt mir allerlei html code an, aber ich weiß nicht wo die herkommen

[marctrix]

Hej hmm,

"Wenn du uns an dem Wissen teilhaben lassen würdest, könnten wir dir weiterhelfen."

die ersten drei zeilen...

Mit dem Pseudoklassen-selector :nth-child()

Marc

[Gunnar Bittersmann]

@@marctrix

Mit dem Pseudoklassen-selector :nth-child()

Nicht sehr ergiebig, die Quelle. MDN ist da schon aussagekräftiger. Und siehe da: auf deutsch!

LLAP 🖖

[hmm]

danke, aber leider scheint das nicht zu klappen.

generierte gui

ich weiß nicht wie ich das generierte zeug zupacken kriege

[marctrix]

Hej hmm,

danke, aber leider scheint das nicht zu klappen.

generierte gui

Im von @Gunnar Bittersmann verlinkten Artikel gibt es folgendes Beispiel:

span:nth-child(-n+3)

Erzielt einen Treffer, wenn das Element vom Typ span ist und zudem eines der ersten drei Kinder seines Elternknotens ist.

Das ist doch fast, was du brauchst. Du möchtest alle Zellen der ersten drei Zeilen auswählen. Dann ersetze das ˋspanˋ durch Tabellenzeile und füge noch einen Nachfahren-selektor für tabellarische Daten hinzu 😉

Marc

[hmm]

leider weiß ich nicht welches element meine tabellenzeilen haben, weil die grafik über eine balackbox generiert wird :/

[Matthias Apsel]

Hallo marctrix,

Das ist doch fast, was du brauchst. Du möchtest alle Zellen der ersten drei Zeilen auswählen. Dann ersetze das ˋspanˋ durch Tabellenzeile und füge noch einen Nachfahren-selektor für tabellarische Daten hinzu 😉

Leider ist das keine Tabelle sondern ein Bild.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Leider ist das keine Tabelle sondern ein Bild.

Ein SVG, das genauso ein DOM hat wie eine HTML-Tabelle.

Mir ist es allerdings auf die Schnelle auch nicht geglückt, darin die entsprechenden Elemente zu finden.

Good luck!

LLAP 🖖

[hmm]

wie geh ich da ran? also wie suche ich und woher weiß ich, ob ich fündig geworden bin?

[marctrix]

Hej Matthias,

Hallo marctrix,

Das ist doch fast, was du brauchst. Du möchtest alle Zellen der ersten drei Zeilen auswählen. Dann ersetze das ˋspanˋ durch Tabellenzeile und füge noch einen Nachfahren-selektor für tabellarische Daten hinzu 😉

Leider ist das keine Tabelle sondern ein Bild.

Mist, vergessen. Den Pfad im SVG sollte man aber auch auswählen können. Ich konnte damit aber leider noch keine Erfahrungen sammeln.

Für den gezeigten Anwendungsfall sicher besser, als eine Tabelle, trotzdem dürfte das Beispiel nicht zugänglich sein und ich kann es auf dem Tablet nicht bedienen…

Auch ist da Teil so komplex, dass es schwer werden dürfte, das mit der Hand zu stylen.

Marc

[Matthias Apsel]

Hallo hmm,

Als allererstes müsstest du dich fragen, welche Zellen, Zeilen oder Spalten gefärbt werden sollen.

Soll es einfach nur eine Tabelle im Zebra- oder Schachbrettlook sein?

Bis demnächst
Matthias

[hmm]

jede zelle der ersten drei zeilen. leider weiß ich nicht wie die tabelle gebaut wird.

[hmm]

hier mal ein link wos online steht:

Die tabelle

wenn ich im browser den codeinspoektor öffne stehen da html tags.... bringt mir dass was?

[Rolf b]

Nanu? Überseh ich das eigentliche Problem? Scheint doch ganz leicht: Seite anzeigen, Developer-Tools öffnen - Elementsuche durchführen, auf Überschriftenzelle klicken, schon hat man die Stelle im SVG wo die Überschrift erzeugt wird.

Ich habe im <head> das Stylesheet mal um

g.raphael-group-70-guntt-label-back-container rect {
       fill: #ff0000 !important;
}

erweitert. Da haben sich die Überschriften so geschämt, dass sie alle rot geworden sind. Das ist natürlich NICHT das Auslösen des Hover-Effekts, aber die Möglichkeit, die Zellen so zu stylen als würden sie hovern.

Rolf

[hmm]

hamma, danke!

sieht du zufällig auch, wie ich ein paar der linien stärker machen kann oder ein paar linien rausnehmen kann?

[Rolf b]

Zufällig nicht, weil ich nicht weiß welche. Und von SVG weiß ich exakt so viel, wie ich in dieser Webseite gesehen habe und mir logisch erschließen konnte.

Aber da Du das Prinzip jetzt kennst, und angehender Master der Mathematik bist, sollte Dir das keine Schwierigkeiten bereiten. Es sei denn, du willst in dein Berufsleben gleich als Führungskraft einsteigen und übst hier schon das Delegieren von Aufgaben 😉

Rolf

[Rolf b]

Aber wenn Du die Linien der Überschriften suchst - die werden durch den path von
g.raphael-group-71-guntt-label-line-container gebildet, da kannst Du das stroke: Attribut stylen für die Strichfarbe und stroke-width: für die Strichstärke. Musst nur immer !important dabei schreiben, um das Direktstyling im SVG zu überlagern.