#1 Durchgehende Laufschrift von Wolfgang 29.09.2010 16:26

avatar

Hallo Florian,
ich habe hier eine durchgehende Laufschrift, die aber keine Linkfunktion hat und die beim Überfahren mit der Maus nicht stehenbleibt.
Mit dem Befehl marquee sind Linkfunktionen und das Stehenbleiben zu realisieren.


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<SCRIPT LANGUAGE="JavaScript">
var nachricht=" +++ Dies ist ein kleines Beispiel für eine durchgehende Laufschrift. Der Text kann beliebig lang sein. Insgesammt sollte er aber länger sein, als die eigentliche Box, in der er läuft. "
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)
}
</SCRIPT>


<title>Unbenanntes Dokument</title>
</head>

<body onload="ticker();">

<FORM NAME="frm">
<INPUT TYPE="text" NAME="ticker" style="border:0px; font-size:16px; color:#0000ff; padding:5px; font-weight:bold; height:30px; width:90%;">
</FORM>


</body>
</html>

Gibt es hier eine einfache und schnelle Lösung?



<marquee width="95%" scrollamount="6" onmouseover="scrollAmount=0" onmouseout="scrollAmount=6" scrolldelay="130"><a href="http://104774.homepagemodules.de/t23f24-...n-im-Forum.html">Herzlich Willkommen</a>  <img src="http://img.homepagemodules.de/heart.gif" border=0 width="14" height="14" alt="Herz"> <a href="http://104774.homepagemodules.de/forum.php?show=last">Beiträge der letzten Tage!</a> <img src="http://img.homepagemodules.de/idee.gif" border=0 width="14" height="14" alt="Idee"></marquee>


Danke im Voraus
Wolfgang

#2 RE: Durchgehende Laufschrift von florian-zier 02.10.2010 00:00

avatar

Hallo Wolfgang,
ich habe hier mal eine vorläufige Lösung erstellt.

Das Anhalten und Fortführen der Laufschrift beim Hovern funktioniert denke ich bereits wie gewünscht.

Sie ist deshalb nur vorläufig, weil die Links in der Laufschrift zerstückelt werden.
Sobald ein Link am Anfang der Laufschrift ankommt, wird der Anfang des Link-Tags abgehackt und dadurch wird der Link nicht mehr erkannt.
Ich habe nun einmal zwei Testlinks eingebaut, um zu zeigen, dass HTML zumindest grundsätzlich möglich wäre.
(Da die Links nur Anker sind, wechselt die Seite nicht und man kann nur an der URL erkennen, dass einer geklickt wurde.)

Die Links bzw. überhaupt HTML-Codes müsste ich noch aus dem Text filtern, damit sie am Beginn nicht einfach zerstückelt werden.
Doch darum werde ich mich heute Abend nicht mehr kümmern.


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
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Laufschrift</title>
<script language="JavaScript" type="text/javascript">
var nachricht = ' +++ Dies ist ein kleines Beispiel für eine durchgehende Laufschrift. <a href="#test1">(Testlink 1)</a> Der Text kann beliebig lang sein. Insgesamt sollte er aber länger sein, als die eigentliche Box, in der er läuft. <a href="#test2">(Testlink 2)</a> ';
var text;
var verzoegerung = 150;
var timerId;
var ticker_mouse_over = false;
function ticker() {
if (!ticker_mouse_over) {
text = nachricht;
//document.frm.ticker.value = text;
document.getElementById('ticker').innerHTML = text;
nachricht = nachricht.substring(1, nachricht.length) + nachricht.substring (0, 1);
}
timerId = setTimeout('ticker()', verzoegerung);
}
</script>
</head>
 
<body onload="ticker();">
 
<center>
<div id="ticker" name="ticker" onmouseover="ticker_mouse_over=true;" onmouseout="ticker_mouse_over=false;" style="font-size:16px;color:#0000ff;padding:5px;font-weight:bold;width:90%;height:30px;">
</div>
</center>
 
<!--
<form name="frm" onmouseover="ticker_mouse_over=true;" onmouseout="ticker_mouse_over=false;">
<input type="text" name="ticker" style="border:0px; font-size:16px; color:#0000ff; padding:5px; font-weight:bold; height:30px; width:90%; border:1px solid red;">
</form>
-->
 
</body>
</html>
 

#3 RE: Durchgehende Laufschrift von Wolfgang 04.10.2010 00:33

avatar

Forum: 104774 Standard-Template

Hallo Florian,
schön, dass Du so schnell eine Lösung gefunden hast!
Ein Teil funktioniert schon Mal. Klasse!

Danke
Wolfgang

#4 RE: Durchgehende Laufschrift von florian-zier 09.10.2010 16:31

avatar

Hallo Wolfgang,
diesmal hat es etwas länger gedauert, ich hoffe, du hattest genug Snickers.
Das Erkennungsmuster bereitete einige Probleme, ich habe es immer wieder abgeändert.
Schließlich fehlte bei meiner letzten Erkennungsroutine nur noch eine Kleinigkeit, und kurz zuvor wollte ich schon schreiben dass es wohl nichts mehr wird.
Aber so ist es meistens, wenn man denkt es geht nicht mehr...

Der Ticker sollte HTML-Tags nun unterstützen.
Ich habe ihn nicht allzu ausführlich mit allen möglichen HTML-Codes getestet, aber Link-Tags sollten auf jeden Fall funktionieren.
Es werden keine BBCodes o.ä. verwendet, alles geht direkt über normales HTML.
Dabei wäre es besser, "/" im Lauftext zu escapen, also als "\/" zu schreiben. (funktioniert aber sogar auch so)

Falls der HTML-Code kein Start- und End-Tag besitzt, sollte die XHTML-Syntax verwendet werden, da diese ein einfaches Tag mit "... />" beendet und somit auch erkannt werden kann. (Ansonsten wird ein nicht vorhandenes End-Tag gesucht.)
Unerkannte HTML-Codes werden sonst eben kurzzeitig im Ticker Zeichen für Zeichen angezeigt und nicht umgesetzt.

Es wären sogar Unterstreichungen oder BR-Tags (XHTML-Syntax!) möglich.
Im Lauftext findest du einen Beispiel-Link und auch eine Grafik.
Weitergehende HTML-Codes sind wie gesagt nicht durchgetestet, sollten aber durch die allgemeinen Muster erkannt werden.

Außerdem sollte beachtet werden, dass aufeinanderfolgende Links nicht ohne ein weiteres Zeichen (z.B. Leerzeichen) dazwischen aufeinander folgen sollten.
Das verhindert die korrekte Erkennung.


Ansonsten können noch einige Optionen am Skript-Anfang angepasst werden.
So können folgende Dinge angepasst werden:
- Der Lauftext selbst.
- Die Geschwindigkeit des Lauftextes. (genauer: das Intervall zwischen den ausführungen des Skripts)
- Eine maximal angezeigte Zeichen-Anzahl. (evtl. Darstellungsprobleme)
- Die ID des Containers, der die Laufschrift enthält.

Aber das alles ist nochmals im Skript selbst beschrieben.
Die maximale Zeichenanzahl ist inzwischen eigentlich überflüssig, da sich der Text nicht mehr wie in einer Vorversion einen Umbruch oder Scrollbalken bei zu kleinem Container erzeugt.
Für einfache Texte ohne HTML kann dies aber gerne optional benutzt werden, wenn es darauf ankommt, immer eine bestimmte Anzahl an Zeichen anzuzeigen.


Den kompletten Code habe ich im Anhang in einer fertigen HTML-Datei hochgeladen.
Der Style des DIV-Tags ist im Grunde anpassbar.
Die CSS-Angaben "white-space:nowrap" und "overflow:hidden" sind nötig, damit der text nicht über den Container hinausläuft und auch keine Scrollbalken erzeugt.
"height:1em" solltest du auch belassen, wenn die Laufschrift einzeilig bleibt, denn so hat der Container immer die Höhe des Textes, selbst wenn du die Schriftgröße änderst.
"2em" sind dementsprechen doppelt so groß wie die Texthöhe. (Falls BR-Tags verwendet oder Umbrüche bei Überlänge erzeugt werden, durch das Entfernen der obig beschriebenen CSS-Angaben.)

Schriftgröße, -Art und Farbe, sowie die Container-Breite, Rahmen und dessen Farbe und was es sonst noch so gibt, sollten ohne weiteres natürlich anpassbar sein.
Entferne einfach die Center-Tags, damit der Text linksbündig erscheint.


Viel Spaß beim Ausprobieren der Laufschrift!

#5 RE: Durchgehende Laufschrift von Wolfgang 13.10.2010 23:52

avatar

Hallo Florian ,
danke für das tolle Script. Alleine hätte ich das nie so hinbekommen.
Ich habe natürlich gleich die Laufschrift aus meinem Forum eingesetzt und war sehr gespannt.
Du hast schon vieles angedeutet, was geht und was nicht geht. Ich habe auch vieles ausprobiert und beinahe aufgegeben und gedacht, dass es auch ohne Links ganz gut aussieht!
Wenn man jedoch einiges beachtet, funktioniert Dein tolles Script bei einfachen "HTML" ohne "XHTML-Syntax" und ohne zu "escapen".


Folgendes habe ich zur durchgehenden Laufschrift herausgefunden:

+ Geschützte Leerzeichen wie &nbsp; und &#160; dürfen auf keinen Fall verwendet werden!
+ Normale Leerzeichen (Leertaste) sind erlaubt!
+ Bilderadressen müssen mit <img http//: ...> </img abgeschlossen werden, wobei das Leerzeichen vor </img> unbedingt zu setzen ist!
+ Abstände zwischen den Link- oder Bildadressen können nur mit Zeichen wie z.B. +++, ..., oder --- bewerkstelligt werden!
+ Der Eintrag "height:1em;" im Div-Container ist jetzt nicht mehr nötig


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Durchgehende Laufschrift</title>

<script language="JavaScript" type="text/javascript">

// Geschützte Leerzeichen wie &nbsp; und &#160; dürfen auf keinen Fall verwendet werden!
// Normale Leerzeichen (Leertaste) sind erlaubt!
// Bilderadressen müssen mit <img http//: ...> </img abgeschlossen werden, wobei das Leerzeichen vor </img> unbedingt zu setzen ist!
// Abstände zwischen den Link- oder Bildadressen können nur mit Zeichen wie z.B. +++, ..., oder --- bewerkstelligt werden!

//--------------------------------------------------------------------------------------------

// Der im Ticker angezeigte Text:


var ticker_text = '<a href="http://104774.homepagemodules.de/t23f24-Herzlich-willkommen-im-Forum.html">Herzlich Willkommen</a> <img src="http://img.homepagemodules.de/heart.gif" border=0 width="14" height="14" alt="Herz"> </img> + + + + + <a href="http://104774.homepagemodules.de/forum.php?show=last">Beiträge der letzten Tage!</a> <img src="http://img.homepagemodules.de/idee.gif" border=0 width="14" height="14" alt="Idee"> </img> + + + + + <a href="http://104774.homepagemodules.de/t94f25-Wichtig-und-notwendig-Mehr-Sicherheit-im-Internet-und-im-Forum-Blacklist.html">Forum Blacklist!</a> <img src="http://img.homepagemodules.de/death.gif" border=0 width="16" height="16" alt="Achtung"> </img> + + + + + <a href="http://104774.homepagemodules.de/t256f31-No-Spam-Email-Adressen-fuer-Robots-ausblenden.html">No Spam!</a> <img src="http://img.homepagemodules.de/death.gif" border=0 width="16" height="16" alt="Achtung"> </img> + + + + + <a href="http://104774.homepagemodules.de/t400f31-Google-Spionage-ausschalten.html">Google-Spionage ausschalten!</a> <img src="http://img.homepagemodules.de/death.gif" border=0 width="16" height="16" alt="Achtung"> </img> + + + + + <a href="http://104774.homepagemodules.de/f22-Spiel-Spass-Witz-gute-Laune.html">Heute schon gelacht?</a> <img src="http://img.homepagemodules.de/laugh.gif" border=0 width="14" height="14" alt="Freude"> </img> + + + + + <a href="http://104774.homepagemodules.de/t22f26-Was-ist-notwendig-um-Ihr-Forum-vorzustellen.html">Präsentieren Sie Ihre Webseite!</a> <img src="http://img.homepagemodules.de/idee.gif" border=0 width="14" height="14" alt="Idee"> </img> + + + + + ';

// Zeit bis zur nächsten wiederholten Ausführung in Millisekunden:
var ticker_delay = 150;
// Maximale Anzahl der angezeigten Zeichen ("-1" für keine Begrenzung):
var max_chars = -1;
// 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) {
if (max_chars != -1 && max_chars > 0) {
document.getElementById(container_id).innerHTML = ticker_text.substring(0, max_chars);
}
else {
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();">

<center>

<div id="ticker" onMouseOver="ticker_mouse_over=true;" onMouseOut="ticker_mouse_over=false;" style="font-size:16px;color:#0000ff;padding:5px;font-weight:bold;width:90%; white-space:nowrap;overflow:hidden; /*text-align:left;border:2px solid red;*/"> </div>

</center>
</body>
</html>



Bis dann
Wolfgang

#6 RE: Durchgehende Laufschrift von Wolfgang 17.10.2010 18:36

avatar

Hallo Florian,
ich habe noch etwas festgestellt!

+ Wird der Div-Container in die Kopfzeile (Admin > Layout > Kopf & Fußzeile) eingebaut, läßt sich die Breite der durchgehenden Laufschrift über "width:90%" sehr gut einstellen.
+ Wird er direkt in die Forumübersicht in eine Tabelle zwischen <tr><td> ......</td><tr> eingebaut, wird die Tabelle (Forum) auf die Länge der gesamten Laufschrift ausgedehnt.
+ Kompromiss: Abhilfe schafft hier eine Angabe der Breite in "px" und nicht in "%", z.B.: "width: 800px". Der Nachteil ist, dass sich die Forumbreite nicht mehr automatisch an die Bildschirmauflösung anpasst.

Hast Du hier eine andere Idee, gibt es hier eine Lösung?


Bis dann          

  im Voraus


Wolfgang

#7 RE: Durchgehende Laufschrift von florian-zier 18.10.2010 20:17

avatar

Hallo Wolfgang,
erstmal Danke für dein Feedback!

Ich habe es jetzt nicht direkt getestet, aber es könnte gehn, wenn du das DIV in ein anderes mit fester Breite packst, welches wiederum dann in die Tabellenzelle kommt.
Die Prozentangabe bezieht sich wohl auf die letzte in einem übergeordneten Knoten.

Vielleicht hilft dir auch bei der Tabellenzelle das Attribut "overflow:hidden;".
An welcher Stelle sich das Ende genau befindet ist ja eigentlich egal, die Laufschrift wird eben etwas kürzer als sie es durch den eigenen Container wäre.


Ansonsten probier ich nochmal etwas herum.
Mir wäre dann nur noch nicht zu 100% klar, wo du die Breite von deinem Kompromiss setzts.
Ist es die vom Laufschrift-Container oder vom gesamten Forum?

#8 RE: Durchgehende Laufschrift von Wolfgang 18.10.2010 23:02

avatar


Hallo Florian,
ich habe es noch nicht hinbekommen!

Außerhalb der Tabelle kann man die Breite mit "%" einstellen, innerhalb nur mit "px".
Wird die Breite in "px" angegeben, kann das Forum sich nicht an eine veränderbare Bildschirmauflösung anpassen!

Eine Breite mit 700px würde eine Bildschirmauflösung von 800px mal 600px zulassen, ohne dass sich die Forumbreite ausdehnt.


Bis dann
Wolfgang

#9 RE: Durchgehende Laufschrift von florian-zier 20.10.2010 11:03

avatar

Hallo Wolfgang,
ich denke ich habe noch eine Lösung für dein Problem gefunden.
Allerdings wissen wir es erst genau, wenn du sie erfolgreich an ihrem Einsatzort eingebaut hast.

Damit die Tabelle sicht nicht automatisch vergrößert, muss das Attribut table-layout (fixed) verwendet werden.
Die relative Breite des Tickers innerhalb der Zelle kann weiterhin im Ticker-DIV angepasst werden.

Ich schlage vor, dass du den Quellcode unten komplett in deine Tabellenzelle packst.
Also nicht die vorhandene Tabelle verändern, sondern die Tabelle im Quellcode so komplett in die vorhandene Zelle übernehmen. (Tabelle in Tabelle )
Dabei sollte die Tabelle wenn möglich die Breite von 100% behalten, da sie sich so direkt an die vorhandene Zelle anschmiegen sollte.

1
2
3
4
5
6
7
8
 
<table align="center" style="width:100%;margin:0px;padding:0px;table-layout:fixed;">
<tr>
<td align="center">
<div id="ticker" onmouseover="ticker_mouse_over=true;" onmouseout="ticker_mouse_over=false;" style="width:90%;height:1em; font-size:16px;color:#0000ff;padding:5px;font-weight:bold;white-space:nowrap;overflow:hidden; white-space:pre;">
</div>
</td>
</tr>
</table>
 



Ich hoffe, das war des Rätsels Lösung.
Viel Glück beim Ausprobieren!

P.S.:
Beim Herzchen in deinem Lauftext hinter "Herzlich Willkommen" solltest du die "+"-Zeichen hinter das IMG-Tag verschieben und stattdessen eine Leerstelle zwischen das öffnende/schließende Tag setzen.
Im Anhang findest du nochmal meine (nur leicht veränderte) HTML-Datei vom letzten Mal mit der obigen Tabelle.



Edit:
Zu deinem Problem mit den Leerzeichen:
Eigentlich hat sich das erledigt, wenn du im Style des DIVs "white-space:pre;" gesetzt lässt.
Somit wird ja jedem per Leertaste eingegebenen Leerzeichen auch der Platz zur Verfügung gestellt.
Wenn alle Zeichen zusätzlich noch die gleiche Breite besitzen sollen, musst du eine Schriftart wie "Courier" oder "Monospace" für das DIV vergeben.
Ansonsten könnte man Codes wie "&.nbsp;" und "&.#160;" (ohne Punkte) zwar ersetzen, aber dann dürfen nicht mehrere Elemente davon direkt ohne weiteres Zeichen (z.B. " ") aufeinanderfolgen, sonst gibt es wieder Erkennungsprobleme.

Falls du kein "White-Space", aber dennoch feste Leerzeichen verwenden möchtest, setze dafür "\u00A0" in den Text ein.
Dies steht für ein festes Leerzeichen in Javascript.
(http://forum.jswelt.de/javascript/37798-...-schreiben.html, http://de.wikipedia.org/wiki/Leerzeichen...ere_Kodierungen)

#10 RE: Durchgehende Laufschrift von Wolfgang 20.10.2010 18:32

avatar

Klasse!
Es funktioniert! Kaum zu glauben! Hast Du gut hinbekommen!

Der Zauberbefehl ist wirklich "table-layout:fixed" und funktioniert auch bei alten Browsern.
Es ist manchmal ganz schön zeitaufwendig, dass richtige Zusammenspiel herauszufinden.

Ich habe mich so entschieden, das ich "white-space:pre", "height:1em" weglasse und für die Leerzeichen "\u00A0" einsetze.
Wenn man auf "height:1em" verzichtet, funktioniert die Smilie-Darstellung im neuen Netscape 9.0.0.6 tadellos.
Damit meine anderen Scripte laufen, habe ich noch "onload" aus dem Script herausnehmen müssen und ihn in den Body-Tag am Ende eingefügt. Irgendwie haben die Scripte sich beeinflußt.


Nochmals Danke, super Arbeit

#11 RE: Durchgehende Laufschrift von florian-zier 20.10.2010 19:57

avatar

Freut mich, dass es jetzt funktioniert hat.

Genauso wie "\u00A0" kannst du dann natürlich auch andere Zeichen verwenden, sie müssen eben nur zu Javascript passen.
Einfachere Elemente sind da z.B. "\t" für einen Tabstopp oder "\n" für einen Zeilenumbruch.
Viele andere Zeichen kannst du dann ebenfalls über die Hexadezimale Darstellung angeben, wie das "\u00A0".
Dazu sollte man die Werte aus einer Tabelle ablesen können.


Die alternative onload-Variante nehme ich gerne, da sie, wie ich finde, die Übersicht steigert, alleine schon bei der Reihenfolge.
In diesem Falle habe ich es auch abgeändert, weil ich somit die Funktion zu Testzwecken schnell auskommentieren konnte, anstatt das ganze onload-Attribut zu entfernen und später wieder zu ergänzen.

Aber beide Varianten zusammen funktionieren nicht nebeneinander.
Der Browser kann sich wohl nicht entscheiden.
Die Anwendung ist letztendlich wohl einfach Geschmackssache.


Zum Schluss nur noch zwei Kleinigkeiten.
- Du solltest das eigentliche Skript aus dem Body noch in den Head-Bereich verschieben.
- Benutze die CData-Tags so wie in meinen Anhängen, um das eigentliche Skript einzuschließen (aber noch innerhalb der Skript-Tags).
So vermeidest du Fehlermeldungen bei der Validierung.
Mit CData-Tags wird der Skript-Bereich nicht auf HTML-Validität überprüft, ansonsten gibt es Fehler wie z.B.:
"line 97 column 53 - Fehler: end tag for element "IMG" which is not open"

Wobei dies nur Vorschläge sind, die Validität zu erhöhen und Fehler zu vermeiden, funktionieren tut es ja trotzdem bereits.
Also dann, frohes Schaffen noch!

Xobor Forum Software von Xobor
Einfach ein eigenes Forum erstellen
Datenschutz