Displaying Something Occasionally

For a look at both of these methods, please visit this collection on Code Pen. Both use a fancy orange CSS background in the <body> tag that you ought ignore, though...

Some folks have no doubt noticed the little telephone I have in my sidebar. It rings on occasion. When it does, it vibrates slightly, because it’s on silent. If clicked, things spring into motion. You may not realize that there’s a certain, controllable chance to how frequently the phone vibrates. I’d like to talk a bit about applying a similar feature to your own site. Would you like to display certain content - not randomly - but rather with a chance of one in something? It’s a neat little trick, why not try it.

First, create whatever content you’d like to show. Have it set up and visible to you - make sure it works. You can do this in a testing environment, downloading your site to your hard drive, or in other ways, so that visitors don’t see it. I can’t explain how to set up said content because it’ll be unique to what you’re trying to do. Maybe you want to occasionally display a certain button; maybe instead, you want a music player to pop into the sidebar with a one-in-five chance. It depends. Either way, set things up such that the content displays.

If said content is not contained within a <div> tag, you need to wrap it in one. This may or may not affect the existing formatting or what you’re trying to achieve, so make any necessary alterations. Again, I cannot give exact advice for doing this, because it will depend on what, exactly, you’d like to display occasionally. Anyways, apply an id to the <div> tag that’s unique (of course), eg, <div id=“occasional”> or something…

Imagine this version, which features a lovely image of political philosopher and social critic Bart Simpson. The HTML for it looks simply like this...

<div id="occasional"><a href="https://en.wikipedia.org/wiki/The_Simpsons">
    <img src="https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png" alt="Eat My Shorts"></a>
<h1>Eat my shorts, perhaps?</h1>
</div>

In your CSS, use this. It will erase your secret from visibility, so that it doesn’t appear to the users normally.

    #occasional {
        display: none;
    }

And insert this into your Javascript file or the appropriate place in your HTML file (with the rest of your Javascript, usually at the bottom). This will change the visibility of the secret <div> in question, but only occasionally…

    const frequency = 2; //this number is the frequency with which your secret will become visible instead of being hidden by the css. a 2 here means it appears once every two page loads, a 4 designates that it appears once every 4 - get the picture? go wild...
    function occasionalizer() {
        const occasion = Math.floor(Math.random() * frequency) + 1;
        if (occasion === 1) {
            document.getElementById("occasional").style.display = "inherit";
        }
    }
    window.onload = occasionalizer;

As noted above, you must enter a number. In the example, it is two. This means that the event (your secret) will show on occasion half the time. Changing this number to four means that it will happen a fourth of the time. Ten? A tenth. Get the picture? Change that as you want, up to any number you wish… go wild…

To truly hide your little secret from visitors, try extracting the entire contents of <div id=“random”> into your Javascript file, though. This only, of course, works if your Javascript file is separate from your HTML. That way, visitors won’t see them (at least not easily) when viewing your site’s source code. To do this, select everything between <div id=“random”> and it’s closing </div> tag, and paste it into the Javascript as shown.

const frequency = 2; //this number is the frequency with which your secret - defined below - will appear within the <div id="occasional"></div>. a 2 here means it appears once every two page loads, a 4 designates that it appears once every 4 - get the picture? go wild...
    const occasional = 
//between the two backticks below, insert the content you'd like to appear within the div...

`<img src="https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png" alt="Eat My Shorts"><h1>Eat my shorts, perhaps?</h1>`
;
    function occasionalizer() {
        const occasion = Math.floor(Math.random() * frequency) + 1;
        if (occasion === 1) {
            document.getElementById("occasional").innerHTML = occasional;
        }
    }
    window.onload = occasionalizer;

Your <div =“occasional”> in this version should be empty in the actual HTML, and you must remove the CSS that makes it invisible. The Javascript will take care of everything, filling the <div> when necessary and leaving it blank when unnecessary. In other words, your HTML should simply look like this…

<div id="occasional">
        <!-- this div is empty because the contents are defined within the javascript and will be filled by it, if and only if the occasion presents itself... -->
    </div>

I hope this code works for you in some way, or is somehow otherwise useful. My work is not the best, however, as my husband says, I tend to believe that if it works, it's not stupid. This code, as described, helped me create several small easter eggs on this and other sites I run, and you might do the same...