Autoscroll to bottom then scroll manipulation - php

Question

Hi I'm doing a chat script that I've gotten somewhere that needs quite modifications. The function I need to achieve is after successful loading of user to chat with the view should go to bottom directly. I have done things which failed on several occasions, it does automate to bottom but when I tried scrolling the content it still goes back to bottom which should not happen.
This is what I have so far.
<?php
$ctr = 0;
if (is_array($buddies)) {
foreach ($buddies as $buddy) {
?>
<span style="float: right;"><?php echo $buddy->unreadMsgCtr; ?></span>
<b><?php echo humanize($buddy->fullName) ?></b> <br />
<?php
++$ctr;
}
}
?>
<script type="text/javascript">
$(document).ready(function() {
<?php for ($ctrjs = 0; $ctrjs < $ctr; $ctrjs++) {?>
$('#friend' + <?php echo $ctrjs; ?>).live('click', function() {
$('#buddies').hide();
var chattingWith = $(this).attr('chattingID');
startrefresh();
$('#chatroom').show();
$('#chatmessage').html('<img src="<?php echo site_url('/images/ajax-loader.gif');?>" width="16" height="16" />');
$.post("<?php echo site_url('chats/chatbuddy');?>",{
username: $("#friend"+<?php echo $ctrjs; ?>).html(),
recipientID: chattingWith
});
});
<?php } ?>
});
</script>
//chats.php when a particular buddy has been clicked.
<script type="text/javascript">
var autoScrollEnabled = true;
$(document).ready(function() {
toggleAutoScroll();
if(autoScrollEnabled == true) {
$(".messages").animate({ scrollTop: $('.messages')[0].scrollHeight}, 1000);
//return false;
toggleAutoScroll();
}
function toggleAutoScroll() {
autoScrollEnabled = !autoScrollEnabled; //! reverses the value, true becomes false, false becomes true
if (autoScrollEnabled == true) { //scroll down immediately if a.s. is reenabled
$(".messages").animate({ scrollTop: $('.messages')[0].scrollHeight}, 9999999999);
}
}
$('#closechat').live('click', function() {
$('#chatroom').hide();
//scrolled = 0;
stoprefresh();
});
});
</script>
<div class="headerchat" style="width: 217px;"><div class="buddycontainer"> Chatting</div>
<div class="closecontainer">✖ </div>
<br class="breaker" />
</div>
<?php
if (is_array($chat)) {
foreach ($chat as $item){ ?>
<div class="conversation" style="width: 215px;">
<b><span class="username"><?php echo $item['username']; ?></span></b>
<span class="gray" style="float: right;" title="<?php echo date('M d, Y g:i A', $item['time']);?>"> <?php echo date('g:i A', $item['time']);?></span>
<br /><?php echo $item['message']; ?>
</div>
<?php } ?>
<?php }?>
BTW here is the jsfiddle I don't understand it's working properly in jsfiddle. http://jsfiddle.net/STQnH/3/
I'm not sure if I am heading on the right track. I just want to achieve that. Thank you guys.

Answer 1

Try wrapping your code in:
$(document).ready(function(){ //your code here
});
or
$( window ).load(function() {//your code here
});
If it works in jsFiddle but not on the live site this is likely what's missing. jsFiddle adds it for you. You can change this option in the drop down menu indicated by my freehand circle.
jQuery faq for $(document).ready()