✔ appendChild fertig?

[jemand anders]

Hallo,

in meinem Script wird der Header um ein ein Stylesheet ergänzt. Darin enthalten ist ein Klasse für ein Bild, dessen URL in der Applikation per Zufallsgenerator ermittelt wird. [In der Fiddle wird das zwar momentan nicht gemacht, keine Ahnung warum nicht, vielleicht geht das nicht in JSFiddle.]
Der Punkt ist, ich möchte wissen, wann das Bild anzeigt wird und dann einen Meldung bekommen.
Wer weiß wie das geht? Callback?
https://jsfiddle.net/036wr9ve/

Grüße

 

[Jan-Frederik Stieler]

Hi,
das du mit background-Image arbeitest ist das ganze ein klein wenig komplizierter:
https://jsfiddle.net/tovic/gmzSG/
(JSFIDDLE ist nicht von mir)

Grüße

 

[jemand anders]

Hi,

vielen Dank.

Was bedeutet denn dieses "$1"?

Meine Tests zeigen mir, dass es etwas anderes ist, mit appendChild für den Style zu arbeiten als die URL direkt im Stylesheet zuzuweisen, wie du es im Test gemacht hast; der File wird nämlich mit appendChild nicht gefunden, wenn ich dein getBgUrl verwende. Es wird der Host gefolgt von none angezeigt: http://host.com/none
Ist aber kein Problem. Ich habe die URL ja und verwende die einfach statt sie ermitteln.
Klappt wunderbar!!
Thanks

Grüße

 

[Jan-Frederik Stieler]

Hi,

Das $1 ist eine backreferences, auch wenn das jetzt die Doku von PHP ist gilt das auch für die Regel Engine von JS.
Hier referenziert dies das was in der ersten Klammer steht.

Ich verstehe jetzt ehrlich gesagt nicht so ganz warum das auslesen des Hintergrungbildes nicht funktioniert.
Das müsste ich jetzt erstmal ausprobieren.

Grüße

 

[SpiceLab]

[In der Fiddle wird das zwar momentan nicht gemacht, keine Ahnung warum nicht, vielleicht geht das nicht in JSFiddle.]

Falls Du Dich auf die Variable 'css' beziehst, die Pseudoelemente ::before u. ::after bedürfen einer zusätzlichen Formatierung, damit sie am Bildschirm erscheinen.

Grundsätzlich wird content:" "; erwartet (darf optional auch leer bleiben, wenn kein generierter Inhalt gewünscht ist).

Darin könnte nun theoretisch das Bild eingefügt werden, und alle übrigen CSS-Regeln würden entfallen:

#div2::before {content: url(//www.tutorials.de/styles/default/xenforo/logo.png);}

Da aber ein Hintergrundbild mit weiteren background-*-Eigenschaften erscheinen soll, sind zusätzlich display:block, width u. height erforderlich, da ein Pseudoelement nicht automatisch die Block-Level-Charakteristika besitzt, und ebenso wenig die Dimensionierung von #div2 erbt.

Außerdem fehlt das #-Zeichen für den ID-Bezeichner div2.

var css = "#div2::before { display: block; content: ''; width: 100px; height: 100px; background: url('//www.tutorials.de/styles/default/xenforo/logo.png') no-repeat fixed center; background-size: auto 100% }";

Falls Du Dich auf die Variable 'css' beziehst

Falls nicht, sorry für das aufgekommene Mißverständnis und die Ruhestörung