JavaScript Marquee to Replace <Marquee> Tags

Javascript Marquee to replace marquee tags

Here is a jQuery plugin with a lot of features:

http://jscroller2.markusbordihn.de/example/image-scroller-windiv/

And this one is "silky smooth"

http://remysharp.com/2008/09/10/the-silky-smooth-marquee/

How to change the style of a marquee tag using javascript

Try this, I have added dev and section. Section height can change with js. And you can use section in div like docking object.So Marque text works different height points.
I will glad if I help your question.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <intercept-url pattern="/favicon.ico" access="ROLE_ANONYMOUS"/>
        <link type="text/css" rel="stylesheet" href="style.css">
    </head>
    <body onload="resize()">
        <div>
            <section id="test">

            <marquee scrollamount="30" >test</marquee></section></div>
        <button id="btn">Click Me!</button>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

//CSS File (style.css)

marquee{
    font-size: 40px;
    border: solid;
    position:  absolute;
    bottom: 0;
}

div{
    position: relative;
}

//JS file (script.js)

/*jslint devel: true */

function resize() {
    "use strict";
    var x = Math.floor((Math.random() * 1080) + 1);

    let heightLet=x.toString() + "px";

var section= document.getElementById("test");

     //var marqueStyle = window.getComputedStyle(section);
        section.style.height = heightLet; 
        marqueStyle = window.getComputedStyle(section);

}

window.onload= resize;

How can I change the attribute scrollamount of a Marquee Tag in a Javascript function?

Marquee cannot change direction while running. You have to stop it, change direction then start again, but it will start from the beginning

This said, marquee is deprecated.DO NOT USE IT.

You can (and should) use CSS animations, like shown here:https://www.quackit.com/css/codes/marquees/.

Once implemented, you can use javascript to change the css animation.

What is the equivalent of marquee tag in HTML5?

By css animation you can do the same thing

.holder {  background:#ccc;  padding:0.5rem;  overflow: hidden;}.news {  animation : slide 10s linear infinite;  }
@keyframes slide {  0% {    transform: translatex(0%)  }
  100% {    transform: translatex(100%)  }}

<div class="holder">  <div class="news">Hello....</div></div>

marquee html tag usage/replacment

It is not the effect that is bad. The problem with marquee, blink and font tags is that they convey presentation not structure of your content.

jQuery transform animate translation to pure JavaScript

I struggled with this problem before I posted the question, and I continued to work on it after I posted. I in fact tried the eventual solution before, but incorrectly.
My CSS is a little more general then the M. Lak (sanwebcorner.com) example. I want to be able to define multiple marquees with different widths.

<style type='text/css'>
.gc-marquee {
  min-height: 28px;
  overflow: hidden;
  position: relative;
}
.gc-marquee > .gc-scrollingtext {
  white-space: nowrap;
  position: absolute;
}
</style>

For rendering the marquee I wanted the duration/speed to be encoded, so I used a data attribute. The text can be any number of HTML tags.

  <div class="gc-marquee" id="marq-1" style="height: 80px;background-color: black;color: #dddddd;">
    <h3 class="gc-scrollingtext" data-millisec="16000" style="margin: 15px auto;font-weight: bold;">Short marquee text!</h3>
  </div>

Finally, the real problem is the JavaScript. I was confused by pure CSS marquees. I eventually understood the problem and got beyond the syntax.

<script>
  var marqueesToShowOnce = document.querySelectorAll( 'div.gc-marquee > .gc-scrollingtext' );
  function gc_marquee_loop( gc_marquee, millisec, txtWidth, parWidth ) {
    if( gc_marquee == undefined || gc_marquee == null || millisec < 1000 ) {
      console.log( `gc_marquee_loop: ERROR, ${millisec} ${txtWidth} ${parWidth}` );
      return;
    }
    setTimeout( function( ) {
      gc_marquee.animate( [{ right: -txtWidth + 'px' }, { right: parWidth + 'px' }],
        { duration: millisec } );
      gc_marquee_loop( gc_marquee, millisec, txtWidth, parWidth );
    }, millisec );
  }
  if( marqueesToShowOnce.length > 0 ) {
    Array.prototype.forEach.call(marqueesToShowOnce, function( gc_marquee ) {
      var millisec = parseInt( gc_marquee.dataset.millisec );
      var txtWidth = gc_marquee.offsetWidth;
      var parWidth = gc_marquee.parentElement.offsetWidth;
      gc_marquee.animate( [{ right: -txtWidth + 'px' }, { right: parWidth + 'px' }],
        { duration: millisec } );
      gc_marquee_loop( gc_marquee, millisec, txtWidth, parWidth );
    } );
  }
</script>

The marquee works quite well, and now I can avoid the overhead of jQuery and use pure JavaScript.

Marquee, change content dynamically and restart scrolling

Maybe not what you want or expect. But this should restart the marquee.

I would delete and reinsert the marquee in the DOM with a new element.

setTimeout(function() {  document.getElementById("marquee").innerHTML = '<marquee>Hello! <span id="text">This is my website. Happy reading!</span></marquee>';}, 5000);

<div id="marquee"><marquee>Hello! <span id="text">Welcome to my website.</span></marquee></div>

JavaScript Marquee to Replace <Marquee> Tags