APEX 5 Adding a Marquee Region

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