Html coding question

wheelsup_cavu · August 26, 2023, 6:29am

The Marquee tag does not work with many browsers these days and I have tried multiple time to find out how to code the following simple html text using CSS without any luck. I just do not have the programming chops nor can I find and online editor to do it for me.

[marq=left]<img src="images/smiles/006.gif" width="25" height="29"> [size=18]Unable to view videos - Try a different browser[/size] <img src="images/smiles/006.gif" width="25" height="29"> [size=18]Unable to download files - Try a different browser[/size] <img src="images/smiles/006.gif" width="25" height="29">[/marq]

Just hoping that one of our web gurus has an idea for me on how to fix it with current website compliant coding. I am aware that my meager coding attempt is a mix of html and BB code.

Wheels

fearlessfrog · September 4, 2023, 9:42pm

GPT4 says something like this, and it looks about right:

<div class="marquee">
    <div class="item">
        <img src="images/smiles/006.gif" width="25" height="29">
        <span class="message">Unable to view videos - Try a different browser</span>
        <img src="images/smiles/006.gif" width="25" height="29">
    </div>
</div>

.marquee {
    overflow: hidden;
    position: relative;
    animation: marquee 15s linear infinite;
}

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

.item {
    display: flex;
    width: 100%;
    height: 200px;
    justify-content: center;
    align-items: center;
}

.item img {
    width: 25px;
    height: 29px;
}

.message {
    font-size: 18px;
    padding: 0 15px;
}

@keyframes marquee {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

Example file here (change the suffix from txt to html to run it in a browser)
example.txt (954 Bytes)

https://imgur.com/gxbTIjJ

wheelsup_cavu · September 4, 2023, 9:54pm

I will give it a try and get back to you.
Thanks.

Wheels

wheelsup_cavu · July 26, 2024, 11:21pm

There are going to be two problems I hope to have solved. This is the first one which had to do with the marquee/scroll feature which we attempted to resolve but it did not work in a manner that was satisfactory to the conditions that exist.

fearlessfrog:

GPT4 says something like this, and it looks about right:

<div class="marquee">
    <div class="item">
        <img src="images/smiles/006.gif" width="25" height="29">
        <span class="message">Unable to view videos - Try a different browser</span>
        <img src="images/smiles/006.gif" width="25" height="29">
    </div>
</div>

.marquee {
    overflow: hidden;
    position: relative;
    animation: marquee 15s linear infinite;
}

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

.item {
    display: flex;
    width: 100%;
    height: 200px;
    justify-content: center;
    align-items: center;
}

.item img {
    width: 25px;
    height: 29px;
}

.message {
    font-size: 18px;
    padding: 0 15px;
}

@keyframes marquee {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

Example file here (change the suffix from txt to html to run it in a browser)
example.txt (954 Bytes)

https://imgur.com/gxbTIjJ

The two images below shows how the current marquee feature limits the text, image, link, whatever, that is between the marquee tags to the confines of the Welcome to M4T block.

Right Border

Left Border

The problem that I ran into in using the Chat GPT code above is that it allows the text to scroll across the entire page instead of remaining within the borders of the Welcome to M4T block as shown in the images above.

Problem 2:

I would like to have a 13 month line chart and bar graph combined into a single entity.

The line graph portion will run from $0.00 to $2,400.00 spread across all 13 months.
- The line can be black and never change or it could be black or red until the $2400.00 dollar goal is met and then it could turn to green.
The bar graph portion will also be 13 months
- Month #1 has no goal amount since the amount shown in this column is carryover from the 2023/2024 donation drive.
  - The amount of $633.31 which is carryover from the 2023/2024 funds drive is included in the $2400.00 line chart total.
- Month # 13 is May 2025
- Monthly goal for months 2 to 13 is $200.00
  - Below $200.00 goal the bar should be shown using the color Red.
  - Above $200.00 goal the bar should be shown using the color Green.

What I want is something I can update the figures on a monthly basis and the graph will update with the figures I input. As it is now their are 3 totals for the 2024/2025 Donations drive.

Carryover amount: $633.31 - Total $633.31
May amount: $111.10 - Below goal $88.90 - Total $744.41
June amount: $89.84 - Below goal $110.16 - Total $834.25

Wheels

wheelsup_cavu · April 9, 2025, 8:07pm

Since I am strictly a monkey see, monkey do, type of html coder I use W3scools for my testing.

I am attempting to create a Horizontal bar chart with a single bar. The code below comes really close but I need the bar chart to start at zero.

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>

<canvas id="myChart" style="width:100%;max-width:200px"></canvas>

<script>
const xValues = ["Total Donations"];
const yValues = [2120.98];
const barColors = ["orange"];

new Chart("myChart", {
  type: "horizontalBar",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {
    legend: {display: false},
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    },

    title: {
      display: true,
      text: "Annual Donations Goal $2,400 (USD)"
    }
  }
});
</script>

</body>
</html>

Wheels

miRage · April 9, 2025, 9:20pm

Seems like you’re using a pretty old version of chart.js (line 3).

Might be that beginAtZero was not supported.

Check the official documentation: Chart.js | Chart.js

I used a different chart.js and modified it a little bit. Still needs some RTFM do get the rest going, I guess…

<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<body>

<canvas id="myChart" style="width:100%;max-width:200px"></canvas>

<script>
  const xValues = ["Total Donations"];
  const yValues = [2120.98];
  const barColors = ["orange"];
  
  new Chart("myChart", {
    type: "bar",
    data: {
      labels: xValues,
      datasets: [{
        backgroundColor: barColors,
        label: 'Test',
        data: yValues
      }]
    },
    options: {
      legend: {
        display: false
      },
      indexAxis: 'y',
      scales: {
        y: {
          beginAtZero: true
        }
      },
  
      title: {
        display: true,
        text: "Annual Donations Goal $2,400 (USD)"
      }
    }
  });
  </script>

</body>
</html>

wheelsup_cavu · April 10, 2025, 1:04am

That is the version still being used in the tutorials at W3Schools.

l am on my phone right now but when I get back home I will check out your example.

Wheels

wheelsup_cavu · April 10, 2025, 3:02am

Firstly Thank You for taking time to look into this request of mine @miRage.

Ok this is really close but there are a few things, likely a lot more than I realize…, that are still not quite correct.

How would you go about making the range $0 to $2,400 a constant value until the Donations amount received is more than $2,400?
Is it possible to have the amounts, 0, 500, etc, shown as USD with the $ symbol
How would I get the Total Donations Received to be part of the < script > section?
How would I get the Total Donations Received amount to be automatically equal to the total in the const yValues (line 8) section?
Is it possible to remove the orange bar to the left of Annual Donations Goal $2,400 (USD)
How would you go about having the percentage received amount shown centered in the Orange Bar?
For about the first 30% of the amount received the % amount would need to be shown to the right of the orange bar.

This is what I would like to achieve.

<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<body>

<canvas id="myChart" style="width:100%;;max-height:75px;max-width:300px"></canvas>

<script>
  const xValues = [""];
  const yValues = [633.31+111.10+89.84+72.11+111.20+109.51+240.41+128.33+148.51+110.81+163.24+52.37+150.24];
  const barColors = ["orange"];
  
  new Chart("myChart", {
    type: "bar",
    data: {
      labels: xValues,
      datasets: [{
        backgroundColor: barColors,
        label: "Annual Donations Goal $2,400 (USD)",
        data: yValues
      }]
    },
    options: {
      legend: {
        display: false
      },
      indexAxis: 'y',
      scales: {
        y: {
          beginAtZero: true
        }
      },
  
      title: {
        display: true,
        text: "Annual Donations Goal $2,400 (USD)"
      }
    }
  });
  </script>
Total Donations Received: Dollar amount should equal total of "const yValues" 
</body>
</html>

Wheels

miRage · April 10, 2025, 6:00am

That’s the RTFM part I mentioned

W3Cschool is great. What you’re doing here is beyond the scope of HTML. You’re deep in scripting teritory. To make life easier they suggested to use the chart.js library. By this they created what is called a dependency in software engineering.

It’s work to keep these tutorials up to date to the current version. Same applies to your little project.

It’s work to understand what can be configured in this library and what is a hardcoded limit. The linked documentation is your friend on this journey.

In my experience with these kind of visualization plugins it’s better to let go and not attempt to fine control every little detail. Might be easier to create the diagram in an external tool like Excel and just embed a screenshot of your result on your website.

wheelsup_cavu · April 10, 2025, 8:55am

Thank you for the additional input @miRage. I missed the link in your first post.

Wheels