Text mir Javaspript auf bestimmten Bereich beschränken

K

koli.bri

Hallo.

Folgendes Problem:
Ich möchte den Inhalt eines DIV-Tags mit fester Breit und Inhalt auf diesen Bereich beschränken, und dann mit "Vor" und "Zurück"-Links versehen.

Hintergrund: Das Design der Seite ist ein Blatt Papier, und ein blatt scrollt man nicht, sondern man blättert es.
Sicherlich könnte ich jetzt haufenweise einzelne Seiten anfertigen, oder mir eine PHP-Funktion schreiben, welche die zu langen Texte kürzt (hab ich sogar schon), aber mit allen Serverseitigen Scripts habe ich ja das Problem, dass ich nur über komplizierte Umwege Informationen über Schriftgrad und Typ, und so weiter bekomme, ich denke, ihr wisst, was ich meine.

Die Idee ist es, das DIV-Element mit optionalen Scrollbalken zu versehen, mit CSS ja kein Problem. Beim Laden Der Seite wird erst einmal der gesammte Text geladen, und danach Wort für Wort gekürzt, biss das DIV-Element keinen Scrollbalken mehr hat.
Danach werden, falls der Text überhaupt gekürzt worden ist, Links für vor und zurückblättern gesetzt, ebenfalls via JavaScript.

Das Problem, das ich habe, ist, das laut SelfHTML die Eigenschaft "scrollbars" nur für das Fenster selbst verfügbar ist, und ich zudem recht bescheidene Fähigkeiten in Sachen JavaScript habe.
Daher dachte ich mir mal, ffrag ich doch mal bei den Kompetenten Leuten hier nach ^^

Falls sich hier jemand direkt ans schreiben machen will: Wichtig ist, dass der gesammte Text erst geladen, und danach abgeschnitten wird, damit man den Inhalt auch bei abgeschaltetem JavaScript noch ohne Probleme lesen kann.

Vielen Dank im Vorraus.
Gruß
Lukas
 
Also, falls ich dich richtig verstanden hab:

HTML:
<html>
<head>

<style type="text/css">
  #content {
    width: 300px;
    height: 150px;
    border: 1px solid #aaa;
    padding: 10px;
    overflow:hidden;
  }
</style>

<script language='javascript'>
  
  function scroll(name, dir, val) {  
    document.getElementById(name).scrollTop = document.getElementById(name).scrollTop - dir*val;    
  }

</script>

</head>
<body>


  <div id='content'>
    1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod bla...<br /><br />
    2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod bla...<br /><br />
    3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod bla...<br /><br />
    4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod bla...<br /><br />
    5. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod bla...<br /><br />
    6. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod bla...<br /><br />
  </div>  
  <a href="#" onclick="javascript:scroll('content',  1, 30)">&lt; &lt;</a> |
  <a href="#" onclick="javascript:scroll('content', -1, 30)">&gt; &gt;</a>

</body>
</html>


Das scrollt dein DIV nach Belieben.
name = Element-ID
dir = Richtung (1 = hoch, -1 = runter)
val = Scrollweite in px

Wenn du jetzt die Scrollweite und die Höhe des DIVs richtig berechnest, kannst du "seitenweise" blättern. Funktioniert in Firefox, Opera und IE (Safari kann ich mangels Mac (noch) nicht testen :>).
 
Mit Safari funktioniert's grandios tadellos.
 
Ein erster müder Blick drauf ist vielversprechend!!!
Jetzt muss ich mir nur noch Gedanken drüber machen, wie ich automatisch erkennen kann, wie weit man scrollen muss (bei unterschiedlichen Schriftarten/größen). Falls da jeman Ideen zu hat, die sind herzlich willkommen.
Die Änderrung, dass das ganze bei ausgeschaltetem JavaScript scrollbar ist, krieg ich alleine hin, denke ich.

Vielen lieben Dank.
gruß
Lukas
 
Verdammt noch mal, ich hab so lange darüber nachgedacht, wie ich dir, Sovok, klar mache, dass dies nur das "Ende" von dem ist, was ich wollte, bis ich kapiert habe, dass Du mir genau das geliefert hast, was ich wollte...


wenn ich genausoweit scrolle, wie das DIV-Element hoch ist, hat sich die Sache doch erledigt... Dann hab ich ja, was ich will... Weil der scrollt ja nach Pixeln, und mein DIV-Element ist ja auch mit einer festen Pixelangabe in der Höhe versehen... Mensch Jungs, ihr seid spitze!!!

Danke für diese Lösung, auch wenn ich etwas länger gebraucht habe, sie zu verstehen... Ich denk halt doch ein wenig komplizierter als ich dachte...

nochmals vielen lieben Dank
gruß
Lukas
 
Zuletzt bearbeitet von einem Moderator:
Oder so, ja ^^
Musst halt aufpassen, dass der Text immer ins DIV passt. Da die User Schriftgröße und Font in besseren Browsern ja selbst einstellen können (User-CSS), passt er vllt. nicht immer. Aber im Normalfall müsste es gehen.
 
Sovok schrieb:
Oder so, ja ^^
Musst halt aufpassen, dass der Text immer ins DIV passt. Da die User Schriftgröße und Font in besseren Browsern ja selbst einstellen können (User-CSS), passt er vllt. nicht immer. Aber im Normalfall müsste es gehen.

Genau da hab ich ja wie blöd überlegt, wie ich das mache...

Das ist aber absolut nicht das Problem. Ich scrolle ja nicht nach Zeilen, sondern ach Pixeln. Das DIV hat eine feste Pixelhöhe.
Das heißt, ich scrolle immer so viele Pixel, wie das DIV hoch ist. Damit hab ich meine seiten.
Vielleicht scroll ich noch ein wenig weniger, für den Fall, dass die untere Zeile nur halb drauf ist, aber das sind ja kleinigkeiten...

Dazu kommt noch eine Abfrage, ob der noch weiter Scrollen kann (das sollte doch gehen, oder9, um eventuell die Links auszublenden, wenn man am Ende/Anfang ist, aber das ist vorerst auch kein Muss...

nochmals, vielen dank.

gruß
Lukas
 
funzt im IE manchmal nicht (wie immer halt)

Vielen Dank erst einmal für den Tip mit dem Scrollen im obigen Beispiel. Ich habe ihn in abgewandelter Form gleich hier verwendet. Allerdings funktioniert er im Internet Explorer nicht.
Seltsam ist, dass die gleiche Implementierung zum Beispiel auf einer anderen Seite hier auch im IE einwandfrei geht.
Was läuft da nur falsch?
 
andere Lösung

Jetzt habe ich mich doch für die Lösung mit den iframes und scrollbar entschieden - auch wenn das mit Firefox nicht so gut aussieht. Aber bisher habe ich keine zufriedenstellende Lösung mit Javascript gefunden.
 
Zurück
Oben Unten