[Van2Shout addon] How can I keep the chat scrolled to the bottom?

charliepratt

I'd like to keep the chat locked to the bottom of the div, especially when posting a new chat message. Thoughts, @lifeisfoo + @caerostris?

caerostris

It should kind of do that already, but for some reason it seems to have problems with some browsers (especially IE if I remember correctly... Wouldn't surprise me).
Currently it uses the following code to scroll down:

var obj = document.getElementById("van2shoutscroll"); //the slider currently is at the bottom ==> make it stay there after adding new posts if(obj.scrollTop == (obj.scrollHeight - obj.offsetHeight)) { var scrolldown = true; } else { var scrolldown = false; }

and

if(scrolldown == true) { obj.scrollTop = obj.scrollHeight; }

According to most parts of the Interwebz, this should work.

EDIT:
Just a couple of sources
http://ajaxian.com/archives/quick-tip-scroll-to-bottom-of-a-div
http://stackoverflow.com/questions/4606560/div-overflow-scroll-to-bottom-is-it-possible
http://stackoverflow.com/questions/270612/scroll-to-bottom-of-div

Can anybody think of anything else or why this might not work?

caerostris

It should kind of do that already, but for some reason it seems to have problems with some browsers (especially IE if I remember correctly... Wouldn't surprise me).
Currently it uses the following code to scroll down:

var obj = document.getElementById("van2shoutscroll"); //the slider currently is at the bottom ==> make it stay there after adding new posts if(obj.scrollTop == (obj.scrollHeight - obj.offsetHeight)) { var scrolldown = true; } else { var scrolldown = false; }

and

if(scrolldown == true) { obj.scrollTop = obj.scrollHeight; }

According to most parts of the Interwebz, this should work.

EDIT:
Just a couple of sources
http://ajaxian.com/archives/quick-tip-scroll-to-bottom-of-a-div
http://stackoverflow.com/questions/4606560/div-overflow-scroll-to-bottom-is-it-possible
http://stackoverflow.com/questions/270612/scroll-to-bottom-of-div

Can anybody think of anything else or why this might not work?

woft

This might not be suefull but i am using Firefox and it does not scroll to the bottom. The code says it should work, but it doesn't

woft

Hey guys I have fixed the problem!!!!!!!!!!!!!!!

well on my website anyway.

I changed

var obj = document.getElementById("van2shoutscroll"); //the slider currently is at the bottom ==> make it stay there after adding new posts if(obj.scrollTop == (obj.scrollHeight - obj.offsetHeight)) { var scrolldown = true; } else { var scrolldown = false; }
to

var obj = document.getElementById("van2shoutscroll"); //the slider currently is at the bottom ==> make it stay there after adding new posts if(obj.scrollTop == (obj.scrollHeight - obj.offsetHeight)) { var scrolldown = false; } else { var scrolldown = true; }

woft

@woft said:
Hey guys I have fixed the problem!!!!!!!!!!!!!!!

well on my website anyway.

I changed

var obj = document.getElementById("van2shoutscroll"); //the slider currently is at the bottom ==> make it stay there after adding new posts if(obj.scrollTop == (obj.scrollHeight - obj.offsetHeight)) { var scrolldown = true; } else { var scrolldown = false; }
to

var obj = document.getElementById("van2shoutscroll"); //the slider currently is at the bottom ==> make it stay there after adding new posts if(obj.scrollTop == (obj.scrollHeight - obj.offsetHeight)) { var scrolldown = false; } else { var scrolldown = true; }

Just to clarify, this code to change is located in the Van2Shout Plugin folder then Views/discussionscontroller_local.php

woft

Hello just wanted to update again, so I recently needed to be able to scroll the shoutbox up, but the interval for the updating of the shoutbox kept scrolling the shoutbox down before I found what i was looking for.

I modified the code so that it only scrolled the shoutbox down after the initial load of the page.

Here is the code I modified.

All of this was done inside of the file views/discussionscontroller_local.php

First of all you need to find

function UpdateShoutbox()
{

It should be the first function called.

Then delete

var obj = document.getElementById("van2shoutscroll");

//the slider currently is at the bottom ==> make it stay there after adding new posts
if(obj.scrollTop == (obj.scrollHeight - obj.offsetHeight)) {
  var scrolldown = true;
}
else
{
  var scrolldown = false;
}

Also delete

if(scrolldown == true)
{
  obj.scrollTop = obj.scrollHeight ;
}

This should be towards the end of the first function (function UpdateShoutbox())

Then After jQuery(document).ready(function($) { UpdateShoutbox(); });

Add jQuery(document).ready(function($) { UpdateShoutboxScroll(); }); on the next line.

Then after the function UpdateShoutbox() code casing, so that means the final } which is around line 73 you need to add the new function.

Copy and paste this function

function UpdateShoutboxScroll()
{
  setTimeout(scrollDown, 300)

  function scrollDown() {
    var obj = document.getElementById("van2shoutscroll");
    //the slider currently is at the bottom ==> make it stay there after adding new posts
    obj.scrollTop = obj.scrollHeight;
  }
} 

there before the function SubmitMessage()

This will then mean that once the shoutbox loads the scroll bar will go down to the bottom but it will not load scroll down again until the page is re-loaded.

The important thing to make this function work is the setTimeout(scrollDown, 300) as the scroll bar will not scroll down properly until all the content (i.e. the posts) are loaded into the shoutbox.

This works for the most current release of the Van2Shout.

@caerostris what do you think?

Note, coding isn't formatting properly