XF 2.0 Can someone help me figure out how to cycle through different banners in the header?

jr777

Active member
I want to display banners in my header that would randomly change, but I need them to automatically resize themselves depending on screen width, so that they always display next to the logo, instead of below it. Is there any code I could add to the built in advertising system to make that happen?

I found this, and it works great, I just need to add some code (if possible) that would make the banners automatically resize so as to display next to my logo.

HTML:
<!doctype html>
<html>
<head>
    <title>Banners</title>
    <script>
        var banners = [];
        banners.push({src: "image1.png", alt: "Image 1"});
        banners.push({src: "image2.png", alt: "Image 2"});
        banners.push({src: "image3.png", alt: "Image 3"});
        banners.push({src: "image4.png", alt: "Image 4"});
        banners.push({src: "image5.png", alt: "Image 5"});

        window.onload = function() {
            var index = Math.floor(Math.random() * banners.length);
            var ad = document.getElementById("ad");
            ad.setAttribute("src", banners[index].src);
            ad.setAttribute("alt", banners[index].alt);
            ad.style.display = "block";
        }
    </script>
    <style>
        #ad {
            display: none;
        }
    </style>
    <noscript>
        <style>
            #ad {
                display: block;
            }
        </style>
    </noscript>
</head>
<body>
    <img id="ad" src="image1.png" alt="Image 1" />
</body>
 
Last edited:
Top Bottom