CTA displays correctly on mobile

Author: ksen0

css/main.css

@@ -49,7 +49,7 @@ h1, h2 {
 }
 
 #main {
-  overflow:hidden;
+  overflow:none;
   position: absolute;
   top: 50%;
   left: 50%;
@@ -307,7 +307,9 @@ h1, h2 {
 #cta {
   width: 100%;
   height:100%;
-  top: 0;
+  z-index:2000;
+  top:0;
+  position:absolute;
   left: 0;
   margin-left: 0;
   margin-top: 0;
@@ -324,15 +326,14 @@ h1, h2 {
 
 .panelContainer{
   width:50%;
-  top:50%;
-  transform:translateY(-50%);
-  left:2vw;
+  top:200px;
+  left:50px;
   position:absolute
 }
 .panelHeader {
   color: #9F0C37;
   padding: 16px;
-  font-size:1.6em;
+  font-size:2em;
 }
 .panelBody {
   padding: 32px 16px;
@@ -341,6 +342,7 @@ h1, h2 {
 .panelBody .btn {
   width: 150px;
   height:150px;
+  cursor: pointer;
   border-radius: 30px;
   border:2px solid #9F0C37;
   background-color: rgba(255,255,255,0.5);
@@ -366,14 +368,14 @@ h1, h2 {
 }
 
 #donateBox{
-  position:fixed;
-  right:0px;
-  bottom:150px;
+  position:absolute;
+  padding: 16px;
+  top:200px;
   width:50%;
   max-width: 700px;
   min-width: 250px;
   color:#9F0C37;
-  padding-right: 50px;
+  right:50px;
   font-size:2em;
 }
 
@@ -563,5 +565,7 @@ h1, h2 {
   left: -50px;
   right: -50px;
   z-index: 500;
+}
+#pauseButton{
   cursor: pointer;
 }

index.html

@@ -92,8 +92,8 @@ <h1>
       <img src="assets/cta-background.png" />
       <div class="panelContainer">
         <div class="panelHeader">
-          <h2>Thanks for Watching</h2>
-          <h3>Use the links below to find out more about p5.js.</h3>
+          <h1>Thanks for Watching</h1>
+          <p>Use the links below to find out more about p5.js.</p>
         </div>
 
         <div class="panelBody">

js/main.js

@@ -59,6 +59,7 @@ var main = {
       });
 
       $("#progressBar").click(function (e) {
+        // This has been disabled 
         //console.log(script.popcorn.currentTime());
         let clickX = e.pageX;
         let width = $(window).width();

js/script.js

@@ -26,6 +26,17 @@ var script = {
       var position = pop.currentTime() / pop.duration();
       var width = position * $("#main").width();
       $("#progress").css('width', width);
+      if (position > 1 && position > 0.988){
+        $("#pause").css({ 'display': 'none' });
+        $("#progressBar").css({ 'display': 'none' });
+        $("#videoClip").css({ 'display': 'none' });
+        $("#videoCanvas").css({ 'display': 'none' });
+        $("#cta").css({ 'display': 'block' });
+        $("#cta").animate({ 'opacity': 1 }, { duration: 500 });
+
+        //$("#cta").css({ 'display': 'block' });
+        //$("#cta").animate({ 'opacity': 1 }, { duration: 500 });
+      }
     });
 
     /* Prevent picture-in-picture which breaks playthrough on mobile */
@@ -40,7 +51,6 @@ var script = {
     /* Script */
 
     // Q intro
-
     pop.code({
       start: 1,
       end: 3.9,
@@ -158,7 +168,9 @@ var script = {
       start: 38.5,
       end: 42,
       onStart: function (options) {
-        main.sketch.hideExamples();
+        try{
+          main.sketch.hideExamples();
+        } catch { }
       }
     });
 
@@ -167,7 +179,10 @@ var script = {
       start: 43,
       end: 45.1,
       onStart: function (options) {
-        main.sketch.remove();
+        try {
+          main.sketch.hideInstruction();
+          main.sketch.remove();
+        } catch { }
       }
     });
 
@@ -242,8 +257,10 @@ var script = {
       start: 82.5,
       end: 89,
       onStart: function (options) {
-        main.sketch.hideInstruction();
-        main.sketch.remove();
+        try {
+          main.sketch.hideInstruction();
+          main.sketch.remove();
+        } catch { }
       }
     })
 
@@ -292,8 +309,10 @@ var script = {
       start: 108.5,
       end: 113,
       onStart: function (options) {
-        main.sketch.stopFlocking();
-        main.sketch.remove();
+        try {
+          main.sketch.stopFlocking();
+          main.sketch.remove();
+        } catch { }
         $("#sketchCanvas").stop();
         $("#sketchCanvas").css({ opacity: 1 });
         $("#sketchCanvas").show();
@@ -435,10 +454,12 @@ var script = {
       start: 128,
       end: 130,
       onStart: function (options) {
-        main.sketch.hideInstruction();
-        main.sketch.disableMouse();
-        main.sketch.stopDrawing();
-        main.sketch.remove();
+        try {
+          main.sketch.hideInstruction();
+          main.sketch.disableMouse();
+          main.sketch.stopDrawing();
+          main.sketch.remove();
+        } catch { }
         $("#sketchCanvas").stop();
         $("#sketchCanvas").css({ opacity: 1 });
         $("#sketchCanvas").show();
@@ -453,7 +474,6 @@ var script = {
       end: 140,
       onStart: function (options) {
         main.sketch = new p5(webglSketch, "sketchCanvas");
-
         var position = main.getRelativePosition({ left: -830, top: 940 });
         var panel = main.sketch.showInstruction("(scroll + drag mouse)", position.left, position.top);
         panel.parent('sketchOverlay');
@@ -464,8 +484,10 @@ var script = {
       start: 147.5,
       end: 149,
       onStart: function (options) {
-        main.sketch.hideInstruction();
-        main.sketch.remove();
+        if (main.sketch) {
+          main.sketch.hideInstruction();
+          main.sketch.remove();
+        }
       }
     })
 
@@ -489,20 +511,25 @@ var script = {
       start: 159,
       end: 180,
       onStart: function (options) {
-        main.sketch.hideInstruction();
-        main.sketch.remove();
+        try {
+          main.sketch.hideInstruction();
+          main.sketch.remove();
+        } catch { }
       }
     })
 
 
     // CTA
     pop.code({
-      start: 240.2,
+      start: 238,
       end: 250,
       onStart: function (options) {
-        $("#pause").hide();
-        $("#progressBar").hide();
-        $("#cta").show().animate({ opacity: '1' }, { duration: 500 });
+        $("#cta").css({ 'display': 'block' });
+        $("#cta").animate({ 'opacity': 1 }, { 'duration': 500 });
+        $("#pause").css({ 'display': 'none' });
+        $("#progressBar").css({ 'display': 'none' });
+        $("#videoClip").css({ 'display': 'none' });
+        $("#videoCanvas").css({ 'display': 'none' });
       }
     });