Web Code Assistance

[Kestryll]

I'm trying to get the advertising to work on a test of what will be the new forum software. I'm like 80% there, I can get the ads to show, and randomly rotate, in a single position but if I try to set that code in to a table all it does is show the code not the ad.

It looks like this but it should be small banner ads like up top here.


I've been maintaining this ancient software for so long my knowledge is pretty far out of date. Anyone know how to make this work?

[Fizz]

You're probably using a bracket, quote, or syntax wrong within the table so you're telling it to "Display the contents as written" vs "Execute the following code within a table"

You can probably do better by having an automated resource generate code for you.

https://www.html-code-generator.com/html/marquee-generator

Or try out some stuff I had chatgpt generate (untested)

"Can you write me a css animation marquee that scrolls images left to right, with each image linking to an external website when clicked"

Certainly! Here is an example of a CSS animation that creates a scrolling image banner from left to right. Each image is wrapped in an <a> tag with the href attribute set to the external website URL.

html

<div class="marquee">
<a href="https://www.example.com"><img src="image1.jpg"></a>
<a href="https://www.example2.com"><img src="image2.jpg"></a>
<a href="https://www.example3.com"><img src="image3.jpg"></a>
<a href="https://www.example4.com"><img src="image4.jpg"></a>
</div>

css

.marquee {
overflow: hidden;
white-space: nowrap;
}

.marquee img {
display: inline-block;
vertical-align: middle;
padding-right: 50px;
animation: marquee 30s linear infinite;
}

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

In this example, the .marquee class is applied to a container element that has overflow: hidden and white-space: nowrap properties set to create a fixed width container for the images. Each image is given the display: inline-block property to display the images side by side, and the vertical-align: middle property to align the images vertically. The padding-right property creates a gap between the images.

The animation property applies the marquee animation to the images. The marquee animation moves the images from right to left with a duration of 30 seconds, and repeats indefinitely.

Note that this example uses CSS animations, which are supported in modern browsers. For older browsers, you may need to use JavaScript or a polyfill to achieve the same effect.

[Fizz]

If you want a fixed, random order grid, here is ChatGPTs suggestion

Can you write me some css that displays images in a 3 by 3 grid, in random order, where each image when clicked links to a specific external website.

Certainly! Here is an example of CSS that displays images in a 3 by 3 grid, in random order. Each image is wrapped in an <a> tag with the href attribute set to the external website URL.

html

<div class="grid">
<a href="https://www.example.com"><img src="image1.jpg"></a>
<a href="https://www.example2.com"><img src="image2.jpg"></a>
<a href="https://www.example3.com"><img src="image3.jpg"></a>
<a href="https://www.example4.com"><img src="image4.jpg"></a>
<a href="https://www.example5.com"><img src="image5.jpg"></a>
<a href="https://www.example6.com"><img src="image6.jpg"></a>
<a href="https://www.example7.com"><img src="image7.jpg"></a>
<a href="https://www.example8.com"><img src="image8.jpg"></a>
<a href="https://www.example9.com"><img src="image9.jpg"></a>
</div>

css

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}

.grid a {
display: block;
height: 100%;
}

.grid img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.grid a:nth-child(1) img {
background-image: url('image1.jpg');
}

.grid a:nth-child(2) img {
background-image: url('image2.jpg');
}

.grid a:nth-child(3) img {
background-image: url('image3.jpg');
}

.grid a:nth-child(4) img {
background-image: url('image4.jpg');
}

.grid a:nth-child(5) img {
background-image: url('image5.jpg');
}

.grid a:nth-child(6) img {
background-image: url('image6.jpg');
}

.grid a:nth-child(7) img {
background-image: url('image7.jpg');
}

.grid a:nth-child(8) img {
background-image: url('image8.jpg');
}

.grid a:nth-child(9) img {
background-image: url('image9.jpg');
}

In this example, the .grid class is applied to a container element that uses the CSS grid layout to display the images in a 3 by 3 grid. The grid-template-columns property sets the number and width of the columns, while the grid-gap property creates a gap between the images.

Each image is wrapped in an <a> tag with the href attribute set to the external website URL. The display: block property is applied to the <a> tag to make it a block-level element, and the height: 100% property makes the <a> tag take up the full height of its container.

The display: block property is also applied to the <img> tag to make it a block-level element, and the width: 100% and height: 100% properties make the image fill its container. The object-fit: cover property makes the image scale to cover the container while maintaining its aspect ratio.

To display the images in random order, you can use JavaScript to shuffle the order of the <a> tags within the .grid container.

"Can you write the JS that shuffles the .grid container"

Sure! Here's an example of how you can shuffle the order of the <a> tags within the .grid container using JavaScript:

javascript

// Get the .grid container
const grid = document.querySelector('.grid');

// Get all the <a> tags inside the .grid container
const links = Array.from(grid.querySelectorAll('a'));

// Shuffle the <a> tags
links.sort(() => Math.random() - 0.5);

// Append the shuffled <a> tags back to the .grid container
grid.innerHTML = '';
links.forEach(link => grid.appendChild(link));

In this example, we first get the .grid container using the document.querySelector() method.

Next, we use the Array.from() method to convert the NodeList of <a> tags returned by the grid.querySelectorAll('a') method into an array. We then use the Array.prototype.sort() method to shuffle the array by sorting it randomly using the Math.random() function.

Finally, we clear the .grid container using the innerHTML property and then append the shuffled <a> tags back to the container in their new order using the appendChild() method.

[Kestryll]

You're probably using a bracket, quote, or syntax wrong within the table so you're telling it to "Display the contents as written" vs "Execute the following code within a table"

You can probably do better by having an automated resource generate code for you.

https://www.html-code-generator.com/...quee-generator

Bingo, nailed it!

I used an older WYSIWYG program to generate the table and it was missing tags.
Using the table generator on that site got me going on the right track.

Thank you!!

[SactoDoug]

I would recommend you switch to Visual Studio Code or the open source version, VSCodium. They are free and are very powerful coding tools. One nice thing you can do with it is to add the Live Server extension. Live Server will show the effects of your code in real time every time you hit the save button. It is much quicker than other tools where you write the code, then hit the debug button and wait for the code to compile, then the browser to start. You hit save in VS Code and the browser immediately updates.

It is better than WYSIWYG IMO because you learn the code that generates the page.

Here is a 14 minute video that will show you how to set up VS Code or VSCodium for web development.

https://www.youtube.com/watch?v=DKxS3IkduWQ

[arrix]

Bingo, nailed it!

I used an older WYSIWYG program to generate the table and it was missing tags.
Using the table generator on that site got me going on the right track.

Thank you!!

Glad you found it. And FYI, you can use the Chrome browser debugger to find little annoyances like this. Just hit F12 then Cntl-shift C and mouse over anything on the page to see what the code looks like in real time.