RobertoLopes Posted February 19, 2021 Share Posted February 19, 2021 Hello guys. I am trying to scroll a TUniHTMLFrame to the bottom for a chat application but nothing that I have tried works. With the TUniHTMLMemo this works: setTimeout(function(){" + spHTML->JSName + ".iframeEl.dom.contentWindow.scrollTo(0," + spHTML->JSName + ".iframeEl.dom.contentWindow.document.body.scrollHeight);},100);console.log('Scroll Executado...'); With TUniHTMLFrame it does not work neither this: scroll->JSName+".getTargetEl().scrollTo('bottom');console.log('Scroll Executado...');"; Can anyone help m e? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted February 19, 2021 Share Posted February 19, 2021 Hello, Do you have a simple testcase for your case? Quote Link to comment Share on other sites More sharing options...
RobertoLopes Posted February 19, 2021 Author Share Posted February 19, 2021 16 minutes ago, Sherzod said: Hello, Do you have a simple testcase for your case? Yes here it is. Project1.zip Quote Link to comment Share on other sites More sharing options...
Sherzod Posted February 19, 2021 Share Posted February 19, 2021 12 minutes ago, RobertoLopes said: Yes here it is. Try this approach: procedure TMainForm.UniButton1Click(Sender: TObject); begin UniHTMLFrame1.HTML.Add('TEST<br>'); UniHTMLFrame1.JSInterface.JSCallDefer('body.scroll', ['b', UniHTMLFrame1.JSInterface.JSStatement('Infinity')], 100); end; Quote Link to comment Share on other sites More sharing options...
RobertoLopes Posted February 19, 2021 Author Share Posted February 19, 2021 3 minutes ago, Sherzod said: Try this approach: procedure TMainForm.UniButton1Click(Sender: TObject); begin UniHTMLFrame1.HTML.Add('TEST<br>'); UniHTMLFrame1.JSInterface.JSCallDefer('body.scroll', ['b', UniHTMLFrame1.JSInterface.JSStatement('Infinity')], 100); end; How can I do this in C++ ? Those '[' are invalid on C++. Any clues ? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted February 19, 2021 Share Posted February 19, 2021 Just now, RobertoLopes said: How can I do this in C++ ? Those '[' are invalid on C++. Any clues ? Or 1. procedure TMainForm.UniButton1Click(Sender: TObject); begin UniHTMLFrame1.HTML.Add('TEST<br>'); //UniHTMLFrame1.JSInterface.JSCallDefer('body.scroll', ['b', UniHTMLFrame1.JSInterface.JSStatement('Infinity')], 100); end; 2. UniHTMLFrame1 -> ClientEvents -> ExtEvents -> function afterupdatehtml(sender, eOpts) { sender.body.scroll('b', Infinity); } Quote Link to comment Share on other sites More sharing options...
RobertoLopes Posted February 19, 2021 Author Share Posted February 19, 2021 6 minutes ago, Sherzod said: Or 1. procedure TMainForm.UniButton1Click(Sender: TObject); begin UniHTMLFrame1.HTML.Add('TEST<br>'); //UniHTMLFrame1.JSInterface.JSCallDefer('body.scroll', ['b', UniHTMLFrame1.JSInterface.JSStatement('Infinity')], 100); end; 2. UniHTMLFrame1 -> ClientEvents -> ExtEvents -> function afterupdatehtml(sender, eOpts) { sender.body.scroll('b', Infinity); } Infinity Does not exist error is thrown. and if I enclosure in ' does not work. Forget it. It works. Thanks my friend. You really helped allot ! 1 Quote Link to comment Share on other sites More sharing options...
PS1 Posted January 5 Share Posted January 5 On 2/19/2021 at 1:26 PM, Sherzod said: Or 1. procedure TMainForm.UniButton1Click(Sender: TObject); begin UniHTMLFrame1.HTML.Add('TEST<br>'); //UniHTMLFrame1.JSInterface.JSCallDefer('body.scroll', ['b', UniHTMLFrame1.JSInterface.JSStatement('Infinity')], 100); end; 2. UniHTMLFrame1 -> ClientEvents -> ExtEvents -> function afterupdatehtml(sender, eOpts) { sender.body.scroll('b', Infinity); } How can i make this work on mobile version - UnumHTMLFrame ? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted January 5 Share Posted January 5 17 minutes ago, PS1 said: How can i make this work on mobile version - UnumHTMLFrame ? Need to check. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted January 5 Share Posted January 5 1 hour ago, PS1 said: How can i make this work on mobile version - UnumHTMLFrame ? function afterupdatehtml(sender, eOpts) { sender.getScrollable().scrollBy(0, Infinity); } Quote Link to comment Share on other sites More sharing options...
RobertoLopes Posted January 5 Author Share Posted January 5 Hat's usefull but. How can I know that I am NOT on the bottom already ? I ask because I don't want to scroll to the bottom if the user is (for example) seeing a video on the middle of the document. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted January 5 Share Posted January 5 2 hours ago, RobertoLopes said: I ask because I don't want to scroll to the bottom if the user is (for example) seeing a video on the middle of the document. Your case is not very clear to me. Quote Link to comment Share on other sites More sharing options...
RobertoLopes Posted January 5 Author Share Posted January 5 2 hours ago, Sherzod said: Your case is not very clear to me. Let me clear . We have a chat (Whatsapp like) software where the users can send messages and media so, if I am a user of that system I receive a message and use the above code to scroll to the end of the HTML Frame. But, If i receive a video and play on the page without a pupoup I don't want to keep scrooling down if I receive new messages. Imagine that you are on WhatsappWeb and scroll up to view a video sent yesterday and the same person send's you a message. You cannot scroll down on that case. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted January 5 Share Posted January 5 1 hour ago, RobertoLopes said: Imagine that you are on WhatsappWeb and scroll up to view a video sent yesterday and the same person send's you a message. You cannot scroll down on that case. Well, actually, I would prefer to completely abandon automatic scrolling to the bottom, since this is relevant not only for the video that the user is watching, but also for the text message that he may be reading at the moment... Quote Link to comment Share on other sites More sharing options...
RobertoLopes Posted January 8 Author Share Posted January 8 On 1/5/2024 at 3:46 PM, Sherzod said: Well, actually, I would prefer to completely abandon automatic scrolling to the bottom, since this is relevant not only for the video that the user is watching, but also for the text message that he may be reading at the moment... I simply cannot do that for a bunch of reasons. Imagine a Contact Center agent who answers 20 simultaneous chats to have to scroll down every time a message arrives. It's just not how they are used to and it's not like any other chat solution works. So I have to find a solution. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted January 8 Share Posted January 8 39 minutes ago, RobertoLopes said: I simply cannot do that for a bunch of reasons. Imagine a Contact Center agent who answers 20 simultaneous chats to have to scroll down every time a message arrives. It's just not how they are used to and it's not like any other chat solution works. So I have to find a solution. Can you provide part of the html code that includes the video file? You can enable the flag when the video starts and disable the flag, and analyze this flag whether scrolling to the bottom is needed or not... Quote Link to comment Share on other sites More sharing options...
RobertoLopes Posted January 8 Author Share Posted January 8 1 hour ago, Sherzod said: Can you provide part of the html code that includes the video file? You can enable the flag when the video starts and disable the flag, and analyze this flag whether scrolling to the bottom is needed or not... Yes I managed to do that but I found the real issue. On the HTMLFrame component (HTMLMemo as well) avery time you add a line, it reloads the entire component so the media that's being pleyed is restarted. So no mtter what I do as soon and a HTMLComponent.add is executed, the component is reloaded. I have tried Append and Add funcions. Is there a way to simply add a line without reload the entire html document ? Quote Link to comment Share on other sites More sharing options...
RobertoLopes Posted January 8 Author Share Posted January 8 So. I found a Solution. Not the best but I think that's the only available. I managed to send an ajax event to my application whenever the user is playing a media on the conversation (video or audio) and while the media is playing I am putting the new messages on a queue so when the media stops playing I insert the newly arrived messages and scroll down. If anyone found a better solution for this, please let me know. Here is the code I inject when a audio message arrives data = "<audio id="+iid+" src=\"data:audio/" + ext.LowerCase() + ";base64, " + b64 + "\" width=\"90%\" controls>" + fnameOnly + "</audio>" data += "<script> let aud = document.getElementById(\""+iid+"\");"; data += "aud.onplaying = function() { ajaxRequest("+compName+", \"MediaPlaying\",[]); };"; data += "aud.onended = function() { ajaxRequest("+compName+", \"MediaEnded\",[]);};"; data += "aud.onpause = function() { ajaxRequest("+compName+", \"MediaPaused\",[]);};"; data += "</script>"; iid is generated by CreateGUID. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted January 8 Share Posted January 8 3 hours ago, RobertoLopes said: I managed to send an ajax event to my application whenever the user is playing a media 6 hours ago, Sherzod said: You can enable the flag when the video starts and disable the flag, and analyze this flag whether scrolling to the bottom is needed or not... Well, approximately this is the logic you use. This is one of the possible solutions, as you have already implemented as I understand it. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.