119
rated 0 times
[
122]
[
3]
/ answers: 1 / hits: 33405
/ 10 Years ago, mon, october 13, 2014, 12:00:00
I am trying to automatically scroll to bottom whenever there is a new message.
My code moves the scrollbar but it does not take it to exact bottom. Kindly help. Here is my plunker.
http://plnkr.co/edit/NSwZFtmBYZuW7e2iAUq9
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<script [email protected] data-semver=1.3.0-beta.5 src=https://code.angularjs.org/1.3.0-beta.5/angular.js></script>
<link rel=stylesheet href=style.css />
<script src=script.js></script>
</head>
<body>
<div ng-app=Sojharo>
<div ng-controller=MyController>
<div id=chatBox>
<div ng-repeat=message in messages>
<div class=chatMessage>
<div class=messageTextInMessage>{{message.msg}}</div>
</div>
</div>
</div>
<div class=chatControls>
<form ng-submit=sendIM(im)>
<input type=text ng-model=im.msg placeholder=Send a message class=chatTextField />
</form>
Type and press Enter
</div>
</div>
</div>
</body>
</html>
Here is javascript:
angular.module('Sojharo', [])
.controller('MyController', function($scope) {
$scope.messages = [];
$scope.im = {};
$scope.sendIM = function(msg) {
$scope.messages.push(msg);
$scope.im = {};
var chatBox = document.getElementById('chatBox');
chatBox.scrollTop = 300 + 8 + ($scope.messages.length * 240);
}
});
Kindly let me know of angular way for this too. Following way, I found on Internet, does not work:
Here are these directives
.directive(myStream, function(){
return {
restrict: 'A',
scope:{config:'='},
link: function(scope, element, attributes){
//Element is whatever element this directive is on
getUserMedia( {video:true}, function (stream) {
console.log(stream)
element.src = URL.createObjectURL(stream);
//scope.config = {localvideo: element.src};
//scope.$apply(); //sometimes this can be unsafe.
}, function(error){ console.log(error) });
}
}
})
.directive('ngFocus', [function() {
var FOCUS_CLASS = ng-focused;
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
ctrl.$focused = false;
element.bind('focus', function(evt) {
element.addClass(FOCUS_CLASS);
scope.$apply(function() {ctrl.$focused = true;});
}).bind('blur', function(evt) {
element.removeClass(FOCUS_CLASS);
scope.$apply(function() {ctrl.$focused = false;});
});
}
}
}]);
More From » css
