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.
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
If you like this post then please like, share and subscribe for latest Oracle Apex tutorial
2 Comments
Hi,
ReplyDeletethanx 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
Currently I can't share https://apex.oracle.com/pls/apex/f?p=81446
ReplyDeletethis application Access.
If you have any doubts, Please let me know