Problème de scroll avec un chat ajax
tybmhi
Messages postés
217
Statut
Membre
-
tybmhi Messages postés 217 Statut Membre -
tybmhi Messages postés 217 Statut Membre -
Bonjour à tous,
Je tente d'insérer un chat sur mon site web. J'ai réussi à le créer mais un problème persiste depuis deux jours. Lorsque le chat s'ouvre, pas de problème, le scroll revient vers le bas. D'ailleurs il revient vers le bas à chaque rafraichissement du contenu (toutes les 3 secondes). Et c'est bien là mon problème. Je souhaiterais que lorsque le "chatteur" monte le scroll pour lire les messages précédents ne soit pas embêté par le retour automatique du scroll. En fait, j'aimerais que le scroll ne revienne pas en bas si l'internaute l'a déplacé lui-même. Je crois qu'il faut tester la position du scroll et faire une condition en Javascript. Mais là j'avoue que ça dépasse très largement mes compétences. Si quelqu'un peut m'aider... Je vous remercie d'avance. Voici le code :
Je tente d'insérer un chat sur mon site web. J'ai réussi à le créer mais un problème persiste depuis deux jours. Lorsque le chat s'ouvre, pas de problème, le scroll revient vers le bas. D'ailleurs il revient vers le bas à chaque rafraichissement du contenu (toutes les 3 secondes). Et c'est bien là mon problème. Je souhaiterais que lorsque le "chatteur" monte le scroll pour lire les messages précédents ne soit pas embêté par le retour automatique du scroll. En fait, j'aimerais que le scroll ne revienne pas en bas si l'internaute l'a déplacé lui-même. Je crois qu'il faut tester la position du scroll et faire une condition en Javascript. Mais là j'avoue que ça dépasse très largement mes compétences. Si quelqu'un peut m'aider... Je vous remercie d'avance. Voici le code :
<script type="text/javascript">
$(document).ready(function() {
$('.toggle_chat').hide();
// load messages every 1000 milliseconds from server.
load_data = {'fetch':1};
window.setInterval(function(){
$.post('chatbox/shout.php', load_data, function(data) {
$('.message_box').html(data);
$("#message_box").animate({scrollTop: $("#message_box")[0].scrollHeight},2000);//Autoscroll to bottom of div
});
}, 3000);
//method to trigger when user hits enter key
$("#shout_message").keypress(function(evt) {
if(evt.which == 13) {
var imessage = $('#shout_message').val();
post_data = {'message':imessage};
//send data to "shout.php" using jQuery $.post()
$.post('chatbox/shout.php', post_data, function(data) {
//append data into messagebox with jQuery fade effect!
$(data).hide().appendTo('.message_box').fadeIn();
//keep scrolled to bottom of chat!
$("#message_box").animate({scrollTop: $("#message_box")[0].scrollHeight},2000);//Autoscroll to bottom of div
//reset value of message box
$('#shout_message').val('');
}).fail(function(err) {
//alert HTTP server error
alert(err.statusText);
});
}
});
//toggle hide/show shout box
$(".open_btn").click(function (e) {
//get CSS display state of .toggle_chat element
var toggleState = $('.toggle_chat').css('display');
//toggle show/hide chat box
$('.toggle_chat').slideToggle();
//use toggleState var to change close/open icon image
if(toggleState == 'block')
{
$(".header div").attr('class', 'open_btn');
}else{
$(".header div").attr('class', 'close_btn');
}
});
});
</script>
A voir également:
- Problème de scroll avec un chat ajax
- Coco chat - Accueil - Réseaux sociaux
- Fermeture de Coco : les internautes à la recherche d'un remplaçant - Accueil - Réseaux sociaux
- Chat engine - Télécharger - Outils Internet
- Bounty chat coco ✓ - Forum Réseaux sociaux
- Nouveau site coco chat - Forum Réseaux sociaux
2 réponses
Salut,
Un exemple de début de solution possible : https://jsfiddle.net/ozumte4r/
L'idée est de simplement vérifier que la position du scroll est tout en bas de l'élément #id_message et d'effectuer le scroll après l'ajout du message seulement si celui-ci était déjà en bas.
Bonne journée
Un exemple de début de solution possible : https://jsfiddle.net/ozumte4r/
L'idée est de simplement vérifier que la position du scroll est tout en bas de l'élément #id_message et d'effectuer le scroll après l'ajout du message seulement si celui-ci était déjà en bas.
Bonne journée
Merci beaucoup Pitet, ça fonctionne !! En revanche, j'ai une question : à quoi sert la ligne
Car lorsqu'elle est présente j'ai du mal à remonter le scroll en manuel alors que lorsque je la retire, aucun problème.
Nouveau code pour d'autres utilisateurs :
--
console.log('scroll down');
Car lorsqu'elle est présente j'ai du mal à remonter le scroll en manuel alors que lorsque je la retire, aucun problème.
Nouveau code pour d'autres utilisateurs :
$(document).ready(function() {
$('.toggle_chat').hide();
$("#message_box")[0].scrollTop = $("#message_box")[0].scrollHeight;
// load messages every 3000 milliseconds from server.
load_data = {'fetch':1};
window.setInterval(function(){
var box = $("#message_box")[0];
// on vérifie si le scroll est en bas de l'élément
var toBottom = box.offsetHeight + box.scrollTop >= box.scrollHeight;
$.post('chatbox/shout.php', load_data, function(data) {
$('.message_box').html(data);
if (toBottom) {
$("#message_box").animate({scrollTop: $("#message_box")[0].scrollHeight},2000);
}
});
}, 3000);
--