Textbreite ermitteln

redX

Erfahrenes Mitglied
Ich habe einen Lauftext von rechts nach Links. Dazu muss ich die Breite des Textes in Erfahrung bringen.
Ich habe ein div mit mehrzeiligem HTML drin. Jetzt ermittle ich folgendermassen die Breite:

Javascript:
    //Get the text width
    document.getElementById('tag').style.whiteSpace='nowrap'
    var p=document.createElement('P')
    p.appendChild(document.createTextNode(sText))
    document.body.appendChild(p)
    textW=p.offsetWidth

Jetzt hört mein Lauftext etwas zu früh auf. Siehe Anhang.

Bin mir nicht sicher, aber ich glaube es liesst die Breite nicht richtig aus. Kann mir jemand dabei helfen, wie ich erfahren kann wie breit der Text wirklich ist, und ob der fehler überhaupt dort liegt? Dankeschön!

MFG
X
 

Anhänge

  • 26835attachment.jpg
    26835attachment.jpg
    107,5 KB · Aufrufe: 126
Sorry für den Doppelpost. Aber wollte den etwas Pushen, zumal ich noch Anmerkunen habe und diese verloren gehen würden (ich weiss das Pushen nicht gerade erwünscht ist...).

Javascript:
//Get the text width
    document.getElementById('tag').style.whiteSpace='nowrap'
    var p=document.createElement('P')
    p.appendChild(document.createTextNode(sText))
    document.body.appendChild(p)
    textW=p.offsetWidth

Ich weiss jetzt, wieso die Textbreite nicht richtig definiert ist. im sText steht ganz einfach nicht das richtige drin. sText wird folgendermassen zusammengestellt:

Javascript:
    var ss=document.getElementById('tag').childNodes;
    for (i=0;i<ss.length;i++) {
    	sText+=ss[i].nodeValue+" "
    }

Im Element "tag" sind verschiedene Childnodes mit ganz langen Tags.
Folgendes steht im Element "tag":
HTML:
<p id="tag">&nbsp;

&nbsp;+++&nbsp;
<a href="index.php?id=59&amp;tx_ttnews[tt_news]=96&amp;tx_ttnews[backPid]=1&amp;cHash=5be03dfdca" title="Graduation of Course 2005/2006">Graduation of Course 2005/2006</a>
&nbsp;+++&nbsp;
<a href="index.php?id=59&amp;tx_ttnews[tt_news]=95&amp;tx_ttnews[backPid]=1&amp;cHash=6cbf7e3a85" title="&quot;Accenture&quot; decides to join the Forum-SCM">"Accenture" decides to join the Forum-SCM</a>
&nbsp;+++&nbsp;
<a href="index.php?id=60&amp;tx_ttnews[tt_news]=89&amp;tx_ttnews[backPid]=1&amp;cHash=b4b9ccd3bd" title="News Flash September 2006">News Flash September 2006</a>
&nbsp;+++&nbsp;
<a href="index.php?id=62&amp;tx_ttnews[tt_news]=87&amp;tx_ttnews[backPid]=1&amp;cHash=944b26bd3a" title="Start of MBA-SCM 5th course">Start of MBA-SCM 5th course</a>
&nbsp;+++
	


&nbsp;--------- for more information click on the topics in the ticker -------&nbsp;</p>

Jetzt möchte ich nur den Text der Nodes auslesen, diese zusammenstellen in einen String und dann die Breite ermitteln. Hoffentlich war das verständlich.

Das Problem ist jedoch, das mir ss[ i ].NodeValue nur "null" zurückliefert. Selfhtml sagt da folgendes:
<h1>nodeValue</h1>

Speichert den Wert oder Inhalt eines Knotens. Bei Textknoten ist dies der Text, bei Attributknoten der zugewiesene Attributwert. Bei Elementknoten hat diese Eigenschaft den Wert null.

Ich schliesse mal daraus, das es bei den Nodes, die in ss stecken um Elementknoten handelt.

Kurz gesagt, wie komm ich jetzt also nur an die Texte ran. Also alles ausser den Tags?

Danke schonmal für lesen :-)

MFG
X
 
Nach langen knobeln und viel Try&Error hat redX nun selber eine Lösung gefunden.

An den Text, der gescrollt werden soll habe ich am Schluss noch einen leeren P Tag hinzugefügt mit der ID offset. Das sieht folgendermassen aus...

HTML:
<p id="tag">&nbsp;

&nbsp;+++&nbsp;
<a href="index.php?id=59&amp;tx_ttnews[tt_news]=96&amp;tx_ttnews[backPid]=1&amp;cHash=5be03dfdca" title="Graduation of Course 2005/2006">Graduation of Course 2005/2006</a>
&nbsp;+++&nbsp;
<a href="index.php?id=59&amp;tx_ttnews[tt_news]=95&amp;tx_ttnews[backPid]=1&amp;cHash=6cbf7e3a85" title="&quot;Accenture&quot; decides to join the Forum-SCM">"Accenture" decides to join the Forum-SCM</a>
&nbsp;+++&nbsp;
<a href="index.php?id=60&amp;tx_ttnews[tt_news]=89&amp;tx_ttnews[backPid]=1&amp;cHash=b4b9ccd3bd" title="News Flash September 2006">News Flash September 2006</a>
&nbsp;+++&nbsp;
<a href="index.php?id=62&amp;tx_ttnews[tt_news]=87&amp;tx_ttnews[backPid]=1&amp;cHash=944b26bd3a" title="Start of MBA-SCM 5th course">Start of MBA-SCM 5th course</a>
&nbsp;+++
	


&nbsp;--------- for more information click on the topics in the ticker -------&nbsp;<p id="offset"></p></p>

Nun kann man die breite ganz einfach mit offsetLeft auslesen:

Javascript:
textW = document.getElementById('offset').offsetLeft;

Naja, wieder etliche Stunden sinnlos verbraten. Aber mind. ist das Problem behoben (!)

Aber das wäre ja zu schön. Die Lösung funktioniert nur im Opera und Firefox.. Der IE zickt mal wieder rum... *wand*

MFG
X
 
Zuletzt bearbeitet:

Neue Beiträge

Zurück