Variables Bild in CSS Tag

[Jan M.]

Hallo! Hoffe jemand hier kann weiterhelfen.. Es geht um die folgende Fragestellung: Ich habe einen Kalender auf der Homepage platziert, in dem die Termine unseres Teams standardmässig mit einer blauen Fläche dargestellt werden. Diese blaue Fläche kann ich ersetzen und zum beispiel durch background-image:url(gegner.png) das Teamlogo da platzieren. Gibt es eine Möglichkeit den CSS Tag so anzupassen, dass ich die Variable "title" die im Termineintrag gespeichert ist, als Dateiname verwenden kann und somit je nachdem ein anderes Bild verwendet wird?

Also in etwa so: background-image:url($title.png)

Liebe Grüsse & Danke Jan

[Auge]

Hallo

Hallo! Hoffe jemand hier kann weiterhelfen.. Es geht um die folgende Fragestellung: Ich habe einen Kalender auf der Homepage platziert, in dem die Termine unseres Teams standardmässig mit einer blauen Fläche dargestellt werden. Diese blaue Fläche kann ich ersetzen und zum beispiel durch background-image:url(gegner.png) das Teamlogo da platzieren. Gibt es eine Möglichkeit den CSS Tag so anzupassen, dass ich die Variable "title" die im Termineintrag gespeichert ist, als Dateiname verwenden kann und somit je nachdem ein anderes Bild verwendet wird?

Also in etwa so: background-image:url($title.png)

Nein, denn CSS ist keine Programmiersprache. Aber du kannst das Element anhand des Titles identifizieren. Hast du eine Liga, also ein feststehendes Set an Gegnern, kannst du mit element[title=gegnerteam] { background: url(schnickschnack.png); } für jedes Team das Hintergrundbild festlegen. Schau dir mal die Selektoren anhand eines Attributwerts bzw. einer Teilübereinstimmung an.

Tschö, Auge

[Jan M.]

Hallo

Nein, denn CSS ist keine Programmiersprache. Aber du kannst das Element anhand des Titles identifizieren. Hast du eine Liga, also ein feststehendes Set an Gegnern, kannst du mit element[title=gegnerteam] { background: url(schnickschnack.png); } für jedes Team das Hintergrundbild festlegen. Schau dir mal die Selektoren anhand eines Attributwerts bzw. einer Teilübereinstimmung an.

Tschö, Auge

Danke dir, ich schau mir das mal an :)

[Jan M.]

Alles klar, das funktioniert soweit. Jetzt muss ich nur noch eine Möglichkeit finden den Eventtitel ins Title-Attribut des Links einzubinden..Habe mich mal durch den DPCalendar Code gewühlt..

Hab dann die Stellen wo ich glaube, dass der Link generiert wird, wie folgt ergänzt; leider hilft das bisher nicht.. Hab ich hier was übersehen?

html += " class='" + classes.join(' ') + "'" + " style=" + "'" + "position:absolute;" + "top:" + seg.top + "px;" + "left:" + seg.left + "px;" + skinCss + "'" + "title='"+ htmlEscape(event.title)+ "'" + ">"

[Tabellenkalk]

Hallo,

Hab dann die Stellen wo ich glaube, dass der Link generiert wird, wie folgt ergänzt; leider hilft das bisher nicht.. Hab ich hier was übersehen?

html +=
" class='" + classes.join(' ') + "'" +
" style=" +
"'" +
"position:absolute;" +
"top:" + seg.top + "px;" +
"left:" + seg.left + "px;" +
skinCss +
"'" + **_"title='"+ htmlEscape(event.title)+ "'"_** + ">"

auf Anhieb seh' ich ein fehlendes Leerzeichen vor "title"

Gruß
Kalk

[Jan M.]

Danke, das wars aber nicht.. Weitere Ideen? :)

[Jan M.]

Danke, das wars aber nicht.. Weitere Ideen? :)

Anyone?

[Auge]

Hallo

Danke, das wars aber nicht.. Weitere Ideen? :)

Wie sieht denn der HTML-Quelltext aus, der damit generiert wird? Wenn der schon kaputt ist, brauchen wir garnicht weitersuchen.

html +=
" class='" + classes.join(' ') + "'" +
" style=" +
"'" +
"position:absolute;" +
"top:" + seg.top + "px;" +
"left:" + seg.left + "px;" +
skinCss +
"'" + **_"title='"+ htmlEscape(event.title)+ "'"_** + ">"

Wenn ich deinen Beispielquelltext unter der Annahme, dass **_ und _** hier zur Hervorhebung hätten dienen sollen, zusammenstoppele, kommt folgendes heraus. Für classes, seg.top, seg.left, skinCss und event.title habe ich willkürliche Werte eingesetzt.

 class='eins zwei drei' style='position:absolute;top:40px;left:120px;color:#000;'title='Gut Holz 1526'>

Die CSS-Regeln ohne Leerzeichen zu notieren, halte ich für schlechten Stil, aber wenn es funktioniert, bitteschön. Vor title fehlt aber tatsächlich das Leerzeichen. Wenn du das, wie schon angedeutet, korrigiert hast und es dennoch nicht funktioniert, ist da noch etwas anderes, was nicht im gezeigten Code zu finden ist. Kannst du uns bitte mal 'nen Link zu der betreffenden Seite oder zu einem JSFiddle mit dem nicht funktionierenden Code geben?

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

 class='eins zwei drei' style='position:absolute;top:40px;left:120px;color:#000;'title='Gut Holz 1526'>

Die CSS-Regeln ohne Leerzeichen zu notieren, halte ich für schlechten Stil

Ich halte es vor allem für schlechten Stil, CSS inline in style-Attributen zu notieren.

Ja, ich weiß, hier handelt es sich um JavaScript-Code. Lesbarer wäre er aber wohl dennoch, wenn das Element mit var myElement = document.createElement(…) erzeugt, die Stile über myElement.style.… hinzugefügt und dann das Element ins DOM gehängt werden würde.

Wenn es denn übehaupt sein muss, die Stile mit JavaScript zu setzen. Sind es denn so viele verschiedene mögliche Werte?

Terminologie: Eine CSS-Regel „associates a selector list…with a list of property declarations“, ist also
selector_1, …, selector_m { property_1: value_1; …; property_n: value_n }

Du meintest eine Liste von Deklararionen.

Vor title fehlt aber tatsächlich das Leerzeichen.

Ja, das ist ein parse error, d.h. „user agents…may abort the parser“.

HTML5-Parser werden das aber nicht tun, denn deren „error handling for parse errors is well-defined“. Sie werden vom after attribute value (quoted) state in den before attribute name state gehen.

LLAP 🖖

[Jan M.]

Danke euch allen schonmal für eure Rückmeldungen, auch an var! Das Problem war hausgemacht, ich hab einfach die falsche javascript Datei angepasst, weshalb sich nichts tat. Da war noch eine filename.min.js im Ordner, und anscheinend wird nur diese verwendet im Kalenderscript. Hab die Anpassung jetzt darin gemacht und das funktioniert grundsätzlich, muss es jetzt einfach noch ausarbeiten.

[Gunnar Bittersmann]

@@Auge

Also in etwa so: background-image:url($title.png)

Nein, denn CSS ist keine Programmiersprache.

Das muss CSS dazu auch gar nicht sein.

background-image: url( attr(title) ".jpg") sollte demnächst™ möglich sein.

Ich glaube mich zu erinnern, dass ich kürzlich gelesen habe, dass ein Browserhersteller gegenwärtig dabei ist, das zu implementieren. Mir ist aber entfallen, welcher das war. Und auch, wo ich das gelesen hatte.

LLAP 🖖

[var]

@Gunnar

background-image: url( attr(title) ".jpg") sollte demnächst™ möglich sein.

Ich weiß, ich bin bloß ein blöder Newbie, dessen Beiträge keine Beachtung verdienen, aber...

Beste Grüße ;-)

var

[Gunnar Bittersmann]

@@var

Ich weiß, ich bin bloß ein blöder Newbie, dessen Beiträge keine Beachtung verdienen, aber...

Ich hatte „wie var schon sagte“ vergessen. Sorry.

LLAP 🖖

[var]

Hallo Jan

Also in etwa so: background-image:url($title.png)

Theoretisch gäbe es dafür schon eine CSS-Lösung, nämlich die attr-Funktion.

Damit könnte man es vermutlich (etwa) so lösen: background-image: attr(title, url);

Browser-Support ist allerdings miserabel, von daher nicht wirklich zu empfehlen, aber ich wohlte es nur mal erwähnt haben...

Gruß,

var

[var]

@var

Browser-Support ist allerdings miserabel, von daher nicht wirklich zu empfehlen, aber ich wohlte es nur mal erwähnt haben...

Korrektur: Browser-Support ist außerhalb von generiertem Inhalt wohl nicht nur miserabel, sondern nicht-existent.

Eine Erweiterung des Anwendungsbereichs der attr-Funktion ist wohl lediglich geplant...

Gruß,

var