How to Add Dynamic Marquee In Oracle APEX - Javainhand Tutorial

In this Oracle APEX Tutorial, We will explore about the Dynamic Marquee in Oracle APEX.

Let's understand, If you want to add scrolling text in your application then we have to add marquee tag in our application.

Before we proceed in this post, we have to know about the MARQUEE tag.

What is Marquee Tag in HTML?

Marquee is a display scrolling text on the web page. You can either display horizontal or vertically scrolling marquee on the web page .

Syntax of HTML Marquee Tag

<Marquee>Text Here </Marquee>

With the Marquee tag attributes, you can easily display your scrolling text from right to left or left to right.

How to Add Dynamic Marquee in Oracle APEX?

Dynamic Marquee means we will fetch some values from the database and pass that value to the marquee tag. For this implementation, you should some knowledge for creating PL/SQL Dynamic Content Region in Oracle APEX.

If you have familiar with the PL/SQL dynamic content region then you can easily understand this post.

Please Follow the below points:-

Step 1:- Create a PL/SQL Dynamic Content Region with the below code.

DECLARE 
  sep VARCHAR2(20): = NULL; 
  CURSOR data IS 
    SELECT 'Oracle Apex Tutorials By Javainhand' MESSAGE 
    FROM   dual; 

BEGIN 
  htp.p('<div class="marquee">'); 
  htp.p(' <div class="marquee-text">'); 
  FOR c1 IN data 
  LOOP 
    htp.p( '<a href="https://www.javainhand.com/">' 
    || sep 
    || c1.message 
    || '</a >' ); 
  END LOOP; 
  htp.p('</div>'); 
  htp.p('</div >'); 
END;

I am fetching the value from dual table. You can fetch value from your table instead of dual table. Now save your page and run that page.

Step 2:- Now, You have to add the below JavaScript code to your page Function and Global Declaration Section.

var marquee = $('div.marquee');
var go = true;
marquee.hover(
function () {
go = false;
},
function () {
go = true;
}
);
marquee.each(function () {
var mar = $(this),
indent = mar.width();
mar.marquee = function () {
if (go) {
indent--;
mar.css('text-indent', indent);
if (indent < -1 * mar.children('div.marquee-text').width()) {
indent = mar.width();
}
};
}
mar.data('interval', setInterval(mar.marquee, 1000 / 60));
});
console.log(marquee);

Step 3:- Add the below CSS code to your page inline section.

@media only screen and (max-width: 640px) {
 div.marquee {
  font-size: 1.5rem;
  padding: 0;
 }
}

div.marquee {
 white-space: no-wrap;
 font-size: 2.5rem;
 padding: 10px;
 background: #E5EFF8;
 overflow: hidden;
}

div.marquee>div.marquee-text {
 white-space: nowrap;
 display: inline;
 width: auto;
}

That's all for today, You can change the CSS code according to your requirement. I hope you like my (How to Add Dynamic Marquee in Oracle APEX) blog post. If you liked this post then comment in the comment box section.

You can also subscribe to our YouTube channel where we also post videos of Oracle APEX.

Demo URL