Using JS to Render Rotating Images in the Global Sidebar Widget

[scottalanmiller]

I currently have straight HTML displaying a linked image in the global sidebar and this works great (other than it loads slowly and resizes the page after it loads which is less than ideal.) I need to modify this so that it instead shows one of several different linked images. I was hoping to do this with some simple JS but when I do the document.write the whole page renders blank (after having rendered properly.) I believe that this is an async write issue with how Document.write interacts with the DOM in this situation.

But I'm not sure how to do this without that being a problem. Does anyone have guidance?

[a_5mith]

Think you need to wrap it in documentready or whatever the JS for that is. I'll have a bash when I get home, should be relatively simples.

[scottalanmiller]

@a_5mith said:

Think you need to wrap it in documentready or whatever the JS for that is. I'll have a bash when I get home, should be relatively simples.

that would be awesome, I'd really appreciate it.

[julian]

@scottalanmiller Here's the ad code we used to use here, back when we were on Lavender:

<div class="text-center">
<a id="home-ad1" class="" href="https://manage.nodebb.org/register" target="_blank"><img src="https://i.imgur.com/OxQXoua.png" /></a>
<!--<a id="home-ad2" class="hidden" href="http://pricebreaker.kindwave.com/" target="_blank"><img src="https://i.imgur.com/CgnrKmq.jpg" /></a>-->
<!--<a id="home-ad3" class="hidden" href="http://nodevember.org" target="_blank"><img src="https://i.imgur.com/fv2cq2L.png" /></a>-->
</div>

<script>
    //document.getElementById('home-ad' + (Math.floor(Math.random() * 2) + 1)).className = '';
</script>

Of course, it looks like by the end we only had 1 ad in "rotation", so I just commented out the actual js that powers it, but all of the <a> elements should have class="hidden".

[scottalanmiller]

Thanks, we have it working now!