Ankündigung

Einklappen
Keine Ankündigung bisher.

Javascript / JQuery - Scrollbalken soll dauerhaft "unten" bottom bleiben

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Javascript / JQuery - Scrollbalken soll dauerhaft "unten" bottom bleiben

    Moin zusammen,

    ich habe ein kleines Problem und habe leider noch nicht die passende Lösung gefunden,
    ich habe mir eine kleine Shoutbox mittels, PHP, CSS, AJAX gebastelt was soweit auch super funtioniert nun will ich aber, daß wenn der Ausgabecontent "voll" ist und ein Scrollbalken an der rechten Seite zum vorschein kommt, daß dieser nach jeder Seitenaktualisierung bzw wenn eine neue Nachricht kommt immer im botton Bereich bleibt, damit man immer direkt die neusten Nachrichten sieht.
    Ich habe mit Javascript bzw. JQuery leider noch nicht soviel gemacht damit ich hier zu einer Lösung komme und wäre um einen Rat von euch sehr dankbar.

    Das ist der Ausgabeteil aus der Shoutbox Klasse:

    PHP-Code:
    public function shoutboxAusgabe(){
            
            
    $sql 'SELECT * FROM `shoutbox`';
            
            
    $result $this->dbConnect->query($sql);
            
            while(
    $row $result->fetch_object()){
                
    $shoutboxEintragTimestamp strtotime($row->shoutbox_eintrag_zeitpunkt);
                
    $shoutboxEintragZeitFormat date('d.m. - H:i' ,$shoutboxEintragTimestamp);
                echo
    '
                        <div class="shoutboxAusgabeTop">
                            # '
    .htmlspecialchars($row->id).' | '.htmlspecialchars($row->benutzer_name).' | '.htmlspecialchars($shoutboxEintragZeitFormat).' Uhr
                        </div>
                            <div class="shoutboxAusgabeContent">
                                '
    .nl2br(htmlspecialchars($row->shoutbox_eintrag)).'
                            </div>  
                    '
    ;
            }
        } 

    ----- In diesem Bereich ist auch der Scrollbalken -----

    <div id="shoutboxAusgabeBereich">
    <!-- Shoutbox Ausgabe -->
    </div>

    ----------------------------------------------------------------------------
    HTML-Code:
    <div id="shoutboxBereich">
                    <div id="shoutboxInfo">Shoutbox</div>
                        <form action="main.php" method="post">
    
                            <div id="shoutboxAusgabeBereich">
                                <!-- Shoutbox Ausgabe -->
                            </div>
                            
    
                                <div id="shoutboxTextareaBereich">
                                    <textarea name="shoutboxTextarea" class="shoutboxTextarea"></textarea>
                                </div>
    
                                    <div id="shoutboxButtonBereich">
                                        <input type="submit" name="shoutboxSenden" value="abschicken" class="shoutboxButton">
                                    </div>
                        </form>

    Liebe Grüße


    Ps: Hier mal ein Screenshot wie es ausschaut wenn ich meine Seite aktualisiere, dann sollte klar sein was ich meine:

  • #2
    https://jsfiddle.net/s9g5jekb/

    Kommentar


    • #3
      Genau so sollte es ausehen, nur das halt nicht im Textarea der Scrollbalken "unten" sein soll, sondern eben im kompletten Ausgagebereich von allen Posts.
      Sowas ähnliches wie in deinem Beispiel hatte ich auch schon probiert, hatte im Head-Bereich auf der main.php wo auch die Shoutbox angezeigt wird folgendes gehabt

      HTML-Code:
      <script type="text/javascript">
             document.getElementById('shoutboxAusgabeBereich').scrollTop = document.getElementById('shoutboxAusgabeBereich').scrollHeight;
      </script>
      nur leider ändert das nichts am Verhalten vom Scrollbalken.
      Wahrscheinlich habe ich es an der falschen Stelle eingebaut oder es funktioniert so eben nicht, muss ich vieleicht auch ein min-height für den Ausgabebereich in der CSS Datei angeben ? Hier ist mal ein Auszug davon

      Code:
      #shoutboxAusgabeBereich{
          width: 250px;
          height: 495px;
          overflow: auto;
          overflow-x: hidden;
          position: absolute;
      }
      Das ist eben der Bereich worin sich dann auch der Scrollbalken befindet, sobald die Höhe von 495 px erreicht wurden.

      Kommentar


      • #4
        https://jsfiddle.net/s9g5jekb/5/

        oder fiddle mal Deine Ausgabe, dann verstehe ich besser was Du meinst.

        Kommentar


        • #5
          Garnicht so einfach, müsste zum größten Teil den Code umschreiben, damit es beim fiddlen zu einer Ausgabe kommt ^^.

          Das Problem ist eigentlich nix großes, geht einfach nur darum, das der Scrollbalken auf der rechten Seite auf bottom bleibt um eben die neusten Posts zu sehen ( Wie in einem Chat z.B. )

          Hier nochmal ein Bild wie es ausschaut wenn die Seite aktualisiert wird obwohl unten dran noch mehr Nachrichten hängen

          Kommentar


          • #6
            Das ganze spielt sich eben hier:

            HTML-Code:
            <div id="shoutboxAusgabeBereich">
                    <!-- Shoutbox Ausgabe -->
            </div>
            ab und die eigentliche Ausgabe wird dann über Ajax reingeladen

            HTML-Code:
            <div id="shoutboxAusgabeBereich">
            bekommt ja auf der rechten Seite einen Scrollbalken sobald die Ausgaben eine Höhe von 495 px erreicht haben, aber dadurch das man ja von oben nach unten ließt, will man natürlich nicht immer runter scrollen müssen um neue Nachrichten zu lesen




            Kommentar


            • #7
              Dann müsste es doch so sein wie im geänderten fiddle von #4...

              Kommentar


              • #8
                Leider funktioniert es einfach nicht wie ich es möchte, so schwer kann es doch nicht sein den blöden Scrollbalken nach jeder Aktualisierung auf der botton Position zu halten :/

                Kommentar


                • #9
                  Wenn Du ja nicht so ein Geheimniskrämer wärst, und endlich den kompletten Code Posten würdest, wäre das Problem längst gelöst....

                  Kommentar


                  • #10
                    Das hat nix mit "Geheimniskrämerei" zu tun, wollte es nur so kompakt wie möglich halten, damit man es übersichtlich ist und die relevanten Teile zur Problemlösung zur Verfügung hat.
                    Ich kann aber auch gerne die kompletten Teile posten, welche zur Shoutbox gehören.

                    // Shoutbox Klasse:

                    PHP-Code:

                    namespace shoutbox;

                    require_once 
                    'Datenbank.php';

                    class 
                    Shoutbox
                    {
                        private
                            
                    $shoutboxEintrag,
                            
                    $benutzerName,
                            
                    $aktuelleZeitDateTime,
                            
                    $errorMsg,
                                
                            
                    $dbConnect;


                    //// Konstruktor ////
                        
                    public function __construct(){
                            
                    $this->getDbConnection();
                            
                    $this->getBenutzerName();
                            
                    $this->getAktuelleZeitDateTime();
                        }
                        
                    //// Setter ////
                        
                    public function setShoutboxEintrag($shoutboxEintrag){
                            
                    $this->shoutboxEintrag $shoutboxEintrag;
                        }
                        
                    //// Getter ////
                        
                    private function getBenutzerName(){
                            return 
                    $this->benutzerName $_SESSION['benutzerName'];
                        }
                        
                        private function 
                    getDbConnection(){
                            
                    $dbConnection = new \admin\Datenbank();
                            return 
                    $this->dbConnect $dbConnection->dbConnect;
                        }
                        
                        private function 
                    getAktuelleZeitDateTime(){
                            return 
                    $this->aktuelleZeitDateTime date('Y.m.d H:i:s');
                        }
                        
                    //// Methoden ////
                        
                    public function shoutboxEintragen(){
                            if(empty(
                    $this->shoutboxEintrag)){
                                return 
                    $this->errorMsg 'Erst eine Nachricht eingeben !';
                                
                            }else{
                                
                                
                    $this->shoutboxEintrag trim($this->shoutboxEintrag);
                                
                                
                    $sql 'INSERT INTO `shoutbox` (`benutzer_name`, `shoutbox_eintrag`, `shoutbox_eintrag_zeitpunkt`) VALUES (?,?,?)';
                                
                                
                    $stmt $this->dbConnect->prepare($sql);
                                
                    $stmt->bind_param('sss' ,$this->benutzerName ,$this->shoutboxEintrag ,$this->aktuelleZeitDateTime);
                                
                    $stmt->execute();
                                
                    $stmt->close();
                            }
                        }


                    // public function shoutboxAusgabe(){} wird über eine externe Datei via Ajax geladen.
                        
                        
                    public function shoutboxAusgabe(){
                            
                            
                    $sql 'SELECT * FROM `shoutbox`';
                            
                            
                    $result $this->dbConnect->query($sql);
                            
                            while(
                    $row $result->fetch_object()){
                                
                    $shoutboxEintragTimestamp strtotime($row->shoutbox_eintrag_zeitpunkt);
                                
                    $shoutboxEintragZeitFormat date('d.m. - H:i' ,$shoutboxEintragTimestamp);
                                echo
                    '
                                        <div class="shoutboxAusgabeTop">
                                            # '
                    .htmlspecialchars($row->id).' | '.htmlspecialchars($row->benutzer_name).' | '.htmlspecialchars($shoutboxEintragZeitFormat).' Uhr
                                        </div>
                                            <div class="shoutboxAusgabeContent">
                                                '
                    .nl2br(htmlspecialchars($row->shoutbox_eintrag)).'
                                            </div>
                                    '
                    ;
                            }
                        }
                        
                        
                    //// Destruktor ////
                        
                    public function __destruct(){
                            
                    $this->dbConnect->close();
                        }

                    // HTML Code dazu:

                    HTML-Code:
                    <?php
                    session_start();
                    
                    if(file_exists('class/BenutzerLogin.php') and file_exists('class/Shoutbox.php')){
                        require_once 'class/BenutzerLogin.php';
                        require_once 'class/Shoutbox.php';
                    }
                    
                    $benutzerSession = new \benutzer\BenutzerLogin();
                    $benutzerSession->benutzerSession();
                    
                    ?>
                    <!DOCTYPE html>
                    <html>
                        <head>
                            <meta charset="utf-8">
                            <title>Main</title>
                            <link href="css/main.css" rel="stylesheet" type="text/css"/>
                            <link href="css/shoutbox.css" rel="stylesheet" type="text/css"/>
                            <script src="js/xhrObjektErzeugen.js" type="text/javascript"></script>
                            <script src="js/shoutboxAusgabe.js" type="text/javascript"></script>
                            <script src="js/xhrServerzeit.js" type="text/javascript"></script>
                        </head>
                        <body>
                            <div id="content">
                                <div id="shoutboxBereich">
                                    <div id="serverzeitAusgabe"> <!-- Serverzeit wird hier ausgegeben --> </div>
                                        <div id="shoutboxInfo"> Shoutbox </div>
                    
                                            <form action="main.php" method="post">
                    
                                       <!--- Hier soll der Scrollbalken immer die bottom Position einnehmen, wenn z.B. die Seite neu geladen wird ---->
                                                <div id="shoutboxAusgabeBereich">
                                                    <!-- Shoutbox Ausgabe -->
                                                </div>
                    
                                                    <div id="shoutboxTextareaBereich">
                                                        <textarea name="shoutboxTextarea" class="shoutboxTextarea"></textarea>
                                                    </div>
                    
                                                        <div id="shoutboxButtonBereich">
                                                            <input type="submit" name="shoutboxSenden" value="abschicken" class="shoutboxButton">
                                                        </div>
                                            </form>
                                            <?php
                                                if(isset($_POST['shoutboxSenden'])){
                                                    $shoutboxEintrag = new \shoutbox\Shoutbox();
                                                    $shoutboxEintrag->setShoutboxEintrag($_POST['shoutboxTextarea']);
                                                    $shoutboxEintrag->shoutboxEintragen();
                                                }
                                            ?>
                                </div>
                            </div>
                        </body>
                    </html>

                    // xhrObjektErzeugen.js

                    Code:
                    function xhrObjektErzeugen() {
                        var xhrObj = null;
                    
                        if (window.XMLHttpRequest) {
                    
                            xhrObj = new XMLHttpRequest();
                    
                        } else if (window.XMLHttRequest) {
                    
                            xhrObj = new ActiceXObject('Microsoft.XMLHTTP');
                    
                        } else {
                    
                            xhrObj = new ActiveXObject('MSXML2.XMLHTTP');
                    
                        }
                    
                        return xhrObj;
                    }

                    // shoutboxAusgabe.js

                    Code:
                    function sendReqShoutboxAusgabe(){
                        var xhrObjekt = xhrObjektErzeugen();
                        
                        xhrObjekt.open('GET' ,'shoutboxAusgabe.php?z=' + Math.random() ,'TRUE');
                        xhrObjekt.setRequestHeader('Content-type', 'application/x-www-formurlen');
                        xhrObjekt.onreadystatechange = function(){
                            
                            if(xhrObjekt.readyState == 4 && xhrObjekt.status == 200){
                                window.document.getElementById('shoutboxAusgabeBereich').innerHTML = xhrObjekt.responseText;
                            }
                        }
                        
                        xhrObjekt.send(null);
                    }
                    
                    window.setInterval(sendReqShoutboxAusgabe, 1000);


                    // shoutboxAusgabe.php welche im HTML-Teil in <div id="shoutboxAusgabeBereich"> <!-- Shoutbox Ausgabe --> </div> reingeladen wird und wo auch nach der Höhe von 495 px an Posts der Scrollbalken auf der rechten Seite erscheint.

                    PHP-Code:
                    session_start();

                    if(
                    file_exists('class/Shoutbox.php')){
                        require_once 
                    'class/Shoutbox.php';
                    }

                    $shoutboxAusgabe = new \shoutbox\Shoutbox();
                    $shoutboxAusgabe->shoutboxAusgabe(); 

                    // CSS Datei zur Shoutbox

                    Code:
                    #shoutboxBereich{
                        margin-top: 61.5px;
                        margin-left: 1010px;
                        width: 250px;
                        height: 605px;
                        background-color: #b2b2b2;
                        position: absolute;
                    }
                    
                    #serverzeitAusgabe{
                        margin-top: 5px;
                        width: 250px;
                        text-align: center;
                        font-size: 12px;
                        color: #ffee00;
                    }
                    
                    #shoutboxInfo{
                        width: 250px;
                        text-align: center;
                        font-family: cursive;
                        font-size: 20px;
                    }
                    
                    #shoutboxAusgabeBereich{
                        width: 250px;
                        height: 495px;
                        overflow: auto;
                        overflow-x: hidden;
                        position: absolute;
                    }
                    
                    .shoutboxAusgabeTop{
                        margin-top: 5px;
                        color: #ffffff;
                        font-size: 11px;
                        font-weight: bold;
                        background-color: #808080;
                    }
                    
                    .shoutboxAusgabeContent{
                        margin-top: 1px;
                        font-size: 14px;
                        background-color: #bdbdbd;
                    }
                    
                    #shoutboxTextareaBereich{
                        margin-top: 500px;
                        position: absolute;
                    }
                    
                    .shoutboxTextarea{
                        width: 247px;
                        height: 75px;
                        background-color: #bdbdbd;
                    }
                    
                    #shoutboxButtonBereich{
                        margin-top: 580px;
                        position: absolute;
                    }
                    
                    .shoutboxButton{
                        width: 250px;
                        height: 20px;
                        line-height: 20px;
                    }
                    Ob es das ganze für diesen Scrollbalken nun übersichtlicher macht ist die Frage.

                    Kommentar


                    • #11

                      shoutboxAusgabeBereich.scrollTop = shoutboxAusgabeBereich.scrollHeight; wie in #4 geschrieben ist schon richtig. Beim ersten Laden des Dokuments warten bis DOM ready dann setzen. Weiterhin muss es nach onreadystatechange ebenfalls gesetzt werden. Warum es wahrscheinlich nicht klappt ist, dass innerHTML noch nicht fertig gerendert ist und somit ein Timing-Problem ensteht. Du musst also warten bis innerHTML... fertig ist und dann erst die Scroll-Position setzen.

                      Kommentar


                      • #12
                        Vielen lieben Dank für deine Gedult, jetzt funktioniert es so wie ich es wollte.. war eine schwere Geburt xD.

                        LG
                        Ascalon

                        Kommentar

                        Lädt...
                        X