Problem mit Lauftext
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bereich
browser
bug
code
dank
element
ende
ermitteln
forum
http
index
problem
sagen
setzen
sinn
tag
text
url
versuch
versuchen
-
ho ;)
Noch einmal vielen tag/dank">Dank für die Lösung meines letzten Problems des Lauftextes :)
Ich habe aber schon wieder ein paar Probleme, von denen ich den Grund nicht herausfinden kann, und muss euch nochmal um Rat bitten.
Hier einmal der Link: http://sincer.lima-city.de/lauftext/index.html
Die Probleme (die ich einmal so bemerkt habe) sind die folgenden:
1) Allgemein für alle Browser:
Der Text bricht zu früh ab und fängt dann von Vorne an, bevor man ihn noch fertig lesen kann.
Dabei habe ich sogar ein Schema entdecken können: Also das kommt jetzt auf die Breite des Bildschirmes an... in diesem Sinne schaut das bei jedem anders aus, aber ich werde es versuchen zu erklären:
Wenn der Lauftext (im FF -> Punkt2) beginnt, steht am Anfang "+++ Newsticker..." und beispielsweise am Ende "...kann." So... nun läuft der Text weiter, und genau zu dem Zeitpunkt, wenn dieser zu letzt sichtbare Teil ("...kann.") ganz links ist, und dort am Rand verschwindet, bricht der Text ab, und fängt von Vorne an.
Bei den anderen Browsern bricht er dann bei gleicher Bildschirmgröße genau am gleichen Punkt ab.
(Am besten, ihr schaut euch das selbst an, weil das schwer in Worte zu fassen ist ^^)
2) Für den FireFox:
Der Text beginnt bereits ganz links. Bei allen anderen Browsern (IE, Opera) beginnt der Text von rechts ins Fenster zu Scrollen, wie es sein soll.
3) Für den Internet Explorer:
Wenn der Text kommt, kann man nach rechts Scrollen. D'oh
Typischer IE Bug. So einen Blödsinn habe ich ja schon fast vermisst...
4) Für den Opera:
Der Lauftext laggt total. KA, ob man da etwas dagegen tun kann?!
Außerdem fängt mein Laptop dann richtig an zu schwitzen. Ich höre die Ventilatoren nicht mal beim Spielen, aber bei einem JS Script kommt er ins keuchen?
Das war eig. alles, was mir aufgefallen ist. Vil. habe ich noch etwas übersehen - hoffe nicht :D
Hier noch der Code:
index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Lauftext</title> <link rel="stylesheet" type="text/css" href="ltstyle.css" /> <script type="text/javascript"> /* <![CDATA[ */ var text = "<b>+++ Newsticker +++ Hinweis:<\/b> Das ist ein langer langer langer Blindtext, den jeder hier lesen muss. <b>+++ Wichtig:<\/b> Das ist ein Lauftext Script. Geschrieben ist es in JavaScript, eine Scriptsprache, die wirklich gute Effekte erzeugen kann. Ich habe dieses Script ursprünglich für meine mündliche Matura erstellt. <b>+++ Error:<\/b> Diese Script hat aber noch 2 große Fehler: 1) Er bricht zu früh ab und fängt dann von vorne an, bevor er noch ganz durchgelaufen ist. 2) Im IE7 kann man nach rechts Scrollen, weil das overflow:hidden scheinbar nicht zu funktionieren scheint. <b>+++ Newsticker +++<\/b>"; function startLauf() { initLauftext('Lauftext'); } function wandern() { var lauftext = document.getElementById("Lauftext"); var newPos = lauftext.offsetLeft - 1; lauftext.style.left = newPos + 'px'; if (newPos + lauftext.offsetWidth < 0) { lauftext.style.left = lauftext.parentNode.offsetWidth + 1 + 'px'; } } function initLauftext(id) { var lauftext = document.getElementById("Lauftext"); lauftext.innerHTML = text; lauftext.style.left = lauftext.parentNode.offsetWidth + 1; interval1 = setInterval("wandern()", 10); // umso höher die ms (in dem Fall 10) der Wiederholung werden, umso langsamer läuft die Schrift! } function LauftextWeiter(id) { var lauftext = document.getElementById("Lauftext"); lauftext.innerHTML = text; interval1 = setInterval("wandern()", 10); } /* ]]> */ </script> </head> <body onload="startLauf()"> <div id="ltrand"> <div id="Lauftext" onmouseover="clearInterval(interval1)" onmouseout="LauftextWeiter('Lauftext')"></div> </div> </body> </html>
ltstyle.css:
body { margin:0; padding:0; left:0; font-size:100.01%; background:#DDD; } #ltrand { width:100%; height:24px; margin-top:60px; overflow: hidden; border-top:1px solid #cc1100; border-bottom:1px solid #cc1100; } #Lauftext { white-space: nowrap; position: relative; width:100%; top: 2px; }
Ich hoffe, dass ihr mir wieder einmal helfen könnt ;)
lg && thx im voraus
Sincer -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
sincer schrieb:1) Allgemein für alle Browser:
Der Text bricht zu früh ab und fängt dann von Vorne an, bevor man ihn noch fertig lesen kann.
Dabei habe ich sogar ein Schema entdecken können: Also das kommt jetzt auf die Breite des Bildschirmes an... in diesem Sinne schaut das bei jedem anders aus, aber ich werde es versuchen zu erklären:
Wenn der Lauftext (im FF -> Punkt2) beginnt, steht am Anfang "+++ Newsticker..." und beispielsweise am Ende "...kann." So... nun läuft der Text weiter, und genau zu dem Zeitpunkt, wenn dieser zu letzt sichtbare Teil ("...kann.") ganz links ist, und dort am Rand verschwindet, bricht der Text ab, und fängt von Vorne an.
Bei den anderen Browsern bricht er dann bei gleicher Bildschirmgröße genau am gleichen Punkt ab.
(Am besten, ihr schaut euch das selbst an, weil das schwer in Worte zu fassen ist ^^)
Das Problem müsste hier liegen. Evtl. kannst du die Überprüfung mit Right machen und schauen, wenn der Text von Rechts genauso weit entfernt ist, wie der Bildschirm breit ist.
lauftext.style.left = newPos + 'px'; if (newPos + lauftext.offsetWidth < 0)
sincer schrieb:2) Für den FireFox:
Der Text beginnt bereits ganz links. Bei allen anderen Browsern (IE, Opera) beginnt der Text von rechts ins Fenster zu Scrollen, wie es sein soll.
Das kommt darauf an, welchen Wert für Left du beim Start angegeben hast.
sincer schrieb:3) Für den Internet Explorer:
Wenn der Text kommt, kann man nach rechts Scrollen. D'oh
Typischer IE Bug. So einen Blödsinn habe ich ja schon fast vermisst...
Kann ich unter IE 6 nicht feststellen, allerdings musst du dir mal die Attribute zum Behandeln von zu langen Texten anschauen vielleicht hilft es diese Einstellung umzustellen => overflow
sincer schrieb:4) Für den Opera:
Der Lauftext laggt total. KA, ob man da etwas dagegen tun kann?!
Außerdem fängt mein Laptop dann richtig an zu schwitzen. Ich höre die Ventilatoren nicht mal beim Spielen, aber bei einem JS Script kommt er ins keuchen?
Das kann dir auch bei den anderen Browsern passieren. Das Skript läuft ständig und updated andauernd den Quelltext, daher kann es vorkommen, dass es viel Rechenleistung braucht.
Hast du mal im Internet gesucht, ob es evtl. schon etwas gibt, wie du es benötigst?
Vielleicht kann dir das hier eine Idee geben: http://www.animiertegifs.de/java-scripts/laufschrift.htm -
ho ;)
Also den 2. Bug habe ich behoben. War ein Flüchtigkeitsfehler, aber ich lerne ja dazu *g*
(Es hatte noch ein "+ 'px'" gefehlt)
Mit dem 2. Bug werde ich mich noch etwas genauer befassen.
Ich werde mich mit deinem Vorschlag mal herum spielen.
Alternativ ist mir noch eingefallen, ob es vil. eine Möglichkeit gibt, einen text "abzumessen" und das Script über die weise neu zu starten, wenn die länge + 100% der Weite der Seite vorüber sind...
Wie ich das mit dem 3. Bug mache, weiß ich noch nicht. In css4you steht, dass der IE das Element overflow:hidden; beherrscht. Deswegen weiß ich echt nicht, was der IE(7) daran nicht checkt.
Mit dem 4. Bug werde ich mich wohl oder übel abfinden müssen.
Ich verstehe es zwar nicht ganz, weil das in anderen Browsern ganz locker läuft, aber ok... Was soll ich machen :P
Wer einen Code-Lösungsansatz für meinen 1. Bug hat, möge mir diesen bitte verraten :D
Gleiches gilt für den 3. (IE7) Bug.
lg && thx
Sincer -
sincer schrieb:
Mit dem 2. Bug werde ich mich noch etwas genauer befassen.
Ich werde mich mit deinem Vorschlag mal herum spielen.
Alternativ ist mir noch eingefallen, ob es vil. eine Möglichkeit gibt, einen text "abzumessen" und das Script über die weise neu zu starten, wenn die länge + 100% der Weite der Seite vorüber sind...
Vielleicht hilft dir der folgende Link: http://www.tutorials.de/forum/javascript-ajax/258522-textbreite-ermitteln.html
Ist dann zwar nicht wirklich die Textbreite, aber du weißt, wie weit der Text gewandert ist.
... nach dem Tag könntest du dann im Übrigen wieder deinen Text anfügen und ein neues Tag mit dem Namen +1. Darüber könntest du einen Text vorne abschneiden, wenn er durchgelaufen ist und hinten immer wieder neue anhängen, wenn nötig.
=> dein Text würde also ohne Unterbrechung durchlaufen, wie bei dem Input-Feld.
Wie ich das mit dem 3. Bug mache, weiß ich noch nicht. In css4you steht, dass der IE das Element overflow:hidden; beherrscht. Deswegen weiß ich echt nicht, was der IE(7) daran nicht checkt.[/quote]
Evtl. musst du dem umgebenden Element eine fixe Breite zuweisen (per Javascript, Breite = Seitenbreite anstatt 100%), da sonst das innere Element die Breite bestimmt. Ich weiß nicht, wie der IE7 da genau vorgeht, kann es allerdings auch nicht testen.
Gruß
Karlja -
karlja schrieb:
Vielleicht hilft dir der folgende Link: http://www.tutorials.de/forum/javascript-ajax/258522-textbreite-ermitteln.html
Ist dann zwar nicht wirklich die Textbreite, aber du weißt, wie weit der Text gewandert ist.
Danke für den Link.
Aber dieses Script müsste ich ja jedes mal von neuem starten, wenn ich den Text verändere.
Nun ist es aber so, dass der Autor dieses Tutorials geschrieben hat, dass das ganze im IE nicht funktioniert. D.h. ich könnte es nicht wirklich fix in die Seite integrieren... (Und um ehrlich zu sein. Meine JS Kenntnisse sind recht begrenzt. Ich habe nicht wirklich verstanden, wie sein Code nun funktioniert. Meinen Code verstehe ich wenigstens :D )
... nach dem Tag könntest du dann im Übrigen wieder deinen Text anfügen und ein neues Tag mit dem Namen +1. Darüber könntest du einen Text vorne abschneiden, wenn er durchgelaufen ist und hinten immer wieder neue anhängen, wenn nötig.
=> dein Text würde also ohne Unterbrechung durchlaufen, wie bei dem Input-Feld.
Das ist ein Gedanke, der mir auch schon gekommen ist. Jedoch habe ich beschlossen, dass ich das nicht will.
Der Lauftext soll von links kommen, nach rechts gehen, bis er fertig ist. Dann ist es für eine Sek (nicht einmal) leer, und dann beginnt es wieder rechts.
Man soll also erkennen können, wo er angefangen hat, und wo er endet.
Auf jeden Fall danke für den Vorschlag :)
Evtl. musst du dem umgebenden Element eine fixe Breite zuweisen (per Javascript, Breite = Seitenbreite anstatt 100%), da sonst das innere Element die Breite bestimmt. Ich weiß nicht, wie der IE7 da genau vorgeht, kann es allerdings auch nicht testen.
Uff... also wenn ich die Breite des Bildschirmes für den Lauftext per JS definieren soll, wird mir schon im Bauch schummrig. Das hat nämlich einen großen Nachteil: Wenn man die Größe des Fensters verändert, dann verändert sich das JS nicht mit, es sei denn, man würde es jede Sekunde aufs neue laden lassen, was ja glaube ich nicht wirklich sinnvoll wäre.
Schließlich habe ich mich bemüht, die Seite so anzulegen, dass sie mit der Bildschirmgröße / -kleine wächst / schrumpft.
(GMX beispielsweise geht so einem Problem aus dem weg, da die Seite einfach eine gewisse Pixellänge breit ist, und somit alle Breiten festgelegt. Die ersparen sich Prozentangaben :D - Aber das will ich ja nicht :P )
Vielen dank für deine Vorschläge.
Wenn du noch Einfälle hast, immer her damit :)
lg && thx
Sincer
PS: Das Lauftextscript, zu dem du mich Beispielsweise verlinkt hast (ich habe es auch mit Google gefunden) funktioniert ja nur in einem Input Feld. Aber ein solches schaut a) nicht hübsch aus, und b) kann man es nicht mit 100% an die Seitenbreite anpassen, sondern nur mit size.
Ich habe mich ein wenig damit herum gespielt, aber das Ergebnis war für mich nicht wirklich so, wie ich es haben will.
Da versuche ich es lieber weiter mit meinem.
Zu anderen Scripten, die ich gefunden habe kann ich nur sagen, dass sie mir wie der marquee Tag ruckelig vorkommen. Mein Script hingegen läuft total flüssig (Mit den Angaben: Intervall:10ms - 1px Verschiebung.) -
sincer schrieb:
karlja schrieb:
Vielleicht hilft dir der folgende Link: http://www.tutorials.de/forum/javascript-ajax/258522-textbreite-ermitteln.html
Ist dann zwar nicht wirklich die Textbreite, aber du weißt, wie weit der Text gewandert ist.
Danke für den Link.
Aber dieses Script müsste ich ja jedes mal von neuem starten, wenn ich den Text verändere.
Nun ist es aber so, dass der Autor dieses Tutorials geschrieben hat, dass das ganze im IE nicht funktioniert. D.h. ich könnte es nicht wirklich fix in die Seite integrieren... (Und um ehrlich zu sein. Meine JS Kenntnisse sind recht begrenzt. Ich habe nicht wirklich verstanden, wie sein Code nun funktioniert. Meinen Code verstehe ich wenigstens :D )
Dabei wurde das Ende des Textes durch einen <p></p>-Bereich ermittelt, der einfach hinten an den Text angehängt wurde. Durch Messung des Offsets diese <p></p>-Bereichs lässt sich ermitteln, wie weit der Text noch vom linken Rand entfernt ist. Du hättest somit letztendlich zwar nicht die Textbreite, aber wüsstest doch, wenn der Text durchgelaufen ist.
sincer schrieb:
Evtl. musst du dem umgebenden Element eine fixe Breite zuweisen (per Javascript, Breite = Seitenbreite anstatt 100%), da sonst das innere Element die Breite bestimmt. Ich weiß nicht, wie der IE7 da genau vorgeht, kann es allerdings auch nicht testen.
Uff... also wenn ich die Breite des Bildschirmes für den Lauftext per JS definieren soll, wird mir schon im Bauch schummrig. Das hat nämlich einen großen Nachteil: Wenn man die Größe des Fensters verändert, dann verändert sich das JS nicht mit, es sei denn, man würde es jede Sekunde aufs neue laden lassen, was ja glaube ich nicht wirklich sinnvoll wäre.
Schließlich habe ich mich bemüht, die Seite so anzulegen, dass sie mit der Bildschirmgröße / -kleine wächst / schrumpft.
(GMX beispielsweise geht so einem Problem aus dem weg, da die Seite einfach eine gewisse Pixellänge breit ist, und somit alle Breiten festgelegt. Die ersparen sich Prozentangaben :D - Aber das will ich ja nicht :P )
Da du eh in einem gewissen zeitlichen Abstand mit Javascript die Seite manipulierst, wäre es nicht wirklich schwer hier auch gleich die Abfrage einzubauen, ob sich die Seitenbreite verändert hat und dann Element entsprechend anzupassen.
Im Übrigen gibt es auch das Onresize-Event von Javascript: http://www.w3schools.com/jsref/jsref_onresize.asp
sincer schrieb:
PS: Das Lauftextscript, zu dem du mich Beispielsweise verlinkt hast (ich habe es auch mit Google gefunden) funktioniert ja nur in einem Input Feld. Aber ein solches schaut a) nicht hübsch aus, und b) kann man es nicht mit 100% an die Seitenbreite anpassen, sondern nur mit size.
Ich habe mich ein wenig damit herum gespielt, aber das Ergebnis war für mich nicht wirklich so, wie ich es haben will.
Da versuche ich es lieber weiter mit meinem.
War nur eine Idee, weil das Problem mit der Länge dann wegfallen würde. Man kann so ein Input-Feld übrigens auch mit CSS vollkommen anders aussehen lassen...
Gruß
Karlja
Edit: Hier ist ein Ansatz mit jQuery für einen Lauftext, der bei mir recht gut aussieht und funktioniert: http://remysharp.com/2008/09/10/the-silky-smooth-marquee/
Beitrag geändert: 10.1.2009 8:14:18 von karlja -
ho ;)
Also, um bei meinem Code zu bleiben, und ihn um den Code von dem einen Tutorial (http://www.tutorials.de/forum/javascript-ajax/258522-textbreite-ermitteln.html) zu erweitern...
karlja schrieb:
Dabei wurde das Ende des Textes durch einen <p></p>-Bereich ermittelt, der einfach hinten an den Text angehängt wurde. Durch Messung des Offsets diese <p></p>-Bereichs lässt sich ermitteln, wie weit der Text noch vom linken Rand entfernt ist. Du hättest somit letztendlich zwar nicht die Textbreite, aber wüsstest doch, wenn der Text durchgelaufen ist.
Damit ich das richtig verstehe:
Der Lauftext läuft... Am Ende des Lauftextes ist ein DIV (Oder P Element, sollte keine Rolle spielen, oder?) mit einer ID. Wenn dieses DIV den linken Rand erreicht hat, soll das den neustart des Lauftextes triggern.
Habe ich das von der Theorie her richtig verstanden?
Also, wenn ich jetzt meinem Lauftext diesen DIV gebe... Das muss ich ja in die Variable "text" schreiben.
var text = "Ein kurzer Demo Text!<div id='Lauftextende'> <\/div>";
Dann muss ich noch sagen, was mit dem DIV eig. passieren soll... habe das mal einfach so übernommen...
var textW = document.getElementById('Lauftextende').offsetLeft;
Und wenn das ganze links angekommen ist, muss es nur noch triggern, und den Text wieder von links beginnen lassen...
if (textW < 0) { lauftext.style.left = lauftext.parentNode.offsetWidth + 1 + 'px'; }
Zumindest hätte ich das gerne... es funktioniert nur leider nicht :(
Oder habe ich da schon was vom Theoretischen Teil falsch verstanden? Bzw. Codetechnisch falsch umgesetzt?
Ich spiele mich schon ein ganzes Weilchen damit, aber bekomme es nicht und nicht hin...
Edit: Hier ist ein Ansatz mit jQuery für einen Lauftext, der bei mir recht gut aussieht und funktioniert: http://remysharp.com/2008/09/10/the-silky-smooth-marquee/
Thx für den Vorschlag.
Aber mit JS-Bibliotheken habe ich ja noch überhaupt keine Erfahrung.
Außerdem hat mir schon jem. gesagt, dass der Marquee Tag in XHTML Strict nicht erwünscht ist...
Aber als Notlösung (Wenn ich das mit meinem Code wirklich nicht hinbekommen sollte... die Hoffnung stirbt zuletzt XD ) kann ich wirklich darauf zurück greifen. Ich behalte es im Hinterkopf - Danke!
lg && thx
Sincer
PS: Ich denke, man verliert leicht den Überblick, wenn man nur die geposteten Code schnipsel sieht...
Deswegen hier nochmal alles:
JS:
<script type="text/javascript"> /* <![CDATA[ */ var text = "Ein kurzer Demo Text!<div id='Lauftextende'> <\/div>"; var textW = document.getElementById('Lauftextende').offsetLeft; function startLauf() { initLauftext('Lauftext'); } function wandern() { var lauftext = document.getElementById("Lauftext"); var newPos = lauftext.offsetLeft - 1; lauftext.style.left = newPos + 'px'; // if (newPos + lauftext.offsetWidth < 0) if (textW < 0) { lauftext.style.left = lauftext.parentNode.offsetWidth + 1 + 'px'; } } function initLauftext(id) { var lauftext = document.getElementById("Lauftext"); lauftext.innerHTML = text; lauftext.style.left = lauftext.parentNode.offsetWidth + 1 + 'px'; interval1 = setInterval("wandern()", 10); // umso höher die ms (in dem Fall 10) der Wiederholung werden, umso langsamer läuft die Schrift! } function LauftextWeiter(id) { var lauftext = document.getElementById("Lauftext"); lauftext.innerHTML = text; interval1 = setInterval("wandern()", 10); } /* ]]> */ </script>
Body:
<div id="ltrand"> <div id="Lauftext" onmouseover="clearInterval(interval1)" onmouseout="LauftextWeiter('Lauftext')"></div> </div> -
Ich wollte damit bloß sagen, dass es dafür schon Libraries gibt, die durchdenkt wurde und viele Eventualitäten abdecken.
Versuch es einfach mal mit dem <p>-Tag. kann sein, dass der mit der Box anders reagiert, weil die z.B. direkt in einer neuen Zeile steht... Ansonsten lass dir doch in der initLauftext-Funktion nach dem Setzen des Textes mal das Offset der Box ausgeben. (nicht in der Wandern-Funktion, da du sonst nicht mehr rauskommst aus der Endlosschleife ohne deinen Browser zu killen)
Gruß
Karlja -
ho ;)
Also ich habe mal die variable text mit dem <P> Tag angeändert...
var text = "Ein kurzer Demo Text!<p id='Lauftextende'> <\/p>";
Hat leider nichts geändert...
Und die initLauftext Funktion...
function initLauftext(id) { var lauftext = document.getElementById("Lauftext"); lauftext.innerHTML = text; lauftext.style.left = lauftext.parentNode.offsetWidth + 1 + 'px'; interval1 = setInterval("wandern()", 10); // umso höher die ms (in dem Fall 10) der Wiederholung werden, umso langsamer läuft die Schrift! alert("Der Offset: "+textW); }
Ich hoffe, dass ich deine Anleitung richtig verstanden habe...
Auf jedenfall überrascht mich die Ausgabe des Popups!
Der Offset: undefined
Joah... was bedeutet das?
Das hilft mir ja quasi gar nicht, wenn der Wert nicht definiert ist, kann das ganze ja gar nicht <0 werden, und somit triggern!
Wieso ist die Variable nicht definiert?
lg
Sincer -
Du hast in der Initialisierung die Variable noch nicht gesetzt:
alert(document.getElementById('Lauftextende').offsetLeft);
Und dann kann es noch sein, dass du die Ausgabe erst von Integer in String umwandeln musst.
Gruß
Karlja -
ho ;)
Also ich habe meinen Alert durch deinen ersetzt, und das Ergebnis war "0".
Und dann kann es noch sein, dass du die Ausgabe erst von Integer in String umwandeln musst.
Öhm... brauche ich das jetzt noch?
Was ändert das?
Und die Abschlussfrage: Wie mache ich das? ^^
(Sry, wenn ich dir schon auf die Nerven gehe, ich hoffe, du hast viel Geduld :D )
Weiters war ich so mutig ^^, und habe diesen Alert (in dem Wissen, was passieren würde!) doch in meine Endlosschleife (die wandern() Funktion) eingesetzt. Ich wollte sehen, in wie weit sich die Zahl mit dem Wandern des Textes verändert... ob sie kleiner oder größer wird...
Das Ergebnis blieb aber bei jedem Alert 0.
*Ratlos bin*
lg
Sincer -
Hi,
noch habe ich etwas Geduld... kannst du das Skript nochmal aktualisiert (aber bitte ohne den alert() in wandern()) online stellen?
Einfacher würdest du es dir allerdings mit der Hilfe von jQuery machen und könntest auch mehr Zeit dem Rest deiner Seite widmen - nur so als Hinweis. Allerdings kenne ich deine Aufgabenstellung/Zielsetzung nicht.
Gruß
Karlja -
ho ;)
Danke :)
Ich habe das Script nun so hochgeladen, wie es sich zuletzt entwickelt hat...
(Natürlich ohne den Alert in der wandern() Funktion XD - Das wäre ja ein DoS Angriff :P )
Der Alert, so wie du ihn gepostet hast, befindet sich nur in der initLauftext Funktion.
Link: http://sincer.lima-city.de/lauftext/
weiterhin thx
Sincer -
Mal abgesehen davon, dass es einen Fehler gibt, weil du textW zu einem Zeitpunkt definierst, zu dem es noch gar nicht vorkommt. Würde auch diese Lösung nicht in allen Browsern funktionieren (siehe das Ende des genannten Foreneintrags).
Probier mal diese Lösung:
Ich habe dabei deinen Text in ein div-Element "lauftextinner" gesetzt und für dieses div-Element die Position abhängig vom Eltern-Element gemacht sowie die Darstellung als von Text umschlossen definiert. Damit kann man via offsetLeft + offsetWidth von dem Element ermitteln, wann es außerhalb der Anzeige ist.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <TITLE>Lauftext</TITLE> <LINK rel="stylesheet" type="text/css" href="./Lauftext_files/ltstyle.css"> <SCRIPT type="text/javascript"> /* <![CDATA[ */ var text = "Hier kommt ein Ticker......................"; function startLauf() { initLauftext(); } function wandern() { var lauftext = document.getElementById("lauftextinner"); var newPos = lauftext.offsetLeft - 1; lauftext.style.left = newPos + 'px'; lauftext.innerHTML = text; if (document.getElementById("lauftextinner").offsetLeft + document.getElementById("lauftextinner").offsetWidth < 0) { lauftext.style.left = lauftext.parentNode.offsetWidth + 1 + 'px'; } } function initLauftext() { var lauftext = document.getElementById("lauftextinner"); lauftext.innerHTML = text; lauftext.style.left = lauftext.parentNode.offsetWidth + 1 + 'px'; interval1 = setInterval("wandern()", 10); } function LauftextWeiter() { var lauftext = document.getElementById("lauftextinner"); lauftext.innerHTML = text; interval1 = setInterval("wandern()", 10); } /* ]]> */ </SCRIPT> </HEAD> <BODY onload="startLauf()"> <DIV id="ltrand"> <DIV id="Lauftext" onmouseover="clearInterval(interval1)" onmouseout="LauftextWeiter()" style="left: 0px; "><DIV id="lauftextinner" style="display:inline; position:relative;"></DIV></DIV> </DIV> </BODY> </HTML>
Ich kann dir auch noch ein weiteres Beispiel vorschlagen, dass die Eigenheiten diverser (auch älterer) Browser berücksichtigt: http://www.jswelt.de/index.php?opencat=JavaScripts&artid=1035115099AND
Auf den Seiten findest du übrigens noch mehr Tickerbeispiele: http://www.jswelt.de/index.php?opencat=JavaScripts&kategorie=Ticker&part=true
Ob du so ohne weiteres eine neue, innovative Cross-Browser Lösung findest, weiß ich nicht. Bemüh evtl. nochmal Google, ob du dort noch Ideen und Anregungen findest.
Gruß
Karlja -
ho ;)
Also zuerst einmal: Ein riesen großes Dankeschön :)
Ich habe mir deinen Code angesehen, und deine Änderungen in meinen Code übernommen. Vom Lauftext und seiner Wiederholung her funktioniert alles. :D
(Mir ist aufgefallen, dass ich die IDs ja gar nicht brauche, weil du sie weg gelassen hast ^^. Dann habe ich nachgedacht, warum die da überhaupt drinnen sind, und konnte mich daran erinnern, dass ich damals gelernt hatte, Parameter zu übergeben. In diesem Fall habe ich den Parameter zwar übergeben, aber gar nicht benützt, wie du gut erkannt hast :P )
Von der Theorie her verstehe ich, was du verändert hast, und im Nachhinein klopfe ich mir auf die Stirn, warum ich überhaupt diesen Div Tag in die text Variable gegeben habe...
In dem Tutorial, zu dem du mich verwiesen hattest, hat der User den <P> Tag schließlich auch in seinen ersten <P> Tag integriert. Mich hat nur irritiert, dass der Text auch gleich drinnen steht, aber sein Script arbeitet ja ein wenig anders, als meines...
Ich weiß nicht, wie das im IE 6 aussieht, weil ich das nur bedingt testen kann. (Per Virtual PC, und das funktioniert nur Mittelprächtig :/ )
Im IE7 ist nur noch das Problem, dass man nach rechts Scrollen kann und den Text sieht, der noch kommt... Irgendwie scheint der das overflow:hidden; in diesem speziellen Fall nicht zu verstehen.
Da du das aber meines Wissens im IE7 nicht testen kannst, habe ich einen Screenshot gemacht...
Link: http://download.lima-city.de/sincer/ScreenIE7_lauftext.jpg
(Bzw. für alle anderen, die eine Lösung für dieses (hoffentlich letzte) Problem haben...)
Ich kann dir auch noch ein weiteres Beispiel vorschlagen, dass die Eigenheiten diverser (auch älterer) Browser berücksichtigt: http://www.jswelt.de/index.php?opencat=JavaScripts&artid=1035115099AND
Auf den Seiten findest du übrigens noch mehr Tickerbeispiele: http://www.jswelt.de/index.php?opencat=JavaScripts&kategorie=Ticker&part=true
Ich habe mir die Scripte, die man dort abrufen kann angesehen, und teilweise echt nett gefunden. (Auch diese, die einen ganz anderen Effekt erzeugen. Wenn ich sowas für einen anderen Bereich der Seite brauchen kann, bin ich sicher, dass ich auf diese Seite zurück greifen werde! Danke :) ) Nur alle dieser Scripte hatten eine recht kleinen Bereich, in dem sie liefen. Ich denke, dass man das gleiche Problem mit diesen Tickern bekommt, wenn man die weite auf 100% ausdehnt... *glaub*
Ich bin auf jeden Fall schon froh, dass das endlich richtig läuft.
Nur mehr der Fehler im IE7, von dem ich auch kA habe, wie ich ihn beheben kann, bzw. wie dieser überhaupt entsteht :/
Vielen Dank karlja ;)
*Keks geb*
thx
Sincer -
sincer schrieb:
ho ;)
Also zuerst einmal: Ein riesen großes Dankeschön :)
Bitte!
sincer schrieb:
Ich habe mir deinen Code angesehen, und deine Änderungen in meinen Code übernommen. Vom Lauftext und seiner Wiederholung her funktioniert alles. :D
(Mir ist aufgefallen, dass ich die IDs ja gar nicht brauche, weil du sie weg gelassen hast ^^. Dann habe ich nachgedacht, warum die da überhaupt drinnen sind, und konnte mich daran erinnern, dass ich damals gelernt hatte, Parameter zu übergeben. In diesem Fall habe ich den Parameter zwar übergeben, aber gar nicht benützt, wie du gut erkannt hast :P )
Es macht auch Sinn die Parameter zu übergeben, dann musst du es allerdings überall einhalten und sie auch verwenden. Ich habe sie jetzt weggelassen, da sie eh nicht verwendet wurden und ich davon ausgehe, dass du erstmal nur einen Lauftext haben wirst. Bei Mehreren kannst du dann über die Paramter die Funktionen wiederverwenden.
sincer schrieb:
Von der Theorie her verstehe ich, was du verändert hast, und im Nachhinein klopfe ich mir auf die Stirn, warum ich überhaupt diesen Div Tag in die text Variable gegeben habe...
In dem Tutorial, zu dem du mich verwiesen hattest, hat der User den <P> Tag schließlich auch in seinen ersten <P> Tag integriert. Mich hat nur irritiert, dass der Text auch gleich drinnen steht, aber sein Script arbeitet ja ein wenig anders, als meines...
In deinem Script messe ich über das umschließende div-Element die Breite des Textes. In dem anderen Skript wurde über das p-Element das Ende des Textes gemessen. Theoretisch sollte es auf dasselbe Ergebnis kommen, aber funktionierte (warum auch immer) nicht.
sincer schrieb:
Ich weiß nicht, wie das im IE 6 aussieht, weil ich das nur bedingt testen kann. (Per Virtual PC, und das funktioniert nur Mittelprächtig :/ )
Im IE7 ist nur noch das Problem, dass man nach rechts Scrollen kann und den Text sieht, der noch kommt... Irgendwie scheint der das overflow:hidden; in diesem speziellen Fall nicht zu verstehen.
Läuft bei mir ohne Probleme!
sincer schrieb:
Da du das aber meines Wissens im IE7 nicht testen kannst, habe ich einen Screenshot gemacht...
Link: http://download.lima-city.de/sincer/ScreenIE7_lauftext.jpg
(Bzw. für alle anderen, die eine Lösung für dieses (hoffentlich letzte) Problem haben...)
Schaun wir mal. Hier scheint es ein Problem des IE7 zu sein, da der das "overflow: hidden" nicht umsetzen kann. Ich sehe hier zwei Möglichkeiten (die Erste könntest du mal probieren und wenn sie läuft, wäre es die Schönere - die Zweite wäre erst danach einen Versuch wert)
1.
Weise im CSS-Skript doch mal dem html- und body-Element die Eigenschaft "overflow: hidden" zu und schaue, ob das dir weiterhilft.
2.
Bei der Initialisierung deines Skriptes könntest du dem umschließenden div-Element ("Lauftext") mal versuchen eine feste Breite (via Javascript div-Breite=Anzeigebreite) zuzuweisen, ob dir das Hilft, weiß ich allerdings nicht.
... wenn beides nicht hilft, könnte man noch ein wenig experimentieren und jedes Zeichen deines Textes in ein eigenes div-Element setzen und erst wenn das vorherige Zeichen ein paar Pixel im Bildschirm ist, lässt man das Nächste einblenden usw.
sincer schrieb:
Ich kann dir auch noch ein weiteres Beispiel vorschlagen, dass die Eigenheiten diverser (auch älterer) Browser berücksichtigt: http://www.jswelt.de/index.php?opencat=JavaScripts&artid=1035115099AND
Auf den Seiten findest du übrigens noch mehr Tickerbeispiele: http://www.jswelt.de/index.php?opencat=JavaScripts&kategorie=Ticker&part=true
Ich habe mir die Scripte, die man dort abrufen kann angesehen, und teilweise echt nett gefunden. (Auch diese, die einen ganz anderen Effekt erzeugen. Wenn ich sowas für einen anderen Bereich der Seite brauchen kann, bin ich sicher, dass ich auf diese Seite zurück greifen werde! Danke :) ) Nur alle dieser Scripte hatten eine recht kleinen Bereich, in dem sie liefen. Ich denke, dass man das gleiche Problem mit diesen Tickern bekommt, wenn man die weite auf 100% ausdehnt... *glaub*
^^ - sollte eigentlich auch funktionieren. Schränk mal die Breite von deiner Box ein und schau dir an, wie es dann im IE 7 aussieht - ich gehe davon aus, dass es das nicht besser machen wird.
sincer schrieb:
Ich bin auf jeden Fall schon froh, dass das endlich richtig läuft.
Nur mehr der Fehler im IE7, von dem ich auch kA habe, wie ich ihn beheben kann, bzw. wie dieser überhaupt entsteht :/
Wie oben beschrieben...
sincer schrieb:
Vielen Dank karlja ;)
*Keks geb*
Gern geschehen - *Nüsschen anbiet*
Gruß
Karlja -
ho ;)
Ich habe schon gestern ein wenig herum Probiert, und war dann aber zu Müde, um hier gleich zurück zu schreiben...
karlja schrieb:
sincer schrieb:
Ich weiß nicht, wie das im IE 6 aussieht, weil ich das nur bedingt testen kann. (Per Virtual PC, und das funktioniert nur Mittelprächtig :/ )
Im IE7 ist nur noch das Problem, dass man nach rechts Scrollen kann und den Text sieht, der noch kommt... Irgendwie scheint der das overflow:hidden; in diesem speziellen Fall nicht zu verstehen.
Läuft bei mir ohne Probleme!
Sauber, danke ;)
Schaun wir mal. Hier scheint es ein Problem des IE7 zu sein, da der das "overflow: hidden" nicht umsetzen kann. Ich sehe hier zwei Möglichkeiten (die Erste könntest du mal probieren und wenn sie läuft, wäre es die Schönere - die Zweite wäre erst danach einen Versuch wert)
1.
Weise im CSS-Skript doch mal dem html- und body-Element die Eigenschaft "overflow: hidden" zu und schaue, ob das dir weiterhilft.
2.
Bei der Initialisierung deines Skriptes könntest du dem umschließenden div-Element ("Lauftext") mal versuchen eine feste Breite (via Javascript div-Breite=Anzeigebreite) zuzuweisen, ob dir das Hilft, weiß ich allerdings nicht.
... wenn beides nicht hilft, könnte man noch ein wenig experimentieren und jedes Zeichen deines Textes in ein eigenes div-Element setzen und erst wenn das vorherige Zeichen ein paar Pixel im Bildschirm ist, lässt man das Nächste einblenden usw.
Ad 1:
Habe ich versucht.
den Overflow beim Body zu verändern hat nichts gebracht.
Bei HTML schon. Es hat das Problem nur nicht gelöst, sondern nur verschlimmert XD
Dadurch ging im Browser die Scrollleiste flöten und man konnte nur noch über einen Druck auf die Mausradtaste scrollen. Und wenn man mal gescrollt hat, konnte man genauso wieder nach rechts gehen, und sehen, woher der Text kommt...
Kurz gesagt: Hat leider nicht funktioniert :(
Ad 2:
Muss ich noch ausprobieren...
Meine JS Kenntnisse sind noch nicht so ganz ausgereift (um es positiv zu Formulieren *g*) und ich werde mich deshalb erst mal überhaupt mit diesem Thema auseinander setzen und dann herum Probieren, und vermutlich meine Fragen wieder stellen ^^
Allerdings frage ich mich, woran das überhaupt liegt, dass der IE7 in diesem Fall das Overflow:hidden; einfach ignoriert... und vor allem, ob es was ändert, wenn ich diese Technik anwende... Aber einen Versuch ist es mir alle mal Wert... Probieren geht über Studieren, oder? :D
Ad 3:
Also da müsste ich erst einmal überlegen, wie ich das anstellen soll...
Den Text müsste ich per Schleife in alle einzelnen Buchstaben zerlegen, und jeden in ein Div mit fortlaufender ID-Nummerierung verpacken, und das dann in einer anderen schleife Stück für Stück in den Lauftext pressen... oder so ähnlich :/
Hmm... Würde das den Klienten (FF, IE, ...) nicht etwas überfordern? Meiner Meinung nach schafft er es jetzt schon kaum, dem 10 Millisekunden Intervall nachzukommen... aber dann auch noch so etwas dazu? *zweifel*
Gern geschehen - *Nüsschen anbiet*
^^
Gestern lief in ORF 1 (Österreichischer Rundfunk... Vergleichbar mit Pro 7, nur ohne Werbung - Yes! ^^) "Und dann kam Polly". Habe mir das gestern zwar nicht angesehen, aber ich kann mich noch genau an die Szene in der Bar erinnern, in der er Polly erklärt hat, dass man die Nüsse nie essen darf, weil die Leute mit den schmutzigen Händen da immer rein greifen :D
Aber ich vertrau dir mal einfach ^^
*Nüsschen nehm*
Thx
Sincer -
sincer schrieb:
Schaun wir mal. Hier scheint es ein Problem des IE7 zu sein, da der das "overflow: hidden" nicht umsetzen kann. Ich sehe hier zwei Möglichkeiten (die Erste könntest du mal probieren und wenn sie läuft, wäre es die Schönere - die Zweite wäre erst danach einen Versuch wert)
1.
Weise im CSS-Skript doch mal dem html- und body-Element die Eigenschaft "overflow: hidden" zu und schaue, ob das dir weiterhilft.
2.
Bei der Initialisierung deines Skriptes könntest du dem umschließenden div-Element ("Lauftext") mal versuchen eine feste Breite (via Javascript div-Breite=Anzeigebreite) zuzuweisen, ob dir das Hilft, weiß ich allerdings nicht.
... wenn beides nicht hilft, könnte man noch ein wenig experimentieren und jedes Zeichen deines Textes in ein eigenes div-Element setzen und erst wenn das vorherige Zeichen ein paar Pixel im Bildschirm ist, lässt man das Nächste einblenden usw.
Ad 1:
Habe ich versucht.
den Overflow beim Body zu verändern hat nichts gebracht.
Bei HTML schon. Es hat das Problem nur nicht gelöst, sondern nur verschlimmert XD
Dadurch ging im Browser die Scrollleiste flöten und man konnte nur noch über einen Druck auf die Mausradtaste scrollen. Und wenn man mal gescrollt hat, konnte man genauso wieder nach rechts gehen, und sehen, woher der Text kommt...
Kurz gesagt: Hat leider nicht funktioniert :(
Ad 2:
Muss ich noch ausprobieren...
Meine JS Kenntnisse sind noch nicht so ganz ausgereift (um es positiv zu Formulieren *g*) und ich werde mich deshalb erst mal überhaupt mit diesem Thema auseinander setzen und dann herum Probieren, und vermutlich meine Fragen wieder stellen ^^
Allerdings frage ich mich, woran das überhaupt liegt, dass der IE7 in diesem Fall das Overflow:hidden; einfach ignoriert... und vor allem, ob es was ändert, wenn ich diese Technik anwende... Aber einen Versuch ist es mir alle mal Wert... Probieren geht über Studieren, oder? :D
Ad 3:
Also da müsste ich erst einmal überlegen, wie ich das anstellen soll...
Den Text müsste ich per Schleife in alle einzelnen Buchstaben zerlegen, und jeden in ein Div mit fortlaufender ID-Nummerierung verpacken, und das dann in einer anderen schleife Stück für Stück in den Lauftext pressen... oder so ähnlich :/
Hmm... Würde das den Klienten (FF, IE, ...) nicht etwas überfordern? Meiner Meinung nach schafft er es jetzt schon kaum, dem 10 Millisekunden Intervall nachzukommen... aber dann auch noch so etwas dazu? *zweifel*
Beim Dritten wirst du recht haben... müssen sich die Benutzer halt bessere PCs zulegen.
Ich hab mal bei Google ein wenig gesucht und Folgendes gefunden: http://forum.de.selfhtml.org/archiv/2007/3/t149540/
Versuch mal die beiden übergeordneten div-Elemente auch als position: relative zu definieren und schau, was dir dieses bringt.
Das Ganze scheint ein reines IE7-Feature zu sein und wird auch bei einer Suche bei Google recht häufig gefunden.
sincer schrieb:
Gern geschehen - *Nüsschen anbiet*
^^
Gestern lief in ORF 1 (Österreichischer Rundfunk... Vergleichbar mit Pro 7, nur ohne Werbung - Yes! ^^) "Und dann kam Polly". Habe mir das gestern zwar nicht angesehen, aber ich kann mich noch genau an die Szene in der Bar erinnern, in der er Polly erklärt hat, dass man die Nüsse nie essen darf, weil die Leute mit den schmutzigen Händen da immer rein greifen :D
Aber ich vertrau dir mal einfach ^^
*Nüsschen nehm*
Vielen Dank für dein Vertrauen, ich kann dir ja jetzt im Nachhinein sagen, dass ich derzeit in Indien bin und das mit der Reinlichkeit der Nüße wahrscheinlich noch schlechter aussah als in der Bar bei Polly...
In diesem Sinne: Wohl bekomm's!
Gruß
Karlja -
karlja schrieb:
Ich hab mal bei Google ein wenig gesucht und Folgendes gefunden: http://forum.de.selfhtml.org/archiv/2007/3/t149540/
Versuch mal die beiden übergeordneten div-Elemente auch als position: relative zu definieren und schau, was dir dieses bringt.
Das Ganze scheint ein reines IE7-Feature zu sein und wird auch bei einer Suche bei Google recht häufig gefunden.
Also ich weiß nicht, was ich sagen soll...
Ich glaube, Danke, trifft es am Ehesten :D
Funktioniert prima :)
Vielen vielen lieben Dank für deine Bemühung!
sincer schrieb:
Gern geschehen - *Nüsschen anbiet*
^^
Gestern lief in ORF 1 (Österreichischer Rundfunk... Vergleichbar mit Pro 7, nur ohne Werbung - Yes! ^^) "Und dann kam Polly". Habe mir das gestern zwar nicht angesehen, aber ich kann mich noch genau an die Szene in der Bar erinnern, in der er Polly erklärt hat, dass man die Nüsse nie essen darf, weil die Leute mit den schmutzigen Händen da immer rein greifen :D
Aber ich vertrau dir mal einfach ^^
*Nüsschen nehm*
Vielen Dank für dein Vertrauen, ich kann dir ja jetzt im Nachhinein sagen, dass ich derzeit in Indien bin und das mit der Reinlichkeit der Nüße wahrscheinlich noch schlechter aussah als in der Bar bei Polly...
In diesem Sinne: Wohl bekomm's!
Gruß
Karlja
[/quote]
Hmm... genau dafür habe ich ja mein Immunsystem :D
Und ich muss sagen, die Indischen Nüsschen waren echt lecker :P
lg && big thx!
Sincer -
sincer schrieb:
karlja schrieb:
Ich hab mal bei Google ein wenig gesucht und Folgendes gefunden: http://forum.de.selfhtml.org/archiv/2007/3/t149540/
Versuch mal die beiden übergeordneten div-Elemente auch als position: relative zu definieren und schau, was dir dieses bringt.
Das Ganze scheint ein reines IE7-Feature zu sein und wird auch bei einer Suche bei Google recht häufig gefunden.
Also ich weiß nicht, was ich sagen soll...
Ich glaube, Danke, trifft es am Ehesten :D
Funktioniert prima :)
Vielen vielen lieben Dank für deine Bemühung!
Na also, geht doch... hab ich auch wieder was gelernt.
sincer schrieb:
karlja schrieb:
sincer schrieb:
Gern geschehen - *Nüsschen anbiet*
^^
Gestern lief in ORF 1 (Österreichischer Rundfunk... Vergleichbar mit Pro 7, nur ohne Werbung - Yes! ^^) "Und dann kam Polly". Habe mir das gestern zwar nicht angesehen, aber ich kann mich noch genau an die Szene in der Bar erinnern, in der er Polly erklärt hat, dass man die Nüsse nie essen darf, weil die Leute mit den schmutzigen Händen da immer rein greifen :D
Aber ich vertrau dir mal einfach ^^
*Nüsschen nehm*
Vielen Dank für dein Vertrauen, ich kann dir ja jetzt im Nachhinein sagen, dass ich derzeit in Indien bin und das mit der Reinlichkeit der Nüße wahrscheinlich noch schlechter aussah als in der Bar bei Polly...
In diesem Sinne: Wohl bekomm's!
Gruß
Karlja
Hmm... genau dafür habe ich ja mein Immunsystem :D
Und ich muss sagen, die Indischen Nüsschen waren echt lecker :P
lg && big thx!
Sincer
Wart mal ein paar Tage...
Gern geschehen!
Gruß
Karlja -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
