Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

"wait" button move randomly around the page

Hello - this is going to be really stupid, so bear with me.

I am writing a story where you spend a large amount of time waiting in a queue. The only text on the page is a "wait button". I want the button to move around the page at random so that the user can't just hover on the same spot and mash the mouse to get through it.

I'm having a lot of trouble making it work though - what I think I need to do is get at the CSS and change the top and left margins of the "wait" button at random, which would be totally fine if I knew JS. I know enough JS to generate random numbers, but I don't know how  to get those numbers into the CSS, if you know what I mean?

Any tips greatly appreciated, thanks.

Comments

  • OK, so here's a little more info:
    My passage currently looks like this:
    <span id="waitbutton">[[Wait]]</span>
    (I know that's going to loop forever, I'll add a counter and make it end somewhere once I've got this sorted)

    And my JS passage currently looks like this:
    var posx = Math.round(Math.random() * 900);
    var posy = Math.round(Math.random() * 700);

    document.getElementById("waitbutton").style.top = posy;
    document.getElementById("waitbutton").style.left = posx;
    Now whenever I test play I get an error, "Script: document.getElementById(...) is null"
    What have I done wrong?
  • (Always state which story format you are using as they differ in syntax, functionality, and behavior.)

    wigglydude wrote:

    Now whenever I test play I get an error, "Script: document.getElementById(...) is null"
    What have I done wrong?


    You are, very likely, executing the document.getElementById() before the element is on the page.  And, if your example code is exactly what you have in a script tagged passage, then you're only executing it once at startup anyway.  You're also setting the left/top coordinates to raw numbers, which they do not take (valid values are CSS length or percentage data types).


    Anyway.  You're going to need to execute that code every time you go to the [[Wait]] passage.  Try something like the following: (goes in a script tagged passage)

    postrender["mobileWaitLink"] = function (content) {
    if (passage() === "Wait") {
    var waitEl = content.querySelector("#waitbutton");
    if (waitEl !== null) {
    var passageEl = document.querySelector(".passage");

    // modify the element's left and top coordinates, ensuring that it is not positioned
    // outside of the passage display area
    waitEl.style.left = Math.round(Math.random() * (passageEl.offsetWidth - waitEl.offsetWidth)) + "px";
    waitEl.style.top = Math.round(Math.random() * (passageEl.offsetHeight - waitEl.offsetHeight)) + "px";
    }
    }
    };
    You'll also need some styles to make it work properly: (goes in a stylesheet tagged passage)

    .passage {
    position: relative;
    }
    #waitbutton {
    position: absolute;
    }
  • Hi! And thanks!

    1. Sorry I forgot to post story format. Noob. It's sugarcane.

    2. Thanks, it sort of works! The button really likes the top left corner of the page, I'll do some tinkering and see if I can't have it explore the rest of my screen a bit.

    3. I probably shouldn't have tried this without learning Javascript fundamentals properly.

    Awesome.
  • So my wait button now flies around the page left to right at random, and it starts with a random top margin, but within a few turns it ends up at the top of the page and doesn't move back down again. Any ideas why that would be? I'm pretty sure it's something to do with the way offsetHeight() works, because if I stick in a raw number there like "700" it works just fine. ... ??
  • Is the link virtually alone?  I had assumed it wasn't.

    Try these instead.  The link should now jump around within the entire available passage display area (vertically and horizontally).

    postrender["mobileWaitLink"] = function (content) {
    if (passage() === "Wait") {
    var waitEl = content.querySelector("#waitbutton");
    if (waitEl !== null) {
    var bodyStyles = window.getComputedStyle(document.body),
    vmHeight = parseInt(bodyStyles["margin-top"], 10) + parseInt(bodyStyles["margin-bottom"], 10),
    vpHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
    poWidth = document.querySelector(".passage").offsetWidth;
    waitEl.style.left = Math.round(Math.random() * (poWidth - waitEl.offsetWidth)) + "px";
    waitEl.style.top = Math.round(Math.random() * (vpHeight - vmHeight - waitEl.offsetHeight)) + "px";
    }
    }
    };

    .body.content {
    position: relative;
    }
    #waitbutton {
    position: absolute;
    }
Sign In or Register to comment.