News-Laufschrift in der Kopf- & Fußzeile

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! » News-Laufschrift in der Kopf- & Fußzeile

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 | News-Laufschrift in der Kopf- & Fußzeile datum

05.07.2022 12:18 (zuletzt bearbeitet: 01.02.2023 20:32)

Daishi

Informationen anzeigen

Beiträge:	409
Registriert seit:	08.01.2022

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

Ich habe mir ein News Fußzeile gebastelt, wie im Fernsehen.

Alles schön und gut, habe es so weit im Xobor-Forum hinbekommen. Was nur nicht geht, ist die glänzende Animation, da kann man die Größe also die Höhe einstellen. Da ich die CSS - Tags geändert habe macht im Xobor - Forum der CSS - Tag ( " div:after " ) Probleme.

Er zeigt die Animation über das ganze Forum an.

Das sind die Codes, die in Codepen gehen, aber nicht im Xobor-Forum. Damit sie im Xobor-Forum gehen, muss ich die CSS Tags ändern.

Die geänderten CSS Tags fürs Xobor - Forum sind, "footer1" "news1" "text1", diese sind in HTML und in CSS geändert.

Das Hauptproblem meiner Meinung nach macht der CSS - Tag ( " div:after " ). Den habe ich allein geändert in ( " div1:after " ). Wenn ich den CSS - Tag geändert habe geht die glänzende Animation nicht mehr.

Das sind die Codes, die in Codepen gehen, ohne Veränderungen, also originale Feder.

Der HTML Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!--    Fußzeile    -->
<div class="footer">
<!--    News    -->
  <div class="news">
  <!--    News Text in Blau, unten links   -->
  <span><b>News</b></span>
  </div>
  <!--    Text im roten Feld, unten mittig   -->
  <p class="text">
    <!--    Der Text läuft im roten Feld von rechts nach links    -->
    <marquee direction = "left">
      <span>• Der Treffpunkt für Hilfe, Tricks & Tipps</span>
      <span> &nbsp;• Xobor-Spoiler mit Grafik in der Titelleiste</span>
      <span> &nbsp;• Xobor-Spoiler mit vergrößerter Titelleiste</span>
      <span> &nbsp;•  Beispiel Foren-Code mit Grafik!
      Der Erkennungswert der Grafik ist in dieser Version sehr hoch!</span>
    </marquee>
  </p>
</div>
 

Schließen

Der CSS Code

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
 
/* Fußzeile */
.footer{
  
  position: fixed;
  bottom: 0 ;
  margin:0;
  width: 100%;
  background-color: red;
  display: inline-flex;
  overflow: hidden;
  white-space: nowrap;
 
}
/* Text */
.text
{ 
padding-top: 10px;
    vertical-align: middle;
    font-size: 25px;
    color: yellow;
    margin: 0;
  width:100%;
    animation: marquee 10s linear infinite;
  display: inline-block;
  padding-right: 10px;
}
/* News */
.news{
  height:auto;
  background-color:Blue;
  padding: 10px 30px 10px 30px;
  font-size: x-large;
  color: white;
  z-index:1;
   display: block;
}
/* Hier kann man die Größe der leuchtenden Animation  einstellen */
div:after {
	content:'';
  top:0;
	transform:translateX(100%);
	width:100%;
	height:220px;
	position: absolute;
	z-index:1;
	animation: slide 5s infinite;
	 
  /* CSS Gradient - vollständige Browserunterstützung von http://www.colorzilla.com/gradient-editor/ */
  
  /* Firefox&#8203; 3.6 + */
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(128,186,232,0) 99%, rgba(125,185,232,0) 100%); /* FF3.6+ */
  /* Chrome,Safari 4 + */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.8)), color-stop(99%,rgba(128,186,232,0)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
  /* Chrome10+,Safari 5.1 + */
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
  /* Opera 11. 10 + */
	background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
  /* IE 10 + */
	background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* IE10+ */
  /* W3C */
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* W3C */
  /* IE 6-9 */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
}
 
/* Animation */
 
@keyframes slide {
	0% {transform:translateX(-100%);}
	100% {transform:translateX(100%);}
}
 

Schließen

Ich weiß nicht, wo ich hier einen Fehler reingehauen habe. Wenn ich die ("CSS Gradient - vollständige Browserunterstützung von") weglasse, geht die Animation komplett nicht. Habe ich eingefügt wegen der blauen Farbe für Fuß News, unten Links.

Ich hoffe, du verstehst, was ich meine. Ich kann den Fehler nicht finden, den ich gemacht habe, dass es im Xobor - Forum nicht geht. Würde mich freuen um einer Erklärung welchen Fehler ich gemacht habe.

Mit freundlichen Grüßen
Daishi

Daishi

Dankeschön findet das Top!

Antworten

#2 | News-Laufschrift in der Kopf- oder Fußleiste datum

10.07.2022 15:14 (zuletzt bearbeitet: 07.03.2024 06:56)

Wolfgang

Administrator

Informationen anzeigen

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

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

News-Laufschrift in der Kopf- oder Fußleiste

Aktualisiert 14.09.2025

Hallo DaishiDas Skript läuft schon recht gut!
Besten Dank für diese Ideen und Deine mühevolle Arbeit!
Auch hier, ein großes Händeschütteln!

CSS Einträge die das Forum durcheinander bringen:

Die Class .footer gibt es bereits im Business-Template! Kann sich ungünstig auswirken!
Lösung: Class umbenennen (.footer_news)!
Der CSS-Tag "div:after" würde an allen Div-Containern im Forum den Eintrag anhängen, super schlecht!!
Lösung: Den Div-Container mit einer passenden Class versehen (div.footer_news:after)!
Auch bei den unkritischen Classes und ID's muss man aufpassen, dass sich beim neu Erstellen nicht wiederholen, z.B.: .text + news!
Lösung: Class umbenennen (.footer_news, .news_div, .text_news)!

Was ist super:

Die Animation, wie sie bei Windows-Installationen zu finden ist, finde ich gelungen!
Der Farbverlauf der Animation ist für alle gängigen Browser ausgelegt! Sie wegzulassen, würde das Highlight der Laufschrift verschwinden lassen!

Installation für alle Templates & Mobil

Was habe ich geändert?

Die Laufschrift hat ein Start-Befehl und ein Stop-Befehl bekommen und kann somit durch ein Mouseover angehalten werden!!
Die Laufschrift hat eine Verlinkung zur Forum-Startseite mit "Onclick"!
Habe die Classes erweitert und umbenannt!
Die Laufschrift in der Fußzeile hat einen Abstand bekomme, damit der "Datenschutz-Link", der "Xobor-Link" und der Scroll-Button im V6 nicht verdeckt werden!
Die Laufschrift ist am oberen Rand fixiert!

Der geänderte Code für die Laufschrift ganz unten!

Das Skript und der CSS-Eintrag wird als Plugin in "Untere Leiste - header" kopiert!
Kann aber auch zum Testen in die "Fußzeile"
Die Farben und Breite der Laufschrift können beliebig angepasst werden!
Für die einzelnen Template sind noch kleine Korrekturen notwendig, Zeile 79-86
In Zeile 89 kann eine Verlinkung zu einer beliebigen Webseite eingetragen werden!
In Zeile 97-100 befindet sich der Lauftext.

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
 
<style>
.footer_news {
  position: fixed;
  bottom: 0;
  left: 0;
  right:0;
  margin: auto;
  width: 95%;
  background-color: #D00000; /* Hintergrundfarbe - Laufschrift */
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 10px;
  cursor: pointer;
  z-index: 111111;
}
.text_footer_news a, .text_footer_news { 
  font: 20px Arial;
  color: #ffff00; /* Schriftfarbe Laufschrift - Text */
  margin: auto 20px auto 0;
  width: 100%;
  animation: marquee 10s linear infinite;
  display: flex;
  align-items: center;
  text-decoration: none;
}
/* Hover-Farbe */
.text_footer_news:hover { 
  color: #aaaa00; /* Mouseover-Farbe - Laufschrift */
}
/* News */
.footer_news_div{
  background-color: #111188; /* Hintergrundfarbe News-Box */
  padding: 5px 30px;
  font: 20px Arial;
  color: #eeeeee; /* Schriftfarbe News-Box */
  z-index: 111111;
  display: block;
}
/* Hier kann man die Größe der leuchtenden Animation  einstellen */
div.footer_news:after {
  content:'';
  top:0;
  transform: translateX(100%);
  width: 100%;
  height: 220px;
  position: absolute;
  z-index: 111111;
  animation: footer_slid 6s infinite;
	 
  /* CSS Gradient - vollständige Browserunterstützung von http://www.colorzilla.com/gradient-editor/ */
  
  /* Firefox&#8203; 3.6 + */
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(128,186,232,0) 99%, rgba(125,185,232,0) 100%); /* FF3.6+ */
  /* Chrome,Safari 4 + */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.8)), color-stop(99%,rgba(128,186,232,0)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
  /* Chrome10+,Safari 5.1 + */
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
  /* Opera 11. 10 + */
  background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
  /* IE 10 + */
  background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* IE10+ */
  /* W3C */
  background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* W3C */
  /* IE 6-9 */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
}
 
/* Animation */
@keyframes footer_slide {
  0% {transform:translateX(-100%);}
  100% {transform:translateX(100%);}
}
/* Unterer Abstand */ 
body, #scrollUpImg {
  padding-bottom: 60px !important;
}
  
/* V1 */
#forum .footer_news {border-radius: 0;}
  
/* V3 */
/* .footer_news {width: 960px; border-radius: 10px 10px 0 0;} */
 
/* V6 */
.mbt .footer_news {width: 100%; border-radius: 0;}
</style>
 
<div class="footer_news" onclick="parent.location='/forum.php';" >
  <div class="footer_news_div">
  <span><b>News</b></span>
  </div>
  <p class="text_footer_news">
  <!--    Der Text läuft von rechts nach links    -->
  <marquee direction="left" onmouseover="this.stop();" onmouseout="this.start();">
 
    <span> &nbsp;• Der Treffpunkt für Hilfe, Tricks & Tipps</span>
    <span> &nbsp;• Xobor-Spoiler mit Grafik in der Titelleiste</span>
    <span> &nbsp;• Xobor-Spoiler mit vergrößerter Titelleiste</span>
    <span> &nbsp;• Beispiel Foren-Code mit Grafik! Der Erkennungswert der Grafik ist in dieser Version sehr hoch!</span>
 
  </marquee>
  </p>
</div>
 

Schließen

Der geänderte Code für die Laufschrift ganz oben!

Das Skript und der CSS-Eintrag wird als Plugin in "Obere Leiste - header" kopiert!
Dadurch wird die Laufschrift über der oberen Navileiste platziert!
Die Farben und Breite der Laufschrift können beliebig angepasst werden!
Für die einzelnen Template sind noch kleine Korrekturen notwendig, Zeile 89-101
In Zeile 105 kann eine Verlinkung zu einer beliebigen Webseite eingetragen werden!
In Zeile 113-117 befindet sich der Lauftext.

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
 
<style>
body {
  margin-top:30px !important;
}
.header_news {
  position:fixed;
  top:0;
  left:0; 
  right:0;
  margin: auto;
    
  /* Breite - Laufschrift */
  width: 100%;
    
  /* Farbe Hintergrung - Laufschrift */
  background-color: #D00000;
  
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  cursor:pointer;
  z-index: 999999;
}
.text_header_news a, .text_header_news {
  /* Schriftgröße, Schriftart, Schriftfarbe - Laufschrift */
  font: 20px Arial;
  color: #ffff00;
 
  /* Schnelligkeit der Laufschrift */
  animation: marquee 10s linear infinite;
    
  margin: auto 20px auto 0;
  width:100%;
  text-decoration:none;
  display: flex;
  align-items: center;
}
/* Hover-Farbe */
.text_header_news:hover { 
  color: #aaaa00;
}
/* News */
.header_news_div {
  /* Hintergrundfarbe, Schriftgröße, Schriftart, Schriftfarbe - News */
  background-color: #111188;
  font: 20px Arial;
  color: #eeeeee;
    
  padding: 5px 30px;
  z-index:111111;
  display: block;
}
/* Hier kann man die Groesse der leuchtenden Animation  einstellen */
div.header_news:after {
  content:'';
  top:0;
  transform:translateX(100%);
  width:100%;
  height:220px;
  position: absolute;
  z-index:111111;
  animation: slide_header 6s infinite;
	 
  /* CSS Gradient - vollstaendige Browserunterstutzung von http://www.colorzilla.com/gradient-editor/ */
  
  /* Firefox&#8203; 3.6 + */
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(128,186,232,0) 99%, rgba(125,185,232,0) 100%); /* FF3.6+ */
  /* Chrome,Safari 4 + */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.8)), color-stop(99%,rgba(128,186,232,0)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
  /* Chrome10+,Safari 5.1 + */
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
  /* Opera 11. 10 + */
  background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
  /* IE 10 + */
  background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* IE10+ */
  /* W3C */
  background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* W3C */
  /* IE 6-9 */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
}
 
/* Animation */
@keyframes slide_header {
  0% {transform:translateX(-100%);}
  100% {transform:translateX(100%);}
}
 
  
/* V1 */
#forum .header_news {width: 95%;}
body#forum {margin-top:40px !important;}
  
/* V2 */
.ltr .header_news {width: 95%; border-radius: 5px;}
body.ltr {margin-top:40px !important;}
  
/* V3 */
/* .header_news {width: 920px; border-radius: 5px; } */
 
/* V6 */
.mbt nav.navbar#navigation {top: 30px;}
</style>
 

<div class="header_news" onclick="parent.location='/forum.php';" >
  <div class="header_news_div">
  <span><b>News</b></span>
  </div>
  <p class="text_header_news">
 
  <!-- Der Text läuft von rechts nach links -->
  <marquee direction="left" onmouseover="this.stop();" onmouseout="this.start();">
    <span> &nbsp;&#149; Der Treffpunkt für Hilfe, Tricks & Tipps</span>
    <span> &nbsp;&#149; Xobor-Spoiler mit Grafik in der Titelleiste</span>
    <span> &nbsp;&#149; Xobor-Spoiler mit vergrößerter Titelleiste</span>
    <span> &nbsp;&#149; Beispiel Foren-Code mit Grafik!
    Der Erkennungswert der Grafik ist in dieser Version sehr hoch!</span>
  </marquee>
  </p>
</div>
 

Schließen

PS:

Beim Kopieren in die Kopfzeile, wird die obere Navi-Leiste verdeckt.
Hier sollte unbedingt, wie beschrieben, ein Plugin angelegt werden!

In Aktion: Damit man den Effekt sehen kann:

News-Laufschrift in der Fußleiste

Bis dann
Wolfgang

Daishi, Gabriella und Dankeschön finden das Top!

Antworten

Moderations-Kommentar:

Installationsanweisung komplett überarbeitet und angepasst beschrieben!

#3 | Forum, News-Laufschrift in der Kopfzeile mit Ausschalter, zeitlicher Begrenzung und Speicherfunktion datum

07.03.2024 09:09 (zuletzt bearbeitet: 10.03.2024 20:07)

Wolfgang

Administrator

Informationen anzeigen

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

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

Forum, News-Laufschrift in der Kopfzeile mit Ausschalter, zeitlicher Begrenzung und Speicherfunktion

Aktualisiert 14.09.2025

@Daishi @Kipper-Spedition

Laufschriften mit Ausschalter und zeitlicher BegrenzungLaufschriften haben so ihre Vor- und Nachteile.
Sie können, wenn man sich konzentrieren will oder auch auf jeder Seite auftauchen, ziemlich nervig sein und genau das Gegenteil erreichen!!!
Abhilfe schafft hier ein Ausschalter manuell oder auch eine zeitlich einstellbare Begrenzung!

Was kann die Laufschrift?

Animationsverhalten wie bei einer Windows-Installation
Läuft in der Kopfzeile!
Start / Stop per Mouseover
Manueller Ausschalter
Zeitliche Begrenzung einstellbar (hier 20 Sekunden)
Neu! Jetzt mit Speicherfunktion!

Installation für alle Templates & Mobil

Achtung Baustelle!

Der Beitrag wird bald zur VerfÃ¼gung stehen.

Beschreibung

Das JavaScript kann für die Template (v1-4) in die Kopf- oder Fußzeile kopiert werden.
Für das neue Xobor V6 & Mobil nach Eigenes Javascript.

In Zeile 7 kann die Hintergrundfarbe vom Laufschrift-Feld angepasst werden. Ist keine Farbe eingetragen, wird die Forum-Farbe übernommen!
In Zeile 39 kann die Hintergrundfarbe vom News-Feld angepasst werden. Ist keine Farbe eingetragen, wird die Forum-Farbe übernommen!
In Zeile 24 wird die Geschwindigkeit eingestellt der Laufschrift, in Zeile 56 der Animation eingestellt!
In Zeile 83 wird der Ausschalt-Button formatiert!
In Zeile 116 ist die Zieladresse zu finden!
In Zeile 127-133 ist der Ausschalter eingebaut!
In Zeile 132 wird das Session-Cookie durch den X-Klick gesetzt und der Zustand gespeichert.
In Zeile 138-141 wird bei jedem Seiten-Reload oder Aufruf einer neuen Seite das Session-Cookie ausgelesen und damit der Zustand eingestellt!
In Zeile 136 wird die Zeit eingestellt (hier 30 Sekunden) bis die Laufschrift automatisch ausgeblendet wird, kann aber auch deaktiviert werden!

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
 
<!-- Laufschrift -->
<style>
/* Kopfzeile */
.head_news {  
  width: calc(100% - 40px);
  position:relative;
  /* background-color: #150c76; */
  display: inline-flex;
  overflow:hidden;
}
 
.head_news_div  {
  width: 100%;
  display: inline-flex;
}
 
/* Text */
.text_news a, .text_news {  
  padding:10px; 
  margin: auto 0;
  font-size: 20px;
  color: #FFFF00;
  width: 100%;
  animation: marquee 10s linear infinite;
  display: flex;
  align-items: center;
  text-decoration:none;
}
 
/* Hover-Farbe */
.text_news:hover { 
  color: #AAAA00;
  cursor:pointer;
}
 
/* News-Feld */
.news_div {
  height:auto;
  /* background-color: #3a3aac; */
  padding: 10px 15px;
  font-size: x-large;
  color: #EEEEEE;
  z-index:111111;
 
}
 
.news_div.padd {
  padding: 10px 35px 10px 10px;
}
 
/* Größe der leuchtenden Animation  einstellen */
div.head_news:after {
  content:'';
  top:0;
  transform:translateX(100%);
  width:100%;
  height:100px;
  position: absolute;
  z-index:111111;
  animation: slide 6s infinite;
	 
  /* CSS Gradient - vollständige Browserunterstützung von http://www.colorzilla.com/gradient-editor/ */
  
  /* Firefox&#8203; 3.6 + */
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(128,186,232,0) 99%, rgba(125,185,232,0) 100%); /* FF3.6+ */
  /* Chrome,Safari 4 + */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.8)), color-stop(99%,rgba(128,186,232,0)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
  /* Chrome10+,Safari 5.1 + */
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
  /* Opera 11. 10 + */
  background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
  /* IE 10 + */
  background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* IE10+ */
  /* W3C */
  background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* W3C */
  /* IE 6-9 */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
}
 
/* Animation */
@keyframes slide {
  0% {transform:translateX(-100%);}
  100% {transform:translateX(100%);}
}   
 /* Ausschalter */
.ticker_out {
  z-index:999999; display:inline-block; text-decoration:none !important; outline:none !important; background: #aa2222; color: #ffffff !important; line-height: 22px; width: 23px; font-weight: bold; border-radius: 15px; box-shadow: 1px 1px 3px #000; text-align: center; font-size: 14px; position:absolute; top: 13px; cursor:pointer;
}
 .ticker_out:hover {
  background: #cc2222;
  text-decoration:none; 
}
.head_news_div.Out {
  z-index:99999;
  display:none !important;
}
</style>
 
 
<script>
window.addEventListener('load', function(){
  $('.topnavigation_wrap').prepend(`
    <div class="head_news_div">
      <span class="news_div padd">
 
        <!- Ausschalter -->
        <span title="Laufschrift ausblenden!" class="ticker_out">&#10005;</span>
 

      </span>
 
      <div class="head_news">
        <span class="news_div"><b>News</b></span> 
 
        <!-- Zieladresse eintragen -->
        <marquee onclick="parent.location='//www.wortschatz-burgdorf.de/';" class="text_news" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
        &nbsp;•&nbsp;  
        <span>Wortschatz - Das kleine Korrektorat & Lektorat</span>  
        &nbsp;•&nbsp; 
        <span>Benötigen Sie Hilfe auf Ihrer Webseite bei Design & Gestaltung, Textaufbau und Korrektur oder bei anderen wichtigen Themen wie Briefe & Facharbeiten schreiben, Bewerbungen erstellen, eigene Bücher oder Biografien verfassen?</span>
        &nbsp;•&nbsp 
                          
        </marquee>
      </div>
    </div>`);
 
    // Ausschalter
    $('.ticker_out').on('click',function(){
      $('.head_news_div').addClass('Out');
 
      // Sitzungscookie setzen
      sessionStorage.setItem('head_div','true');
    });
 
    // Zeitliche Begrenzung
    $('.head_news_div').delay(30000).hide(100);
 
    // Sitzungscookie auslesen
    if (sessionStorage.getItem('head_div') == 'true'){
      $('.head_news_div').hide();
    };
  
});
</script>
 

Schließen

Spoiler mit einem Klick öffnen und schließen!

Bis dann

Wolfgang

Wolfgang hat folgende Bilder an diesen Beitrag angehängt

Update.jpg

Kipper-Spedition und Dankeschön finden das Top!

Antworten

Moderations-Kommentar:

Fehler behoben: Die Animation hatte den Ausschalter verdeckt!
Jetzt auch mit Speicherfunktion!

#4 | RE: Forum, News-Laufschrift in der Kopfzeile mit Ausschalter und zeitlicher Begrenzung datum

07.03.2024 09:35 (zuletzt bearbeitet: 08.03.2024 06:04)

Kipper-Spedition

Informationen anzeigen

Beiträge:	288
Registriert seit:	09.10.2022

Homepage:	Link
Letzte Spende	Betrag 15 € Forum Spende
Sternzeichen	Stier
Likes	247

Danke Wolfgang!
Ich habe in meinem "Hauptforum" sämtliche RSS-Feeds wieder eingebaut - außer den Ticker. Da gab es bei einigen "Beschwerden", da die Laufschrift irritieren und stören würde. Aber wenn man einen AUS-Schalter hat, sieht die Sache ja anders aus.
In meinem Testforum habe ich den noch laufen, mit folgenden Plugin:

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
 
<style>
.footer_news {float:left;
  position: fixed;
  left: 0;top:0;
  right: 0;
  width: 100%;
  background-color: #6C8BA8;
  display: inline-flex;
  overflow: hidden;
  height:auto;
    z-index:9999999;
}
 
.news_div{
  height:auto; 
  margin: 0 !important;
  padding: 10px 30px;
  font-size: 14px;
  color: #EEEEEE;
  z-index:111111;
  display: block;
}
 
.topnavigation_wrap {top:30px;}
</style>
 

<script>
// Laufschrift Forum Übersicht
window.addEventListener('load', function(){
  $('.topnavigation_wrap').prepend(`
    <div class="footer_news">
    <!--<span class="news_div"><span><b>NEWS</b></span></span>-->
     <iframe style="width:100%; margin-right:20px;" height="30" src="https://rss.app/embed/v1/ticker/_rJ4fm6r8QS9SmSch" frameborder="0"></iframe>
  </div>`)
                                   
});
</script>
 

Schließen

Wie und wo füge ich denn den Schalter ein. Ich habs mit meinem laienhaften Mitteln probiert, aber nicht geschafft.

Arndt

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Dankeschön findet das Top!

Antworten

#5 | RE: Forum, News-Laufschrift in der Kopfzeile mit Ausschalter und zeitlicher Begrenzung datum

08.03.2024 13:51 (zuletzt bearbeitet: 10.03.2024 20:06)

Forum, News-Laufschrift in der Kopfzeile mit Ausschalter und zeitlicher Begrenzung

Hallo ArndtWie ich gesehen habe hast Du ein "iFrame" als Laufschrift eingesetzt, das alles enthält, auch das News-Feld!
Hier waren wieder einige Handgriffe notwendig das News-Feld auszubauen und den X-Button neu zu platzieren. Wollte erst nicht so recht gelingen!
Habe durch das viele Testen noch ein Fehler gefunden und Beitrag#3 aktualisiert!
Die Animation hatte den Schließen-Button überschattet und man konnte in diesem Augenblick nicht schließen!

FrageKannst Du uns verraten, wie Du das "iFrame" erstellt hast?

Bis dann und gutes Gelingen!

Wolfgang

Kipper-Spedition, Daishi und Dankeschön finden das Top!

Antworten

#6 | RE: Forum, News-Laufschrift in der Kopfzeile mit Ausschalter und zeitlicher Begrenzung datum

08.03.2024 19:59

Vielen Dank Wolfgang! Wahnsinn das du dir immer die Zeit für meine bzw. unsere Anfragen hast und auch nimmst.
Vielen Dank auch an @Daishi , der auch seine Ideen einfließen hat.

Kannst Du uns verraten, wie Du das "iFrame" erstellt hast?
Da ich nicht mehr als "Copy ans paste" kann, habe ich mir die (kostenspflichtigen) Dienste von RSS.App zu Eigen gemacht.
Bei dem Anbieter kann man sich Widgets und Feeds zusammenstellen und die dazugehörigen Einbettungscodes erstellen lassen. Das war für mich als Laien problemlos machbar, alles ist anpassbar und konfigurierbar. Es ist schon genial, das die das ganze Netz nach den eingegebenen Schlagwörtern oder URLs absuchen und dann selbstständig veröffentlichen.
In meiner Basic-Version kann ich 15 Feed und 4 Widgets nutzen - kostet mich pro Monat 9,90 $. In der freien Version kann man 2 Feeds und 1 Widgets nutzen.
Hier mal paar Beispiele:
Logistik-News - deutsche Fachpresse
Logistik-News - Logistik (D+EU)
Logistik-News - Schifffahrt (Global)
und den Ticker, den Wolfgang gerade bearbeitet.

@Wolfgang
Es ist mir fast unangenehm zu fragen. Folgendes Problem gibt es noch an den Ticker in meinem Testforum:
- der Ticker geht nach 30 Sekunden aus ( // Zeitliche Begrenzung $('.head_news_div').delay(30000).hide(100); )
der Ticker soll immer laufen - außer ein Benutzer klickt den aus.
- ist es möglich, das wenn der Ticker ausgeschaltet wurde, das der bei einem Seitenwechsel nicht wieder angeht? Sondern erst nach 3 Stunden oder so. Es macht ja keinen Sinn, das einer, der den Ticker nicht will, das der bei jedem Seitenwechsel den wieder ausgeschalten muss.

Einen dritten Wunsch habe ich nicht, denn: Drei Dinge auf einmal? Das geht nun wirklich nicht!

Grüße vom Dankverpflichteten Arndt aus Radeberg

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Wolfgang und Dankeschön finden das Top!

Antworten

#7 | iFrame-Laufschrift in der Kopfzeile mit Ausschalter, zeitlicher Begrenzung und Speicherfunktion! datum

09.03.2024 23:58 (zuletzt bearbeitet: 10.03.2024 20:06)

Wolfgang

Administrator

Informationen anzeigen

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

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

iFrame-Laufschrift in der Kopfzeile mit Ausschalter, zeitlicher Begrenzung und Speicherfunktion!

Aktualisiert 14.09.2025

Hallo Arndt

Den Zustand der Laufschrift zu speichern ist natürlich top.
Wird die Laufschrift ausgeschaltet, bleibt sie auch aus und wird nicht beim Aufruf einer neuen Seite wieder aktiviert!

Aber wie geht das?

Forum-Skripte mit Speicherfunktion!

LösungWenn man im Internet sich hierzu die Skripte anschaut, sind sie oft viel zu groß und für mich auch unverständlich!
Habe durch die Sucherei eine fantastische Lösung mit Session-Cookies gefunden, klein, effektiv und verständlich!
Besteht auch nur aus ein paar Zeilen!

Was kann das Skript?

Klick man auf den X-Button wird die Laufschrift ausgeblendet und bleibt ausgeblendet, auch wenn neue Seite aufgerufen werden!
Durch das Session-Cookie ist es möglich, nach Schließen des Browsers oder des Browser-TAB's das Session-Cookie und somit die Zustandsspeicherung zu löschen!
Wird der Browser oder ein TAB mit der Seite wieder aufgerufen, wird die Laufschrift erneut angezeigt!
Die zeitliche Begrenzung (20 Sekunden Laufzeit) ist nach wie vor vorhanden, kann dementsprechend eingesetzt werden!

Installation für alle Templates & Mobil

Achtung Baustelle!

Der Beitrag wird bald zur VerfÃ¼gung stehen.

Beschreibung

Das JavaScript kann für die Template (v1-4) in die Kopf- oder Fußzeile kopiert werden.
Für das neue Xobor V6 & Mobil nach Eigenes Javascript.

In Zeile 97 wird das Session-Cookie durch den X-Klick gesetzt und der Zustand gespeichert.
In Zeile 103-106 wird bei jedem Seiten-Reload oder Aufruf einer neuen Seite das Session-Cookie ausgelesen und damit der Zustand eingestellt!
In Zeile 101 ist die zeitliche Begrenzung deaktiviert, kann aber durch Entfernen der vorangehenden Schrägstriche aktiviert werden

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
 
<!-- Laufschrift -->
<style>
/* Kopfzeile */
.head_news {
  left:0;
  position:relative;
  margin: auto;
  width: calc(100% - 40px);
  display: inline-flex;
  overflow: hidden;
}
 
.head_news_div {
 width:100%;
}
 
/* News */
.news_div {
  height:auto;
  font-size: x-large;
  color: #EEEEEE;
  z-index:111111;
}
 
/* Hier kann man die Größe der leuchtenden Animation  einstellen */
div.head_news:after {
  content:'';
  top:0;
  transform:translateX(100%);
  width:100%;
  height:100px;
  position: absolute;
  z-index:111111;
  animation: slide 6s infinite;
	 
  /* CSS Gradient - vollständige Browserunterstützung von http://www.colorzilla.com/gradient-editor/ */
  
  /* Firefox&#8203; 3.6 + */
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(128,186,232,0) 99%, rgba(125,185,232,0) 100%); /* FF3.6+ */
  /* Chrome,Safari 4 + */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.8)), color-stop(99%,rgba(128,186,232,0)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
  /* Chrome10+,Safari 5.1 + */
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
  /* Opera 11. 10 + */
  background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
  /* IE 10 + */
  background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* IE10+ */
  /* W3C */
  background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* W3C */
  /* IE 6-9 */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
}
 
/* Animation */
@keyframes slide {
  0% {transform:translateX(-100%);}
  100% {transform:translateX(100%);}
}
  
 /* Ausschalter */
.ticker_out {
  z-index:999999 !important; display:inline-block; text-decoration:none !important; outline:none !important; background: #aa2222; color: #ffffff !important; line-height: 22px; width: 23px; font-weight: bold; border-radius: 15px; box-shadow: 1px 1px 3px #000; text-align: center; font-size: 14px; position:absolute !important; left:7px; margin-top:5px; cursor:pointer;
}
 
 .ticker_out:hover {
  background: #cc2222;
}
 
.head_news_div.Out {
  z-index:99999;
  display:none !important;
}
</style>
 
 
<script>
window.addEventListener('load', function(){
  
  $('.topnavigation_wrap').prepend(`
    <div class="head_news_div">
      <span class="news_div">
        <!- Ausschalter -->
        <span title="Laufschrift ausblenden!" class="ticker_out">&#10005;</span>
      </span>
 
    <div class="head_news">
      <iframe style="width:100%; margin-right:20px;" height="30" src="https://rss.app/embed/v1/ticker/_rJ4fm6r8QS9SmSch" frameborder="0"></iframe>                  
    </div>
                                   
  </div>`);
 
  // Ausschalter
  $('.ticker_out').on('click',function(){
    $('.head_news_div').addClass('Out');
 
    // Sitzungscookie setzen
    sessionStorage.setItem('head_div','true');
  });
 
  // Zeitliche Begrenzung
  //$('.head_news_div').delay(30000).hide(100);
 
  // Sitzungscookie auslesen
  if (sessionStorage.getItem('head_div') == 'true'){
    $('.head_news_div').hide();
  };
  
});
</script>
 

Schließen

InfoSpeicherfunktion in Beitrag #4 nachgetragen!

Bis dann, gutes Gelingen und besten Dank für die Inspiration!

Wolfgang

Kipper-Spedition, Daishi und Dankeschön finden das Top!

Antworten

#8 | RE: News-Laufschrift in der Kopfzeile mit Ausschalter, zeitlicher Begrenzung und Speicherfunktion! datum

10.03.2024 13:02 (zuletzt bearbeitet: 10.03.2024 13:15)

Nochmals Danke an Wolfgang.
Hier der --> Ticker <-- Live und in Farbe zu sehen.

Ich habe noch was vergessen: in Verbindung mit dem abgewandelten Präsentationskalender kann man die RSS-Feeds auch einsetzen ( --> Podcasts rund um die Logistik <-- )

Arndt

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Wolfgang findet das Top!

Antworten

Talk im V4 » « Spoiler Alarm - Countdown Spoiler

Ähnliche Themen

Antworten

Letzter Beitrag

Was mache ich hier falsch? - Präsentation von News & Tipps!
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Daishi

22.06.2024 09:13
von

Daishi • Zugriffe: 1206

RSS-Feed bzw. News auf der Portalseite
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Kipper-Spedition 7 19.07.2023 21:37
creator • Zugriffe: 502

Präsentationskalender - Darstellung interessanter Themen - Teil 1+2
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

09.04.2024 00:35
von

Wolfgang • Zugriffe: 2789

Laufschriften und Ticker
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von charlie1965 0 02.10.2022 13:27
charlie1965 • Zugriffe: 405
Laufschriften mobil ausblenden!
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Devil-su 1 13.02.2017 15:49
Wolfgang • Zugriffe: 2043

Wechselnde, durchlaufende und verlinkte News Ticker
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Magister

05.11.2025 12:01
von

Dankeschön • Zugriffe: 3221

Animierte Browser-Titelleiste mit Laufschrift
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 4 05.05.2020 20:38
Wolfgang • Zugriffe: 3490

Durchgehende Laufschrift (Ticker) mit vielseitigen Funktionen
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

12.01.2024 20:13
von

Wolfgang • Zugriffe: 15040

Minimierter Styleswitcher / Hintergrundwechsler für alle Template (auch V6)
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 21 16.08.2022 18:44
EaglePipe • Zugriffe: 15153

Der Treffpunkt für Hilfe, Tricks & Tipps » XOBOR-Foren und Homepages »

Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! » News-Laufschrift in der Kopf- & Fußzeile

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 €

41%

Das sind die Codes, die in Codepen gehen, ohne Veränderungen, also originale Feder.

News-Laufschrift in der Kopf- oder Fußleiste

Aktualisiert 14.09.2025

Laufschrift in der Kopfzeile ×

Forum, News-Laufschrift in der Kopfzeile mit Ausschalter, zeitlicher Begrenzung und Speicherfunktion

Aktualisiert 14.09.2025

Forum, News-Laufschrift in der Kopfzeile mit Ausschalter und zeitlicher Begrenzung

iFrame-Laufschrift in der Kopfzeile mit Ausschalter, zeitlicher Begrenzung und Speicherfunktion!

Aktualisiert 14.09.2025