MARQUEE / LAUFTEXT bereits mit vollem Textfeld starten

BeRo schrieb am 25.04.2014 um 21:51 Uhr

Die Marquee Funktion ist eine MS (Microsoft) proprietäre Funktion, die ursprünglich ausschließlich für den IE (Internet Explorer) konzipiert wurde, Die Funktion wird daher nicht von allen Browsern fehlerfrei unterstützt.

Von den "normalen" Steueroptionen abgesehen, ist mir keine Möglichkeit bekannt, den von Dir gewünschten Effekt zu erzeugen.

Andererseits ist das WWW voll von Alternativen, die z. B. auf JavaScript- oder PHP basieren und die nahezu unbegrenzte Manipulationen zulassen.

Da es für den von Dir gewünschten Effekt nicht ausreicht, eine fest verdrahtete Funktion aufzurufen, ist der Aufwand naturgemäß größer.

Schau Dir mal den u. a. JavaScript Code an, er ist schon so verändert, dass er genau das tut, was Dir vorschwebt.

---------------------------
<script language="JavaScript1.2">

/*
Cross browser Marquee script- © Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and Terms Of Use, visit http://www.dynamicdrive.com
Credit MUST stay intact
*/

//Specify the marquee's width (in pixels)
var marqueewidth="300px"
//Specify the marquee's height
var marqueeheight="25px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=2
//configure background color:
var marqueebgcolor="#DEFDD9"
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=1

//Specify the marquee's content (don't delete <nobr> tag)
//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):

var marqueecontent='<nobr><font face="Arial">Thank you for visiting <a href="http://www.dynamicdrive.com">Dynamic Drive.</a> If you find this script useful, please consider linking to us by <a href="../link.htm">click here.</a> Enjoy your stay!</font></nobr>'

////NO NEED TO EDIT BELOW THIS LINE////////////
marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NS
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>')
var actualwidth=''
var cross_marquee, ns_marquee

function populate(){
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.left=parseInt(marqueewidth)-280+"px"
cross_marquee.innerHTML=marqueecontent
actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.left=parseInt(marqueewidth)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualwidth=ns_marquee.document.width
}
lefttime=setInterval("scrollmarquee()",20)
}
window.onload=populate

function scrollmarquee(){
if (iedom){
if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
else
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"

}
else if (document.layers){
if (ns_marquee.left>(actualwidth*(-1)+8))
ns_marquee.left-=copyspeed
else
ns_marquee.left=parseInt(marqueewidth)+8
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee" bgColor='+marqueebgcolor+'>')
write('<layer name="ns_marquee2" left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>
----------------------------------

Im Script ist die Länge des Feldes, in dem der Lauftext angezeigt wird, mit 300px definiert (im Code grün markiert). Dazu passt dann der Startpunkt des Lauftextes, den ich auf -280px festgesetzt habe (im Code gelb markiert), damit der Anzeigebereich schon zu Beginn vollständig mit dem Text gefüllt wird.

Die anderen Parameter, wie Hintergrundfarbe, Schriftart, etc. sind im Code kommentiert.

Wenn Du den Code testen willst, genügt es, wenn Du einen Platzhalter (Rechteck) von min. 300 x 25px anlegst und im HTML Body den o.a. Code einfügst.

Viel Erfolg

onesignature schrieb am 26.04.2014 um 01:26 Uhr

Hallo BeRo,

wer weiß es? BeRo! ;) Danke!

dank 'deines' Codes beginnt die Laufschrift jetzt ganz links und somit ist der Bildschrim bereits mit Selbiger ausgefüllt. Es läuft - im wahrsten Sinne - danke!

Ausserdem läuft es mit Java deutlich liquider als so ein Marquee.

Ohne deinen Markierungen /Beschreibungen wäre ich im Script - Sand steckengeblieben.

*Respekt*

ABER:

Ich habe festgestellt, dass der Lauftext leider mit einer gesamten Bildschirmbreite 'leerloopt' - das heißt, sobald die Textzeile zu Ende ist, läuft sie erstmal bis zum linken Rand (und 'verschwindet darüber hinaus') und erst wenn sie gänzlich verschwunden ist, erscheint sie rechts wieder neu.

Das ganze sollte sich aber ohne Leerraum widerholen. Natürlich könnte ich die Textzeile einfach oft kopieren und einfügen - aber auch dann wäre die Zeile irgendwann zu Ende und es wäre nur ein Umgehen des Problems und keine Lösung.

Daher muss ich dich nochmal um Hilfe bitten und fragen, ob du eventuell weißt, wie man das löst?

BeRo schrieb am 26.04.2014 um 18:59 Uhr

[...] Das ganze sollte sich aber ohne Leerraum widerholen. [...]

Eine echte LOOP Funktion ist in dem Script leider nicht vorgesehen. Ein entsprechender Umbau käme schon einer Neuprogrammierung nahe.

Aber Du kannst versuchen, die einstellbaren Parameter zu "verbiegen", die das Ende des durchlaufenden Textes- und die Position des Anfangs des neuen Textes festlegen.

Such mal im JavaScript die Funktion "scrollmarquee()" und ändere die im Screenshot farbig markierten Werte:

Der oben gelb markierte Wert ist zuständig für die Ausblendung des Textes. Benutzt Du den oben gezeigten Wert, wird der Text 100px vor dem Ende ausgeblendet.

Der oben grün markierte Wert ist zuständig für die Einblendung des neuen Textes, nach der Ausblendung. Im o. a. Beispiel wird der neue Text 150px vom rechten Rand des Feldes eingeblendet.

Wenn Du die Werte für Deinen Lauftext anpasst, kannst Du eine Kompromisslösung schaffen, die dafür sorgt, dass der Text z. B. schon ausgeblendet wird, wenn er 70% der Bildschirmbreite durchlaufen hat. Gleichzeitig füllt denn der neue Text schon ca. 30% des Anzeigefelds aus...

Wenn Du damit "leben" kannst, hast Du eine einfache Lösung für Dein Problem

Alternativ findest Du hier einen deutlich aufwändigeren Lösungsvorschlag, der mit JQuery und CSS eine 100% Lösung verspricht.

Den Alternativvorschlag habe ich zwar nicht getestet, auf der Website des Anbieters sieht es aber perfekt aus...

Ich wünsche Dir gerne viel Erfolg

onesignature schrieb am 26.04.2014 um 19:45 Uhr

Ok, verstehe...

aufjedenfall danke für deine Antwort - dein Vorschlag in allen Ehren, aber damit 'kann ich nicht leben' ;)

Den erwähnten, 100 % Lösungsvorschlag bekomme ich niemals selbst hin, es wäre nur Zeitverschwendung.

Daher lasse ich es wie es ist - ich bin froh, dass mein Hauptproblem gelöst werden konnte (dass der Text bereits 'voll präsent' zu laufen beginnt.)

Thx again und ein schönes WE

BeRo schrieb am 27.04.2014 um 00:45 Uhr

[...] Den erwähnten, 100 % Lösungsvorschlag bekomme ich niemals selbst hin [...]

Ich glaube, dass Du Dich irrst...
Einen Versuch ist es allemal wert.

Lege Dir zunächst mal einen Platzhalter von 955 x 30px auf Deine Website.

In den HTML Head des Platzhalters kopierst Du dann den u. a. JavaScript Code:

------------------------
<script type="text/javascript" src="index_htm_files/jquery-1.9.1.js"></script>
<script type="text/javascript" src="index_htm_files/ticker.js"></script>
-----------------------

in den HTML Body des Platzhalters gehört der u. a. CSS Code:

----------------------
<style type="text/css">
.tickercontainer {
width: 955px;
height: 27px;
margin: 0;
padding: 0;
overflow: hidden;
}
.tickercontainer .mask {
position: relative;
top: 0px;
height: 18px;
overflow: hidden;
}
ul.newsticker {
-webkit-transition: all 0s linear;
-moz-transition: all 0s linear;
-o-transition: all 0s linear;
transition: all 0s linear;
position: relative;
font: bold 12px Verdana;
color: #990000;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.newsticker li {
float: left;
margin: 0;
padding: 0 10px;
box-sizing:border-box;
}
</style>
<script type="text/javascript">
jQuery(function(){
jQuery("#webticker").webTicker();
});
</script></p>

<div class="tickercontainer"><div class="mask"><ul class="newsticker" id="webticker">
    <li>Magix online Website (<a href="http://www.magix-online.com">klick</a>)</li>
   <li>My Second News here...</li>
   <li>My Third News here...</li>
   <li>My Fourth News here...</li>
   <li>My Fifth News here...</li>
   <li>My Sixth News here...</li>
   <li>My Seventh News here...</li>
</ul><span class="tickeroverlay-left"> </span><span class="tickeroverlay-right"> </span></div></div>
----------------------

Die oben orange markierten Einträge repräsentieren die Länge- und die Höhe des Feldes für den Lauftext.

Die oben gelb markierten Einträge kannst Du beliebig ändern, sie betreffen die Schriftart, die Schriftgröße und die Schriftfarbe.

Der grün markierte Eintrag betrifft den Abstand der einzelnen News Einträge voneinander.

Die blau markierten Einträge sind die einzelnen News Texte in Listenform. Du kannst beliebig viele davon anlegen oder (bis auf einen) löschen. Wie oben zu sehen, kannst Du auch Links zu den News hinzufügen...

Damit das Ganze auch funktioniert, brauchst Du noch die JQuery Bibliothek "jquery-1.9.1.js" und die JavaScript Datei "ticker.js", die beide in das Verzeichnis "index_htm_files" gehören, das der WD beim Export Deines Projekts anlegt. Beide Dateien (inkl. einer Demo Projektdatei für den WD) kannst Du hier herunterladen.

Der "Einbau" der beiden Dateien in das Verzeichnis "index_htm_files" läuft automatisch ab, wenn Du Dir ein Hilfsverzeichnis anlegst, das den Namen Deines Projekts haben muss, erweitert um "_web_files". Hat Deine Projektdatei z. B. den Namen "ticker.web", muss das Hilfsverzeichnis "ticker_web_files" heißen.

Das Hilfsverzeichnis muss zwingend im selben Verzeichnis angelegt werden, in dem auch die Projektdatei gespeichert ist.

Lege die beiden o. a. *.js" Dateien in das Hilfsverzeichnis und exportiere Dein Ticker Projekt noch einmal. Jetzt kannst Du die exportierte "index.htm" Datei mit einem Doppelklick öffnen und den funktionierenden Ticker gebührend bewundern

Viel Erfolg beim Nachbau

onesignature schrieb am 27.04.2014 um 15:33 Uhr

Erstmal danke für diese ausführliche Anleitung!

Da ich die entsprechende Website aber nicht mit MAGIX Web Designer baue, sondern online mit WIX.com, lässt sich aufgrund der Tatsache, dass ich / man dort leider keine .js - Files hochladen kann, deine Anleitung nicht realisieren - so schade es ist.

Es gibt im Online - Generator von WIX.com zwar auch eine HTML - Platzhalter - Funktion (mit der ich dank deiner Hilfe das JS - Marquee realisieren konnte) aber meine 'Programmierkenntnisse' reichen nicht aus, um die zur Perfektionierung dieser Angelegenheit benötigten .js - Dateien von einem externen Server zu implementieren.

Ich gebe mich daher mit dem aktuell Erreichtem zufrieden aber sollte ich mal wieder was mit MAGIX Web Designer machen, so werde ich gerne darauf zurückgreifen.

Virtuelle Grüße

BeRo schrieb am 27.04.2014 um 18:25 Uhr

[...] sollte ich mal wieder was mit MAGIX Web Designer machen, so werde ich gerne darauf zurückgreifen. [...]

Du musst nicht so lange warten...

Wenn Du den HTML Code für den Head Bereich änderst, wie unten gezeigt, funktioniert das auch mit "wix.com", da die JS Dateien auf einem anderen Server abgelegt wurden.

----------------------
<script type="text/javascript" src="http://be-ro.magix.net/ticker/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://be-ro.magix.net/ticker/ticker.js"></script>
---------------------

Die oben gelb markierten Einträge solltest Du aber nur zum Test benutzen, weil ich die Dateien irgendwann wieder vom Server lösche.
Du kannst Dir aber jederzeit bei einem beliebigen Provider (auch kostenlosen) Webspace zulegen, auf dem Du die beiden Dateien ablegst. Wenn Du den o. a. Link dann entsprechend änderst, funktioniert alles wie gewünscht.
Da Du offenbar auch ein Konto bei Magix hast, spricht nichts dagegen, dieses Konto um den kostenlosen Webspace zu erweitern und den dann für den o.a. Zweck zu benutzen

Um die beiden Dateien dort ablegen zu können, benutzt Du am besten einen der frei erhältlichen FTP Clients, z. B. FileZilla.

Sollten noch Fragen offen sein, melde Dich einfach wieder.

Ansonsten gerne viel Erfolg

onesignature schrieb am 27.04.2014 um 20:52 Uhr

Vielen Dank - ich habe deine Schritte befolgt - und bin kurz vorm Ziel!*

Du hast mir dahingehend sehr geholfen und ich werde mir, deinem Vorschlag entsprechend, einen Webspace bei MAGIX holen und die 2 .js - Dateien uploaden (mittels vorhandenem MAGIX Web Designer).

*Kurz vor dem Ziel deshalb, weil ich noch 3 Punkte lösen muss, die ich hier mal aufschreibe:

Punkt 1

Ich würde die Laufschrift eigentlich gerne so haben, dass sie sich immer automatisch an die entsprechende Screenbreite anpasst - dass heißt, dass sie bis zum maximalen ZoomOut des Bildschirms zwar 'kleiner' wird (weil sie ja auch weggezoomt) aber trotzdem immer den gesamten Screen ausfüllt - aktuell ist es ja leider so, dass sie bei ZoomOut im wahrsten Sinne 'an ihre Grenzen stößt' und sie 'ihr wahres Gesicht zeigt' haha - man also sieht, dass sie nur eine bestimmte Breite - z. Bsp.: width: 955px; - hat, und nicht 'aus der Unendlichkeit' kommt, in welche sie ja scheinbar wieder verschwindet.

Und bei ZoomIn verursacht sie durch ihre 'feste Größe' das Aufscheinen der horizontalen Scrollleiste des Screens - ebenfalls störend.

Punkt 2

Ich habe in meine Laufschrift ein paar Links eingefügt, die, ohne dass ich das will...

A) ...bereits unterstrichen sind.

> Sie sollen sich erst bei MouseOver unterstreichen (und bei MouseOut wieder ohne Unterstreichung sein).

Wobei ich sie eventuell unterstrichen belassen will, damit man sie als Link wahrnimmt (was ja auch der Sinn ist, ich weiß) aber dass weiß ich nocht nicht.

B) ...von vorne herein bereits färbig sind.

> Sie sollen sich aber erst bei MouseOver in eine best. Farbe verfärben und bei MouseOut wieder entfärben.

C) ...verfärbt bleiben, nachdem man sie angeklickt hat (visited).

> Sie sollen aber ihre Ursprungsfarbe behalten.

PUNKT 3

Dies ist das grundlegendste Problem: Sobald ich auf einen Link in der Laufschrift klicke, 'öffnet' sich das Ziel in diesem Frame (schmal und lang) und verdeckt somit natürlich die Laufschrift.

> Das Linkziel soll sich aber in einem neuen Tab öffnen.

OK - das sind so die Hürden, die mir noch im Weg stehen.

Vermutlich ist das Kinderkram für dich und ich würde es verstehen, wenn du dich nicht weiter damit befassen willst - wäre dir anderseits aber natürlich sehr dankbar, wenn du mir hier noch bis zum Erreichen meines Ziels behilflich sein willst.

In jedem Fall danke für deine bisherigen Erläuterungen!

onesignature schrieb am 27.04.2014 um 21:56 Uhr

.

BeRo schrieb am 27.04.2014 um 23:45 Uhr

Zäumen wir mal das Pferd von hinten auf...

[...] Sobald ich auf einen Link in der Laufschrift klicke, 'öffnet' sich das Ziel in diesem Frame [...]

Das lässt sich leicht ändern, wenn Du in der Verlinkung das Attribut "target" benutzt. Der vollständige Link schreibt sich danach so...

------------------------
<a href="http://www.magix-online.com" target="_blank">klick</a>
------------------------

Der Parameter "_blank" sorgt dafür, dass sich die verlinkte Seite in einem neuen Fenster-/Tab öffnet (von der Browsereinstellung abhängig).
Mehr Infos zu den Parametern kannst Du z. B. hier finden

[...] Ich würde die Laufschrift eigentlich gerne so haben, dass sie sich immer automatisch an die entsprechende Screenbreite anpasst [...]

Das ist mit den besprochenen Script Lösungen IMO nicht machbar.
Ein denkbarer Lösungsansatz könnte die Verlegung des Tickers auf die Page background Ebene bringen. Dort könntest Du ihn auf 1920px ausdehnen und damit auch größte Bildschirme abdecken. Je nach Anordnung der anderen Seitenobjekte würde er sichtbar bleiben und er würde den horizontalen Scroll-Balken nicht provozieren...

Deine anderen Wünsche sind zwar leichter machbar aber ob sie sinnvoll sind, musst Du selbst entscheiden, weil von den nötigen Änderungen die Darstellung von Links auf der gesamten Website betroffen sein können.

[...] Ich habe in meine Laufschrift ein paar Links eingefügt. [...]
Sie sollen sich erst bei MouseOver unterstreichen (und bei MouseOut wieder ohne Unterstreichung sein).
[...]
Sie sollen sich [...] bei MouseOver in eine best. Farbe verfärben und bei MouseOut wieder entfärben.
[...] Sie sollen aber ihre Ursprungsfarbe behalten. [...] (visited). [...]

Das alles geht mit ein paar Zeilen CSS Code, wie unten gezeigt

-----------------------------
a:link {
text-decoration: none; color: inherit;
}
a:visited {
color: inherit;
}
a:hover {
text-decoration: underline; color: #FF0000;
}
--------------------------

Im Code gelb markiert ist der Farbwert des Links für den MouseOver Fall.
Der grün markierte Wert "inherit" bedeutet, dass die Farbe den Wert des umgebenden Textes annimmt. Im o. a. Fall trifft das für den Link im Normalzustand- und im "visited" Zustand zu.

Die Werte für "text-decoration" legen fest, ob der Link unterstrichen wird. Im o. a. Code trifft das nur bei MouseOver zu.

Den kompletten Zusatzcode fügst Du am besten ans Ende des vorhandenen CSS Codes an, der im betroffenen Ausschnitt dann so aussehen sollte (der neue einzufügende Code ist gelb markiert:

--------------------------
[...]
ul.newsticker li {
float: left;
margin: 0;
padding: 0 10px;
box-sizing:border-box;
}
a:link {
text-decoration: none; color: inherit;
}
a:visited {
color: inherit;
}
a:hover {
text-decoration: underline; color: #FF0000;
}
</style>
<script type="text/javascript">
jQuery(function(){
jQuery("#webticker").webTicker();
});
</script></p>

<div class="tickercontainer"><div class="mask"><ul class="newsticker" id="webticker">
[...]
----------------------------

Viel Erfolg

onesignature schrieb am 28.04.2014 um 01:48 Uhr

Ok - ich hab alles hinbekommen!

Aber natürlich nur, weil du mir genau geschrieben hast, WO ich WAS einfügen muss. PERFEKT!

Anders wäre ich vermutlich noch länger vor diesem 'Problem gestanden.

5 *****

Du bist ziemlich versiert - und vorallem hilfsbereit - 90 % meiner Postingfragen wurden von dir beantwortet und auch sonst tifft man sehr oft auf deine Antworten wenn man durch das Forum blättert.

VIELEN DANK !

Ich habe trotzdem noch eine l e t z t e Frage zum Script...

WIE kann ich in diesem Script die GESCHWINDIGKEIT / RICHTUNG des Lauftextes festlegen?

Ich habe das Script natürlich mit dem ersten verglichen aber ich konnte nicht herausfinden, wo und ob ich da dieselben Parameter / Angaben zur Geschwindigkeit + Richtung einfügen kann.

Oder ist es bei diesem Script nicht veränderbar weil es ein sogenanntes JQuerry ist?

Sicher kennst du auch hier die Lösung :)

BeRo schrieb am 28.04.2014 um 14:18 Uhr

[...] WIE kann ich in diesem Script die GESCHWINDIGKEIT / RICHTUNG des Lauftextes festlegen? [...]

Dazu musst Du in 2 Script Dateien eingreifen...

In der Datei "ticker.js" findest Du in den Zeilen 140/141 die Optionsparameter dafür. Wenn Du da die unten gezeigten Werte einträgst, läuft der Ticker "verkehrt herum" und mit dreifacher Geschwindigkeit.

Der Effekt ist allerdings fehlerbehaftet, weil noch eine Änderung fehlt...

Öffne also noch das CSS Script aus dem Platzhalter HTML Body und ändere die Einstellungen in den grün markierten Abschnitten, wie unten gelb markiert..

Nach diesem "Eingriff" läuft alles rund.

Viel Erfolg und viel Spaß beim weiteren Website Design

onesignature schrieb am 29.04.2014 um 01:53 Uhr

Und wieder perfekt erklärt.

Danke! Alles läuft.