Ticker

6/recent/ticker-posts

How to Add Dynamic Marquee In Oracle Apex - Javainhand Tutorial

Oracle APEX Tutorial - How to Add Dynamic Marquee In Oracle APEX
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.

Oracle APEX Tutorial - How to Add Dynamic Marquee In Oracle APEX

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

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

Post a comment

2 Comments

  1. Hi,
    thanx for your lessons, you are great!
    what is the username and password for demo in your app?
    https://apex.oracle.com/pls/apex/f?p=81446

    Thx a lot
    Paolo

    ReplyDelete
  2. Currently I can't share https://apex.oracle.com/pls/apex/f?p=81446
    this application Access.

    ReplyDelete

If you have any doubts, Please let me know