Durchgehende Laufschrift (Ticker) mit vielseitigen Funktionen

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 � Durchgehende Laufschrift (Ticker) mit vielseitigen Funktionen

Themen-Einstellungen

Thema drucken

Bereich wechseln

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

#1 | Durchgehende Laufschrift (Ticker) mit vielseitigen Funktionen datum

20.10.2010 22:22 (zuletzt bearbeitet: 09.01.2024 00:08)

Wolfgang

Administrator

Informationen anzeigen

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

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

Durchgehende Laufschrift mit vielseitigen Funktionen - Teil 1
Aktualisiert 08.01.24

Dieser Beitrag ist nur durch die Hilfe von Florian entstanden.

Die durchgehende Laufschrift bietet folgende Funktionen:

Durchgehende Laufschrift ohne Unterbrechung.
Die Laufschrift bleibt beim Überfahren mit der Maus stehen.
In der Laufschrift können Links verwendet werden.
Die Laufschrift läßt sich vielseitig formatieren.
Einsatz von title für weitere Link-Beschreibungen.
Einsatz von Bildern und Smilies mit den üblichen Attributen.

Folgendes ist zu beachten:

Abstände zwischen den Link- oder Bildadressen nur mit JavaScript-Leerzeichen \u00A0 durchführen!
Bilderadressen müssen mit Leerzeichen und </img> abgeschlossen werden!
Wird die Laufschrift in eine Tabelle eingebaut, muss <table> mit style="table-layout:fixed;" (Zeile 75) erweitert werden!
Das Script kommt ohne onload im body aus!
Das JavaScript kommt in den Header!

Formatierungen:

Unter var ticker_delay = 150 (Zeile 22) wird die Schnelligkeit der Laufschrift eingestellt!
Im Div-Container kann mit Hilfe von style (Zeile 79) die Laufschrift beliebig formatiert werden!

Das komplette HTML-Script:

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
 
<!DOCTYPE HTML>
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Durchgehende Laufschrift</title>
 
<script>
 
// Geschützte Leerzeichen wie &nbsp; und &160; dürfen auf keinen Fall verwendet werden!
// Abstände zwischen den Link- oder Bildadressen nur mit JavaScript-Leerzeichen durchführen \u00A0
// Normale Leerzeichen (Leertaste) sind erlaubt!
// Bilderadressen müssen mit <img https//: ...> </img> abgeschlossen werden, wobei das Leerzeichen vor </img> notwendig ist!
 
//--------------------------------------------------------------------------------------------
 
// Der im Ticker angezeigte Text: 
 
var ticker_text = '<a title="Herzlich Willkommen im Forum!" href="https://www.hilfe-tricks-tipps.de/t23f24-Herzlich-willkommen-im-Forum.html">Herzlich Willkommen</a> <img src="https://img.homepagemodules.de/heart.gif" border="0" width="14" height="14"> </img>\u00A0 \u00A0 \u00A0 \u00A0 <a title="Die Beiträge der letzten Tage!" href="https://www.hilfe-tricks-tipps.de/forum.php?show=last">Beiträge der letzten Tage!</a> <img src="https://img.homepagemodules.de/idee.gif" border="0" width="14" height="14"> </img> \u00A0 \u00A0 \u00A0 \u00A0 <a title="Wichtig und notwendig - Mehr Sicherheit im Internet!" href="https://www.hilfe-tricks-tipps.de/t94f25-Wichtig-und-notwendig-Mehr-Sicherheit-im-Internet-und-im-Forum-Blacklist.html">Forum Blacklist!</a> <img src="https://img.homepagemodules.de/death.gif" border="0" width="16" height="16"> </img> \u00A0 \u00A0 \u00A0 \u00A0 <a title="Email-Adressen für Robots ausblenden!" href="https://www.hilfe-tricks-tipps.de/t256f31-No-Spam-Email-Adressen-fuer-Robots-ausblenden.html">No Spam!</a> <img src="https://img.homepagemodules.de/death.gif" border="0" width="16" height="16"> </img> \u00A0 \u00A0 \u00A0 \u00A0 <a title="Google-Spionage ausschalten!" href="https://www.hilfe-tricks-tipps.de/t400f31-Google-Spionage-ausschalten.html">Google-Spionage ausschalten!</a> <img src="https://img.homepagemodules.de/death.gif" border="0" width="16" height="16"> </img> \u00A0 \u00A0 \u00A0 \u00A0 <a title="Spiel - Spaß - Witz und gute Laune!" href="https://www.hilfe-tricks-tipps.de/f22-Spiel-Spass-Witz-gute-Laune.html">Heute schon gelacht?</a> <img src="https://img.homepagemodules.de/laugh.gif" border="0" width="14" height="14"> </img> \u00A0 \u00A0 \u00A0 \u00A0 <a title="Stellen Sie Ihr Forum oder Ihre Homepage vor!" href="https://www.hilfe-tricks-tipps.de/t22f26-Was-ist-notwendig-um-Ihr-Forum-vorzustellen.html">Präsentieren Sie Ihre Webseite!</a> <img src="https://img.homepagemodules.de/idee.gif" border="0" width="14" height="14"> </img> \u00A0 \u00A0 \u00A0 \u00A0';
 
// Zeit bis zur nächsten wiederholten Ausführung in Millisekunden:
var ticker_delay = 150;
// ID des Containers, der die Laufschrift enthält:
var container_id = 'ticker';
//--------------------------------------------------------------------------------------------
var timerId;
var ticker_rounds = 0;
var ticker_letters = '';
var ticker_mouse_over = false;
function ticker() {
if (!ticker_mouse_over) {
document.getElementById(container_id).innerHTML = ticker_text;
 
var html_1_tag = new RegExp('^(<([^<]+)\s?[^<>]*\s?/>)', 'gim');
var result_tag = html_1_tag.exec(ticker_text);
if (result_tag) {
ticker_text = ticker_text.replace( result_tag[0], '' )
ticker_text += result_tag[0];
}
var html_2_tags = new RegExp('^(<([^<]+)\s?[^<]*>)([^>]*)(</\\2[^<]*>)', 'gim');
var result = html_2_tags.exec(ticker_text); //var result = ticker_text.match('^(<([^<]+)\s?[^<]*>)([^>]*)(</\\2[^<]*>)');
if (result) {
// 0: Gesamtergebnis, 1: Anfangs-Tag (mit Attributen), 3: Taginhalt, 4: End-Tag; 2: Tagname
var begin_shortened = result[1] + result[3].substring(1, result[3].length) + result[4];
if (result[3] != '') {
ticker_letters += result[3].substring(0, 1);
if (ticker_rounds == 0) {
ticker_text = ticker_text.replace( result[0], begin_shortened )
ticker_text += result[1] + ticker_letters + result[4];
}
else {
ticker_text = ticker_text.replace( result[0], begin_shortened )
ticker_text = ticker_text.replace( result[1] + ticker_letters.substring(0,ticker_letters.length-1)+result[4], result[1]+ticker_letters+result[4] );
}
}
else {
ticker_text = ticker_text.replace( result[0], '' );
}
ticker_rounds += 1;
}
else {
ticker_rounds = 0;
ticker_letters = '';
ticker_text = ticker_text.substring(1, ticker_text.length) + ticker_text.substring(0, 1);
}
}
timerId = setTimeout('ticker()', ticker_delay);
}
</script>
 
</head>
 
<body onLoad="ticker();">
 
<table cellpadding="0" cellspacing="0" border="0" style="table-layout:fixed;width:95%;">
<tr>
<td align="center">
 
<div id="ticker" onMouseOver="ticker_mouse_over=true;" onMouseOut="ticker_mouse_over=false;" style="white-space:nowrap;overflow:hidden; font-size:16px;color:#0000ff;padding:5px;font-weight:bold;text-align:left;border:2px solid #888888;"> 
</div>
 
</td>
</tr>
</table>
 
</body>
</html>
 

Schlie�en

Die Laufschrift in Aktion:

Ticker1

Weitere ähnliche Links:

Automatische Diashow mit wechselnder Laufrichtung
Einlaufender Text ohne JavaScript

Bis dann

Wolfgang

Antworten

#2 | Durchgehende Laufschrift (Ticker) - Einfache Ausführung datum

25.10.2010 00:14 (zuletzt bearbeitet: 09.01.2024 00:14)

Wolfgang

Administrator

Informationen anzeigen

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

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

Durchgehende Laufschrift - Einfache Ausführung - Teil 2
Aktualisiert 09.01.24

Die durchgehende Laufschrift bietet folgende Funktionen:

Durchgehende Laufschrift ohne Unterbrechung.
Keine Links, keine Bilder, kein Mouseover-Stop.
Kleines Script.
Die Laufschrift läßt sich vielseitig "formatieren".

Folgendes ist zu beachten:

Das Script kommt ohne onload im body aus!
Das Script kann an beliebiger Stelle eingefügt werden!

Formatierungen:

Unter var verzoegerung = 150 (Zeile 4) wird die Schnelligkeit der Laufschrift eingestellt!
Mit Hilfe von style (Zeile 16) kann die Laufschrift beliebig formatiert werden!

Das komplette HTML-Script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<script>
var nachricht=" +++ Dies ist ein kleines Beispiel für eine durchgehende Laufschrift. Der Text kann beliebig lang sein. Insgesammt sollte er aber laenger sein, als die eigentliche Box, in der er läuft. Weiteres folgt! " 
var text 
var verzoegerung=150
var timerId 
function ticker() { 
text=nachricht 
document.frm.ticker.value=text 
nachricht=nachricht.substring (1, nachricht.length) + nachricht.substring (0, 1) 
timerId=setTimeout("ticker()", verzoegerung) 
} 
window.onload=ticker;
</script>
 
<form name="frm"> 
<input type="text" name="ticker" style="width:95%;border:0px;font-size:12px;color:#0000ff;padding:5px;font-weight:bold;height:30px;">
</form>
 

Schlie�en

Die Laufschrift in Aktion:

Ticker2

Weitere ähnliche Links:

Automatische Diashow mit wechselnder Laufrichtung
Einlaufender Text ohne JavaScript

Bis dann und gutes Gelingen

Wolfgang

Antworten

#3 | Laufschrift für alle Richtungen mit Marquee datum

25.10.2010 18:12 (zuletzt bearbeitet: 09.01.2024 00:25)

Wolfgang

Administrator

Informationen anzeigen

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

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

Laufschrift für alle Richtungen mit Marquee - Teil 1
Aktualisiert 09.01.24

Mit dieser Laufschrift kann ein Text mitten im übrigen Text automatisch horizontal laufen, so wie in dem von Windows bekannten Bildschirmschoner Marquee. Diese Angaben gehören nicht zum HTML-Standard und wurden ursprünglich nur vom Internet Explorer interpretiert. Mittlerweile setzen auch alle andere Browser das marquee-Element um.
Für eine einwandfreie Funktion in Google-Chrome und Opera ist es notwendig "width" bei direction="right+left" und "height" bei direction="up+down" einzusetzen!

Die durchgehende Laufschrift bietet folgende Funktionen:

Die Laufschrift läuft in allen Richtungen (auch hin und zurück).
Die Laufschrift bleibt beim Überfahren mit der Maus stehen.
In der Laufschrift können Links verwendet werden.
Die Laufschrift lässt sich vielseitig formatieren!
Einsatz von title für weitere Link-Beschreibungen!
Einsatz von Bildern und Smilies mit den üblichen Attributen!
Die Laufschrift hat allerdings keinen durchgehenden Text!

Folgendes ist zu beachten:

Größere Abstände zwischen den Link- oder Bildadressen lassen sich mit   oder über die CSS durchführen .
Laufrichtung von links nach rechts mit direction="right".
Laufrichtung von rechts nach links mit direction="left".
Laufrichtung von unten nach oben mit direction="up".
Laufrichtung von oben nach unten mit direction="down".
Laufrichtung von rechts nach links und zurück mit behavior="alternate".
Laufrichtung von rechts, am Ende stehenbleibend mit behavior="slide".
Anzahl der Durchläufe (z.B: loop=2) mit "loop".
Geschwindigkeit (z.B: scrollamount=4 + scrolldelay=30 ) mit "scrollamount + scrolldelay".
Start - Stop mit onmouseover="this.stop();" onmouseout="this.start();" (alt: onmouseover="scrollAmount=0" onmouseout="scrollAmount=6" ).

Formatierungen:

In der CSS (Zeile 2-18) kann die Laufschrift beliebig formatiert werden!

Das Script:

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
 
<style type="text/css">
marquee {
width: 30%;
font-size:18px;
font:Arial, Helvetica, sans-serif;
color:#0000aa;
white-space:nowrap;
padding:3px 10px 3px 10px;
}
marquee a{
color:#007000;
padding:2px 4px 2px 4px;
}
marquee img{
border:0; 
width:14px;
padding-right:10px;
}
</style>
 
<marquee direction="left" behavior="alternate" scrollamount="6" onmouseover="this.stop();" onmouseout="this.start();" scrolldelay="130">
<a title="Hallo" href="https://www.hilfe-tricks-tipps.de/t23f24-Herzlich-willkommen-im-Forum.html">Herzlich Willkommen</a>
<img src="https://img.homepagemodules.de/heart.gif">
 
<a title="Beiträge" href="https://www.hilfe-tricks-tipps.de/forum.php?show=last">Beiträge der letzten Tage!</a>
<img src="https://img.homepagemodules.de/idee.gif">
</marquee>
 

Schlie�en

Die Laufschrift in Aktion:

Ticker3

Weitere ähnliche Links:

Automatische Diashow mit wechselnder Laufrichtung
Einlaufender Text ohne JavaScript

PS:

Laufschriften mit "marquee" laufen nach neuen Updates (Februar 2015) von "Google Chrome" und "Opera" nur eingeschränkt (jetzt mit Lösung)!
Siehe Beitrag #7!

Bis dann

Wolfgang

findet das Top!

Antworten

#4 | Laufschrift nur für Mitglieder datum

28.12.2012 22:31 (zuletzt bearbeitet: 09.01.2024 00:29)

Wolfgang

Administrator

Informationen anzeigen

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

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

Laufschrift nur für Mitglieder mit Marquee - Teil 2
Aktualisiert 09.01.24

Soll die Laufschrift nur für Mitglieder zu sehen sein, werden hier die Variablen {{user_registered==true.start}} und {{user_registered==true.end}} benötigt.
Sie umschließen die Laufschrift und müssen im Template eingetragen werden.
In der Kopf & Fußzeile unter Layout funktionieren diese Variablen leider nicht.

Der Eintrag kann an einem beliebigen Platz im <body> eingefügt werden!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<style>
marquee {
width: 95%;
font-size:18px;
white-space:nowrap;
padding:3px 10px 3px 10px;
}
</style>
 
{{user_registered==true.start}}
 
<br>
<br>
<marquee scrollamount="6" onmouseover="this.stop();" onmouseout="this.start();" scrolldelay="130">
<a title="Hallo" href="https://www.hilfe-tricks-tipps.de/t23f24-Herzlich-willkommen-im-Forum.html">Herzlich Willkommen</a>
<img src="https://img.homepagemodules.de/heart.gif" border=0 width="14" height="14">
</marquee>
<br>
<br>
{{user_registered==true.end}}
 

Schlie�en

Weitere ähnliche Links:

Automatische Diashow mit wechselnder Laufrichtung
Einlaufender Text ohne JavaScript

PS:

Laufschriften mit "marquee" laufen nach neuen Updates (Februar 2015) von "Google Chrome" und "Opera" nur eingeschränkt (jetzt mit Lösung)!
Siehe Beitrag #7!

Bis dann

Wolfgang

Antworten

#5 | Durchgehende Text-Laufschrift mit Bedienelementen datum

01.01.2015 20:48 (zuletzt bearbeitet: 09.01.2024 00:44)

Wolfgang

Administrator

Informationen anzeigen

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

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

Durchgehende Laufschrift mit Bedienelementen
Aktualisiert 09.01.24

Laufschriften sind interessant und immer wieder gefragt.
Nur muss man aufpassen, dass sie gut platziert sind und nicht stören! [nerd2]

@Jürgen hat hier eine interessante durchgehende Laufschrift gefunden, die verschiedensten Bedienelemente aufweist.
Sie funktioniert allerdings nur für Texte. Grafiken bleiben einfach stehen!
Über eine CSS kann die Laufschrift beliebig formatiert werden!

1
2
3
 
<style>
#scrolling_text{font-size:14px; color:#FFCC33;font-weight:bold;font-style:oblique;}
</style>
 

Schlie�en

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
 
<!DOCTYPE HTML>
<html>
<head>
<title>Durchgehende Text-Laufschrift mit Bedienelementen</title>
 
<style>
#scrolling_text{font-size:14px; color:#FFCC33;font-weight:bold;font-style:oblique;}
</style>
 
</head>
<body>
 
<script>    
var SCROLLING_TEXT_ID = "scrolling_text";
var SLOWER_ID = "scrolling_text_slower";
var FASTER_ID = "scrolling_text_faster";
var CHANGE_DIRECTION_ID = "scrolling_text_change_direction";
var STOP_ID = "scrolling_text_stop";
var START_ID = "scrolling_text_start";
 
var scroller;
 
(function()
{
  if (window.addEventListener)
  {
    window.addEventListener("load", setup, false);
  }
  else
  {
    window.attachEvent("onload", setup);
  }
 
  function setup()
  {	  
    //The controls should all be input elements (type="button") so that they can be disabled
    scroller = new Scroller(SCROLLING_TEXT_ID, SLOWER_ID, FASTER_ID, CHANGE_DIRECTION_ID, STOP_ID, START_ID);
  }
})();
 
//Scroller class
function Scroller(id, sid, fid, cdid, stopid, startid)
{
  this.sid = sid;	//Remember to disable/enable the input element later on
  this.fid = fid;	//Remember to disable/enable the input element later on
  this.stopid = stopid;	//Remember to disable/enable the input element later on
  this.startid = startid;	//Remember to disable/enable the input element later on
  
  this.scrolling_text = document.getElementById(id);
  
  var obj = this;
  document.getElementById(sid).onclick = function(){obj.slower();};
  document.getElementById(fid).onclick = function(){obj.faster();};
  document.getElementById(cdid).onclick = function(){obj.change_direction();};
  document.getElementById(stopid).onclick = function(){obj.stop_scroll();};
  
  //Relies on disabling this button when the scroller is running to stop repeated timeouts from starting
  document.getElementById(startid).onclick = function(){obj.scroll();};
       
  this.timer = null;
  this.speed = 250;	//1000 = 1 second
  this.right_to_left = true;
  this.stopped = true;	//Stopped initially
       
  this.update_controls();
}
 
Scroller.prototype.scroll = function()
{ 	  
  var text = this.scrolling_text.firstChild.nodeValue;    
  this.stopped = false;        
  
  if (text.length > 0)
  {
    //Remove the first character and add it to the end
    if (this.right_to_left)
    {	      
      text = text.substring(1, text.length) + text.substring(0, 1);
    }
    else
    {
      text = text.substring(text.length - 1, text.length) + text.substring(0, text.length - 1);
    }
    this.scrolling_text.firstChild.nodeValue = text;
    
    var obj = this;
    this.timer = setTimeout(function(){obj.scroll();}, this.speed);
  }
  
  this.update_controls();
}
 
Scroller.prototype.stop_scroll = function()
{		  
  this.stopped = true;	  
  
  if (this.timer)
  {
    clearTimeout(this.timer);      
  }
  
  this.update_controls();
}
 
Scroller.prototype.slower = function()
{
  if (this.speed < 451)
  {
    this.speed += 50;            
  }
  
  this.update_controls();
}
 
Scroller.prototype.faster = function()
{
  if (this.speed > 49)
  {
    this.speed -= 50;
  }
  
  this.update_controls();
}
 
Scroller.prototype.change_direction = function()
{
  this.right_to_left = !this.right_to_left;
}
 
Scroller.prototype.update_controls = function()
{
  //Update the speed buttons
  document.getElementById(this.sid).removeAttribute("disabled");
  document.getElementById(this.fid).removeAttribute("disabled");
  
  if (this.speed < 50)	//Disable faster button
  {      
    document.getElementById(this.fid).setAttribute("disabled", "disabled");
  }
  else if (this.speed > 450)	//Disable slower button
  {      
    document.getElementById(this.sid).setAttribute("disabled", "disabled");      
  }
      
  //Update the start and stop buttons
  if (this.stopped)	//Disable the stop button and enable the start button
  {
    document.getElementById(this.stopid).setAttribute("disabled", "disabled");
    document.getElementById(this.startid).removeAttribute("disabled");
  }
  else	//Disable the start button and enable the stop button
  {
    document.getElementById(this.stopid).removeAttribute("disabled");
    document.getElementById(this.startid).setAttribute("disabled", "disabled");
  }
}
 
</script>
 
<center>  
  
<h1 style="color:#000055"><u>Lauftext mit Start- und Stopfunktion</u></h1>
 
<p id="scrolling_text">Durchgehende Laufschrift mit den verschiedensten Bedienelementen!!! </p>
<form method="get" action="#">
  <p>
    <input type="button" value="Langsamer" id="scrolling_text_slower" />
    <input type="button" value="Schneller" id="scrolling_text_faster" />
    <input type="button" value="Richtungswechsel" id="scrolling_text_change_direction" />
    <input type="button" value="Stop" id="scrolling_text_stop" />
    <input type="button" value="Start" id="scrolling_text_start" />
  </p>
</form>
  
</center>
 
</body>
</html>
 

 

Schlie�en

Die Laufschrift in Aktion: Durchgehende Text-Laufschift mit Bedienelementen

Automatische Diashow mit wechselnder Laufrichtung
Einlaufender Text ohne JavaScript

Bis dann und besten Dank an Jürgen

Wolfgang

Antworten

#6 | RE: Durchgehende Text-Laufschrift mit Bedienelementen datum

08.01.2024 11:07 (zuletzt bearbeitet: 08.01.2024 15:40)

Hallo

1. Frage: Ich brauche den Hintergrund Transparent.
2. Frage: Wie kann ich den Text nur einmal bei Seitenstart aufrufen, oder nach Zeit stoppen lassen.

Danke Ingo

Wolfgang findet das Top!

Antworten

#7 | Laufschrift zeitlich begrenzen datum

12.01.2024 20:13 (zuletzt bearbeitet: 16.01.2024 12:26)

Wolfgang

Administrator

Informationen anzeigen

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

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

Laufschrift zeitlich begrenzen

Hallo IngoDas ist natürlich auch ein super Idee!
Oft ist es gar nicht notwendig den Ticker oder die Laufschrift ständig anzuzeigen, manchmal nervt sie dann auch!
Welche Laufschrift wolltest Du aus den Beiträgen nehmen oder hast Du eine eigene?

Laufschrift nach einer vorgegebenen Zeit ausblenden!Habe zum Testen die Laufschrift aus Beitrag #3 genommen.

In Zeile 2-27 steckt die Laufschrift!
In Zeile 31 wird als erstes die Class oder ID eingetragen, die die Laufschrift ausblendet, hier ".marquee"
Weiterhin können in Zeile 31 die Zeiten eingestellt werden!
Die erste Delay-Zeit ist die Startverzögerung (500ms). Hier kann die Seite sich in Ruhe aufbauen, bis die Laufschrift startet!
Die FadeIn-Zeit ist für ein sanftes Einblenden (1000ms) bestimmt!
Die zweite Delay-Zeit bestimmt die Anzeigedauer (20 Sekunden)!
Die folgende FadeOut-Zeit (5000ms) lässt die Laufschrift sanft ausblenden!

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
 
<!-- Laufschrift -->
<style>
  marquee {
  background: rgba(255,255,255, 0.8);
  display: flex;
  width: 30%;
  font: 18px Arial,  sans-serif;
  color:#0000aa;
  white-space:nowrap;
  padding:10px;
}
marquee a {
  color:#000000;
  text-decoration:none;
}
marquee img{
  width:14px;
  padding-right:10px;
}
</style>
 
<marquee class="marquee" style="display:none; margin:auto;" direction="left" scrollamount="6" onmouseover="this.stop();" onmouseout="this.start();" scrolldelay="130">
 
<a title="Hallo" href="https://www.hilfe-tricks-tipps.de/t23f24-Herzlich-willkommen-im-Forum.html">Herzlich Willkommen</a> <img src="https://img.homepagemodules.de/heart.gif">
<a title="Beiträge" href="https://www.hilfe-tricks-tipps.de/forum.php?show=last">Beiträge der letzten Tage!</a> <img src="https://img.homepagemodules.de/idee.gif">
 
</marquee>
 
<!--  Zeitsteuerung -->
<script>
  $('.marquee').delay(500).fadeIn(1000).delay(20000).fadeOut(5000);
</script>
 

Bis dann
Wolfgang

Gabriella, Kipper-Spedition und Daishi finden das Top!

Antworten

Dynamische 3-D Navigationsleisten / Menüleisten � � Weltzeituhr - Verschiedene Zeiten anzeigen

�hnliche Themen

Antworten

Letzter Beitrag

Scroll-Funktion / Höhenproblem im Forum
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Kipper-Spedition

18.11.2023 00:46
von

Wolfgang • Zugriffe: 344

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: 266
VAR-Funktion, Variablen und Zahlen in der CSS + CSS/SCSS - Teil 1+2
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 1 22.09.2024 15:30
Wolfgang • Zugriffe: 439

Mobile Geräte: Funktionen ausblenden oder abschalten!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

04.11.2018 08:20
von

Wolfgang • Zugriffe: 1458

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

RE: Einlaufender Text - Effekte fürs Forum oder die Homepage
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

20.01.2021 21:45
von

Wolfgang • Zugriffe: 1694

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

Zeit - Zeitpunkt - Zeitraum - Zeitsteuerung - zeitlich - zeitgesteuert - vorgegebene Zeit!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

19.07.2013 13:44
von

Lady of the light • Zugriffe: 3155

Diashow mit wechselnder Laufrichtung
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 1 27.04.2011 12:14
Wolfgang • Zugriffe: 2971

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 €

17%