Inhalt beschneiden!

[theBarny]

Ich will mit Javascript den Inhalt beschneiden und auf mehrere Seiten aufteilen. Der Text darf sich aber nur über 500 px nach unten erstrecken. Bisher hab ich das:

  
function setPages() {  
  var content = document.getElementById("content");  
  var oHeight = content.offsetHeight;  
  if (oHeight > 380) {  
    var node = content.firstChild.nextSibling;  
    var counter = 0;  
    while (node.offsetTop < 500) {  
      counter += node.innerHTML.length + 5 + node.tagName.length * 2;  
      node = node.nextSibling.nextSibling;  
    }  
    content.innerHTML = content.innerHTML.substring(0, counter);  
  }  
}  
  
window.onload = function() {  
setPages();  
}  

Das Problem ist nun Folgendes.. der Text wird in jedem Browser anders Beschnitten. Im Firefox, Chrome und Safari fehlen genau 4 Zeichen im Internet Explorer ganze 4 Absätze und im Opera ca 10 Zeichen. Dabei ist der Wert in der Variable counter die meine Zeichen zählt in jedem Browser gleich außer im Internet Explorer (frag mich warum..) nämlich 2263.. der Wert stimmt auch allerdings wird dann der Text vollkommen Falsch beschnitten.

Kann mir wer weiterhelfen ? :/

[Felix Riesterer]

Liebe(r) theBarny,

Der Text darf sich aber nur über 500 px nach unten erstrecken.

ist das eine "Design"-Entscheidung? Wenn ja, dann ist das eine lausige.

Der Besucher ist es gewöhnt, dass Inhalte, die nach unten hin nicht mehr in den Anzeigebereich passen, über scrolling erreichbar sind. Diese Erwartungshaltung (neudeutsch "user experience") bist Du gerade dabei zu brechen. Warum nur?

Liebe Grüße,

Felix Riesterer.

[theBarny]

ist das eine "Design"-Entscheidung? Wenn ja, dann ist das eine lausige.
Der Besucher ist es gewöhnt, dass Inhalte, die nach unten hin nicht mehr in den Anzeigebereich passen, über scrolling erreichbar sind. Diese Erwartungshaltung (neudeutsch "user experience") bist Du gerade dabei zu brechen. Warum nur?

Ich spiele gerne Rum :) und versuche besser in Javascript zu werden. Und dazu probier ich Sachen aus die ich vielleicht gerne einmal in eine Webseite einbauen würde. Natürlich ist das auch eine Designsache :D aber vielleicht finde ich ja einen praktischen Nutzen dafür :)

[theBarny]

Hat niemand eine Idee würd mich wirklich sehr interressieren!

[ChrisB]

Hi,

Ich will mit Javascript den Inhalt beschneiden und auf mehrere Seiten aufteilen. Der Text darf sich aber nur über 500 px nach unten erstrecken.

Das ist m.E. schon ein ziemlich fragwürdiger Ansatz.
Wo ein längerer Inhalt ggf. *sinnvoll* aufzuteilen ist, sollte sich eher aus der Struktur dieses Inhaltes selber ergeben, als aus einer vorgegebenen festen Höhe in Pixel.

while (node.offsetTop < 500) {

counter += node.innerHTML.length + 5 + node.tagName.length * 2;
      node = node.nextSibling.nextSibling;
    }
    content.innerHTML = content.innerHTML.substring(0, counter);
  }

  
Ich glaube nicht, dass du mit dieser Zählung einen \*sinnvollen\* „Schnittpunkt“ findest, an dem das HTML aufzuteilen ist.  
  
Du versuchst zwar irgendwie die Länge des Inhaltes und der Tags selber zu berücksichtigen - aber das Tags bspw. auch Attribute haben können, fällt bei deiner Berechnung vollkommen unter den Tisch.  
  
  
HTML-Code zu zerschnippseln, ist m.E. der vollkommen falsche Ansatz.  
  
Wenn überhaupt - siehe oben - würde ich das \*komplett\* im DOM handeln.  
  
Erst mal das am „tiefsten“ im DOM-Baum liegende Element suchen, dessen Oberkannte außerhalb der vorgegebenen Pixelhöhe liegt (Stichwort offsetTop).  
  
Dann von diesem aus wieder einen Schritt nach oben gehen - und aus dem darüber liegenden Element so lange Inhalte „heraus löschen“, bis es nicht mehr über den Grenze hinaus ragt. D.h., Kindelemente entfernen, und reine Textknoten in einzelne Wörter aufsplitten.  
  
Für die „Fortsetzung“ im nächsten Teil muss dann natürlich dieses Element und ggf. auch noch seine Vorfahren „geklont“ werden, und dabei vom Anfang die Elemente entfernt werden, die schon im vorherigen Teil untergebracht sind.  
  
Das ist keine triviale Aufgabe, und erfordert, dass du dich schon ziemlich sicher „im DOM bewegen“ kannst.  
Und den Aufwand ist es m.E. nicht wert. Kein sinnvolles Verhältnis von Kosten und Nutzen, und darüber hinaus wie gesagt eine reichlich willkürliche Teilung, die besser durch eine basierend auf der Struktur des Inhaltes ersetzt wäre.  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?