1. Forum
  2. USENET
  3. alt.html

  • full scroll with html marquee tag

    From bad sector@forgetski@_INVALID.net to alt.html on Fri Jan 24 19:57:40 2025
    From Newsgroup: alt.html


    I know that marquee is obsolete but I have an emergency
    in-memoriam video to produce with no time for learning
    anything else except the type of code below which does
    NOT scroll the page all the way. It stops when the first
    line hits the top of the browser. Any way to make it
    scroll until the bottom line has scrolled up to just
    above the window bottom frame? TIA


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=windows-1252">
    <meta name="GENERATOR" content="Mozilla/4.78 [en] (X11; U; Linux
    2.4.16-4GB i686) [Netscape]">
    <title></title>
    </head>
    <body bgcolor="#006600" text="white">
    <marquee direction="up" behavior="slide" scrollamount="1"
    height="200%"> <font size="+4">
    --- Synchronet 3.21d-Linux NewsLink 1.2
  • From JJ@jj4public@outlook.com to alt.html on Sat Jan 25 20:27:49 2025
    From Newsgroup: alt.html

    On Fri, 24 Jan 2025 19:57:40 -0500, bad sector wrote:
    I know that marquee is obsolete but I have an emergency
    in-memoriam video to produce with no time for learning
    anything else except the type of code below which does
    NOT scroll the page all the way. It stops when the first
    line hits the top of the browser. Any way to make it
    scroll until the bottom line has scrolled up to just
    above the window bottom frame? TIA

    Use CSS. Search for: CSS based marquee
    --- Synchronet 3.21d-Linux NewsLink 1.2
  • From Jukka K. Korpela@jukkakk@gmail.com to alt.html on Sat Jan 25 23:05:02 2025
    From Newsgroup: alt.html

    JJ wrote:
    On Fri, 24 Jan 2025 19:57:40 -0500, bad sector wrote:
    I know that marquee is obsolete but I have an emergency
    in-memoriam video to produce with no time for learning
    anything else except the type of code below which does
    NOT scroll the page all the way. It stops when the first
    line hits the top of the browser. Any way to make it
    scroll until the bottom line has scrolled up to just
    above the window bottom frame? TIA

    Use CSS. Search for: CSS based marquee

    I wrote the OPrCOs question almost verbatim to ChatGPT, just adding the of using CSS (which ChatGPT probably would have figured out itself), and I
    got this:

    You can use CSS and JavaScript to simulate the behavior of the <marquee> element. Below is an example of how you can create a scrolling effect
    with CSS and JavaScript that behaves as you describedrCoscrolling the text until the last line moves out of view.

    HTML + CSS + JavaScript Code
    html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>In-Memoriam Scroll</title>
    <style>
    body {
    background-color: #006600;
    color: white;
    margin: 0;
    overflow: hidden;
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    }
    .scroll-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    }
    .scroll-text {
    position: absolute;
    top: 100%; /* Start just outside the visible area */
    width: 100%;
    text-align: center;
    font-size: 2rem; /* Adjust font size */
    line-height: 1.5;
    }
    </style>
    </head>
    <body>
    <div class="scroll-container">
    <div class="scroll-text" id="scroll-text">
    <p>In loving memory of John Doe</p>
    <p>Forever in our hearts</p>
    <p>March 3, 1950 - December 12, 2024</p>
    <p>You will never be forgotten.</p>
    </div>
    </div>

    <script>
    const scrollText = document.getElementById('scroll-text');
    const container = document.querySelector('.scroll-container');

    // Calculate the animation duration dynamically based on text height
    const textHeight = scrollText.offsetHeight;
    const containerHeight = container.offsetHeight;
    const scrollDuration = (textHeight + containerHeight) * 10; //
    Adjust speed by multiplying

    // Apply the animation
    scrollText.style.animation = `scrollUp ${scrollDuration}ms linear`;

    // Add CSS animation via JavaScript
    const style = document.createElement('style');
    style.textContent = `
    @keyframes scrollUp {
    0% {
    top: 100%;
    }
    100% {
    top: -${textHeight}px;
    }
    }
    `;
    document.head.appendChild(style);
    </script>
    </body>
    </html>
    Explanation:
    CSS Structure:

    .scroll-container: Defines the visible area where the text scrolls. .scroll-text: The text that scrolls upwards.
    JavaScript:

    Dynamically calculates the total height of the scrolling text and the container to determine how long the scrolling animation should last.
    Uses @keyframes to define the animation that moves the text from the
    bottom to above the visible area.
    Customization:

    Modify font-size, line-height, or the speed calculation (* 10) in scrollDuration to suit your preferences.
    --- Synchronet 3.21d-Linux NewsLink 1.2
  • From bad sector@forgetski@_INVALID.net to alt.html on Sat Jan 25 23:09:38 2025
    From Newsgroup: alt.html

    On 1/25/25 16:05, Jukka K. Korpela wrote:
    JJ wrote:
    On Fri, 24 Jan 2025 19:57:40 -0500, bad sector wrote:
    I know that marquee is obsolete but I have an emergency
    in-memoriam video to produce with no time for learning
    anything else except the type of code below which does
    NOT scroll the page all the way. It stops when the first
    line hits the top of the browser. Any way to make it
    scroll until the bottom line has scrolled up to just
    above the window bottom frame?-a TIA

    Use CSS. Search for: CSS based marquee

    I wrote the OPrCOs question almost verbatim to ChatGPT, just adding the of using CSS (which ChatGPT probably would have figured out itself), and I
    got this:

    You can use CSS and JavaScript to simulate the behavior of the <marquee> element. Below is an example of how you can create a scrolling effect
    with CSS and JavaScript that behaves as you describedrCoscrolling the text until the last line moves out of view.

    HTML + CSS + JavaScript Code
    html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    -a <meta charset="UTF-8">
    -a <meta name="viewport" content="width=device-width, initial-scale=1.0">
    -a <title>In-Memoriam Scroll</title>
    -a <style>
    -a-a-a body {
    -a-a-a-a-a background-color: #006600;
    -a-a-a-a-a color: white;
    -a-a-a-a-a margin: 0;
    -a-a-a-a-a overflow: hidden;
    -a-a-a-a-a font-family: Arial, sans-serif;
    -a-a-a-a-a display: flex;
    -a-a-a-a-a align-items: center;
    -a-a-a-a-a justify-content: center;
    -a-a-a-a-a height: 100vh;
    -a-a-a }
    -a-a-a .scroll-container {
    -a-a-a-a-a position: relative;
    -a-a-a-a-a width: 100%;
    -a-a-a-a-a height: 100%;
    -a-a-a-a-a overflow: hidden;
    -a-a-a }
    -a-a-a .scroll-text {
    -a-a-a-a-a position: absolute;
    -a-a-a-a-a top: 100%; /* Start just outside the visible area */
    -a-a-a-a-a width: 100%;
    -a-a-a-a-a text-align: center;
    -a-a-a-a-a font-size: 2rem; /* Adjust font size */
    -a-a-a-a-a line-height: 1.5;
    -a-a-a }
    -a </style>
    </head>
    <body>
    -a <div class="scroll-container">
    -a-a-a <div class="scroll-text" id="scroll-text">
    -a-a-a-a-a <p>In loving memory of John Doe</p>
    -a-a-a-a-a <p>Forever in our hearts</p>
    -a-a-a-a-a <p>March 3, 1950 - December 12, 2024</p>
    -a-a-a-a-a <p>You will never be forgotten.</p>
    -a-a-a </div>
    -a </div>

    -a <script>
    -a-a-a const scrollText = document.getElementById('scroll-text');
    -a-a-a const container = document.querySelector('.scroll-container');

    -a-a-a // Calculate the animation duration dynamically based on text height
    -a-a-a const textHeight = scrollText.offsetHeight;
    -a-a-a const containerHeight = container.offsetHeight;
    -a-a-a const scrollDuration = (textHeight + containerHeight) * 10; // Adjust speed by multiplying

    -a-a-a // Apply the animation
    -a-a-a scrollText.style.animation = `scrollUp ${scrollDuration}ms linear`;

    -a-a-a // Add CSS animation via JavaScript
    -a-a-a const style = document.createElement('style');
    -a-a-a style.textContent = `
    -a-a-a-a-a @keyframes scrollUp {
    -a-a-a-a-a-a-a 0% {
    -a-a-a-a-a-a-a-a-a top: 100%;
    -a-a-a-a-a-a-a }
    -a-a-a-a-a-a-a 100% {
    -a-a-a-a-a-a-a-a-a top: -${textHeight}px;
    -a-a-a-a-a-a-a }
    -a-a-a-a-a }
    -a-a-a `;
    -a-a-a document.head.appendChild(style);
    -a </script>
    </body>
    </html>
    Explanation:
    CSS Structure:

    .scroll-container: Defines the visible area where the text scrolls. .scroll-text: The text that scrolls upwards.
    JavaScript:

    Dynamically calculates the total height of the scrolling text and the container to determine how long the scrolling animation should last.
    Uses @keyframes to define the animation that moves the text from the
    bottom to above the visible area.
    Customization:

    Modify font-size, line-height, or the speed calculation (* 10) in scrollDuration to suit your preferences.

    Thank you very much, I had to adjust the time and font but it worked out
    just perfect; the requiem is on Tuesday morning and I have to show the
    priest Sunday morning so that he can get spooled up to speed ...I just
    would not have had time to learn CSS.

    --- Synchronet 3.21d-Linux NewsLink 1.2