Neujahrs Countdown!

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 1 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. Elektronik & Elektrotechnik Elektronik & Elektrotechnik - Fragen und Antworten Elektronik & Elektrotechnik - Praxis - Highlights 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.

#1 | Neujahrs Countdown! datum

15.12.2022 12:09 (zuletzt bearbeitet: 26.05.2024 20:44)

Daishi

Informationen anzeigen

Beiträge:	399
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 € Forum Spende
Sternzeichen	Steinbock
Likes	347

Ich habe mal hier ein Script versucht zu basteln und es funktioniert.

Leider ist es nicht für das Xobor - Forum angepasst, da man einiges an den CSS Tags ändern muss und ich gebe es wirklich zu ich raffe das nicht, manches bekomme ich hin, manches nicht.

Manchmal muss man es auch komplett neu schreiben oder neu als Plugin schreiben. Wie gesagt, das ist alles noch Neuland für mich. Ich habe es schon versucht, aber ich schieße damit mein Forum ab und bei meinen Testforen kann ich es nicht testen, da ich dafür extra noch die Premium Tarife kaufen müsste, das würde mein Budget sprengen.

Hier mal der Code. Ich habe alles zusammengefügt, also CSS, HTML und Javascript.

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>
  
@import url('https://fonts.googleapis.com/css?family=Raleway:100,400,700');
 
.sylvester {
position:absolute;
background: rgba(179, 167, 183); /* Zurückfallen */
background-color: rgba(179, 167, 183, 0.4);
width:320px;
left:50%;
margin-left: -160px;
text-align:center;
top:30%;
border-radius: 11px;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border: 2px solid rgba(179, 72, 47, 0.4);
box-shadow: 0 2px 0 -1px #bdbdbd, 0 4px 0 -2px #bdbdbd, 0 0 2px #bdbdbd, 0 8px 16px #bdbdbd;
-webkit-box-shadow: 0 2px 0 -1px #bdbdbd, 0 4px 0 -2px #bdbdbd, 0 0 2px #bdbdbd, 0 8px 16px #bdbdbd;
}
.sylvester h1 {
font-family: Raleway, Open Sans, Droid Sans, Roboto,arial, sans-serif;
padding-bottom:4px;
color:#800000;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
.sylvester img {
box-shadow: 0 1px 0 #65750b, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
padding:5px 10px 5px 10px;
margin: 0 25px 0 25px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
height:25px;
width:23px;
}
.sylvester ul {
	list-style-type: none;
  margin: 0 auto;
}
.sylvester li {
	display: inline-block;
	width: 60px;
}
.zahlen {
  color:#1F4761;
  display: inline-block;
  font-family: Raleway, Open Sans, Droid Sans, Roboto,arial,   sans-serif;
	font-size: 26px;
	line-height: 1.5;
	text-align: center;
}
.zuordnung {
  font-family: Raleway, Open Sans, Droid Sans, Roboto,arial,   sans-serif;
	color:#323232;
	font-size: 13px;
	font-variant: small-caps;
	line-height: 1.5;
	margin: 0 auto;
	text-align: center;
	position: ;
	bottom: 3px;
}
  
  </style>
 
<div class="container">
<div class="sylvester">
  <ul id="countdown">
    <li>
      <span class="days zahlen">00</span>
      <p class="timeRefDays zuordnung">days</p>
    </li>
    <li>
      <span class="hours zahlen">00</span>
      <p class="timeRefHours zuordnung">hours</p>
    </li>
    <li>
      <span class="minutes zahlen">00</span>
      <p class="timeRefMinutes zuordnung">minutes</p></li>
    <li>
      <span class="seconds zahlen">00</span><p class="timeRefSeconds zuordnung">seconds</p></li>
  </ul>
  <h1>
    <img alt="Hufeisen" src="https://files.homepagemodules.de/b906480/a_105_d94b9861.png" title="Frohes neues Jahr mit all euren Wünschen">&nbsp;2023&nbsp;
    
    <img alt="Kleeblatt" src="https://files.homepagemodules.de/b906480/a_106_2a59e806.png" title="Glück und Zufriedenheit im neuen Jahr">
    
  </h1>
  </div>
</div>
<script id="rendered-js">
//Inspiriert von C. Berta
 
(function ($) {
  $.fn.countdown = function (options, callback) {
    //custom 'this' selector
    thisEl = $(this);
 
    // Reihe von benutzerdefinierten Einstellungen
    var settings = {
      'date': null,
      'format': null };
 

    // hängen Sie das Einstellungsarray an Optionen an
    if (options) {
      $.extend(settings, options);
    }
 
    //Erstellen Sie die Countdown-Verarbeitungsfunktion
    function countdown_proc() {
      var eventDate = Date.parse(settings.date) / 1000;
      var currentDate = Math.floor($.now() / 1000);
 
      if (eventDate <= currentDate) {
        callback.call(this);
        clearInterval(interval);
      }
 
      var seconds = eventDate - currentDate;
 
      var days = Math.floor(seconds / (60 * 60 * 24));
      //Berechne die Anzahl der Tage
 
      seconds -= days * 60 * 60 * 24;
      //Aktualisieren Sie die Sekundenvariable mit der Anzahl der entfernten Tage
 
      var hours = Math.floor(seconds / (60 * 60));
      seconds -= hours * 60 * 60;
      //Aktualisieren Sie die Sekundenvariable mit der Anzahl der entfernten Stunden
 
      var minutes = Math.floor(seconds / 60);
      seconds -= minutes * 60;
      //Aktualisieren Sie die Sekundenvariable mit der Anzahl der entfernten Minuten
 
      //Bedingte Aussagen
      if (days == 1) {thisEl.find(".timeRefDays").text("Tag");} else {thisEl.find(".timeRefDays").text("Tage");}
      if (hours == 1) {thisEl.find(".timeRefHours").text("Stunde");} else {thisEl.find(".timeRefHours").text("Stunden");}
      if (minutes == 1) {thisEl.find(".timeRefMinutes").text("Minute");} else {thisEl.find(".timeRefMinutes").text("Minuten");}
      if (seconds == 1) {thisEl.find(".timeRefSeconds").text("Sekunde");} else {thisEl.find(".timeRefSeconds").text("Sekunden");}
 
      //Logik für die Einstellung two_digits ON
      if (settings.format == "on") {
        days = String(days).length >= 2 ? days : "0" + days;
        hours = String(hours).length >= 2 ? hours : "0" + hours;
        minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
        seconds = String(seconds).length >= 2 ? seconds : "0" + seconds;
      }
 
      //Aktualisieren Sie die HTML-Werte des Countdowns.
      thisEl.find(".days").text(days);
      thisEl.find(".hours").text(hours);
      thisEl.find(".minutes").text(minutes);
      thisEl.find(".seconds").text(seconds);
    }
 
    //Führen Sie die Funktion aus
    countdown_proc();
 
    //Schleife die Funktion
    interval = setInterval(countdown_proc, 1000);
  };
 
})(jQuery);
 

 
//Geben Sie die Plugin-Einstellungen an
$("#countdown").countdown({
  //Das Enddatum des Countdowns
  date: "01 january 2023 00:00:00",
 
  // on (03:07:52) | off (3:7:52) - two_digits auf ON gesetzt behält die Layoutkonsistenz bei
  format: "on" },
 

function () {
  // Dies wird ausgeführt, wenn der Countdown abgelaufen ist
  alert("Wir wünschen ein frohes, neues und gesundes Jahr 2023!");
});
//# sourceURL=pen.js
    </script>  
 

Schließen

in Zeile 85 und 87 kann man die Wünsche ändern, also Text

in Zeile 172 und 180 muss das Jahr, also nur 2023 geändert werden sonst geht der Timer nicht, wenn man nicht möchte, dass der Timer läuft, einfach 2020 eingeben, dann bleibt der Timer auf 00

Ich hoffe, ich habe es soweit gut erklärt, dass man es versteht. Ich entschuldige mich für die schlechte Erklärung, wenn man es nicht sofort versteht. Ich bin im erklären nicht so gut.

Ich hoffe, dass meine Inspiration gut ankommt.

Mit freundlichen Grüßen

Daishi

Daishi

Wolfgang, 844er, Kipper-Spedition und Hans58 finden das Top!

Antworten

#2 | Neujahrs Countdown fürs Forum datum

16.12.2022 22:09 (zuletzt bearbeitet: 31.12.2024 06:44)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3843
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1675

Neujahrs Countdown fürs Forum
Aktualisiert 31.12.24

Hallo Daishi!

Deine Inspiration ist gut angekommen!
Mal wieder eine super Idee und gut zu gebrauchen!
Den Countdown kann man über einen Foren-Code auch für andere Anlässe, wie Geburtstage, Treffen oder besondere Veranstaltungen einsetzen.

Aber erstmal der Neujahrs Countdown!
Er soll ja überall funktionieren, in allen Templates und auch mobil!
Ein guter Platz für alle Templates ist unter der Navi-Leiste, denke ich!
Über ein Plugin lässt sich eine gute Lösung finden!

Was habe ich geändert?

Weil die importierte Schrift (Zeile 3) umstritten ist und auch nicht das Schriftbild groß verändert, habe ich sie weggelassen!
Damit der Countdown-Zähler in allen Template & Mobil gut angezeigt wird, musste die CSS noch angepasst werden!
Habe den Ausgabetext (Zeile 95) aus den JavaScript gezogen und unter die anderen DIV-Container gesetzt!
Habe den Div-Container mit class="container" herausgenommen! Die Class wird in verschiedenen Templates verwendet!
Ansonsten läuft das Skript Top!

Neujahrs Counter

Ausgabetext nach Ablauf Counter

Installation für alle Template und Mobil

Das komplette Skript wird am besten als Plugin in "Obere Leiste - Footer" kopiert!
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template" markiert werden, z.B. Business - Template (144) & Mobil - Template (177), Auswahl mit Mausklick oder Strg + Mausklick!

Das Skript kann zum Testen für die Template (v1-4) auch in die Kopf- oder Fußzeile kopiert werden, für das neue Xobor V6 und Mobil nach Eigenes Javascript.

In Zeile 87+91 kann der Text für die Tooltipps "Hufeisen" & "Kleeblatt" angepasst werden!
In Zeile 95 steht der Text, der nach Ablauf des Counters angezeigt wird!
In Zeile 169 steht das Enddatum. Zum Testen kann das Datum vorverlegt werden!
Möchte man die Schriftfarben für das Jahr und für den Text anpassen, geht das über Zeile 6+61
Die Hintergrundfarbe lässt sich über Zeile 7 verändern!

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
 
<style>
.sylvester, .text_countdown  {
  font-family: Open Sans, arial, sans-serif;
  font-weight:bold;
  font-size:30px;
  color:#800000;
  background: #ffffff;
  max-width:320px;  
  margin:20px auto 10px auto;
  text-align:center;
  border-radius: 11px;
  border: 2px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 0 -1px #bdbdbd, 0 4px 0 -2px #bdbdbd, 0 0 2px #bdbdbd, 0 8px 16px #bdbdbd;
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
.sylvester img {
  padding:5px 10px;
  margin: 10px 25px;
  border-radius: 50%;
 /* cursor:pointer; */
  box-shadow: 0 1px 0 #65750b, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
.sylvester ul {
  padding:0;
  list-style-type: none;
  margin: 0 auto;
}
.sylvester li {
  display: inline-block;
  width: 60px;
}
.sylvester div {
  display: flex;  
  align-items:center;
  justify-content:center;
}
.zahlen {
  color:#1F4761;
  display: inline-block;
  font-family: Open Sans, arial, sans-serif;
  font-size: 26px;
  line-height: 1.5;
  text-align: center;
}
.zuordnung {
  font-family: Open Sans, arial, sans-serif;
  color:#323232;
  font-size: 13px;
  font-variant: small-caps;
  line-height: 1.5;
  margin: 0 auto;
  text-align: center;
}
#countdown {
  display: inline-block;
}
.text_countdown {  
  margin:20px auto;
  padding: 5px 20px;
  max-width:1000px;
  color:#000000;
}
</style>
 
 
<div class="sylvester">
 <ul id="countdown">
    <li>
      <span class="days zahlen">00</span>
      <p class="timeRefDays zuordnung">Tage</p>
    </li>
    <li>
      <span class="hours zahlen">00</span>
      <p class="timeRefHours zuordnung">Stunden</p>
    </li>
    <li>
      <span class="minutes zahlen">00</span>
      <p class="timeRefMinutes zuordnung">Minuten</p>
    </li>
    <li>
      <span class="seconds zahlen">00</span>
      <p class="timeRefSeconds zuordnung">Secunden</p>
    </li>
  </ul>
 
  <div>
    <img width="30px" alt="Hufeisen" src="//files.homepagemodules.de/b104774/a_682_91a55c17.png" title="Frohes neues Jahr mit all Euren Wünschen">
 
    <div>2025</div>
    
    <img width="30px" alt="Kleeblatt" src="//files.homepagemodules.de/b104774/a_681_55937c29.png" title="Glück und Zufriedenheit im neuen Jahr">
  </div>
 
</div>
<div class="text_countdown" style="display:none;">Wir wünschen Euch ein frohes, neues und gesundes Jahr 2025!</div>
 
 
<script>
window.addEventListener('load', function(){
  $.fn.countdown = function (options, callback) {
    thisEl = $(this);
 
    // Reihe von benutzerdefinierten Einstellungen
    var settings = {
      'date': null,
      'format': null };
 
    if (options) {
      $.extend(settings, options);
    }
 
    function countdown_proc() {
      var eventDate = Date.parse(settings.date) / 1000;
      var currentDate = Math.floor($.now() / 1000);
 
      if (eventDate <= currentDate) {
        callback.call(this);
        clearInterval(interval);
      }
 
      var seconds = eventDate - currentDate;
 
      var days = Math.floor(seconds / (60 * 60 * 24));
      //Berechnung Anzahl der Tage
 
      seconds -= days * 60 * 60 * 24;
      //Aktualisieren der Sekundenvariable mit der Anzahl der entfernten Tage
 
      var hours = Math.floor(seconds / (60 * 60));
      seconds -= hours * 60 * 60;
      //Aktualisieren der Sekundenvariable mit der Anzahl der entfernten Stunden
 
      var minutes = Math.floor(seconds / 60);
      seconds -= minutes * 60;
      //Aktualisieren der Sekundenvariable mit der Anzahl der entfernten Minuten
 
      //Bedingte Aussagen
      if (days == 1) {thisEl.find(".timeRefDays").text("Tag");} else {thisEl.find(".timeRefDays").text("Tage");}
      if (hours == 1) {thisEl.find(".timeRefHours").text("Stunde");} else {thisEl.find(".timeRefHours").text("Stunden");}
      if (minutes == 1) {thisEl.find(".timeRefMinutes").text("Minute");} else {thisEl.find(".timeRefMinutes").text("Minuten");}
      if (seconds == 1) {thisEl.find(".timeRefSeconds").text("Sekunde");} else {thisEl.find(".timeRefSeconds").text("Sekunden");}
 
      //Logik für die Einstellung two_digits ON
      if (settings.format == "on") {
        days = String(days).length >= 2 ? days : "0" + days;
        hours = String(hours).length >= 2 ? hours : "0" + hours;
        minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
        seconds = String(seconds).length >= 2 ? seconds : "0" + seconds;
      }
 
      //Aktualisieren der HTML-Werte des Countdowns.
      thisEl.find(".days").text(days);
      thisEl.find(".hours").text(hours);
      thisEl.find(".minutes").text(minutes);
      thisEl.find(".seconds").text(seconds);
    }
 
    //Funktion ausühren
    countdown_proc();
 
    //Schleife für die Funktion
    interval = setInterval(countdown_proc, 1000);
  };
 
 
//Plugin-Einstellungen
$("#countdown").countdown({
  //Das Enddatum des Countdowns
  date: "01 january 2025 00:00:00",   //date: "16 december 2022 20:18:00",
 
  // on (03:07:52) | off (3:7:52) - Auf on/off gesetzt entspricht dem Layout
  format: "on" },
function () {
 $('.text_countdown').show(1);
 $('.sylvester').hide(1);
});
  
});
</script> 
 

Schließen

Spoiler mit einem Klick öffnen und schließen!

Weitere interessante Link:

Aus dem Forum: Countdown(up) - Timer - Zähler - Generatoren
Auf "w3schools.com": Erstellen eines Countdown-Timers

Bis dann und gutes Gelingen!

Wolfgang

Nara, Kipper-Spedition, Daishi und 844er finden das Top!

Antworten

Moderations-Kommentar:

Beitrag aktualisiert, Bilder erneuert!
Fehler im Datum behoben!

#3 | RE: Neujahrs Countdown fürs Forum datum

18.12.2022 23:56

Ich musste es leider im Portal einsetzen, weil es mit meinem Begrüssungsscript zusammen nicht geklappt hat. Da haben sich Zeilen verschoben.

Antworten

#4 | RE: Neujahrs Countdown fürs Forum datum

20.12.2022 17:09

Ich habe das Problem nun gelöst, ich habe den Code einfach meinem Lauftextplugin hinzugefügt.Kannst ja mal schauen @Wolfgang .

Wolfgang findet das Top!

Antworten

#5 | RE: Neujahrs Countdown fürs Forum datum

27.12.2022 15:06 (zuletzt bearbeitet: 27.12.2022 15:38)

Lieber Wolfgang,

ich habe das Script in mein Forum (V1) in die Kopfzeile gesetzt und es hat auf Anhieb funktioniert!

Eines schaffe ich aber nicht. Ich möchte die Farbe für die Zahl 2023 und die Farbe für den Ende-Text dem Farblayout meines Forums anpassen, aber es funktioniert nicht.
Die Zahl 2023 erscheint weiterhin in Rot, der Text weiterhin in Schwarz.

Geändert habe ich die Farb-Codes (unterschiedliche Werte) in Zeile 6 und in Zeile 61.

Kannst Du mir sagen, wo die Farben für diese Texte geändert werden können?

Ich bedanke mich schon jetzt für Deine Hilfe!

Nachtrag:
Ich nehme alles zurück, plötzlich sind die gewünschten Farben da!!

Standard Template (V1)

Wolfgang findet das Top!

Antworten

#6 | Neujahrs Countdown mit Feuerwerk! datum

28.12.2022 20:01 (zuletzt bearbeitet: 29.12.2022 20:08)

Daishi

Informationen anzeigen

Beiträge:	399
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 € Forum Spende
Sternzeichen	Steinbock
Likes	347

Ich habe mal hier ein weiteres Script versucht zu basteln und es funktioniert.

Habe es auf mein Forum angepasst. Habe es versucht in der Kopfzeile einzufügen, ob es überhaupt auf dem Xobor - Forum läuft. Es läuft zwar, aber es sind einige Funktionen am Forum nicht möglich.

Wie ich schon oft erwähnt habe, arbeite ich mit 2 verschiedenen, Software. Bei der einen funktioniert es tatenlos und ohne Probleme. Hier auf dem Xobor - Forum hat man viele Probleme, fängt schon an mit den 100 %, da muss man die Werte ändern, auch die Punkte wo x y sein sollte, muss hier in Xobor seit neustem angepasst werden.

Zudem es hier auch jetzt vermehrt Probleme mit ( z-index: 999999; ) gibt, habe ich gemerkt das der nicht mehr anerkannt oder gelesen wird.

Ich bin in den Weiten des Xobor - Forum noch ein kleines Kind. Also in den Kinderschuhen, versuche es so weit es geht irgendwie es hinzubekommen. Mit den CSS - Tags klappt es mal, mit Scripts dann wieder nicht, habe schon einige auf meinem Forum laufen.

Ich weiß und denke das, wenn man es umschreibt für ein Plugin würde es gehen und ich denke das da wieder die CSS - Tags umgeändert werden müssen. Liebe Jungs und Mädels, ich raffe das wirklich nicht, wenn ich die Tags umbenenne, meckert Xobor das die Befehle unbekannt sind, kommt eine Fehler-Meldung mit rotem Kreis und Kreuz.

So zum Script. Auf CodePen zeigt es schön in Center an, im Forum nicht, da zeigt er es links an.

Neujahrs Countdown mit Feuerwerk!

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
 
<style>
  
  @import url("https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@100;300;400;900&display=swap");
 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #dddddd;
  font-size: 4.5vmin;
}
.fireworks-container {
  position: fixed;
  width: 100%;
  height: 100%;
}
.fireworks-container:nth-of-type(2){
  z-index: 9;
}
.countdown {
  display: flex;
  gap: 1rem;
  font-family: "Londrina Solid", cursive;
  color: rgb(255,255,255);
  filter: 
    drop-shadow(-0.05em -0.05em 0.05em rgba(128, 0, 128,1))
    drop-shadow(0.05em 0.05em 0.05em rgba(0,0,0,1))
    drop-shadow(0 0 .5em rgba(255, 192, 203,.5));
}
.countdown div {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.countdown div .value {
  font-size: 2.5em;
  font-weight: 400;
  /* text-shadow: 0 0 0.05em red, 0 0 0.1em black; */
}
.countdown div .label {
  font-size: 0.8em;
  font-weight: 300;
  background: rgba(255, 192, 203,1);
  color: rgb(0,0,0);
}
.countdown div .yeardigit {
  font-size: 8em;
  line-height: 0.9em;
  font-weight: 900;
  /* text-shadow: 0 0 0.02em red, 0 0 0.05em black; */
}
 
</style>
 

 
<body>
	<div class="fireworks-container"></div>
  <div class="fireworks-container"></div>
	<div class="countdown">
		<div>
			<div class="value days">0</div>
			<div class="label">Tage</div>
			<div class="yeardigit">0</div>
		</div>
		<div>
			<div class="value hours">0</div>
			<div class="label">Stunden</div>
			<div class="yeardigit">0</div>
		</div>
		<div>
			<div class="value minutes">0</div>
			<div class="label">Minuten</div>
			<div class="yeardigit">0</div>
		</div>
		<div>
			<div class="value seconds">0</div>
			<div class="label">Sekunden</div>
			<div class="yeardigit">0</div>
		</div>
	</div>
</body>
 
<script src="https://cdn.jsdelivr.net/npm/fireworks-js@latest/dist/fireworks.js"></script>
 

<script id="rendered-js">
initFireWorks();
initCountDown();
 
function initFireWorks() {
  const containers = document.querySelectorAll('.fireworks-container');
  containers.forEach((container, index) => {
    index += 1;
    const fireworks = new Fireworks(container, {
      hue: { min: 0, max: 360 },
      delay: { min: 50 / index, max: 100 / index },
      brightness: { min: 80, max: 100 },
      rocketsPoint: 50,
      opacity: 1,
      speed: 1 / index,
      acceleration: 1.05,
      friction: 0.97,
      gravity: 2,
      particles: 200 / index,
      trace: 4 / index,
      explosion: 40 / index });
 
    fireworks.start();
  });
}
function initCountDown() {
  const countdown = setInterval(() => {
    const nextYear = new Date().getFullYear() + 1;
    const nextYearDate = new Date(nextYear, 0, 1);
    const diff = countDownDate(nextYearDate);
 
    Object.keys(diff).forEach(key => {
      document.querySelector("." + key).textContent = diff[key];
    });
 
    document.querySelectorAll('.yeardigit').forEach((digit, index) => {
      digit.textContent = String(nextYear)[index];
    });
  }, 1);
}
 
function countDownDate(date_future) {
  const date_now = new Date();
  let seconds = Math.floor((date_future - date_now) / 1000);
  let minutes = Math.floor(seconds / 60);
  let hours = Math.floor(minutes / 60);
  let days = Math.floor(hours / 24);
 
  hours = hours - days * 24;
  minutes = minutes - days * 24 * 60 - hours * 60;
  seconds = seconds - days * 24 * 60 * 60 - hours * 60 * 60 - minutes * 60;
  return { days, hours, minutes, seconds };
}
//# sourceURL=pen.js
    </script>
 

Schließen

Ich hoffe, meine kleine Inspiration kommt gut an.

Mit freundlichen Grüßen

Daishi

Daishi

Wolfgang findet das Top!

Antworten

#7 | RE: Neujahrs Countdown mit Feuerwerk! datum

30.12.2022 01:48 (zuletzt bearbeitet: 28.12.2024 08:53)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3843
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1675

Neujahrs Countdown mit Feuerwerk
Aktualisiert 28.12.2024

Hallo Daishi!

Mal wieder eine super Idee den Countdown mit einem Feuerwerk zu verbinden!
Der Counter sieht Top aus, finde ich!

Der Neujahrs Countdown sollte überall funktionieren, in allen Templates und auch mobil!
Ein guter Platz für alle Templates ist unter der Navi-Leiste, denke ich!
Über ein Plugin lässt sich der Counter in allen Templates gut platzieren. Mit dem folgenden Skript ist auch der Einbau in Kopf- oder Fußzeile möglich!
Da das Feuerwerk ständig läuft, ist ein zeitlich Begrenzung sinnvoll!
Ein Start des Feuerwerk erst zum Jahreswechsel wäre auch nicht schlecht, habe ich aber nicht hinbekommen!

Was habe ich geändert?

Weil importierte Schriften (Zeile 3) umstritten sind und hier die Schrift das Schriftbild nicht groß verändert, habe ich sie gelöscht!
Damit der Countdown-Zähler in allen Template & Mobil gut angezeigt wird, musste die CSS noch angepasst werden!
Habe "*", "body" und "fireworks-container:nth-of-type(2)" einfach weggelassen!
Habe für das Feuerwerk eine zeitliche Begrenzung mit 5 Sek. gewählt (Zeile 54), weil bei jedem Neustart der Seite das Feuerwerk in Aktion tritt!
Habe die zeitliche Verzögerung im Feuerwerk (Zeile 100) vergrößert, sieht besser aus!
Ansonsten läuft das Skript super!

Neujahrs Counter

Installation für alle Template und Mobil

Das komplette Skript wird am besten als Plugin in "Obere Leiste - Footer" kopiert!
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template" markiert werden, z.B. Business - Template (144) & Mobil - Template (177), Auswahl mit Mausklick oder Strg + Mausklick!

Für die Template (v1-4) läuft das Skript auch in Kopf- oder Fußzeile, für das neue Xobor V6 und Mobil in Eigenes Javascript.

In Zeile 54 wird die Laufzeit angepasst, hier 5 Sek. !
In Zeile 100 wird die zeitliche Verzögerung einer weiteren Explosion bestimmt!
In Zeile 86 ist das zusätzliche Feuerwerk-Skript eingetragen!

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
 
<style>
.fireworks-container {
  position: fixed;
  width: 100%;
  height: 100%;
}
 
.countdown { 
  max-width:320px !important;
  margin:0 auto;
  display: flex;
  gap: 1rem;
  font-family: "Arial", cursive;
  color: rgb(255,255,255);
  filter: 
    drop-shadow(-0.05em -0.05em 0.05em rgba(128, 0, 128,1))
    drop-shadow(0.05em 0.05em 0.05em rgba(0,0,0,1))
    drop-shadow(0 0 .5em rgba(255, 192, 203,.5));
}
.countdown div { 
  display: flex;
  flex-direction: column;
  text-align: center;
}
.countdown div .value {
  font-size: 2.5em;
  font-weight: 400;
  text-shadow: 0 0 0.05em red, 0 0 0.1em black;
}
.countdown div .label {
  font-size: 0.8em;
  font-weight: 300;
  background: rgba(255, 192, 203,1);
  color: rgb(0,0,0);
}
.countdown div .yeardigit {
  font-size: 8em;
  line-height: 0.9em;
  font-weight: 900;
  text-shadow: 0 0 0.02em #ff0000, 0 0 0.05em #777777;
}
.page_index .fireworks-container {}
</style>
 
<div class="fireworks-container"></div>
 
<script>
window.addEventListener('load', function(){
 
// Laufzeit Feuerwerk
function newload_fire(){
  $('.fireworks-container').hide();
};
setTimeout(newload_fire,5000);
 

$('.page_index,.page2, #page-body, #pagewidth td.tbhi ').prepend(`
 

	<div class="countdown">
		<div>
			<div class="value days">0</div>
			<div class="label">Tage</div>
			<div class="yeardigit">0</div>
		</div>
		<div>
			<div class="value hours">0</div>
			<div class="label">Stunden</div>
			<div class="yeardigit">0</div>
		</div>
		<div>
			<div class="value minutes">0</div>
			<div class="label">Minuten</div>
			<div class="yeardigit">0</div>
		</div>
		<div>
			<div class="value seconds">0</div>
			<div class="label">Sekunden</div>
			<div class="yeardigit">0</div>
		</div>
	</div>
`);
 
});
</script>
<script src="https://cdn.jsdelivr.net/npm/fireworks-js@latest/dist/fireworks.js"></script>
 
 
<script>
 
initFireWorks();
initCountDown();
 
function initFireWorks() {
  const containers = document.querySelectorAll('.fireworks-container');
  containers.forEach((container, index) => {
    index += 1;
    const fireworks = new Fireworks(container, {
      hue: { min: 0, max: 360 },
      delay: { min: 50 / index, max: 100 / index },
      brightness: { min: 80, max: 100 },
      rocketsPoint: 50,
      opacity: 1,
      speed: 1 / index,
      acceleration: 1.05,
      friction: 0.97,
      gravity: 2,
      particles: 200 / index,
      trace: 4 / index,
      explosion: 40 / index });
 
    fireworks.start();
  });
}
 
function initCountDown() {
  const countdown = setInterval(() => {
      const nextYear = new Date().getFullYear() + 1;
      const nextYearDate = new Date(nextYear, 0, 1);
      const diff = countDownDate(nextYearDate);
 
      Object.keys(diff).forEach(key => {
      document.querySelector("." + key).textContent = diff[key];
    });
 
    document.querySelectorAll('.yeardigit').forEach((digit, index) => {
      digit.textContent = String(nextYear)[index];
    });
  }, 1);
}
 
function countDownDate(date_future) {
  const date_now = new Date();
  let seconds = Math.floor((date_future - date_now) / 1000);
  let minutes = Math.floor(seconds / 60);
  let hours = Math.floor(minutes / 60);
  let days = Math.floor(hours / 24);
 
  hours = hours - days * 24;
  minutes = minutes - days * 24 * 60 - hours * 60;
  seconds = seconds - days * 24 * 60 * 60 - hours * 60 * 60 - minutes * 60;
  return { days, hours, minutes, seconds };
}
</script>
 

Schließen

Spoiler mit einem Klick öffnen und schließen!

Weitere interessante Link:

Aus dem Forum: Countdown(up) - Timer - Zähler - Generatoren
Auf "w3schools.com": Erstellen eines Countdown-Timers

Bis dann und gutes Gelingen!

Wolfgang

Antworten

Moderations-Kommentar:

Fehler behoben (Zeit korrigiert!), Grafik ausgetauscht!

#8 | Weihnachts- und Neujahrs Countdown etwas anders! datum

28.11.2023 18:16 (zuletzt bearbeitet: 30.12.2023 00:50)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3843
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1675

Weihnachts- und Neujahrs Countdown etwas anders!
Aktualisiert 04.12.23

Das Skript stammt mal wieder von Daishi,
er hat mich gefragt, ob ich damit etwas mit anfangen kann....

Na klar, super Teil zur passenden Zeit!

Was kann das Skript?

Das Skript ist so aufgebaut, dass mehrere Zähler unabhängig arbeiten können!
Es ist auch möglich die Zähler kleiner darzustellen, evtl. die Sekunde weglassen oder eine Terminliste erstellen!
Vieles ist möglich, mal wieder genial!
Auch lässt sich ein neuer Foren-Code mit wenigen DIV's erstellen und in Beiträgen verwenden!

Was habe ich verändert?

An der Funktion und an den Classes war nichts Großes zu verändern, was stört!
Habe nur ein "z-index" eingefügt, damit die Zähler oben liegen und nicht unter einer Titelleiste verschwinden!
Weil es 2 Zähler sind, habe ich sie nebeneinandergestellt. Nimmt die Breite ab, werden sie automatisch untereinander platziert!
Die Überschriften sind etwas auffälliger in 3D dargestellt!

Installation für alle Template & Mobil

Das komplette Skript kommt für die Template (v1-4) in die Kopf- & Fußzeile.
Für das neue Xobor V6 & Mobil wird das komplette Skript nach Eigenes Javascript kopiert.

Das Skript kann auch als 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 12 verändert und angepasst werden!
Es ist auch möglich ein Bild als Hintergrund zu verwenden, hierzu Zeile 15 freigeben!
Möchte man einen glitzernden Rand einfügen müssen Zeile 18-22 freigegeben werden!
Die Formatierungen für beiden 3D-Überschriften sind in Zeile 75-92 zu finden!
Wird Zeile 95-106 freigegeben und Zeile 75-92 gelöscht, bekommt die Überschrift ein Glitzer-Effekt (Passt gut in die Weihnachtszeit)!
Über die Class und "before" in Zeile 112 wird die Position der Counter bestimmt!

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

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
 
<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);
}
 
/* Ü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(){
 
$('.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="2024-01-01 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

Spoiler mit einem Klick öffnen und schließen!

Bis dann und nochmal besten Dank für das schöne Skript!
Wolfgang

Anne, Nara und Daishi finden das Top!

Antworten

Moderations-Kommentar:

Der Counter lässt sich jetzt über eine Einstellung in der Größe anpassen (siehe Skript)!
Hintergrundgrafik für den Counter!
Glitzer-Effekt von Nara

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

29.11.2023 00:12 (zuletzt bearbeitet: 01.12.2023 08:13)

Hallo Wolfgang

Wenn ich den Countdown in der Kopfzeile einfüge, überlappt dieser das Feld wo mein Profilbild drin ist.

Kann man den in der Größe verändern?

Und warum wird in der Fußzeile nichts angezeigt, wenn ich diesen dort einfüge?

lg

Wolfgang findet das Top!

Antworten

#10 | Weihnachts- und Neujahrs Countdown etwas anders! datum

29.11.2023 23:10 (zuletzt bearbeitet: 30.12.2023 00:50)

Weihnachts- und Neujahrs Countdown etwas anders!

Hallo Anne.

Was wären die schönen Skripte ohne die eifrigen User, die es testen?
Danke, danke dafür!

Was mir aufgefallen ist:

Ich habe das Skript ausgiebig durchleuchtet, besonders im Gaia!
Was mir aufgefallen ist, dass der Counter, wenn er zu groß ist in der Anzeige verzerrt!
Mit dem folgenden Update wird dieser Fehler behoben und zusätzlich lässt sich die Gesamtgröße über eine Einstellung verändern, bzw. anpassen!
Alle anderen Größen gleichen sich automatisch an!

Fragen zum Skript:

Wie Du mir über PN mitgeteilt hast, fragst Du Dich warum die Counter immer oben angezeigt werden, obwohl alles in der Fußleiste steht!
Es sieht so aus, dass in Zeile 83 der Standort festgelegt wird. Mit "before" wird das Skript vor den DIV-Container mit der Class "xFeedContainer" gesetzt!
Will man einen anderen Standort definieren, muss man sich die Class oder ID von dem entsprechenden DIV-Container suchen. Mit "before" oder "after" kann man bestimmen ob alles vor oder hinter dem Container angezeigt werden soll!

Update:

Alle Änderungen und zusätzliche Erklärungen sind bereits in Beitrag #8 geändert!

Bis dann

Wolfgang

Gabriella und Daishi finden das Top!

Antworten

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

Seite 1 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: 357
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: 423
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: 1344
Spoiler Alarm - Countdown Spoiler
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: 810
Countdown-Timer: Javascript läuft falsch
Erstellt im Forum Das neue Template Xobor (v6). von Nara 9 12.09.2021 15:28
Nara • Zugriffe: 1195
Silvester/Neujahrs-Karten Online versenden
Erstellt im Forum Ankündigungen & Termine, wichtige News. von Wolfgang 0 31.12.2017 09:43
Wolfgang • Zugriffe: 872
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: 1288
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: 7417

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!

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 €

12%