Scroll THTMLFrame to bottom does not work. Waht am I doing worng ?

[RobertoLopes]

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?

 

[Sherzod]

Hello,

Do you have a simple testcase for your case?

[RobertoLopes]

16 minutes ago, Sherzod said:

Hello,

Do you have a simple testcase for your case?

Yes here it is.

Project1.zip

[Sherzod]

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;

 

[RobertoLopes]

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 ?

[Sherzod]

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);
}

 

[RobertoLopes]

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 !

[PS1]

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 ?

 

[Sherzod]

17 minutes ago, PS1 said:

How can i make this work on mobile version - UnumHTMLFrame ?

Need to check. 

[Sherzod]

1 hour ago, PS1 said:

How can i make this work on mobile version - UnumHTMLFrame ?

function afterupdatehtml(sender, eOpts)
{
    sender.getScrollable().scrollBy(0, Infinity);
}

 

[RobertoLopes]

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.

[Sherzod]

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.

[RobertoLopes]

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.

[Sherzod]

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...

[RobertoLopes]

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.

[Sherzod]

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...

[RobertoLopes]

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 ?

[RobertoLopes]

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.

[Sherzod]

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.