Probleme bei der Umsetzung eines Count-Ups

Jimdo-Userforum � Jimdo User-Forum � Jimdo-Specials (Tools, Widgets, HTML und CSS) � Probleme bei der Umsetzung eines Count-Ups

Themen-Einstellungen

Thema drucken

Bereich wechseln

Allgemeines Regeln f�r die Benutzung des Forums HowToDo ( = so geht�s) Jimdo User-Forum Eure Jimdo-Webseiten - Vorstellungsrunde Bugs, Workarounds und Anregungen Jimdo-Elemente Allgemeines Jimdo-Shop Jimdo-Specials (Tools, Widgets, HTML und CSS) Suchmaschinenoptimierung (SEO) Sonstiges Tutorials "OffTopic"-Themen "�bernahme" von Beitr�gen aus dem offiziellen Jimdo-Forum... Nutzungsbedingungen und Haftungsausschluss Jimdo-Blog

#1 | Probleme bei der Umsetzung eines Count-Ups datum

28.03.2018 17:32

Kersten

Informationen anzeigen

Beitr�ge:	53
Registriert seit:	20.02.2018

Hallo zusammen!

Ich habe mir mal wieder einen Code geklaut (bei Codepen.io). Den habe ich minimal geändert und in Codepen läuft auch noch alles. Schön machen, wollte ich es dann erst bei Jimdo. Also einfach mal in ein Widget/HTML-Element eingefügt und... nix passiert. Der denkt und denkt.... aber zeigt nix an. Kann mir jemand sagen wie ich den Code ändern muss, damit das CountUp auch bei Jimdo läuft?

LG
Kersten.

Hier der Link auf meine (leere) Seite.
Und hier zu codepen.

Und nun noch der Code, so wie ich ihn bei mir eingefügt habe.

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
 
<div id="counter"></div>
 
<script type="text/javascript">
 

<title>JavaScript CountUp Timer - Praveen Lobo</title>
<script type="text/javascript">
function CountUp(initDate, id) {
  this.beginDate = new Date(initDate);
  this.countainer = document.getElementById(id);
  this.numOfDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  this.borrowed = 0;
  this.years = 0; 
  this.months = 0; 
  this.days = 0;
  this.hours = 0; 
  this.minutes = 0; 
  this.seconds = 0;
  this.milliseconds = 0;
  this.updateNumOfDays();
  this.updateCounter();
}
 
CountUp.prototype.updateNumOfDays = function() {
  var dateNow = new Date();
  var currYear = dateNow.getFullYear();
  if ((((currYear % 4) === 0) && ((currYear % 100) !== 0)) || ((currYear % 400) === 0)) {
    this.numOfDays[1] = 29;
  }
  var self = this;
  setTimeout(function() {
    self.updateNumOfDays();
  }, (new Date((currYear + 1), 1, 2) - dateNow));
};
 
CountUp.prototype.datePartDiff = function(then, now, MAX) {
  var diff = now - then - this.borrowed;
  this.borrowed = 0;
  if (diff > -1) return diff;
  this.borrowed = 1;
  return (MAX + diff);
};
 
CountUp.prototype.calculate = function() {
  var currDate = new Date();
  var prevDate = this.beginDate;
  this.milliseconds = this.datePartDiff(prevDate.getMilliseconds(), currDate.getMilliseconds(), 1000);
  this.seconds = this.datePartDiff(prevDate.getSeconds(), currDate.getSeconds(), 60);
  this.minutes = this.datePartDiff(prevDate.getMinutes(), currDate.getMinutes(), 60);
  this.hours = this.datePartDiff(prevDate.getHours(), currDate.getHours(), 24);
  this.days = this.datePartDiff(prevDate.getDate(), currDate.getDate(), this.numOfDays[currDate.getMonth()]);
  this.months = this.datePartDiff(prevDate.getMonth(), currDate.getMonth(), 12);
  this.years = this.datePartDiff(prevDate.getFullYear(), currDate.getFullYear(), 0);
};
 
CountUp.prototype.addLeadingZero = function(value) {
  return value < 10 ? ("0" + value) : value;
};
 
CountUp.prototype.addLeadingZeroMillisecond = function(value) {
  if (value < 10) return ("00" + value);
  else if (value < 100) return ("0" + value);
  else return value;
};
 
CountUp.prototype.formatTime = function() {
  this.milliseconds = this.addLeadingZeroMillisecond(this.milliseconds);
  this.seconds = this.addLeadingZero(this.seconds);
  this.minutes = this.addLeadingZero(this.minutes);
  this.hours = this.addLeadingZero(this.hours);
};
 
CountUp.prototype.updateCounter = function() {
  this.calculate();
  this.formatTime();
  this.countainer.innerHTML =
    "<span class='years'>" + this.years + " " + (this.years == 1 ? "Jahr" : "Jahre") + "</span>" +
    "<span class='months'>" + this.months + " " + (this.months == 1 ? "Monat" : "Monate") + "</span>" +
    "<span class='days'>" + this.days + " " + (this.days == 1 ? "Tag" : "Tage") + "</span>" + "<br>" + "und" +
    "<span class='hours'>" + this.hours + " " + (this.hours == 1 ? "Stunde" : "Stunden") + "</span>" +
    "<span class='minutes'>" + this.minutes + " " + (this.minutes == 1 ? "Minute" : "Minuten") + "</span>" +
    "<span class='seconds'>" + this.seconds + " " + (this.seconds == 1 ? "Sekunde" : "Sekunden") + "</span>" +
    "<span class='milliseconds'>" + this.milliseconds + " " + (this.milliseconds == 1 ? "Milli-Sekunde" : "Milli-Sekunden") + "</span>" ;
  var self = this;
  setTimeout(function() {
    self.updateCounter();
  }, 1);
};
 
window.onload = function() {
  new CountUp('April 4, 2015 11:00:00', 'counter');
};
 
</script>
 
 

Antworten

#2 | RE: Probleme bei der Umsetzung eines Count-Ups datum

31.03.2018 12:43 (zuletzt bearbeitet: 31.03.2018 12:59)

Kersten

Informationen anzeigen

Beitr�ge:	53
Registriert seit:	20.02.2018

Huhu!

Ich habe in den letzten Tagen alles mögliche versucht, diesen Count-Up in Jimdo zum Laufen zu bringen. Ich habe auch komplett andere Scripts probiert. Hat alles nix gebracht. Dat Dingen will einfach nich so wie ich wohl will!

Mit Mühe und Not habe ich es geschafft, einen Countdown in Jimdo zum Laufen zu bringen. Auch das war nicht so einfach. Von über 20 probierten Scripts haben satte 2 (!!!) auch in Jimdo funktioniert. Aus den beiden habe ich mir jetzt einen Countdown gebastelt der tut was und aussieht wie ich es gern hätte.

Wie gesagt habe ich auch an dem Count-Up weiter herum gebastelt. Von CSS habe ich ja schon keine Ahnung; aber von JavaScript noch viel weniger, weshalb ich den Part klauen muss. Ich habe keine Chance mir da was Eigenes zu bauen. Daher habe ich Stück für Stück gebastelt, damit er zumindest schon mal optisch zu meinem Countdown passt. Verzeiht bitte, wenn ich da grobe Anfängerfehler eingebaut habe.

Der derzeit aktuelle Count-Up-Code folgt gleich und ist außerdem auf meiner Testseite zu finden.
Der Urspungs-Code steht hier: https://codepen.io/heiswayi/pen/XmMjoN

Ich bin euch wirklich dankbar, wenn ihr mir erklären könnt, welches Problem Jimdo mit meinem (aber auch mit dem Ursprungs-)Code hat und was ich wo ändern muss. Ich verstehe es einfach nicht. Grundsätzlich müssten die Codes eigentlich richtig sein, denn sowohl auf codepen als auch auf dem Tryit-Editor funktionieren beide einwandfrei.

Mein Kopf raucht. Und ich weiß absolut nicht mehr weiter...
LG
Kersten

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald|Wire+One" rel="stylesheet" />
 
<div class="countup">
  <p class="ueberschrift">Es</p>
  <p class="untertext">ist nun</p>
  <div class="linie"></div>
  <div id="counter"></div>
  <div class="linie"></div>
  <p class="untertext">her.</p>
</div>
 
 

CSS

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
 

<style>
.countup {
  background: #27313a;
  border-radius: 5px;
  font-family: "Wire One", sans-serif;
  letter-spacing: 0.25em;
  text-align: center;
  color: #ebebeb;
  -webkit-box-shadow: 3px 10px 25px 0px rgba(33, 33, 33, 0.75);
  -moz-box-shadow: 3px 10px 25px 0px rgba(33, 33, 33, 0.75);
  box-shadow: 3px 10px 25px 0px rgba(33, 33, 33, 0.75);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
 
.ueberschrift {
  font-size: 75px;
}
 
.linie {
  margin: auto;
  width: 70%;
  border-bottom: 1px solid #ebebeb;
}
 
.untertext {
  font-size: 25px;
  padding: 10px 0px 10px;
}
 
#counter {
  padding: 30px 0;
}
 
.counter1 {
  display: inline-block;
  width: 20%;
  font-size: 25px;
}
 
strong1 {
  color: #990066;
  font-size: 60px;
  font-weight: bold;
}
 
.counter2 {
  display: inline-block;
  width: 15%;
  font-size: 16px;
}
 
strong2 {
  color: #990066;
  opacity: 1;
  font-size: 30px;
  font-weight: bold;
}
 
</style>
 
 

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
 

<script>
    window.onload = function() {
  new CountUp("March 4, 2018 11:00:00", "counter");
};
 
function CountUp(initDate, id) {
  this.beginDate = new Date(initDate);
  this.countainer = document.getElementById(id);
  this.numOfDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  this.borrowed = 0;
  this.years = 0;
  this.months = 0;
  this.days = 0;
  this.hours = 0;
  this.minutes = 0;
  this.seconds = 0;
  this.milliseconds = 0;
  this.updateNumOfDays();
  this.updateCounter();
}
 
CountUp.prototype.updateNumOfDays = function() {
  var dateNow = new Date();
  var currYear = dateNow.getFullYear();
  if ((currYear % 4 === 0 && currYear % 100 !== 0) || currYear % 400 === 0) {
    this.numOfDays[1] = 29;
  }
  var self = this;
  setTimeout(function() {
    self.updateNumOfDays();
  }, new Date(currYear + 1, 1, 2) - dateNow);
};
 
CountUp.prototype.datePartDiff = function(then, now, MAX) {
  var diff = now - then - this.borrowed;
  this.borrowed = 0;
  if (diff > -1) return diff;
  this.borrowed = 1;
  return MAX + diff;
};
 
CountUp.prototype.calculate = function() {
  var currDate = new Date();
  var prevDate = this.beginDate;
  this.milliseconds = this.datePartDiff(
    prevDate.getMilliseconds(),
    currDate.getMilliseconds(),
    1000
  );
  this.seconds = this.datePartDiff(
    prevDate.getSeconds(),
    currDate.getSeconds(),
    60
  );
  this.minutes = this.datePartDiff(
    prevDate.getMinutes(),
    currDate.getMinutes(),
    60
  );
  this.hours = this.datePartDiff(prevDate.getHours(), currDate.getHours(), 24);
  this.days = this.datePartDiff(
    prevDate.getDate(),
    currDate.getDate(),
    this.numOfDays[currDate.getMonth()]
  );
  this.months = this.datePartDiff(prevDate.getMonth(), currDate.getMonth(), 12);
  this.years = this.datePartDiff(
    prevDate.getFullYear(),
    currDate.getFullYear(),
    0
  );
};
 
CountUp.prototype.addLeadingZero = function(value) {
  return value < 10 ? "0" + value : value;
};
 
CountUp.prototype.addLeadingZeroMillisecond = function(value) {
  if (value < 10) return "00" + value;
  else if (value < 100) return "0" + value;
  else return value;
};
 
CountUp.prototype.formatTime = function() {
  this.milliseconds = this.addLeadingZeroMillisecond(this.milliseconds);
  this.seconds = this.addLeadingZero(this.seconds);
  this.minutes = this.addLeadingZero(this.minutes);
  this.hours = this.addLeadingZero(this.hours);
};
 
CountUp.prototype.updateCounter = function() {
  this.calculate();
  this.formatTime();
  this.countainer.innerHTML =
 
    "<span class='counter1' 'years'><strong1>" +
    this.years +
    "</strong1><br />" +
    (this.years == 1 ? "Jahr " : "Jahre ") +
    "<br /></span>" +
 
    "<span class='counter1' 'months'><strong1>" +
    this.months +
    "</strong1><br />" +
    (this.months == 1 ? "Monat " : "Monate ") +
    "<br /></span>" +
 
    "<span class= 'counter1' 'days'><strong1>" +
    this.days +
    "</strong1><br />" +
    (this.days == 1 ? "Tag" : "Tage") +
    "<br /></span>" +
 
    "<br /><br /><br /><br />und<br /><br /><br />" +
 
    "<span class= 'counter2' 'hours'><strong2>" +
    this.hours +
    "</strong2><br />" +
    (this.hours == 1 ? "Stunde " : "Stunden ") +
    "<br /></span>" +
 
    "<span class= 'counter2' 'minutes'><strong2>" +
    this.minutes +
    "</strong2><br />" +
    (this.minutes == 1 ? "Minute " : "Minuten ") +
    "<br /></span>" +
 
    "<span class=  'counter2' 'seconds'><strong2>" +
    this.seconds +
    "</strong2><br />" +
    (this.seconds == 1 ? "Sekunde " : "Sekunden ") +
    "<br /></span>" +
 
    "<span class=  'counter2' 'milliseconds'><strong2>" +
    this.milliseconds +
    "</strong2><br />" +
    (this.milliseconds == 1 ? "Millisekunde " : "Millisekunden ") +
    "<br /></span>";
 
  var self = this;
  setTimeout(function() {
    self.updateCounter();
  }, 1);
};
</script>
 
 

Antworten

#3 | RE: Probleme bei der Umsetzung eines Count-Ups datum

31.03.2018 20:07 (zuletzt bearbeitet: 31.03.2018 20:08)

...wozu soll das gut sein? Armageddon?

Achtung: Code im Forum bitte immer mit der Schaltfläche für "Code" einkapseln!!! (=

)

Bitte sendet mir keine privaten Nachrichten über dieses Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

...hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

...NEU!!! - hier könnt Ihr unser Userforum finanziell unterstützen: https://redesign-berlin.xobor.de/donations.html

Antworten

#4 | RE: Probleme bei der Umsetzung eines Count-Ups datum

03.04.2018 09:45 (zuletzt bearbeitet: 03.04.2018 09:46)

Nee, az, für's Armageddon habe ich doch schon den Count-Down!

Ich bastele an einer Homepage für eine Zucht. Und der Wunsch, den es umzusetzen gilt, ist ein Count-Up ab Geburt des Nachwuchses; für's Alter also.

LG
Kersten.

Antworten

#5 | RE: Probleme bei der Umsetzung eines Count-Ups datum

17.04.2018 12:38

Huhu!

Hat keiner eine Idee, wie ich das ganze bei Jimdo zum Laufen bringen kann?

Schade... Ich habe es nämlich selber auch immer noch nicht geschafft...

Sonnige Grüße!
Kersten.

Antworten

Kugelpanos in Jimdo darstellen � � Tab-Navi im Tab-Navi

�hnliche Themen

Antworten

Letzter Beitrag

Probleme mit Mailbox und zweiter Website
Erstellt im Forum Bugs, Workarounds und Anregungen von David 1 27.03.2024 09:49
az_ • Zugriffe: 196
Weiterleitungen - Probleme DKIM und DMARC?
Erstellt im Forum Bugs, Workarounds und Anregungen von jimdonutzer 0 01.02.2024 12:54
jimdonutzer • Zugriffe: 406
Umstellung auf Design Rome führt zu Problemen
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von Lissycat 7 28.11.2023 18:49
Higgie • Zugriffe: 1446
HTML-Probleme
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von PhoenixS 1 28.12.2018 09:50
az_ • Zugriffe: 1008
Neue Anmeldeverfahren..... seit dem Probleme
Erstellt im Forum "OffTopic"-Themen von Gina 1 09.12.2017 18:48
az_ • Zugriffe: 1383
Probleme mit Forums-Einbindung (Xobor)
Erstellt im Forum Bugs, Workarounds und Anregungen von Darvida 1 03.06.2017 03:36
az_ • Zugriffe: 1377
Anzahl Download-Counter
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von Hamburger 0 15.02.2017 11:31
Hamburger • Zugriffe: 871
Probleme bei Hochladen von pdf Datei
Erstellt im Forum Jimdo-Elemente von Cookie 2 12.02.2017 10:57
Cookie • Zugriffe: 1603
Schriftdarstellungs-Probleme
Erstellt im Forum Bugs, Workarounds und Anregungen von BerlinDampft 8 15.01.2016 12:23
BerlinDampft • Zugriffe: 836

Xobor-Forum f�r Jimdo-Creator User

Bitte geben Sie einen Grund f�r die Verwarnung an