Here is a simple solution if you need to add a scrolling marquee to an APEX application. This is done using a static message, so you would probably want to enhance by fetching the message from a dynamic table.
Fist, create a region on the page, probably in the content body section, but this can be in any area you like. I’m going to include a very simple source using PL/SQL Dynamic Content, but you will need to enhance that some.
DECLARE SEP VARCHAR2(20) := NULL; CURSOR DATA IS SELECT 'This is a demo scrolling message' message FROM DUAL; BEGIN htp.p('<div class="messageBar">'); FOR C1 IN DATA LOOP htp.p(sep || c1.message); sep := ' // '; END LOOP; htp.p('</div>'); END;
Now on the Page defintion, CSS -> inline section, add the following css:
.messageBar { font-size: 2.5rem; overflow: hidden; padding: 10px; background: #E5EFF8; }
And in the Javascript -> Execute when page loads section, add the following JQuery code:
jQuery('.marqueeBox').marquee({ //speed in milliseconds of the marquee duration: 10000, //gap in pixels between the tickers gap: 50, //time in milliseconds before the marquee will start animating delayBeforeStart: 0, //'left' or 'right' direction: 'left', //true or false - should the marquee be duplicated to show an effect of continues flow duplicated: true });
The final definition to make this all work is to include the JQuery code. Hop on over to Shared Compontens -> User Interface Attributes. Edit the Desktop interface (or whichever on apples to the page you are adding a marquee to). Now, scroll down to the Javascripot -> File URL’s and add the following line:
//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js
That’s it.. now navigate to your page and the marquee should be scrolling along. One additional enhancement that you might want to make is to shrink the text a bit for smartphones. You can do that by adding the following in the CSS -> inline section.
@media only screen and (max-width: 640px) { .messageBar { font-size: 1.5rem; padding: 0; } }
For more information see:
https://github.com/aamirafridi/jQuery.Marquee
http://aamirafridi.com/jquery/jquery-marquee-plugin