kostenloser Webspace werbefrei: lima-city


Scrollen im Chat

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    soulworld

    soulworld hat kostenlosen Webspace.

    Huhu ich habe eine Shoutbox gebaut jetzt habe ich ien Problem es scrollt nicht automatisch nach unten ich benutze bisher:
    <script language="JavaScript">
    <!--
    function AutomatischScrollen()
    {
       window.scrollBy(0,1);
        Scrollen();
    }
     
    function Scrollen()
    {
        GescrollteZeit = window.setTimeout("AutomatischScrollen()", 1);
    }
    //-->
    </script>
    
    <body onload="AutomatischScrollen();">


    Allerdings scrollt es die ganze Zeit nach unten saodass ich die letzten Chateinträge nicht lesen kann. ich möchte jetzt das es nur scrollt wen es ein neuen eintrag in der Chat DB gibt..
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Hi
    Ich hoffe, dass ich dich mit meiner Antwort nicht nerve, da sie dein Problem ja nur indirkt löst.

    Ich habe das so geregelt, dass neue Einträge nach oben geschrieben werden. Dass ist meiner Meinung nach auch Sinnvoller, da man dann nur scrollen muss, um ältere Beiträge zu lesen, und das neuste direct im Blick hat! Falls du die Daten aus einer db ausliest, schreibst du einfach ein DESC ans Ende der Zeile also zB so:

    Tabelle: (Shoutbox)
    Spalte1 id, int(10), ai, Primary
    Spalte2 absender, text
    Spalte3 nachricht, text
    Spalte4 time, date

    <?php
    //db verbindung aufbauen
    ?>
    ...
    <?php
    $abfrage = "SELECT * FROM Shoutbox ORDER BY id DESC";   //statt Shoutbox dann dein Tabellenname 
    $ergebnis = mysql_query($abfrage);
    while($row = mysql_fetch_object($ergebnis))
       {
       echo "<div class=\"shoutbox_spalte\">";
       echo $row->absender." schrieb um ".$row->time." :<br>";
       echo "$row->nachricht";
       echo "</div>";
       }
    ?>


    Hoffe das hilft dir weiter, ansonsten lass ich mir mal was einfallen DD
    MVG

    Beitrag zuletzt geändert: 19.2.2010 21:26:05 von programtools
  4. Autor dieses Themas

    soulworld

    soulworld hat kostenlosen Webspace.

    habe ich auch shcon überlegt finde das aber unschön.. Weiß keiner ne Lösung? :/
  5. kannst du mal das script im Zusammenhang posten?? Eventuell kann ich dir helfen aber dafür muss ich wissen wie die Shoutbox aufgebaut ist. MVG
  6. soulworld schrieb:
    habe ich auch shcon überlegt finde das aber unschön.. Weiß keiner ne Lösung? :/


    Also ein Lösung wäre das Du den inhalt der Shoutbox in einem iframe ausgibst und am ende des Textes immer einen Anker setzt.
    Das Iframe wird dann neugeladen mit dem Anker (urlderseite.htm#ende):

    Blabla hallo
    soafasdgjajpjpa
    adgopdasogkdasüghk
    <a href="ende"></a>undhierdieletztenachricht


    Falls aber jemand eine bessere Lösung weiss, würe ich die auch mal gerne wissen :tongue:
  7. Ich sag mal: Javascript scrollIntoView().

    Ich hatte ein ähnliches Problem.

    Als Lösungsansatz:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>chattest<title>
    		<link rel="stylesheet" type="text/css" href="css/standard.css">
    		<script type="text/javascript" src="js/core.js"></script>
    	</head>
    	<body>
    		<div id="main">
    			<div id="chattext">
    				<div class="text">bla</div>
    			</div>
    			<div id="ehlo"></div>
    		</div>
    		<a href="javascript:expand('foobar');">klick</a>
    	</body>
    </html>
    sowie
    #main{
    	height:300px;
    	width:300px;
    	border:solid 1px #000;
    	overflow:auto;
    	padding:5px;
    	}
    .text{
    	background:#DDD;
    	margin:0px 0px 5px 0px;
    	}
    und
    function expand(text){
    	var chatcontent = document.getElementById('chattext');
    	var newText = document.createElement('DIV');
    	var anchor = document.getElementById('ehlo');
    	newText.className = "text";
    	newText.innerHTML = text;
    	chatcontent.appendChild(newText);
    	anchor.scrollIntoView(true);
    	}

    die letzten beiden dateien sind die externen javascript und css dateien.

    Bei mir läuft das wunderbar.
  8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!