HTML Marquee

 


Step 1:

Create Region.
Type: PLSQL Dynamic Content
PLSQL Code:

DECLARE 

  sep VARCHAR2(20):= NULL; 

  CURSOR data IS 

    SELECT 'Dairy Management System.' 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://rakcpl.com/">' 

    || sep 

    || c1.message 

    || '</a >' ); 

  END LOOP; 

  htp.p('</div>'); 

  htp.p('</div >'); 

END;


Step 2:

Function and Global Variable Declaration: 

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);


Inline CSS:

@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;

}

Post a Comment

Previous Post Next Post