Jump to content

JavaScript Tele-Prompter using HTMLFrame Auto-Scroll


andyhill

Recommended Posts

1) Load HtmlFrame with display text / images

2) PLAY: Slowly Scroll HtmlFrame contents

3) PAUSE: Stop Scrolling

4) UNPAUSE(PLAY): Slowly Scroll HtmlFrame contents from current position

5) STOP WHEN REACHING THE END

(1) and (5) are coded

(2), (3) and (4) are the results of user interaction processed via JavaScript

Link to comment
Share on other sites

4 minutes ago, andyhill said:

NO, I want code to scroll the contents at a pace set by my code.

Okay.

20 minutes ago, Sherzod said:

In your case, you set the AutoScroll property for the form to True, so you must scroll the form itself.

But you have code like this at the moment, I just remind you.

Link to comment
Share on other sites

Thanks for the tip, I have used requestAnimationFrame on a TUniCanvas before - all good.

This is a THTMLFrame that requires scrolling from code.

UniHTMLFrame1.JSInterface.JSCall('body.setScrollTop', [0]);

$('+UniHTMLFrame1.JSName+').scrollTop(currentScroll+1);'+ 

Top
Bottom
CurrentPos
etc.

 

Link to comment
Share on other sites

I've used requestAnimationFrame in a THTMLFrame to generate animations that are controlled from both the client side as well as from the server using JSCall in response to an Ajax event.  There are plenty of examples on the web using requestAnimationFrame where the speed of the animation can be controlled.  From the sounds of what you want to do, I still think this is the right direction to go.  Not exactly what you want but this link may give you some ideas:

https://medium.com/@roderickhsiao/implement-smooth-scrolling-79efb20b6535

 

Link to comment
Share on other sites

This is beyond my skillset as I'm no good with JavaScript and even worse with CSS, but here's another link that demonstrates how this could be done using another technique with keyframes/animation if you don't want to use the marquee tag or requestAnimationFrame:

https://www.w3docs.com/snippets/css/how-to-have-the-marquee-effect-without-using-the-marquee-tag-with-css-javascript-and-jquery.html

https://www.w3docs.com/tools/code-editor/2117

Good luck!

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...