Member Avatar for ultmt.punisher

I am creating chat program in php using jquery, ajax and MySQL.
and my problem how to auto scroll down when div is overflowed.

like when user enter new line it will goes down and I want to auto scroll down when new messages appeares down.

and I am trying to do this dynamically using scroll height change to trigger this$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);. because using scroll height chaning it will also scroll to ather users browser who is chating on the other side.

I also have tried to trigger scroll down event using keypress and click event but that is only works for the current users browser, so on the other hand for another user that wont work or wont auto scroll down, he have to scroll manually to view new messages and I dont want that.

so thats why I am trying to use scroll height event. I also tried the mutate plugin for this purpose and it works fine only for the localhost and conflict on the live server and super slow down the chat.

So I have to leave this plugin for this problem.

so please kindly give me the solution without using any plugin to acheive this purpose.

many thanks in advance.

Edited by ultmt.punisher
  • 2 Contributors
  • 4 Replies
  • 7K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ultmt.punisher
Member Avatar for scribblerandom

Did you try $(window).scroll() with event handler? Inside the scroll function you can apply the scrollTop() that gets the current vertical position of that element or set the vertical position of the scrollbar for all the elements.

Here's the jQuery api
http://api.jquery.com/scrolltop/

Member Avatar for ultmt.punisher

with which event hanlder?
will this works without any other event triggered?
means will this works on the other browser if messages comes down?

I have tried many things, and can you give any example of this? please.

Edited by ultmt.punisher
Member Avatar for scribblerandom

here's an example :
Basically, you are applying the scroll function on the global window object in jQuery, the scroll function can take in parameters, in this case it's an event handler.
Yes it will work with other browers without any other plugins.
You can post your entire code if it doesn't work.For the addClass to work, you can create a class in your CSS called "animate" or whatever you like. So once the page scrolls down to a certain height (replace 600 to whatever you want),addClass method will apply that animate class to your div.

$(document).ready(function(){
    $(window).scroll(function(event){
        var scroll=$(this).scrollTop();
        if(scroll >= 600) {
            $("div").addClass("aClass");


        }

    })
})
Member Avatar for ultmt.punisher

I think you did not understand my question.

I dont want to add any class I want to scroll down it when div is overflowed.

like when new messages coming down and div is overflowed the scrollbar did not scroll down , so I want to scroll it down when div is overflowed its mean that scroll height will also change. so when scroll height is changed it should scroll down.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.