Page 2 of 2

Re: Can we customize the "Continue" button?

Posted: Fri Feb 16, 2018 3:40 pm
by rleduc
This is an example of how I have created a custom HTML button to simulate the bottom continue button. You can copy the entire code right into a plaque to see it in action. Just make sure you set the "Continue Button Function" of the plaque to "none".

The position of the button can be changed by changing the bottom and right values of #btnBegin in the CSS (The stuff in between the <style></style> tags).

The dimensions of the button can be change by changing the width and height value of #btnBegin in the CSS.

You can change where the button sends the user by changing the "ARIS.exitToPlaque()" function in the JavaScript (The stuff in between the <script></script> tags).

The only issue with this method, is that there is space reserved at the bottom of the plaque for the ARIS continue button, even through the button is set to "none", and anything below this point gets hidden behind this white space. So the current position of the button is as low as it can go without being hidden.

Code: Select all

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <title>Example Button</title>
    <style>
      body {
        min-height: 886px;
      }
      #ariseSplashVideo {
            width: 100%;
      }
     
      #btnBegin {
        background: #fafafa;
        box-shadow: none;
        border-radius: 0;
        border-color: #dad6d3;
        border-width: 1px 0 0 0;
        color: #000;
        display:block;
        font-family: Helvetica Neue, Helvetica , Arial, sans-serif;
        font-size: 24px;
        font-weight: 200;
        margin: 0;
        position: absolute;
          bottom: 74px;
          right: -9px;
        text-align: right;
        width: 2000px;
        height: 60px;
        z-index: +10;
      }
     
      .continueArrow {
        color: #106e9d;
      }
     
    </style>
  </head>
  <body style="position:relative;">
    <main>
      <video id = "ariseSplashVideo" autoplay loop>
        <source src="https://www.wisc-online.com/ARISE_Files/Images/00001b%20-%20ARISE%20Splash%20Screen%20600x700.mp4" type="video/mp4">
      </video>
      <button type="button" id="btnBegin">Text Here <span class="continueArrow"> &rang; </span></button>
    </main>
    <script type="text/javascript">
      var ARIS = {};
     
      ARIS.ready = function() {
        document.getElementById("btnBegin").onclick = function() {

          ARIS.exitToPlaque(57573);
        }
      }
     
    </script>
  </body>
</html>


The above is an entire HTML page, so if you're just looking for the button portion, all you really need is the following:

HTML:

Code: Select all

<button type="button" id="btnBegin">Text Here <span class="continueArrow"> &rang; </span></button>


CSS:

Code: Select all

#btnBegin {
      background: #fafafa;
      box-shadow: none;
      border-radius: 0;
      border-color: #dad6d3;
      border-width: 1px 0 0 0;
      color: #000;
      display:block;
      font-family: Helvetica Neue, Helvetica , Arial, sans-serif;
      font-size: 24px;
      font-weight: 200;
      margin: 0;
      position: absolute;
          bottom: 74px;
          right: -9px;
      text-align: right;
      width: 2000px;
      height: 60px;
      z-index: +10;
}
     
.continueArrow {
    color: #106e9d;
}


JavaScript:

Code: Select all

<script type="text/javascript">
      var ARIS = {};
     
      ARIS.ready = function() {
        document.getElementById("btnBegin").onclick = function() {

          ARIS.exitToPlaque(57573);
        }
      }
     
</script>

Re: Can we customize the "Continue" button?

Posted: Tue Apr 24, 2018 5:53 pm
by chrish
Just now catching up on this...Awesome! Really, thanks so much, this is great!

Re: Can we customize the "Continue" button?

Posted: Wed Apr 25, 2018 5:07 am
by DerMedienwolf
rleduc, thank you very much!
Thanks for the code! :)