Anzeige

JS autom. Blätterfunktion?

JS autom. Blätterfunktion? | PSD-Tutorials.de

Erstellt von h4nnes, 25.05.2008.

  1. h4nnes

    h4nnes Nicht mehr ganz neu hier

    Dabei seit:
    31.05.2005
    Beiträge:
    225
    Geschlecht:
    männlich
    Software:
    Photoshop,Corel, Dreamweaver
    Kameratyp:
    Ixus 500
    JS autom. Blätterfunktion?
    Hallo,
    Ich bin noch ziemlich neu in Sachen Javascript.
    Kurz mein Problem. Bin gerade dabei eine Seite für ein Aushangssystem (LCD-Bildschirm) zu machen. Das Ausgangssystem wird aus einer mySQL Datenbank gefüttert und dann einfach auf einem LCD als "Homepage" dargestellt. Mein Problem ist jetz, dass ich irgendwie kontrollieren muss,dass die Seite nicht zu "lang" wird, da man ja nicht scrollen kann zumindestens nicht von Hand.
    Meine Idee war ein Autoscroller, der auch super funktioniert, aber irgendwie auch nicht das ware ist.
    Gibt es denn irgendwie ne automatische Blätterfunktion, die zB eine Seite auf 1000 Px überprüft und dann auf die nächste Seite springt ? Oder was meint ihr ist die beste Lösung?

    Danke schonmal.

    Gruß Hannes
     
    #1      
  2. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    JS autom. Blätterfunktion?
    AW: JS autom. Blätterfunktion?

    Ja, es besteht die Möglichkeit den ganzen Text per string methoden auch in javascript in subStrings aufteilen und und über eventhandler durchblättern.
    ob man das per höhe machen kann, ist zweifelhaft, aber man könnte es zumindest auf eine Anzahl von Zeichen begrenzen
     
    #2      
  3. h4nnes

    h4nnes Nicht mehr ganz neu hier

    Dabei seit:
    31.05.2005
    Beiträge:
    225
    Geschlecht:
    männlich
    Software:
    Photoshop,Corel, Dreamweaver
    Kameratyp:
    Ixus 500
    JS autom. Blätterfunktion?
    AW: JS autom. Blätterfunktion?

    danke euch beiden mal! hmm okay, vielleicht ist das dann doch nicht so gut, denn es sollte ja auch nicht unbedingt mitten in nem Text der Umbruch kommen.

    könnte man diesen autoscroller hier vielleicht so umschreiben, dass er nur scrollt, wenn es auch zum scrollen ist und dass wenn zB nur ein Eintrag drinsteht nicht gescrollt werden muss?

    Code (Text):
    1.  
    2.  
    3. stylesheet" href="./style.css" type="text/css" media="screen">
    4.  
    5. <SCRIPT language="JavaScript">
    6. // begin absolutely positioned autoscroll area object scripts
    7.  
    8. /*
    9. Extension developed by David G. Miles (www.z3roadster.net/dreamweaver)
    10. Original Scrollable Area code developed by Thomas Brattli (www.bratta.com)
    11. To add more shock to your site, visit www.DHTML Shock.com
    12. */
    13.  
    14. function verifyCompatibleBrowser(){
    15.     this.ver=navigator.appVersion
    16.     this.dom=document.getElementById?1:0
    17.     this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
    18.     this.ie4=(document.all && !this.dom)?1:0;
    19.     this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
    20.     this.ns4=(document.layers && !this.dom)?1:0;
    21.     this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
    22.     return this
    23. }
    24. bw=new verifyCompatibleBrowser()
    25. lstart=300
    26. loop=true  
    27. speed=100
    28. pr_step=1
    29. function ConstructObject(obj,nest){
    30.     nest=(!nest) ? '':'document.'+nest+'.'
    31.     this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
    32.     this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
    33.     this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
    34.     this.newsScroll=newsScroll;
    35.     this.moveIt=b_moveIt; this.x; this.y;
    36.     this.obj = obj + "Object"
    37.     eval(this.obj + "=this")
    38.     return this
    39. }
    40. function b_moveIt(x,y){
    41.     this.x=x;this.y=y
    42.     this.css.left=this.x
    43.     this.css.top=this.y
    44. }
    45. //Makes the object scroll up
    46. function newsScroll(speed){
    47.     if(this.y>-this.scrollHeight){
    48.         this.moveIt(0,this.y-pr_step)
    49.         setTimeout(this.obj+".newsScroll("+speed+")",speed)
    50.     }else if(loop) {
    51.         this.moveIt(0,lstart)
    52.         eval(this.obj+".newsScroll("+speed+")")
    53.       }
    54. }
    55. //Makes the object
    56. function InitialiseAutoScrollArea(){
    57.     objContainer=new ConstructObject('divASContainer')
    58.     objContent=new ConstructObject('divASContent','divASContainer')
    59.     objContent.moveIt(0,lstart)
    60.     objContainer.css.visibility='visible'
    61.     objContent.newsScroll(speed)
    62. }
    63. // end absolutely positioned scrollable area object scripts
    64.  
    65. </SCRIPT>
    66.  
    67. <BODY bgcolor="#999999" onLoad="InitialiseAutoScrollArea();">
    68.  
    69. <!-- begin absolutely positioned autoscroll area object-->
    70. <h1 id="header">Display</h1>
    71. <h1 id="sidebar">Sidebar</h1>
    72. <DIV id="divASContainer">
    73.   <DIV id="divASContent"> <B>Scroll Area Content
    74.     Start</B>
    75.     <P> Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat.</P>
    76.     <P>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor cum soluta nobis eligend optio comque nihil quod a impedit anim id quod maxim placeat facer possim omnis es voluptas assumenda est, omnis dolor repellend. Temporem autem quinsud et aur office debit aut tum rerum necesit atib saepe eveniet ut er repudiand sint et molestia non este recusand.</P>
    77.     <P>Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat.</P>
    78.     <P>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor cum soluta nobis eligend optio comque nihil quod a impedit anim id quod maxim placeat facer possim omnis es voluptas assumenda est, omnis dolor repellend. Temporem autem quinsud et aur office debit aut tum rerum necesit atib saepe eveniet ut er repudiand sint et molestia non este recusand.</P>
    79.     <B>Scroll Area Content End</B> </DIV>
    80. </DIV>
    81. <!-- end absolutely positioned autoscroll area object -->
    82.  
    83.  
     
    Zuletzt bearbeitet: 25.05.2008
    #3      
  4. h4nnes

    h4nnes Nicht mehr ganz neu hier

    Dabei seit:
    31.05.2005
    Beiträge:
    225
    Geschlecht:
    männlich
    Software:
    Photoshop,Corel, Dreamweaver
    Kameratyp:
    Ixus 500
    JS autom. Blätterfunktion?
    AW: JS autom. Blätterfunktion?

    hmm irgendwie ist das mit dem AutoScroll doch net so das ware...

    Bräucht doch ne Blätterfunktion ,die automatisch nach einer bestimmten Zeilenanzahl eine neue Seite generiert und dann durch die einzelnen Seiten läuft, dass vll jede 20 Sekunden eine neue Seite angezeigt wird.

    Ist sowas möglich, wenn ja wie?
     
    #4      
  5. h4nnes

    h4nnes Nicht mehr ganz neu hier

    Dabei seit:
    31.05.2005
    Beiträge:
    225
    Geschlecht:
    männlich
    Software:
    Photoshop,Corel, Dreamweaver
    Kameratyp:
    Ixus 500
    JS autom. Blätterfunktion?
    AW: JS autom. Blätterfunktion?

    *push*

    hab jetzt mal was gefunden, nur leider klappt die Meta-Weiterleitung und die Darstellung der Tabellen noch net so ganz, könntest mir vielleicht dies bezüglich nochmals behilflich sein?

    Wäre es denn möglich das Script von der Anzahl an Zeilen und nicht von der Anzahlt an Datenbank einträgen abhängig zu machen?

    hier mal der Code:

    Code (Text):
    1.  
    2. <html>
    3. <head>
    4. <title>Weiterleitung</title>
    5. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    6.  
    7. <meta http-equiv="refresh" content="3; URL=http://localhost/verteiler/display_page/display_bl.php?<?php $_GET["seite="]++; ?>.php">
    8.  
    9. </head>
    10. <body>
    11.  
    12.  
    13. <?php
    14.  
    15. $seite = $_GET["seite"];  //Abfrage auf welcher Seite man ist
    16.  
    17. //Wenn man keine Seite angegeben hat, ist man automatisch auf Seite 1
    18. if(!isset($seite))
    19.    {
    20.    $seite = 1;
    21.    }
    22.  
    23. //Verbindung zu Datenbank aufbauen
    24.  
    25. include("../config.php");  
    26.  
    27.  
    28. //Einträge pro Seite
    29. $eintraege_pro_seite = 4;
    30.  
    31. //Ausrechen welche Spalte man zuerst ausgeben muss:
    32.  
    33. $start = $seite * $eintraege_pro_seite - $eintraege_pro_seite;
    34.  
    35.  
    36. //Tabelle Abfragen
    37. //Tabelle hei&szlig;t hier einfach: Tabelle
    38. $abfrage = "SELECT text,display,b1 FROM eintrag LIMIT $start, $eintraege_pro_seite";
    39. $ergebnis = mysql_query($abfrage);
    40.  
    41. //while($row = mysql_fetch_object($ergebnis))
    42.     while($row = mysql_fetch_array($ergebnis))
    43.     {
    44.      $b1.="<tr><td>".$row['text']."<hr /></td></tr>"; // Hier die Ausgabe der Einträge
    45.      echo "$b1";
    46.    }
    47.  
    48.  
    49. //Jetzt kommt das "Inhaltsverzeichnis",
    50. //sprich dort steht jetzt: Seite: 1 2 3 4 5
    51.  
    52.  
    53. //Wieviele Einträge gibt es überhaupt
    54.  
    55. //Wichtig! Hier muss die gleiche Abfrage sein, wie bei der Ausgabe der Daten
    56. //also der gleiche Text wie in der Variable $abfrage, blo&szlig; das hier das LIMIT fehlt
    57. //Sonst funktioniert die Blätterfunktion nicht richtig,
    58. //und hier kann nur 1 Feld abgefragt werden, also id
    59.  
    60. $result = mysql_query("SELECT * FROM eintrag");
    61. $menge = mysql_num_rows($result);
    62.  
    63. //Errechnen wieviele Seiten es geben wird
    64. $wieviel_seiten = $menge / $eintraege_pro_seite;
    65.  
    66. //Ausgabe der Seitenlinks:
    67. echo "<div align=\"center\">";
    68. echo "<b>Seite:</b> ";
    69.  
    70.  
    71. //Ausgabe der Links zu den Seiten
    72. for($a=0; $a < $wieviel_seiten; $a++)
    73.    {
    74.    $b = $a + 1;
    75.  
    76.    //Wenn der User sich auf dieser Seite befindet, keinen Link ausgeben
    77.    if($seite == $b)
    78.       {
    79.       echo "  <b>$b</b> ";
    80.       }
    81.  
    82.    //Aus dieser Seite ist der User nicht, also einen Link ausgeben
    83.    else
    84.       {
    85.       echo "  <a href=\"?seite=$b\">$b</a> ";
    86.       }
    87.  
    88.  
    89.    }
    90. echo "</div>";
    91. ?>
    92. </body>
    93. </html>
    94.  
    Danke schonmal
     
    #5      
x
×
×