We Keep Coding

how to auto scroll down when new messages added

I am working with django , I want to scroll down auto when new messages added 'sent or received', I can scroll down auto when I refrech the page because of this code line :
$("#card-body").animate({ scrollTop: 20000000 }, "slow");
but when I send and I receive new messages the messages go down until I can't see them I have to scroll down manually
this is the js code :
<script>
/* send message*/
document.getElementById('send-btn-id').onclick = function (e) {
const msg = document.getElementById('message').value;
chatSocket.send(JSON.stringify({
'message': msg,
'user': me,
'friend': friendName
}));
document.getElementById('message').value = "";
};
const friendName = JSON.parse(document.getElementById('friend').textContent);
const me = JSON.parse(document.getElementById('me').textContent);
/* set friend profile name */
document.getElementById('friend-name').innerHTML = friendName['username'];
/* start conversation */
document.querySelector('.start-conversation').innerHTML = 'Start conversation with <strong>'+friendName['username']+'</strong>';
/* connection request */
const chatSocket = new WebSocket(
'ws://'
+ window.location.host
+ '/ws/chat/'
+ friendName['username']
+ '/'
);
chatSocket.onmessage = function (e) {
const data = JSON.parse(e.data);
var class_name = 'in';
var profile_image = '{{friend_obj.profile.image.url}}';
if(me['username'] == data.user['username']) {
data.user['username'] = 'Me';
class_name = 'out';
profile_image = '{{request.user.profile.image.url}}';
}
var chat_list = document.querySelector('#chat-list-id');
var chat = "<li class=\""+class_name+"\"><div class=\"chat-img\"><img alt=\"avatarchat\" src=\""+profile_image+"\"></div><div class=\"chat-body\"><div class=\"chat-message\"><h5>"+data.user['username']+"</h5><p>"+data.message+"</p></div></div></li>";
chat_list.innerHTML += chat;
};
</script>

If you want to do this easily, you can do the following:
window.scrollTo(0, document.body.scrollHeight);
Thanks to this post
WHAT YOU SHOULD NOT DO
window.scrollTo(0, 9999);
Even though the number is big, sometimes webpages can be VERY large.
BACK TO CONTENT
If you want it to scroll smoothly, then you can set this css property:
html {
scroll-behavior: smooth;
}
Working example:
const btmG = document.querySelector("#btm-good");
const btmB = document.querySelector("#btm-bad");
window.onload = () => {
btmG.onclick = () => {
window.scrollTo(0, document.body.scrollHeight);
};
btmB.onclick = () => {
window.scrollTo(0, 9999);
};
}
html {
scroll-behavior: smooth;
}
<button id="btm-good"> Scroll to bottom (not 9999) </button>
<button id="btm-bad"> Scroll to bottom (is 9999) </button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Wait a sec, this isn't the bottom...<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Hi

hello guys thanks to you I have found the solution and I want to share it with you and it works actually,so really thank you :
I thought that I can actually make this code line in the send, hold on you will understand after watching the code :
I have mentioned this before right
$("#card-body").animate({ scrollTop: 20000000 }, "slow");
and this one either :
/* send message*/
document.getElementById('send-btn-id').onclick = function (e) {
const msg = document.getElementById('message').value;
chatSocket.send(JSON.stringify({
'message': msg,
'user': me,
'friend': friendName
}));
document.getElementById('message').value = "";
};
so after watching your answers I think to put the line in the //send message like this :
/* send message*/
document.getElementById('send-btn-id').onclick = function (e) {
const msg = document.getElementById('message').value;
chatSocket.send(JSON.stringify({
'message': msg,
'user': me,
'friend': friendName
}));
document.getElementById('message').value = "";
$("#card-body").animate({ scrollTop: 20000000 }, "slow");
};
my english is not fine but the code works, I hope it helps someone facing same problem.

How to override renderElement function in screens.js in Odoo-12 Point of Sale

Hi I'm trying to override the renderElement function in PaymentScreenWidget in Odoo-12 POS
here's what I've tried so far
POSScreen.PaymentScreenWidget.include({
renderElement: function() {
var self = this;
this._super();
var numpad = this.render_numpad();
numpad.appendTo(this.$('.payment-numpad'));
var methods = this.render_paymentmethods();
methods.appendTo(this.$('.paymentmethods-container'));
this.render_paymentlines();
this.$('.back').click(function(){
self.click_back();
});
this.$('.next').click(function(){
if(self.check_payment_line() == "Cheque"){
self.pos.gui.show_popup('confirm',{
'title': _t('Payment Method Confirm'),
'body': _t('Cheque Payment method detected need the Cheque information first'),
confirm: function(){
self.enable_keyboard();
self.pos.gui.show_popup('cheque_input_popup_widget',{
title: _t('Check Input'),
});
},
});
}else if(self.check_payment_line() == "Cash"){
self.validate_order();
}
});
this.$('.js_set_customer').click(function(){
self.click_set_customer();
});
this.$('.js_tip').click(function(){
self.click_tip();
});
this.$('.js_invoice').click(function(){
self.click_invoice();
});
this.$('.js_cashdrawer').click(function(){
self.pos.proxy.open_cashbox();
});
},
});
it does work but it doubles all the button in the payment screen
i have also tried replacing the this._super(); with PosBaseWidget.prototype.renderElement.call(this);
but the problem is when the payment is process and I go back to selling part all the button in the payment part is left and covers the screen

user9523333
Try This code to access the PaymentScreenWidget:
odoo.define('module.ScreenCustomise', function(require) {
"use strict";
var screens = require('point_of_sale.screens');
var PaymentScreenWidget = screens.PaymentScreenWidget;
PaymentScreenWidget.include({
renderElement: function() {
var self = this;
this._super();
// Customise Your Code
});
});

javascript, continue downloads in background and restrict 1 download at a time

I'm developing an Ionic App using Cordova File Transfer Plugging to download set of images into the device. Currently it downloads images successfully and I need to restrict 1 download job at a time. Following is the code :
$scope.activeDownload = false;
// Download the current magazine
$scope.downloadMagazine = function() {
if($rootScope.user.user_id == undefined) {
$scope.showLoginAlert = function() {
var alertPopup = $ionicPopup.alert({
title: 'Oops!',
template: "Your must login to download magazines"
});
};
$scope.showLoginAlert();
return;
}
document.addEventListener('deviceready', function () {
var dirName = $rootScope.currentIssue.slug+'_VOL_'+$rootScope.currentIssue.vol+'_ISU_'+$rootScope.currentIssue.issue;
// First create the directory
$cordovaFile.createDir(cordova.file.dataDirectory, dirName, false)
.then(function (success) {
var count = 1;
$scope.loadedCount = 0;
$ionicLoading.show({template : "<progress max=\"100\" value=\"0\" id=\"dw-prog\"></progress><p> Downloading pages...</p><p>Please wait...</p> <button ng-controller=\"magazineIssueCtrl\" ng-click=\"downloadBackground()\" class=\"button button-full button-positive\">Continue in Background</button>"});
angular.forEach($scope.pages, function(value, key) {
function wait() {
if($scope.proceed == false) {
window.setTimeout(wait,50);
}
else {
var imgName = count+".png";
$scope.saveImage(dirName,value.link,imgName); // Then save images one by one to the created directory.
count++;
}
};
wait();
});
}, function (error) {
// Directory already exists means that the magazine is already downloaded.
$scope.showDownloadedAlert = function() {
var alertPopup = $ionicPopup.alert({
title: 'Why worry!',
template: "Your have already downloaded this magazine. You can view it on downloads"
});
};
$scope.showDownloadedAlert();
});
}, false);
};
// Save a image file in a given directory
$scope.saveImage = function(dir,imgUrl,imageName) {
$scope.proceed = false;
var url = imgUrl;
var targetPath = cordova.file.dataDirectory+ dir+"/" + imageName;
var trustHosts = true;
var options = {};
// Download the image using cordovafiletransfer plugin
$cordovaFileTransfer.download(url, targetPath, options, trustHosts)
.then(function(result) {
$scope.proceed = true;
$scope.loadedCount ++;
document.getElementById("dw-prog").value = ($scope.loadedCount / $scope.pages.length )*100;
if($scope.loadedCount == $scope.pages.length) {
$scope.activeDownload = false;
$ionicLoading.hide();
$scope.showDownloadSuccessAlert = function() {
var alertPopup = $ionicPopup.alert({
title: 'Success!',
template: "Your magazine successfully downloaded. You can view it on Downloads!"
});
};
$scope.showDownloadSuccessAlert();
}
}, function(err) {
//alert(JSON.stringify(err));
}, function (progress) {
});
};
// Continue download in background
$scope.downloadBackground = function () {
$scope.activeDownload = true;
$ionicLoading.hide();
$scope.showAlert = function() {
var alertPopup = $ionicPopup.alert({
title: 'Sent to Background!',
template: "You can view it on downloads tab"
});
};
$scope.showAlert();
$rootScope.downloadInBackground.dirName = $rootScope.currentIssue.slug+'_VOL_'+$rootScope.currentIssue.vol+'_ISU_'+$rootScope.currentIssue.issue;
};
Here everything happens as expected but I need the $scope.activeDownload variable to be true when a download is sent to background so that I can refer to that variable before starting another download job. But the problem here is that variable seems to be set to false always. Could you please help me to identify the problem here?

Change hash without triggering Sammy event

function UsersVM(start_page){
var self = this;
console.log('start form ' + start_page);
self.go_to = function(page) {
location.hash = '#Users/' + pageNumber;
}
}
Sammy(function() {
this.get('/app/?#Users/:page', function () {
var vm = new UsersVM(this.params.page);
ko.applyBinding(vm);
});
}).run();
I would like to change the page's hash with the following code:
location.hash = '#Users/' + pageNumber;
But in this case Sammy triggers routing. Say in Backbone we can do it this way:
app.navigate("help/troubleshooting", {trigger: false});
Is it possible to do it in Sammy?
Thanks!

I don't know of a native way to do this in Sammy, but here is a solution that has worked for me:
var sam = $.sammy(function () {
var sammy = this; //get a persistent reference to this
sammy.quiet = false; //set quiet to false by default
//I set quiet to true before running a route
sammy.quietRoute = function (location) {
sammy.quiet = true;
sammy.setLocation(location);
}
//I'm called after every route to reset quiet to false
sammy.after(function () {
sammy.quiet = false;
});
//I'm a 'normal' route that does not have the capability to be 'quiet'
this.get('#normalRoute', function () {
//routing code
});
//I am a route that can be 'quieted' so that when the url or
//hash changes my routing code doesn't run
this.get('#quietableRoute', function () {
if (!sammy.quiet) {
//routing code
} else {
return;
}
});
});
Then call the quietRoute function in your code:
//This will work
sam.quietRoute("#quietableRoute");
//This will not work because the "if(!sammy.quiet)..." code has not been
//implemented on this route
sam.quietRoute("#normalRoute");

Use the following code:
var new_location = '#foo';
app.trigger('redirect', {to: new_location});
app.last_location = ['get', new_location];
app.setLocation(new_location);

Open new window from TableView in Titanium Mobile

i create some application in titanium mobile for opening a window when a row in TableView is clicked by user..
here's my code:
Menu.js
function Menu() {
Titanium.UI.setBackgroundColor('#000');
var masterMenu = Titanium.UI.createTabGroup();
var winMenu1 = Titanium.UI.createWindow({
title:'Menu 1',
backgroundColor:'#fff'
});
var tabMenu1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Menu 1',
window:winMenu1
});
var menuData1 = [
{title: 'Account', url: 'Account.js'},
{title: 'Meetings', url: 'Meetings.js'}
];
var menuList1 = Ti.UI.createTableView({
data: menuData1
});
menuList1.addEventListener('click', function(e) {
var newWindow = Titanium.UI.createWindow({
url:e.rowData.url,
title:e.rowData.title
});
newWindow.open({
animated:true
});
});
winMenu1.add(menuList1);
var winMenu2 = Titanium.UI.createWindow({
title:'Menu 2',
backgroundColor:'#fff'
});
var tabMenu2 = Titanium.UI.createTab({
icon:'KS_nav_ui.png',
title:'Menu 2',
window:winMenu2
});
masterMenu.addTab(tabMenu1);
masterMenu.addTab(tabMenu2);
return masterMenu;
}
module.exports = Menu;
when some row is clicked by user, it will redirect and open new window based on url on the menuData1. for example i clicked Account row, and it should be redirected to Account.js. Here's my Account.js code :
var win = Ti.UI.currentWindow;
var label1 = Titanium.UI.createLabel({
color:'#999',
text:'Close',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});
label1.addEventListener('click', function() {
win.close();
});
win.add(label1);
The main problem is label1 in Account.js not opened in new window but shown in menu list.
Does anyone know how to open Account.js in new window?? thanks before..

Try to set backgroundColor for your window:
menuList1.addEventListener('click', function(e) {
var newWindow = Titanium.UI.createWindow({
backgroundColor: '#fff',
url:e.rowData.url,
title:e.rowData.title
});
newWindow.open({
animated:true
});
});