scroll text across the bottom

Richb201 commented on Jul 20, 2021

I have a page I created with amazing.

I'd like to scroll some information along the bottom of the screen.

    <marquee behavior="scroll" direction="right">Here is some scrolling text... left to right!</marquee>

How can I get this to appear at the bottom of the page?

        <?php
        //#12
        SimpleCard::create(array(
            "title"=>"Contracts",
            "preset"=>"info",
            "value"=>$this->dataStore("global_summary")->get(0,"num_contracts"),
            "cssClass"=>array(
                "icon"=>"fa fa-briefcase",
                "card"=>"p-4"
            ),
        ));
        ?>
    </div>
</div>
</div>
</div>
</body>
</html>

Sebastian Morales commented on Jul 21, 2021

You can use css rules to create marquee effect:

https://stackoverflow.com/a/21233577/2873057

Let us know if it works for your case. Tks,

Richb201 commented on Nov 1, 2021

Thanks. I am not very good with css. I see how to scroll text. I'd like to scroll "total $ under supervision: x,xxx,xxx" where xxx is from a database table. XCan this be done? Can I do that with the scheme referenced?

Sebastian Morales commented on Nov 2, 2021

Pls add the following css rule to your page:

<style>
.marquee {
  width: 450px;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  width: max-content;

  padding-left: 100%;
  /* show the marquee just outside the paragraph */
  will-change: transform;
  animation: marquee 15s linear infinite;
}

.marquee span:hover {
  animation-play-state: paused
}


@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

/* Respect user preferences about animations */

@media (prefers-reduced-motion: reduce) {
  .marquee span {
    animation-iteration-count: 1;
    animation-duration: 0.01; 
    /* instead of animation: none, so an animationend event is 
     * still available, if previously attached.
     */
    width: auto;
    padding-left: 0;
  }
} 
</style>

Then put your text inside a div with class "marquee" like this:

<p class="marquee">
   <span>
       total $ under supervision: x,xxx,xxx
   </span>
</p>

Richb201 commented on Nov 2, 2021

Thanks! It is working. Two issues: 1) the text is only scrolling a distance of about 3 inches in the center of the window. I'd like it to go from side to side. 2) I'd like to make the background of the scrolling text a different color 3) it actually shows the marquee on the report. When the user scrolls the report, the marquee scrolls too. Is there a way to keep it anchored to the bottom (or top) of the screen?

Richb201 commented on Nov 2, 2021

Oh yeah, how do I populate x,xxx,xxx ? In php I would use sprintf to format that entire string?

sprintf('total $ under supervision: %d', $dollars); But here I am working in html.

<p class="marquee">
   <span>
        total US tax credits documented by Research Study Online: $x,xxx,xxx    Users: x companies in y states
   </span>
</p>

Sebastian Morales commented on Nov 3, 2021

In PHP there's a number_format function to format number with decimals, thousand separator, etc. If you meant how to get the x,xxx,xxx value from your data pls describe what its definition is. If it's a sum of a column of a datastore you could simple pull all data rows from the datastore and sum all that column values. Rgds,

Richb201 commented on Nov 3, 2021

Thx. I can get the amount and I can format it too. I just can't transfer the amount from php (how I get it) to a view file.

Sebastian Morales commented on Nov 4, 2021

This is a simple way to transfer variable from a report setup to its view:

//MyReport.php
$this->totalAmount = number_format(...);

//MyReport.view.php
echo $this->totalAmount; // in both a report setup and view, $this refers to the report object.

KoolReport's Forum

Scroll text across the bottom #2215

Build Your Excellent Data Report