Jump to content

shoutbox doesn't start scrolled down when put inside sliding panel


Guest

Recommended Posts

I have just installed the ShoutCloud shoutbox. The shoutbox is supposed to scroll down to the bottom of the page when loaded (to display the last message). It works perfectly when i put in an iframe.


However, when i put the same iframe inside my sliding panel, it starts without being scrolled-down

On this page you can see both in action : http://[redacted]/test.html
it's working in the iframe on the right of the page but when you click on the left to open the "T'chat" sliding panel, the iframe isn't scrolled down.

I would really appreciate help to fix this problem !

Thanks

Note: it's working with Chrome but not with Firefox

 

There's a function in the shoutbox that will scroll it down to the last message each time a new message is sent.

Maybe we could use this function and execute it when clicking to open the sliding panel ?

 

could be one of those functions:

 

				clearInterval(shout_refresh);				var swatch = $('span.ShoutCloud-Swatch.sel',obj).attr('title');				$.post(opts.shoutcloudFile, { sc_com:'post', name:userboxVal, color:swatch, msg:msgboxVal }, function(data) {					if(data.error) {						msgbox.focus();						shoutError(data.error);					} else if(data.status=='posted') {						msgbox.val('').focus();						refreshShouts(opts,'ajax');					}				}, 'json');				shout_refresh = setInterval(function() { refreshShouts(opts,'ajax'); }, opts.refreshTime);

 

 

 

  function animateMsgs(msgsbox) {	  msgsbox.animate({ scrollTop: msgsbox.attr("scrollHeight") }, 500);  }
  function refreshShouts(opts,type) {	  var msgsbox = $('#ShoutCloud-MsgBox');	  var shoutMsg = $('div.shout-msg');	  var lastShout = shoutMsg.filter(':last').attr('id');	  if(type=='admin') {		  lastShout = '-1';	  }

 

 

Then i would just have to add it to my sliding panel script:

<script type="text/javascript">
$(document).ready(function(){
    $(".trigger").click(function(){
        $(".shoutpanel").toggle("fast");
        $(this).toggleClass("active");
        return false;
    });
});

</script>

 

 

Any idea how i could do that ?

My javascript skills sucks...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.