11549 sujets

JavaScript, DOM et API Web HTML5

Scroll bar en bas pour new message sauf si déplacé par l'utilisateur

Bonjour, C'est aurore Smiley smile
C'est mon premier post sur alsacréation Smiley smile

Alors je vous explique.

J'ai fais un chat en php. Une div avec un formulaire pour envoyer les messages avec la method post qui envoie vers une page php qui ajoute le nouveau message à la base de donnée et qui renvoie sur le chat.

Une div pour l'affichage des message avec un script setinterval qui recharge la page contenu_chat.php qui affiche les messages.

Tout marche bien.
j'ai réussi a faire que la scroll bar reste en bas pour toujours voir les nouveau message qui ont été envoyé.

Mon probleme c'est dans le cas ou un chater voudrai relire les message ( donc remonté la scrollbar).

Il faut que je test si à la base la scrollbar est en bas, ausquel cas on la laisse en bas, sinon on la laisse ou elle est.

Seulement je n'arrive vraimen pas a le faire.
Pouvez vous m'aidez s'il vous plait ?

Merci d'avance ! Aurore
PS je vous met mes codes :

Page chat :

<?php
session_start();
?>
<!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>Le chat</title>
<link rel="stylesheet" href="chat.css">

<script type="text/javascript" src="../Projekktor/jquery.min.js"></script>

</head>

<body onLoad="document.getElementById('saisi').focus()"; >

          
                        <div id="contenu">
                        <?php /*onLoad="document.getElementById('saisi').focus()";*/

							try
								{
    							$bdd = new PDO('mysql:host=localhost;dbname=directwebtv', 'root', '');
								}
						catch(Exception $e)
								{
        						die('Erreur : '.$e->getMessage());
								}
 

								$reponse = $bdd->query('SELECT pseudo, message FROM chat_visite  ');
 

								while ($donnees = $reponse->fetch())
								{
									?>
                                    <div class="discussion">
                                    	<p class="pseudo"><?php echo htmlspecialchars($donnees['pseudo']); ?> :</p><p class="msg"> <?php echo  htmlspecialchars($donnees['message']); ?></p>
                                    </div>
   								 	<?php
								}
 
								$reponse->closeCursor();
 
								?>
                        
								</div>
                                <div class="minichat" id="focus" >
                        	<form action="envoi.php" method="post">
                            	<label for="pseudo"> Pseudo :</label> <input type="text" name="pseudo"  value=" <?php if (isset($_SESSION['pseudo'])) 
																														{
																															echo $_SESSION['pseudo'];
																														}
																														else
																														{
																															echo 'taper un pseudo';
																														}
																														?>"/><br/>
                               <label class="second" for="msg"> Message :</label> <input type="text" id="saisi" size="60" class="second" name="msg"/><br/>
                                <input class="envoi" type="submit" Value="Envoyez" />
                            </form>
								</div>
                                <div onblur="self.focus()" id="directwebtv">Direct-WebTV.com
                                </div>
						
<script>
var contenu = $('#contenu');
var bottom ;

if( contenu.scrollTop == contenu.scrollHeight)
	{
		bottom = true;
	}
	else
	{
		bottom = false;
	}

var newcontenu = setInterval(function() 
			{
				contenu.load('contenu_chat.php');						
			}, 1000);

if(bottom == true)
	{
		document.getElementById("contenu").scrollTop=document.getElementById("contenu").scrollHeight;
	}
</script>
<script>
document.getElementById("contenu").scrollTop=document.getElementById("contenu").scrollHeight;
</script>



</body>
</html>


et la page contenu_chat.php (celle qui est apellé par le load du refresh)

[code=php]<!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>Untitled Document</title>


</head>

<body>

<?php

							try
								{
    							$bdd = new PDO('mysql:host=localhost;dbname=directwebtv', 'root', '');
								}
						catch(Exception $e)
								{
        						die('Erreur : '.$e->getMessage());
								}
 

								$reponse = $bdd->query('SELECT pseudo, message FROM chat_visite  ');
 

								while ($donnees = $reponse->fetch())
								{
									?>
                                    <div class="discussion">
                                    	<p class="pseudo"><?php echo htmlspecialchars($donnees['pseudo']); ?> :</p><p class="msg"> <?php echo  htmlspecialchars($donnees['message']); ?></p>
                                    </div>
   								 	<?php
								}
 
								$reponse->closeCursor();
 
								?>
<script>

</script>
</body>
</html>
[/code]
Sujet clos
Aller à