Positionsbestimmung

[Martin Hein]

Hallo Forum,

ich weiss, dass man die XY-Position eines HTML-Elements (z.B. <td)
per Javascript herausfinden kann, wenn man es erstmal geschafft hat
das Element als Objekt anzusprechen. Im Zweifel gibt man der Zelle
einfach eine "id='Zelle'" und benutuzt .getElementById(('Zelle') ;)

Nun stellen wir uns vor, dass in der Tabellenzelle ein Text steht
(der einfachheit halber 'plain' ohne jegliche weiteren Steuerzeichen)

Ich hätte gerne gewusst, an welcher XY-Koordinate welches Zeichen
steht ;) Der Einfachheit halber formuliere ich die Frage erst
einmal anders herum: An welcher XY-Position wird das z.B. 100ste
Zeichen dargestellt ?

Ich hab keine Ahnung, wie ich da hin komme ?

document.getElementById('Zelle').innerHTML.charAt(50).offsetHeight
funktioniert natürlich nicht.

hat jemend eine Idee ?

tausend Dank und
beste gruesse,
heinetz

[Gernot Back]

Hallo Martin,

ich weiss, dass man die XY-Position eines HTML-Elements (...)
per Javascript herausfinden kann, wenn man es erstmal geschafft hat
das Element als Objekt anzusprechen.

Nun stellen wir uns vor, dass in der Tabellenzelle ein Text steht
(der einfachheit halber 'plain' ohne jegliche weiteren Steuerzeichen)

document.getElementById('Zelle').innerHTML.charAt(50).offsetHeight
funktioniert natürlich nicht.

hat jemend eine Idee ?

Dann schachtele doch jeweils um die Zeichen 1 bis 49, dieses 50. Zeichen, sowie das 51. bis letzte Zeichen dynamisch über document.createElement() SPAN-Elemente, deren absolute Position du dann über offsetWidth und offsetHeight in Verbindung mit offsetParent auslesen kannst, nachdem du sie über appendChild() wieder hintereinandergefügt hast.

Wofür soll das denn gut sein? Vielleicht gibt es einfachere Wege zu deinem Ziel.

Gruß Gernot

[Gernot Back]

Hallo nochmal,

verdammt!

deren absolute Position du dann über offsetWidth und offsetHeight (...)

ich meinte natürlich offsetLeft und offsetTop.

Gruß Gernot

[Martin Hein]

Hallo Gernot,

Wofür soll das denn gut sein?

Ich habe ein Content-Pfegetool gebaut, dass wir folgt funktioniert:
Ein DB-Inhalt 'Text' wird in einer Tabellenzelle dargestellt. Die
Editiermaske besteht aus einer Textarea, in die 'Text' geschrieben
wird. Dmait das ganze schön wysiwyg ist, wird die Textarea dynamisch
über die Tabellenzelle geschrieben, mit den deren Paramter (width, und height) ausgestattet und mit dessen innerHTML befüllt.

Wenn in der Zelle ein image (style=float) ist bricht der text
automatisch um. Das Tag wird in der Editiermaske nicht dargestellt,
aber ich will den automatischen Umbruch manuell mit js nachbilden.

schoenen dank und
gruss,
martin

[Gernot Back]

Hallo Martin,

Ich habe ein Content-Pfegetool gebaut, dass wir folgt funktioniert:
Ein DB-Inhalt 'Text' wird in einer Tabellenzelle dargestellt. Die
Editiermaske besteht aus einer Textarea, in die 'Text' geschrieben
wird. Dmait das ganze schön wysiwyg ist, wird die Textarea dynamisch
über die Tabellenzelle geschrieben, mit den deren Paramter (width, und height) ausgestattet und mit dessen innerHTML befüllt.

Böte es sich denn da nicht an, statt mit einer drübergelegten Textarea, mit einem IFRAME und einem darin eingebundenen Dokument mit designMode='on' bzw. contenteditable=true zu arbeiten? (letzteres lässt sich dummerweise zwar auf alle möglichen Elemente anwenden, nicht aber Tabellenzellen)

Wenn in der Zelle ein image (style=float) ist bricht der text
automatisch um. Das Tag wird in der Editiermaske nicht dargestellt,
aber ich will den automatischen Umbruch manuell mit js nachbilden.

Dann setz doch an die Stelle wo das floatende Bild ist, ein '\n'; oder  verstehe ich das Problem noch nicht ganz?

  
document.myForm.myArea.value='erste Zeile\nzweiteZeile'  

Gruß Gernot

[Gernot Back]

Hallo nochmal,

Wenn in der Zelle ein image (style=float) ist bricht der text
automatisch um. Das Tag wird in der Editiermaske nicht dargestellt,
aber ich will den automatischen Umbruch manuell mit js nachbilden.

Dann setz doch an die Stelle wo das floatende Bild ist, ein '\n'; oder  verstehe ich das Problem noch nicht ganz?

document.myForm.myArea.value='erste Zeile\nzweiteZeile'

  
Wenn du auch die anderen Umbrüche nachbilden willst, wäre es das Einfachste, das Aussehen der Tabellenzelle an das der Textarea anzupassen und nicht umgekehrt, indem du beide mit einer diktengleichen Schrift darstellst, also `font-family:"Courier New", Courier, monospace"`{:.language-css}. Die Tabelle formatierst du dann mit `table-layout:fixed;`{:.language-css} und definierst die Breite der [Spalte](http://de.selfhtml.org/html/tabellen/aufbau.htm#vordefinieren), wo der eingegebene Text stehen soll, mit soundsoviel "em", entsprechend dem COL-Wert des TEXTAREA-Elements.  
  
Gruß Gernot

[Mrtin Hein]

Hallo Gernot,

Böte es sich denn da nicht an, statt ... mit designMode='on'

ich hab mir die 'editable'-Funktionalität nur kurz mal angetan,
den das klingt ja so verlockend, wenn man für ContentManagement
nach Lösungen sucht ;) das Problem dabei ist nur, dass man es
nicht vernünftig kontrollieren kann, bzw. habe ich noch nicht
herausgefunden, wie. Damit lassen sich ja in die editable Area
alle möglichen Sachen pasten, wie halt bei Word und es ist nicht
Sinn der Sache, dass der ContentMangager soviel Einfluss auf das
Layout hat.

Dann setz doch an die Stelle ... Problem noch nicht ganz?

Genau das will ich ja machen, nur dass ich eben herausfinden muss,
wo durch das floatende Bild ein Zeilenumbruch entstehen würde. Ich
skiziere nochmal die Situation:

1. Satus Quo
------------
Ich stelle den Text in einer Tabellenzelle dar, für die ein gewisser
Style fest definiert ist (z.B. Breite) und eine gewisser Style durch
den Inhalt entsteht (Höhe). Alle massgeblichen Eigenschaften dieser
Zelle lese ich nach Aufbau der Seite aus, speicher sie zwischen und
ersetzte (ich lege garnix drüber) den inhalt der zelle mit einer
Textarea, der ich alle Eigenschaften der Tabellenzelle zuweise. So
wird der editierbare Inhalt genauso dargestellt, wie der
dargestellte. Einzige Abweichung: Die wenigen Formatiertags, die ich
zulasse (b, i, u) verfälschen die Darstellung. Das wird
vernachlässigt.

2. neue Aufgabenstellung
------------------------
Innerhalb meiner Zelle soll optional ein Bild mit umfliessenden Text
eingebunden werden (style=float). Im Quelltext der letztendlichen
dargestellten Seite steht das img-Tag mit in der Tabellenzelle. Damit
 beim Editieren in der textarea kein Code zu sehen ist, stelle ich
das Bild nicht in der Tabellenzelle dar. Ich versuche die Darstellung nun nachzubilden, indem ich das Bild als Hintergrundbild der Textarea
definiere, damit im Editiermodus alles so dargestellt wird, wie in
der letztendlichen Ausgabe. Damit dieses Hintergrundbild nicht durch
Text verdeckt wird, muss ich herausfinden, wo der Text bei der
Ausgabe automatisch umbrechen wird (denn style:float erzeugt ja keine
br-tags). Ich müsste also überprüfen, in welcher XY-Position welches
Zeichen dargestellt wird und wenn eine best. Position erreicht ist,
ein '<br>' in den Text schreiben, dass dann im Editiermodus
automatisch zu '\n' konvertiert würde und den gleichen Umbruch in
der textarea zufoge hätte.

beste gruesse,
martin