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. Die besten Links! Empfehlenswerte und interessante Links! Link - Suche. Verschiedenes Elektronik & Elektrotechnik - Fragen & Antworten 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:	389
Registriert seit:	08.01.2022

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

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

Antworten

#2 | Angepasst fürs Forum, News-Laufschrift in der Kopf- & Fußzeile datum

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

Wolfgang

Administrator

Informationen anzeigen

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

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

Angepasst fürs Forum, News-Laufschrift in der Kopf- & Fußzeile
Aktualisiert 07.03.24

Laufschrift in der Kopfzeile

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!
In Zeile 54-67 ist der Farbverlauf der Animation zu finden und auch 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!

Der geänderte HTML Code

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"
In Zeile 13-16 wird der Lauftext eingefügt!

Laufschrift ganz oben:

Das Skript und der CSS-Eintrag wird als Plugin in "Obere Leiste - Header" kopiert!
Kann aber auch zum Testen in die "Kopfzeile"
In Zeile 13-16 wird der Lauftext eingefügt!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<!--    Laufschrift    -->
<div class="footer_news" onclick="parent.location='/forum.php';" >
<!--    News    -->
  <div class="news_div">
  <!--    News Feld - Hintergrund Blau - Unten links   -->
  <span><b>News</b></span>
  </div>
  <!--    Lauftext - Hintergrund Rot - Unten mittig   -->
  <p class="text_news">
  <!--    Der Text läuft im roten Feld 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 CSS 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"

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
 
<style>
/* Fußzeile */
.footer_news {
  position: fixed;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  background-color: #D00000; /* Hintergrundfarbe Laufschrift */
  display: inline-flex;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  z-index: 111111;
}
/* Text */
.text_news a, .text_news { 
  font-size: 20px;
  color: #FFFF00; /* Schriftfarbe Laufschrift */
  margin: auto 0;
  width: 100%;
  animation: marquee 10s linear infinite;
  display: flex;
  align-items: center;
  text-decoration: none;
}
/* Hover-Farbe */
.text_news:hover { 
  color: #AAAA00; /* Mouseover-Farbe Laufschrift */
}
/* News */
.news_div{
  background-color: #111188; /* Hintergrundfarbe News-Box */
  padding: 10px 30px;
  font-size: 20px;
  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: 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%);}
}
/* Unterer Abstand */ 
body, #scrollUpImg {
margin-bottom: 60px;
}
</style>
 

Schließen

Nachtrag

Der geänderte CSS 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!

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
 
<style>
/* Kopfzeile */
.footer_news {
  position: relative;
 
  left: 0;
  width: 100%;
  background-color: #D00000;  /* Hintergrundfarbe Laufschrift */
  display: inline-flex;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
 
/* Text */
.text_news a, .text_news { 
  font-size: 20px;
  color: #FFFF00;  /* Schriftfarbe Laufschrift */
  margin: auto 0;
  width: 100%;
  animation: marquee 10s linear infinite;
  text-decoration: none;
  display: flex;
  align-items: center;
}
/* Hover-Farbe */
.text_news:hover { 
  color: #AAAA00; /* Mouseover-Farbe Laufschrift */
}
/* News */
.news_div {
  background-color: #111188;  /* Hintergrundfarbe News-Box */
  padding: 10px 30px;
  font-size: 20px;
  color: #EEEEEE; /* Schriftfarbe News-Box */
  z-index: 111111;
  display: block;
}
/* Hier kann man die Groesse der leuchtenden Animation  einstellen */
div.footer_news:after {
  content:'';
  top: 0;
  transform: translateX(100%);
  width: 100%;
  height: 220px;
  position: absolute;
  z-index: 111111;
  animation: slide 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 {
  0% {transform:translateX(-100%);}
  100% {transform:translateX(100%);}
}
</style>
 

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 und Gabriella finden das Top!

Antworten

Moderations-Kommentar:

Installationsanweisung überarbeitet, genauer beschrieben!

#3 | Update: Angepasst fürs Forum, News-Laufschrift in der Kopf- & Fußzeile datum

14.07.2022 00:19 (zuletzt bearbeitet: 07.03.2024 06:58)

Nachtrag: Angepasst fürs Forum, News-Laufschrift in der Kopf- & Fußzeile

Hallo DaishiMir ist noch etwas aufgefallen und habe alles in Beitrag #2 nachgebessert!

Was sich in der CSS geändert hat:

Nur 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!
Korrektur durch Zeile 75-77!
Nur im V6 und nur bei der Fußzeile wird die Laufschrift durch die Boxen verdeckt!
Korrektur durch Zeile 14!
Die Laufschrift in der Kopf- & Fußzeile wurde vertikal nicht genau zentriert.
Korrektur durch Zeile 23+24!
Laufschrift in der Kopf- & Fußzeile nicht gleich zu sehen, ohne Information!
Korrektur durch Zeile 6!

Bis dann
Wolfgang

Daishi findet das Top!

Antworten

#4 | 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:	3594
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

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

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

@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

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!

Nachtrag

Fehler behoben: Skript überarbeitet!

Bis dann

Wolfgang

Kipper-Spedition findet das Top!

Antworten

Moderations-Kommentar:

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

#5 | 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:	241
Registriert seit:	09.10.2022

Homepage:	Link
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Stier
Likes	174

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:

Antworten

#6 | 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)

Wolfgang

Administrator

Informationen anzeigen

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

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

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#4 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?

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.

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
 
<!-- 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');
  })
 
  // Zeitliche Begrenzung
  $('.head_news_div').delay(30000).hide(100);
  
});
</script>
 

Schlie�en

Bis dann und gutes Gelingen!

Wolfgang

Kipper-Spedition und Daishi finden das Top!

Antworten

#7 | 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 findet das Top!

Antworten

#8 | News-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:	3594
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

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

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

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

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 und Daishi finden das Top!

Antworten

#9 | 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

�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: 730

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: 376

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: 2062

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: 333
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: 1943

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

13.05.2022 21:06
von

Wolfgang • Zugriffe: 2796

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: 3334

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: 14507

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: 14247

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 €

65%

Forum - News-Laufschrift in der Kopf- & Fußzeile

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

Angepasst fürs Forum, News-Laufschrift in der Kopf- & FußzeileAktualisiert 07.03.24

Nachtrag

Nachtrag: Angepasst fürs Forum, News-Laufschrift in der Kopf- & Fußzeile

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

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

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

Angepasst fürs Forum, News-Laufschrift in der Kopf- & Fußzeile
Aktualisiert 07.03.24

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