Using JS to Render Rotating Images in the Global Sidebar Widget


  • Community Rep

    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?



  • 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.


  • Community Rep

    @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.


  • GNU/Linux Admin

    @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".


  • Community Rep

    Thanks, we have it working now!



Suggested Topics

  • 1
  • 4
  • 6
  • 6
  • 2
| |