Forum - RE: Fehlersuche: Weihnachts- und Neujahrs Countdown etwas anders!

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps � Neujahrs Countdown!

Seite 3 von 4 � Seite 1 2 3 4 Seite �

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps MS Windows 11, 10, 8 und 7 - Fragen & Antworten Linux, Ubuntu und andere Betriebssysteme �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe �rger mit dem PC, Laptop oder Tablet - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#21 | RE: Fehlersuche: Weihnachts- und Neujahrs Countdown etwas anders! datum

20.12.2023 11:53

Hallo zusammen,

also ich hab mir das Plugin in meinem Testforum angelegt. Auch bei mir wird es Gästen nicht angezeigt und lässt sich das auf dem Portal auch anzeigen?

Meine Foren:

  • Garten der Poesie
  • Traumwelt
  • Gedichte aus dem Musengarten

Antworten

#22 | RE: Weihnachts- und Neujahrs Countdown etwas anders! datum

20.12.2023 12:48 (zuletzt bearbeitet: 20.12.2023 14:22)

Daishi

Informationen anzeigen

Beitr�ge:	389
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	327

Hallo ihr lieben ich habe mal noch etwas herum getestet und probiert man kann es auch jetzt in den Beiträgen einfügen.

Mit Wolfgangs Variante habe ich es noch nicht probiert, werde ich aber heute noch testen, in den nächsten Stunden und auch da werde ich dann Rückmeldung geben, es ist immer schön, wenn wir nette User und Mitglieder alles testen, das freut Wolfgang sehr und erleichtert die Fehlersuche.

Also, ich habe das Script ohne HTML Code als PI angelegt "Untere Leiste - header".

Als einfacher Foren-Code habe ich den HTML-Code so eingegeben:

Ersetze:

1
 
[Neujahr]

Mit:

1
 
<h2>Neujahr '24</h2> <time class="zeitkontrolle" date-time="2023-12-31 00:00:00" style="--accent: green"></time>

Man kann mit HTML immer erweitern und die Farbe auch ändern, (style="--accent: green ) green in andere Farbe ändern oder den Farbcode verwenden, den man gewohnt ist, z.B. (#000000).

Ich dachte mir, dass die Idee gut ankommt und manche Mitglieder oder Leser sich erfreuen würden, dass man es auch in Beiträgen einfügen kann. Bei mir als Test habe ich es in Beiträgen eingefügt und verschieden positioniert.

Hier zur Demo im Forum:
Neujahrs-Countdown-etwas-anders-auch-in-beitraegen!

Ich hoffe, die Idee kommt gut an.

Mit freundlichen Grüßen

Daishi

P.S. Wolfgang, ich teste gleich mal deine Version. Und gebe hier dann das Ergebnis ab bis später.

Daishi

Wolfgang findet das Top!

Antworten

#23 | RE: Weihnachts- und Neujahrs Countdown etwas anders! datum

20.12.2023 15:21 (zuletzt bearbeitet: 31.03.2024 08:09)

Daishi

Informationen anzeigen

Beitr�ge:	389
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	327

Also, das Testergebnis mit Wolfgang seiner Version

funktioniert tatenlos bei mir im Forum mit Business Template (v4).

Auch für Gäste ist es sichtbar, in dem Pi erscheint es oben im Header in der Forenansicht. Auch als Gast sichtbar auf folgenden Browsern Microsoft Edge, Google, Firefox - Windows und Ubuntu Linux Firefox, sowie Linux MINT auf Chrome Browser

In den Beiträgen sieht es etwas anders aus, da wird es doppelt angezeigt. Liegt aber daran, dass da der HTML-Code entfernt werden muss, im Plugin.

Aber sonst top Arbeit, funktioniert wie es soll. Ich kann es leider nicht reproduzieren, dass es die Gäste nicht sehen können, bei mir funktioniert es tatenlos auf allen Browsern, die ich habe, auch als Gast.

Habe auch das Glitter aktiviert, auch diese funktioniert einwandfrei.

Wolfgang du hast echt eine tolle Arbeit hier abgelegt, also bei mir funktioniert das Script tatenlos, als Gast und als registrierter User.

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
@Wolfgang habe in der PI Änderungen vorgenommen

Nachtrag habe in der PI-Änderungen gemacht, habe jetzt ausgeklammert und angepasst.

In den Beiträgen sieht es etwas anders aus, da zeigt er es doppelt an. Liegt aber daran, dass da der HTML-Code ausgeklammert werden muss, im Plugin

Also so:

Von Zeile 113 bis 125:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
/* <center>
  <div class="CountDownZeit">
    <h2 class="TextUe">Weihnachten 2023</h2>
    <br>
    <div class="zeitkontrolle" date-time="2023-12-24 00:00:00" style="--accent: #a10a06"></div>
  </div>
 
  <div class="CountDownZeit">
    <h2 class="TextUe">Neujahr 2024</h2>
    <br>
    <div class="zeitkontrolle" date-time="2023-12-31 00:00:00" style="--accent: #0a9006"></div>
  </div>
</center> */
`);
 

Und für die Beiträge muss Zeile 128 bis 138 ausgeklammert werden:

1
2
3
4
5
6
7
8
 
/*  class zeitkontrolle {
  constructor(el){
    this.el = el;
    this.targetDate = new Date(el.getAttribute("date-time"));
    this.createzeitkontrolleParts()
    this.zeitkontrolleFunction();
    this.zeitkontrolleLoopId = setInterval(this.zeitkontrolleFunction.bind(this), 1000)
  } */
 

Zeigt jetzt so an das Script normal nicht mehr doppelt.
Test Wolfgangs Script!

Nachteil, wird im Header nicht mehr angezeigt, aber in den Beiträgen.

Wo jetzt hier der Fehler ist oder befindet kann ich so nicht sagen, ich habe nur getestet, ich dachte es wäre ein guter Hinweis, zu bedenken, jedes Forum reagiert ja anders hmmm

Ich dachte, mit diesem Test würde ich dir helfen für die Fehlersuche.

Nette Grüße

Daishi

Daishi

Wolfgang findet das Top!

Antworten

#24 | RE: Weihnachts- und Neujahrs Countdown etwas anders! datum

20.12.2023 18:55

Entschuldigt bitte, ich habe gerade etwas bemerkt, mein Testforum ist für Gäste nicht zugänglich- Vielleicht wird es deshalb nicht angezeigt. Allerdings ist es auch da wo Wolfgang es geschrieben hatte eingefügt, nämlich; Untere Leiste, header.
Ich werde jetzt mal versuchen, wenn ich es so mache, wie alle meine Plugins nämlich Forum Übersicht Header.
OK, das geht, aber trotzdem wird es im Portal nicht angezeigt, ich brauche es zwar nicht, aber vielleicht wäre es schön, wenn es für die welche ein Portal haben, dort eben auch angezeigt würde.

@Wolfgang, wenn Du magst, kannst dort gerne experimentieren. Weisst ja, wie Du rein kannst

Meine Foren:

  • Garten der Poesie
  • Traumwelt
  • Gedichte aus dem Musengarten

Antworten

#25 | RE: Weihnachts- und Neujahrs Countdown etwas anders! datum

20.12.2023 19:24 (zuletzt bearbeitet: 20.12.2023 20:18)

Daishi

Informationen anzeigen

Beitr�ge:	389
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	327

Ich glaube, für das Portal wäre das die Lösung

Für Portal bearbeitet:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
 
<style>
.CountDownZeit {
  --fontsize: 25px;
 
  display:inline-block; 
  margin: 5px 10px 2px 10px; 
  /* z-index:999; */
  position: relative;
}
.zeitkontrolle {
  padding:10px;
  background: rgba(000, 000, 000, 0.5);
  
  /* Hintergrundbild Countdown-Zähler */
  /* background-image: url("https://files.homepagemodules.de/b104774/a_489_06de1da5.jpg"); */
  
  /* Glitzerrand */
  /* border: 1px solid #0e0e0f;
      border-image-source: url(//files.homepagemodules.de/b104774/a_659_b89afa09.gif);
      border-image-slice: 3%; */
 
  border-radius:9px;
  text-shadow: 0 0 0.05em #aa0000, 0 0 0.1em black;
  width: fit-content;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1rem;
  font-weight: bold; 
  color: rgb(230,230,230);
}
.zeitkontrolle > .part {
  padding: calc(var(--fontsize) / 5);
  display: grid;
  gap: 0.5rem;
}
.zeitkontrolle > .part > .number {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #aaaaaa;
  border: 2px solid hsl(0 0% 50% / .3);
  font-size: var(--fontsize);
  position: relative;
  text-shadow: 0 0 0.05em #aa0000, 0 0 0.1em black;
  }
.zeitkontrolle > .part.Tage { --num: 365 }
.zeitkontrolle > .part.Stunden { --num: 24 }
.zeitkontrolle > .part:where(.Minuten, .Sekunden) { --num: 60 }
.zeitkontrolle > .part > .number::after{
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -0.5);
  border-radius: inherit;
  --degree: calc(360deg / var(--num) * (var(--num) - var(--value,0)));
  background-image: conic-gradient(var(--accent) var(--degree), transparent calc(var(--degree) + 0.1deg));
  --border-size: 4px;  
  --mask-image: radial-gradient(100% 100%, transparent calc(50% - var(--border-size)), black calc(50% - var(--border-size) + 1px));
  -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);
}
.zeitkontrolle > .part > .text {
  width: calc(var(--fontsize)*3.3);
  background: rgb(200, 200, 200);
  border:1px solid #383838;
  border-radius: 3px;
  font-size: calc(var(--fontsize)/1.8);
  font-weight: bold;
  color: #383838;
  padding: 1px 10px;
  text-align: center;
} 
 
/* 3D-Überschrift */
h2.TextUe {
  font: bold var(--fontsize) Arial !important;
  color: #eeeeee !important;
  letter-spacing: 10px;
  text-transform: uppercase;
  text-shadow: 
    1px 1px 1px #919191,
    1px 2px 1px #919191,
    1px 3px 1px #919191,
    1px 4px 1px #919191,
    1px 5px 1px #919191,
    1px 6px 1px #919191,
    1px 9px 6px rgba(16,16,16,0.4),
    1px 11px 10px rgba(16,16,16,0.2),
    1px 13px 35px rgba(16,16,16,0.2),
    1px 15px 60px rgba(16,16,16,0.4);
}
</style>  
 
<center>
  <div class="CountDownZeit">
    <h2 class="TextUe">Weihnachten 2023</h2>
    <br>
    <div class="zeitkontrolle" date-time="2023-12-24 00:00:00" style="--accent: #a10a06"></div>
  </div>
 
  <div class="CountDownZeit">
    <h2 class="TextUe">Neujahr 2024</h2>
    <br>
    <div class="zeitkontrolle" date-time="2023-12-31 00:00:00" style="--accent: #0a9006"></div>
  </div>
</center>
 
<script>
 
window.addEventListener('load', function(){
 
class zeitkontrolle {
  constructor(el){
    this.el = el;
    this.targetDate = new Date(el.getAttribute("date-time"));
    this.createzeitkontrolleParts()
    this.zeitkontrolleFunction();
    this.zeitkontrolleLoopId = setInterval(this.zeitkontrolleFunction.bind(this), 1000)
  }
  createzeitkontrolleParts(){
    ["Tage", "Stunden", "Minuten", "Sekunden"].forEach(part => {
      const partEl = document.createElement("div");
      partEl.classList.add("part", part);
      const textEl = document.createElement("div");
      textEl.classList.add("text");
      textEl.innerText = part;
      const numberEl = document.createElement("div");
      numberEl.classList.add("number");
      numberEl.innerText = 0;
      partEl.append(numberEl, textEl);
      this.el.append(partEl);
      this[part] = numberEl;
    })
  }
 
 /*  zeitkontrolleFunction(){
    const currentDate = new Date();    
    if(currentDate > this.targetDate) return clearInterval(this.intervalId);
    const remaining = this.getRemaining(this.targetDate, currentDate);
    Object.entries(remaining).forEach(([part,value]) => {
      this[part].style.setProperty("--value", value)
      this[part].innerText = value
    })  
  } */
  
 /*   getRemaining(target, now){
    let Sekunden = Math.floor((target - (now))/1000);
    let Minuten = Math.floor(Sekunden/60);
    let Stunden = Math.floor(Minuten/60);
    let Tage = Math.floor(Stunden/24);
    Stunden = Stunden-(Tage*24);
    Minuten = Minuten-(Tage*24*60)-(Stunden*60);
    Sekunden = Sekunden-(Tage*24*60*60)-(Stunden*60*60)-(Minuten*60);
    return { Tage, Stunden, Minuten, Sekunden }      
  }
} */
 
const zeitkontrolleEls= document.querySelectorAll(".zeitkontrolle") || [];
zeitkontrolleEls.forEach(zeitkontrolleEl => new zeitkontrolle(zeitkontrolleEl))
 
});
  
</script>  
 

Schlie�en

Bin die ganze Zeit am Herumtesten für das Portal für Wolfgang seine Version. Nur komisch, ich musste 2 Sachen ausklammern da es doppelt im Portal anzeigte.

Ich hoffe, dass ich damit etwas helfen konnte, musste auch von Script etwas entfernen, hoffe, das war ok so mit dem Testen. Wenn noch Fehler drinnen sind, entschuldige ich mich, ich teste nur im Moment im Forum herum bei mir.

Hoffe, es war ok so, ich weiß nicht wie die anderen Foren, da reagieren. Hoffe für das Testen, dass das ok war, das meine Lösung bei den angezeigten Fehlern hilft und ich es richtig erklären konnte.

Portal:
test Portal!

Nette Grüße

Daishi

Daishi

Antworten

#26 | RE: Weihnachts- und Neujahrs Countdown mit Glitzer-Effekt! datum

20.12.2023 20:10 (zuletzt bearbeitet: 20.12.2023 20:19)

Hallo Daishi,

Danke für den Versuch, ich habe mal geschaut, wo Du das bei Dir gemacht hast? So wie ich es sehe, hast Du es einfach in einer Simple Text Box gemacht?
Falls dem so ist und ich das richtig sehe, muss ich Dir leider sagen, dass dies nicht die Lösung ist.
Wenn ich meinen Adventskranz, kannst Du hier: https://www.garten-der-poesie.de/ schön sehen und hin und herschalten zwischen Portal und Übersicht. Es ist beides dasselbe Plugin, nur an verschiedenen Orten eingesetzt.
So einfach ist es nicht, dass man im Portal dasselbe bekommt wie auf der Forenübersicht. Also beide Ansichten müssen dasselbe zeigen, nicht dass man im Portal einfach eine weiter Box macht, wenn man da auch etwas haben möchte, was es auch auf der Forenübersicht hat.

Falls ich jetzt eine falsche Annahme habe und Du das in Deinem Portal nicht mit einer Box gemacht hast, wo Du das Plugin reingestellt hast. Würdest Du mir dann bitte sagen, in welchem Selektor in der Admin ich es einstellen soll?

Meine Foren:

  • Garten der Poesie
  • Traumwelt
  • Gedichte aus dem Musengarten

Antworten

#27 | RE: Weihnachts- und Neujahrs Countdown mit Glitzer-Effekt! datum

20.12.2023 20:35 (zuletzt bearbeitet: 20.12.2023 20:37)

Ja, so weit bin ich noch nicht, ich habe es umgemodelt als simple Text Box gemacht

Dann entschuldige ich mich. Ich befasse mich erst seit kurzem, mit dem Plugin, bin noch experimentierfreudig oder wie das heißt. Nur kenne ich alle Codes noch nicht.

Hoffe, du bist mir nicht böse, denn hatte ich es falsch verstanden.

Ich entschuldige mich nochmal von ganzem Herzen

Daishi

Daishi

Antworten

#28 | RE: Fehlersuche: Weihnachts- und Neujahrs Countdown mit Glitzer-Effekt! datum

20.12.2023 20:57

Wieso sollte ich denn böse sein Daishi,

mich freut das, dass Du Dich so hier einbringst und auch vieles dabei lernst. Das trifft auch auf meinen Weggefährten Wolfgang zu, wir bewegen uns seit den Anfängen zusammen in der inzwischen vielfältigen Xobor Templatelandschaft.
Ich liefere leider nur Ideen, denn selber Scripten in der heutigen Zeit mutet sich die alte Frau nicht mehr zu. Deshalb bin ich froh, dass Wolfgang meinen alten Gehirnsynapsen so hilfsbereit zur Seite steht.

Ich freue mich auch über den coolen Wind der neuen Mitglieder und über Eure vielfältigen Ideen, welche Ihr uns darbietet

Liebe Grüsse

Gabi

Meine Foren:

  • Garten der Poesie
  • Traumwelt
  • Gedichte aus dem Musengarten

Nara findet das Top!

Antworten

#29 | Update: Weihnachts- und Neujahrs Countdown etwas anders! datum

21.12.2023 20:52 (zuletzt bearbeitet: 30.12.2023 09:19)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3447
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1316

Update: Weihnachts- und Neujahrs Countdown etwas anders!

Hallo zusammen!

Erstmal ein großes Sorry, dass ich mich so spät melde, hatte noch andere Baustellen....
Unter anderen wollte meine Videogalerie nicht mehr mit den schönen und jetzt zu der Zeit passenden Weihnachtsliedern und lustigen Weihnachtsvideos!

Wow! Was für eine Begeisterung für den Weihnachts- und Neujahrs Countdown!
Besten Dank an Anne, Nara, Gabriella und Daishi für Feedback und Unterstützung!

Warum wird bei den Gästen nichts angezeigt?

Das Skript ist so aufgebaut, dass es vor dem "Activity Feed" gesetzt wird!
Wenn der "Activity Feed" also nicht da ist oder für Gäste deaktiviert ist, wird der CountDown auch nicht angezeigt!

Was kann man tun, damit auch Gäste den Countdown Zähler sehen?

Hier muss ein anderer DIV-Container her, wie z.B. die Pfadangabe mit der ID breadcrumbs!

Oder

Wenn möglich den "Activity Feed" für Gäste wieder freigeben, unter "Admin > Layout > Farben & Einstellungen > Funktionen > Activity Feed für Gäste ausblenden"!
Dann funktioniert auch das Skript aus Beitrag #17 ohne ein Plugin anlegen zu müssen!

Installation für Gäste ohne "Activity Feed" - Nur mit Plugin!

Da das Skript Variablen benötigt und die Variablen nicht in der Kopf- oder Fußzeile funktionieren, muss ein Plugin unter "Untere Leiste - Header" angelegt werden!
Wichtig! Im Plugin muss dann rechts oben das "Unterstützte Template" markiert werden, z.B. Business - Template (144) & Mobil - Template (177), Auswahl mit Mausklick oder Strg + Mausklick!

Der Hintergrund und die Durchsichtigkeit der Zähler kann in Zeile 14 verändert und angepasst werden!
Es ist auch möglich ein Bild als Hintergrund zu verwenden, hierzu Zeile 17+18 freigeben!
Möchte man einen glitzernden Rand einfügen müssen Zeile 21-23 freigegeben werden!
Die Formatierungen für beiden 3D-Überschriften sind in Zeile 80-96 zu finden (sind hier auskommentiert)!
Die Zeile 99-110 ermöglichen eine Überschrift mit Glitzer-Effekt (Passt gut in die Weihnachtszeit)!
Über die Class und "before" in Zeile 117 + 119 wird die Position der Counter bestimmt!

In Zeile 4 kann die gesamte Größe des Counters eingestellt werden, alle anderen Größen passen sich automatisch an!

Datum und Glückwünsche zum Ereignis!

In Zeile 125+135 wird das Start-Datum und das Ausblend-Datum der Ereignisse eingetragen (Datums-Format beibehalten).
In Zeile 128+138 werden die Glückwünsche eingetragen. Hier ist alles möglich, was mit HTML zu formatieren geht!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
 
<!-- Weihnachts & Silvester-Countdown -->
<style>
.CountDownZeit {
  --fontsize: 25px;
 
  display:inline-block; 
  margin: 5px 0 2px 10px !important; 
  /* z-index:999; */
  position: relative;
  bottom:10px;
}
.zeitkontrolle {
  padding:10px;
  background: rgba(000, 000, 000, 0.5);
 
  /* Hintergrundbild Countdown Zähler */
  /* background-image: url("https://files.homepagemodules.de/b104774/a_489_06de1da5.jpg"); */
  /* background-size: cover;*/
  
  /* Glitzerrand */
  /* border: 1px solid #0e0e0f;
      border-image-source: url(//files.homepagemodules.de/b104774/a_659_b89afa09.gif);
      border-image-slice: 3%; */
        
  border-radius:9px;     
  text-shadow: 0 0 0.05em #aa0000, 0 0 0.1em black;
  width: fit-content;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1rem;
  font-weight: bold; 
  color: rgb(230,230,230);
  vertical-align: top;
}
.zeitkontrolle > .part {
  padding: calc(var(--fontsize) / 5);
  display: grid;
  gap: 0.5rem;
}
.zeitkontrolle > .part > .number {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #aaaaaa;
  border: 2px solid hsl(0 0% 50% / .3);
  font-size: var(--fontsize);
  position: relative;
  text-shadow: 0 0 0.05em #aa0000, 0 0 0.1em black;
  }
.zeitkontrolle > .part.Tage { --num: 365 }
.zeitkontrolle > .part.Stunden { --num: 24 }
.zeitkontrolle > .part:where(.Minuten, .Sekunden) { --num: 60 }
.zeitkontrolle > .part > .number::after{
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -0.5);
  border-radius: inherit;
  --degree: calc(360deg / var(--num) * (var(--num) - var(--value,0)));
  background-image: conic-gradient(var(--accent) var(--degree), transparent calc(var(--degree) + 0.1deg));
  --border-size: 4px;  
  --mask-image: radial-gradient(100% 100%, transparent calc(50% - var(--border-size)), black calc(50% - var(--border-size) + 1px));
  -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);
}
.zeitkontrolle > .part > .text {
  width: calc(var(--fontsize)*3.3);
  background: rgb(200, 200, 200);
  border:1px solid #383838;
  border-radius: 3px;
  font-size: calc(var(--fontsize)/1.8);
  font-weight: bold;
  color: #383838;
  padding: 1px 10px;
  text-align: center;
} 
 
/* 3D-Überschrift */
/* h2.TextUe {
  font: bold var(--fontsize) Arial !important;
  color: #eeeeee !important;
  letter-spacing: 10px;
  text-transform: uppercase;
  text-shadow: 
    1px 1px 1px #919191,
    1px 2px 1px #919191,
    1px 3px 1px #919191,
    1px 4px 1px #919191,
    1px 5px 1px #919191,
    1px 6px 1px #919191,
    1px 9px 6px rgba(16,16,16,0.4),
    1px 11px 10px rgba(16,16,16,0.2),
    1px 13px 35px rgba(16,16,16,0.2),
    1px 15px 60px rgba(16,16,16,0.4);
} */
 
/* Überschrift mit Glitzereffekt */
h2.TextUe {
      background: url(//files.homepagemodules.de/b104774/a_659_b89afa09.gif);
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      -webkit-text-stroke: 1px #403d37;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: rgb(64, 61, 55);
     font: bold calc(var(--fontsize)*1.6) VERDANA,ARIAL,HELVETICA !important;
     color: #ffffff !important;
     letter-spacing: 1px;
     text-transform: uppercase;
} 
</style>
 
<script>
window.addEventListener('load', function(){
 
{{user_registered==true.start}} 
  $('.xFeedContainer, #activity_feed').before(`
{{user_registered==true.else}}
  $('#breadcrumbs').before(`                             
{{user_registered==true.end}} 
 
  <center>
    <div class="CountDownZeit">
      <h2 class="TextUe">Weihnachten 2023</h2>
      <div class="zeitkontrolle" date-time="2023-12-24" end-time="2023-12-27" style="--accent: #a10a06"><div class="expired" style="display:none;">
	  
            <!-- Glückwünsche zum Ereignis -->
	    <img height="300px;" src="https://files.homepagemodules.de/b104774/f25t1341p3322n2_sUwZRXED.jpg">
		
      </div></div>
	</div>
 
    <div class="CountDownZeit">
      <h2 class="TextUe">Neujahr 2024</h2>
      <div class="zeitkontrolle" date-time="2024-01-01" end-time="2024-01-02" style="--accent: #0a9006"><div class="expired" style="display:none;">
 
	    <!-- Glückwünsche zum Ereignis -->
	    <img height="300px;" src="https://files.homepagemodules.de/b104774/a_664_4a8e40de.png">
		
	  </div></div>
    </div>
  </center>
`);
 
class zeitkontrolle {
 
  constructor(el){
    this.el = el;
    this.targetDate = new Date(el.getAttribute("date-time"))
    this.endDate = new Date(el.getAttribute("end-time"))
    this.createzeitkontrolleParts()
    this.zeitkontrolleFunction();
    this.zeitkontrolleLoopId = setInterval(this.zeitkontrolleFunction.bind(this), 1000)
 
    var now = new Date()
    var distance = this.targetDate - now;
    var distanceEnd = this.endDate - now;
 
    if (distance < 0) {
      this.el.classList.add('mystyle');
      $('.mystyle .part').hide();
      $('.mystyle .expired').show();
    }
    if (distanceEnd < 0) {
      this.el.classList.add('mystyleEnd');
      $('.mystyleEnd').closest('.CountDownZeit').hide();
    }
  }
 
  createzeitkontrolleParts(){
    ["Tage", "Stunden", "Minuten", "Sekunden"].forEach(part => {
      const partEl = document.createElement("div");
      partEl.classList.add("part", part);
      const textEl = document.createElement("div");
      textEl.classList.add("text");
      textEl.innerText = part;
      const numberEl = document.createElement("div");
      numberEl.classList.add("number");
      numberEl.innerText = 0;
      partEl.append(numberEl, textEl);
      this.el.append(partEl);
      this[part] = numberEl;
    })
  }
 
  zeitkontrolleFunction(){
    const currentDate = new Date();    
    if(currentDate > this.targetDate) return clearInterval(this.intervalId);
    const remaining = this.getRemaining(this.targetDate, currentDate);
    Object.entries(remaining).forEach(([part,value]) => {
      this[part].style.setProperty("--value", value)
      this[part].innerText = value
 
    }) 
  }
 
  getRemaining(target, now){
    let Sekunden = Math.floor((target - (now))/1000);
    let Minuten = Math.floor(Sekunden/60);
    let Stunden = Math.floor(Minuten/60);
    let Tage = Math.floor(Stunden/24);
    Stunden = Stunden-(Tage*24);
    Minuten = Minuten-(Tage*24*60)-(Stunden*60);
    Sekunden = Sekunden-(Tage*24*60*60)-(Stunden*60*60)-(Minuten*60);
    return { Tage, Stunden, Minuten, Sekunden }      
  }
 
}
const zeitkontrolleEls= document.querySelectorAll(".zeitkontrolle") || [];
zeitkontrolleEls.forEach(zeitkontrolleEl => new zeitkontrolle(zeitkontrolleEl))
});
</script>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Der Countdown Zähler im Portal, auch für Gäste!

Möchte man den Countdown Zähler im Portal, nicht in einer Portal-Box unterbringen, braucht man nur eine passende Class aus dem Portal zu finden!
Fürs Business (v4) wäre das die kombinierte Class ".container.portal"!
Der Countdown Zähler wird dann über die Portal-Boxen platziert!

Installation fürs Portal, auch für Gäste - Nur mit Plugin!

Zeile 116-120 im ersten Spoiler mit den folgenden Zeilen austauschen!
In Zeile 2 wird die Position für Mitglieder und in Zeile 4 für Gäste bestimmt
Soll der Countdown Zähler nur im Portal laufen, müssen die Class und ID's ".xFeedContainer", "#activity_feed" und "#breadcrumbs" samt Komma entfernt werden

1
2
3
4
5
 
{{user_registered==true.start}} 
  $('.xFeedContainer, #activity_feed, .container.portal').before(`
{{user_registered==true.else}}
  $('#breadcrumbs, .container.portal').before(`                             
{{user_registered==true.end}} 
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Der Countdown Zähler für die Portal-Box, nicht für Gäste!

Eine weitere Möglichkeit ist eine "Simple Text Box" zu verwenden, wie sie Daishi in Beitrag #25 vorgeschlagen hat.
Hier muss das Skript modifiziert werden, weil es nicht an einen DIV-Container angehängt wird, sondern direkt eingetragen wird!

Wichtig! Ist das Skript bereits eingetragen, muss das JavaScript gelöscht werden, sonst werden die Counter, wie Daishi bereits festgestellt hat, doppelt angezeigt!!!
Weil auch in der Portal-Box keine Variablen funktionieren, können Gäste den Countdown Zähler nicht sehen!

Was auch zu bedenken ist, sind die CSS-Eintragungen in dem bereits verwendeten Counter-Skript!
Wenn man den Weihnachts- und Neujahrs Countdown in die Portal-Box unterbringen möchte, empfiehlt sich das folgende Skript einzubauen, mit neuen Classes und ID's zu nutzen!

Installation für die Portal-Box - Nicht für Gäste!

Ist der Zähler bereit installiert und läuft schon in der Forum Übersicht, muss das JavaScript von Zeile 137-207 gelöscht werden, sonst werden die Counter doppelt angezeigt!
Das Skript kann durch neue Classes und ID's individuell eingestellt werden und ist vom anderen Counter Skript unabhängig, falls es bereits installiert ist!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
 
<!-- Weihnachts & Silvester-Countdown -->
<style>
.CountDownZeit2 {
  --fontsize: 25px;
 
  display:inline-block; 
  margin: 5px 0 2px 10px !important; 
  /* z-index:999; */
  position: relative;
  bottom:10px;
}
.zeitkontrolle2 {
  padding:10px;
  background: rgba(000, 000, 000, 0.5);
 
  /* Hintergrundbild Countdown-Zähler */
  /* background-image: url("https://files.homepagemodules.de/b104774/a_489_06de1da5.jpg"); */
  /* background-size: cover;*/
  
  /* Glitzerrand */
  /* border: 1px solid #0e0e0f;
      border-image-source: url(//files.homepagemodules.de/b104774/a_659_b89afa09.gif);
      border-image-slice: 3%; */
        
  border-radius:9px;     
  text-shadow: 0 0 0.05em #aa0000, 0 0 0.1em black;
  width: fit-content;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1rem;
  font-weight: bold; 
  color: rgb(230,230,230);
  vertical-align: top;
}
.zeitkontrolle2 > .part {
  padding: calc(var(--fontsize) / 5);
  display: grid;
  gap: 0.5rem;
}
.zeitkontrolle2 > .part > .number {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #aaaaaa;
  border: 2px solid hsl(0 0% 50% / .3);
  font-size: var(--fontsize);
  position: relative;
  text-shadow: 0 0 0.05em #aa0000, 0 0 0.1em black;
  }
.zeitkontrolle2 > .part.Tage { --num: 365 }
.zeitkontrolle2 > .part.Stunden { --num: 24 }
.zeitkontrolle2 > .part:where(.Minuten, .Sekunden) { --num: 60 }
.zeitkontrolle2 > .part > .number::after{
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -0.5);
  border-radius: inherit;
  --degree: calc(360deg / var(--num) * (var(--num) - var(--value,0)));
  background-image: conic-gradient(var(--accent) var(--degree), transparent calc(var(--degree) + 0.1deg));
  --border-size: 4px;  
  --mask-image: radial-gradient(100% 100%, transparent calc(50% - var(--border-size)), black calc(50% - var(--border-size) + 1px));
  -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);
}
.zeitkontrolle2 > .part > .text {
  width: calc(var(--fontsize)*3.3);
  background: rgb(200, 200, 200);
  border:1px solid #383838;
  border-radius: 3px;
  font-size: calc(var(--fontsize)/1.8);
  font-weight: bold;
  color: #383838;
  padding: 1px 10px;
  text-align: center;
} 
 
/* 3D-Überschrift */
/* h2.TextUe2 {
  font: bold var(--fontsize) Arial !important;
  color: #eeeeee !important;
  letter-spacing: 10px;
  text-transform: uppercase;
  text-shadow: 
    1px 1px 1px #919191,
    1px 2px 1px #919191,
    1px 3px 1px #919191,
    1px 4px 1px #919191,
    1px 5px 1px #919191,
    1px 6px 1px #919191,
    1px 9px 6px rgba(16,16,16,0.4),
    1px 11px 10px rgba(16,16,16,0.2),
    1px 13px 35px rgba(16,16,16,0.2),
    1px 15px 60px rgba(16,16,16,0.4);
} */
 
/* Überschrift mit Glitzereffekt */
h2.TextUe2 {
      background: url(//files.homepagemodules.de/b104774/a_659_b89afa09.gif);
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      -webkit-text-stroke: 1px #403d37;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: rgb(64, 61, 55);
     font: bold calc(var(--fontsize)*1.6) VERDANA,ARIAL,HELVETICA !important;
     color: #ffffff !important;
     letter-spacing: 1px;
     text-transform: uppercase;
} 
</style>
 
 
 
  <center>
    <div class="CountDownZeit2">
      <h2 class="TextUe2">Weihnachten 2023</h2>
      <div class="zeitkontrolle2" date-time="2023-12-24" end-time="2023-12-27" style="--accent: #a10a06"><div class="expired" style="display:none;">
	  
            <!-- Glückwünsche zum Ereignis -->
	    <img height="300px;" src="https://files.homepagemodules.de/b104774/f25t1341p3322n2_sUwZRXED.jpg">
		
      </div></div>
	</div>
 
    <div class="CountDownZeit2">
      <h2 class="TextUe2">Neujahr 2024</h2>
      <div class="zeitkontrolle2" date-time="2024-01-01" end-time="2024-01-02" style="--accent: #0a9006"><div class="expired" style="display:none;">
 
	    <!-- Glückwünsche zum Ereignis -->
	    <img height="300px;" src="https://files.homepagemodules.de/b104774/a_664_4a8e40de.png">
		
	  </div></div>
    </div>
  </center>
 
<script>
window.addEventListener('load', function(){
 
class zeitkontrolle {
 
  constructor(el){
    this.el = el;
    this.targetDate = new Date(el.getAttribute("date-time"))
    this.endDate = new Date(el.getAttribute("end-time"))
    this.createzeitkontrolleParts()
    this.zeitkontrolleFunction();
    this.zeitkontrolleLoopId = setInterval(this.zeitkontrolleFunction.bind(this), 1000)
 
    var now = new Date()
    var distance = this.targetDate - now;
    var distanceEnd = this.endDate - now;
 
    if (distance < 0) {
      this.el.classList.add('mystyle');
      $('.mystyle .part').hide();
      $('.mystyle .expired').show();
    }
    if (distanceEnd < 0) {
      this.el.classList.add('mystyleEnd');
      $('.mystyleEnd').closest('.CountDownZeit2').hide();
    }
  }
 
  createzeitkontrolleParts(){
    ["Tage", "Stunden", "Minuten", "Sekunden"].forEach(part => {
      const partEl = document.createElement("div");
      partEl.classList.add("part", part);
      const textEl = document.createElement("div");
      textEl.classList.add("text");
      textEl.innerText = part;
      const numberEl = document.createElement("div");
      numberEl.classList.add("number");
      numberEl.innerText = 0;
      partEl.append(numberEl, textEl);
      this.el.append(partEl);
      this[part] = numberEl;
    })
  }
 
  zeitkontrolleFunction(){
    const currentDate = new Date();    
    if(currentDate > this.targetDate) return clearInterval(this.intervalId);
    const remaining = this.getRemaining(this.targetDate, currentDate);
    Object.entries(remaining).forEach(([part,value]) => {
      this[part].style.setProperty("--value", value)
      this[part].innerText = value
 
    }) 
  }
 
  getRemaining(target, now){
    let Sekunden = Math.floor((target - (now))/1000);
    let Minuten = Math.floor(Sekunden/60);
    let Stunden = Math.floor(Minuten/60);
    let Tage = Math.floor(Stunden/24);
    Stunden = Stunden-(Tage*24);
    Minuten = Minuten-(Tage*24*60)-(Stunden*60);
    Sekunden = Sekunden-(Tage*24*60*60)-(Stunden*60*60)-(Minuten*60);
    return { Tage, Stunden, Minuten, Sekunden }      
  }
 
}
const zeitkontrolleEls= document.querySelectorAll(".zeitkontrolle2") || [];
zeitkontrolleEls.forEach(zeitkontrolleEl => new zeitkontrolle(zeitkontrolleEl))
});
</script>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Ich hoffe, dass ich alle Fragen getroffen habe!

Wolfgang

Anne und Daishi finden das Top!

Antworten

#30 | Update: Weihnachts- und Neujahrs Countdown in den Beiträgen datum

22.12.2023 10:24 (zuletzt bearbeitet: 22.12.2023 21:31)

Daishi

Informationen anzeigen

Beitr�ge:	389
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	327

Hallo @Wolfgang, sorry, wenn ich mich nochmal so spät melde, habe am Script herumgebastelt.

Da die Glitter und die 3D Überschrift in den Beiträgen nicht so groß gingen, musste ich noch etwas hinzufügen und testen.

Ich hoffe, es war ok so, dachte es würde eine kleine Hilfe sein, ob da noch Fehler drinnen sind, kann ich nicht sagen da ich es im kostenlosen Forum getestet habe. Was mir da aufgefallen ist, dass die Scripte auf Tarif Foren einwandfrei gehen und bei kostenloser Version anders aussehen, hmmm

Es ist schon faszinierend, was man alles mit der CSS machen kann, nur sehr schwierig, da es hier im Forum manchmal die Zahlen ändern muss, warum auch immer. Mir fällt es auf, wie gesagt ich weiß nicht, ob es an mir liegt.

Du kannst ja nochmal drüberschauen, ob ich es soweit richtig gemacht habe, ich dachte, ich nehme dir damit ein bisschen Arbeit ab.

Die HTML-Codes habe ich so für die Forencodes benutzt.

Einfache Forencodes:

Ersetze:

1
 
[Weihnachten]

Mit:

1
 
<h2 class="TextUe">Weihnachten 2023</h2><time class="zeitkontrolle" date-time="2023-12-24 00:00:00" style="--accent: red"></time>

Diese kann man immer erweitern.

Z.B.

1
 
<h2 class="TextUe">Engel Geburtstag</h2> <time class="zeitkontrolle" date-time="2024-02-22 00:00:00" style="--accent: yellow"></time>

So hier mal das Script, das ich ein wenig verändert habe, dass man es auch schön in den Beiträgen sehen kann. Ich habe es als Plugin angelegt in "Untere Leiste - Header".

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
 
<style>
.CountDownZeit {
  --fontsize: 25px;
 
  display:inline-block; 
  margin: 5px 10px 2px 10px; 
  /* z-index:999; */
  position: relative;
}
.zeitkontrolle {
  padding:10px;
  background: rgba(000, 000, 000, 0.5);
  
  /* Hintergrundbild Countdown-Zähler */
  /* background-image: url("https://files.homepagemodules.de/b104774/a_489_06de1da5.jpg"); */
  
  /* Glitzerrand */
  /* border: 1px solid #0e0e0f;
      border-image-source: url(//files.homepagemodules.de/b104774/a_659_b89afa09.gif);
      border-image-slice: 3%; */
 
  border-radius:9px;
  text-shadow: 0 0 0.05em #aa0000, 0 0 0.1em black;
  width: fit-content;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1rem;
  font-weight: bold; 
  color: rgb(230,230,230);
}
.zeitkontrolle > .part {
  padding: calc(var(--fontsize) / 5);
  display: grid;
  gap: 0.5rem;
}
.zeitkontrolle > .part > .number {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #aaaaaa;
  border: 2px solid hsl(0 0% 50% / .3);
  font-size: var(--fontsize);
  position: relative;
  text-shadow: 0 0 0.05em #aa0000, 0 0 0.1em black;
  }
.zeitkontrolle > .part.Tage { --num: 365 }
.zeitkontrolle > .part.Stunden { --num: 24 }
.zeitkontrolle > .part:where(.Minuten, .Sekunden) { --num: 60 }
.zeitkontrolle > .part > .number::after{
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -0.5);
  border-radius: inherit;
  --degree: calc(360deg / var(--num) * (var(--num) - var(--value,0)));
  background-image: conic-gradient(var(--accent) var(--degree), transparent calc(var(--degree) + 0.1deg));
  --border-size: 4px;  
  --mask-image: radial-gradient(100% 100%, transparent calc(50% - var(--border-size)), black calc(50% - var(--border-size) + 1px));
  -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);
}
.zeitkontrolle > .part > .text {
  width: calc(var(--fontsize)*3.3);
  background: rgb(200, 200, 200);
  border:1px solid #383838;
  border-radius: 3px;
  font-size: calc(var(--fontsize)/1.8);
  font-weight: bold;
  color: #383838;
  padding: 1px 10px;
  text-align: center;
} 
 
/* 3D-Überschrift */
/*  h2.TextUe {
  font: bold var(--fontsize) Arial !important;
  font-size: 38px !important;                  
  color: #eeeeee !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 
    1px 1px 1px #919191,
    1px 2px 1px #919191,
    1px 3px 1px #919191,
    1px 4px 1px #919191,
    1px 5px 1px #919191,
    1px 6px 1px #919191,
    1px 9px 6px rgba(16,16,16,0.4),
    1px 11px 10px rgba(16,16,16,0.2),
    1px 13px 35px rgba(16,16,16,0.2),
    1px 15px 60px rgba(16,16,16,0.4);
}  */
 
/* Überschrift mit Glitzereffekt */
h2.TextUe {
      background: url(//files.homepagemodules.de/b104774/a_659_b89afa09.gif);
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      -webkit-text-stroke: 1px #403d37;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: rgb(64, 61, 55);
     font: bold calc(var(--fontsize)*12.6) VERDANA,ARIAL,HELVETICA !important;
     font-size: 48px !important;              
     color: #ffffff !important;
     letter-spacing: 1px;
     text-transform: uppercase;
} 
</style>
 
<script>
window.addEventListener('load', function(){
 
$('.xFeedContainer, #activity_feed').before(`
/*  <center>
  <div class="CountDownZeit">
    <h2 class="TextUe">Weihnachten 2023</h2>
    <br>
    <div class="zeitkontrolle" date-time="2023-12-24 00:00:00" style="--accent: #a10a06"></div>
  </div>
 
  <div class="CountDownZeit">
    <h2 class="TextUe">Neujahr 2024</h2>
    <br>
    <div class="zeitkontrolle" date-time="2023-12-31 00:00:00" style="--accent: #0a9006"></div>
  </div>
</center> 
`); */
 
  class zeitkontrolle {
  constructor(el){
    this.el = el;
    this.targetDate = new Date(el.getAttribute("date-time"));
    this.createzeitkontrolleParts()
    this.zeitkontrolleFunction();
    this.zeitkontrolleLoopId = setInterval(this.zeitkontrolleFunction.bind(this), 1000)
  }
  
  createzeitkontrolleParts(){
    ["Tage", "Stunden", "Minuten", "Sekunden"].forEach(part => {
      const partEl = document.createElement("div");
      partEl.classList.add("part", part);
      const textEl = document.createElement("div");
      textEl.classList.add("text");
      textEl.innerText = part;
      const numberEl = document.createElement("div");
      numberEl.classList.add("number");
      numberEl.innerText = 0;
      partEl.append(numberEl, textEl);
      this.el.append(partEl);
      this[part] = numberEl;
    })
  }
  
 
  zeitkontrolleFunction(){
    const currentDate = new Date();    
    if(currentDate > this.targetDate) return clearInterval(this.intervalId);
    const remaining = this.getRemaining(this.targetDate, currentDate);
    Object.entries(remaining).forEach(([part,value]) => {
      this[part].style.setProperty("--value", value)
      this[part].innerText = value
    })  
  }
  
  getRemaining(target, now){
    let Sekunden = Math.floor((target - (now))/1000);
    let Minuten = Math.floor(Sekunden/60);
    let Stunden = Math.floor(Minuten/60);
    let Tage = Math.floor(Stunden/24);
    Stunden = Stunden-(Tage*24);
    Minuten = Minuten-(Tage*24*60)-(Stunden*60);
    Sekunden = Sekunden-(Tage*24*60*60)-(Stunden*60*60)-(Minuten*60);
    return { Tage, Stunden, Minuten, Sekunden }      
  }
}
 
const zeitkontrolleEls= document.querySelectorAll(".zeitkontrolle") || [];
zeitkontrolleEls.forEach(zeitkontrolleEl => new zeitkontrolle(zeitkontrolleEl))
 
}); 
</script>
 
 

Schlie�en

Frage, was hast du getan?

Ich habe in Zeile 78 das noch eingefügt ( font-size: 38px !important; ) und in Zeile 80 auf 1 Pixel gestellt. Das ist für den 3D-Text.

Für den Glittertext habe ich in Zeile 104 das noch eingefügt ( font-size: 48px !important; ) und in Zeile 106 auf 1 Pixel gestellt.

Ich hoffe, es war ok so und konnte es so gut es geht verständlich erklären. Wolfgang, ich dachte, es wäre eine kleine Hilfe und würde dir damit ein kleines bisschen Arbeit abnehmen.

Hier nochmal zu sehen, mit Veränderungen:

So sieht es in den Beiträgen aus!

Mit freundlichen Grüßen

Daishi

Daishi

Wolfgang findet das Top!

Antworten

Iconbar: "Inhalte integrieren" und "addPics" ausblenden! � � Forum ohne Anmeldung?

Seite 3 von 4 � Seite 1 2 3 4 Seite �

�hnliche Themen

Antworten

Letzter Beitrag

Countdown mit neuen Codes und neuen Farbcodes
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Daishi 1 26.05.2024 21:00
Wolfgang • Zugriffe: 172
Countdown
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Kipper-Spedition 2 03.07.2024 13:27
Wolfgang • Zugriffe: 217
Titelleisten überschreiben
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Daishi 10 03.05.2024 19:15
Daishi • Zugriffe: 941
Spoiler Alarm
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi 3 11.03.2024 10:24
Wolfgang • Zugriffe: 555
Countdown-Timer: Javascript läuft falsch
Erstellt im Forum Das neue Template Xobor (v6) von Nara 9 12.09.2021 15:28
Nara • Zugriffe: 970
Silvester/Neujahrs-Karten Online versenden
Erstellt im Forum Ank�ndigungen & Termine, wichtige News! von Wolfgang 0 31.12.2017 09:43
Wolfgang • Zugriffe: 695
Ladezeit
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Magister 4 20.10.2015 16:32
Magister • Zugriffe: 1113
Countdown(up) - Timer - Zähler - Generatoren
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 0 01.04.2012 00:53
Wolfgang • Zugriffe: 7080

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

Forum - RE: Fehlersuche: Weihnachts- und Neujahrs Countdown etwas anders! - 3

Update: Weihnachts- und Neujahrs Countdown etwas anders!

Forum Lesezeichen ❌