How to Add Dynamic Marquee In Oracle Apex - Javainhand Tutorial

Dynamic Marquee In Oracle Apex

Welcome to Javainhand, Today I will describe to you how to add dynamic marquee in oracle apex. Dynamic marquee is used when you have display useful information on your web page screen from any table.

Let's Start our Today Topic

What is HTML Marquee Tag?

How to Add Dynamic Marquee in Oracle Apex?

What is HTML Marquee Tag?

Let’s understand the HTML marquee tag first, Marquee is a display scrolling text on the web page. You can either display horizontal or vertically scrolling marquee.

HTML Marquee Tag

<Marquee>Text Here </Marquee>

Use of 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?

In this section, I will describe how to add dynamic marquee in the oracle apex. Basically, For this implementation, you have to knowledge about the PL/SQL dynamic content region.If you have familiar with the PL/SQL dynamic content region then you can easily understand this post.

Let's Start Follows Below Point:-

Step 1:-Create a PL/SQL Dynamic Content region and used the below code to your created region.

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;

Step 2. Now use below Javascript code in Function and Global Variable 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:-Now Last and Final Step use below CSS code in 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; }

Click here for Demo

https://apex.oracle.com/pls/apex/f?p=81446:11

If you like this post then please like, share and subscribe for latest Oracle Apex tutorial