Weiter Links mit JS

[matibaski]

Hi zusammen.
Ich bin dran, eine Webseite für einen Verein zu machen.
Jedoch haben die einen sonderwunsch.
Sie wollen nicht, dass man scrollt beim Inhalt.
Also keine div's mit overflow und keine iframes und dass die ganze Seite gescrollt wird wollen sie auch nicht.
sie wollen, dass wenn der Text bis nach unten angekommen ist, dass ein Weiter-Link auftaucht.
Den Inhalt füge ich mit PHP include ein.

Kann man mit JS eine Funktion oder so machen, die so und soviele Zeichen aussucht, bis es nach unten ankommt, oder so und soviele Zeilen. Wenn diese gewisse Zeilenzahl angekommen ist, dann soll ein Weiter link erscheinen, dass der Benutzer auf weiter klickt.


Hat da jemand einen Ansatz?


MfG, matibaski

 

[mi-schi]

Echt schwierig, gerade, wenn man kein Java Script aktiviert hat, die Benutzbarkeit zu garantieren.
SELFHTML: JavaScript / Anwendungsbeispiele / Änderungen der Fenstergröße überwachen
wie man die fülle des divs beeinflussen kann ist mir aber unklar. Vielleicht mit der Größe des Textes und dann die Zeilen zählen, da dürfe aber nur Text auf der Seite stehen. Oder mit overflow:hidden und einer Java Script-Scrollbar:
Scrollbarer Layer

 

[matibaski]

Danke für den Ansatz.
Ja sowas wäre auch in Ordnung. Nun stellt sich das Problem, dass die eingefügte Datei (mit PHP include) nicht mit dem overflow:hidden; mitspielt

Also sieht folgendermassen aus:

  <div id="content">
   <div id="inhalt">
   <?php
    $ordner = "_private/"; // Pfad
    if(!isset($_GET['site'])) // Prüfen ob site= bestimmt ist
 {
  include $ordner."home.php"; // Wenn nicht, Standart einbinden
 }
 else // Wenn doch,
 {
  if(!file_exists($ordner.$_GET['site'].".php")) // Prüfen ob seite existiert
  {
   include $ordner."error.php"; // Wenn nicht, Error einfügen
  }
  else // Wenn doch,
  {
   include $ordner.$_GET['site'].".php"; // Gewünschte Seite einbinden.
  }
 }
   ?>
   </div>
   <hr>
   <a href="" onclick="return false" onmousedown="scrollDiv('content',8,this)">Hoch</a><br />
   <a href="" onclick="return false" onmousedown="scrollDiv('content',-8,this)">Runter</a>
  </div>

Das ist die Formatierung der CSS:

#content {
width:770px;
height:80%;
border:0px;
border-left:1px solid #000000;
float:left;
text-align:left;
padding:10px;
overflow:hidden;
position:relative;
}
#inhalt {
position:absolute;
width:100%;
height:100%;
border:0px;
top:0px;
left:0px;
padding:5px;
}

Und dein JS Code (optimiert ;))

 <script type="text/javascript">
 <!--
 //coded by [email protected] - be fair and do not remove this
 function scrollDiv(strId,intSpd) 
 {
  if ( objScrll=document.getElementById(strId) ) 
  {
   var top = parseInt(objScrll.style.top);
   if ( (intSpd>0) ? (top<0) : (top>parseInt(objScrll.parentNode.style.height)-objScrll.offsetHeight) ) 
   {
    objScrll.style.top = (top + intSpd) +"px";
 eval( 'tvar' + strId +'= setTimeout("scrollDiv(\''+ strId +'\',' + intSpd + ')",50)' );
  if (objSelf=scrollDiv.arguments[2]) 
  {
   objSelf.onmouseup = objSelf.onmouseout = new Function('fx','clearTimeout(tvar' + strId + ')'); 
  }
 }
   }
  }
 //-->
 </script>

Hat jemand ne Ahnung, wieso das include einfach das overflow:hidden ignoriert? Mit !important wills auch nicht.


MfG, matibaski

 

[mi-schi]

Hmm, vielleicht hat overflow:hidden ein Problem mit height:80%
Kannst du mal deine Seite online stellen, da könnte ich es besser sehen.
Übrgens, es ist nicht mein Script oder meine Seite

 

[matibaski]

Jo hier kann man es erblicken:
CKV - Christlicher Konzernverein

Ahso is das. Das Copyright lass ich mal, bin ja nicht asozial =).

Habe das hidden nun auf den Container #inhalt gesetzt, da in Inhalt als includiert wird.

Der Text macht geht einfach drüber hinaus und die Links für weiter und zurück sind einfach mitten in der eingefügten Datei.


MfG, matibaski

 

[mi-schi]

Bei mir funktioniert die Seite nicht.
Ich erkläre nochmal die Funktionsweise:
Höhe des Inhalts-div festlesen und auf overflow:hidden stellen. Dann das Javascript zum Scrollen einfügen und anders beschriften:
nächste Seite für runter
vorherige Seite für hoch
Dann mit einmal soweit scrollen, wie hoch der div-Inhalt ist.