10.4 – D.S. 10 – Finalising the Product

Development Step Ten

Finalising the product

I have made it! This is not only the last week, but also the last development step. Looking back at all my previous dev steps and the progress I made, I have to admit that I am indeed proud of all the developments I have done. I also have my interactive movie online and to be watched by everyone. I still have a few more things to add before it is perfect. And that is why this last development step is called finalising my product.

My plans are to add some kind of help/about window that pops up the first time you visit the window and which is also viewable when you click some kind of question mark button. I also noticed that some browsers have the video quite big, which is why i am probably putting an arrow pointing downwards so people now that there is something to click if they don’t immediately see the buttons.

To jump right in I googled “how to have a pop up window in html css when visiting website”. First I found this link but when further investigating it, it felt too specific and complicated since it wouldn’t have brought me to my goal, so I looked a little more and found this Stack Overflow question where someone how can i create pop up window that loads when you enter the site?. The top answer was well up voted so I looked at it and brought the code over to my brackets. The javascript part was really small and basically only closes the window if the x is pressed.

lightBoxClose = function() {
  document.querySelector(".lightbox").classList.add("closed");
}

But I had to change the first line to:

function lightBoxClose () {}

to make it work. Then I added the html, and here I encountered the problem that the light box would display behind the video instead of on top.

<div class="lightbox">
  <div class="iframeContainer">
    <div class="toolbarLB">
      <span class="closeLB" onclick="lightBoxClose()">x</span>
    </div>
    <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpermalink.php%3Fstory_fbid%3D1346255332069110%26id%3D1345708592123784&width=500" width="500" height="287" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
    allowTransparency="true"></iframe>
  </div>
</div>

It actually took me a while until I figured out that I had to put it behind everything in the code, but also inside of a certain division. After I fixed that I put in the css and checked out the result.

body {
  margin: 0;
  background-color: #EBB;
}
.lightbox {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .5)
}
.toolbarLB {
  text-align: right;
  padding: 3px;
}
.closeLB {
  color: red;
  cursor: pointer;
}
.lightbox .iframeContainer {
  vertical-align: middle;
  background: #CCC;
  padding: 2px;
}
.lightbox.closed {
  display: none;
}

The pop up blocks all the clickable objects so you need to click the window away in order to look at the videos. So now I need to put my “help-window” in there and stylise it a little bit. My idea was to, instead of putting plane text in there, show a little image that explains all the functions. So I made that in photoshop first.

And this is the result, now I will try to implement that into the pop up overlay. After changing the source this is what I am getting:

Now I have to play around with the margin, padding and check If I can make the X disappear without loosing its hit box. So what I did was removing the X on my help screen and making the clickable X “position: absolute;”. Because it now is absolute it doesn’t push my image away. But it now is also not bound to its corner which is why I had to add 400px padding left so it moves back to its top right corner instead of the left one. I also removed all the padding from the images so the grey outline is gone (I left it at the bottom because it gives some kind of 3D effect to it). But the image was still croppped at the bottom and I didn’t really now why. So what I just did was marking at which spot its getting cut off and moving everything in photoshop up so the cropped out part is just not visible.

You might consider this cheating but I think it was a good workaround. May the smart and lazy ones be blessed with power! :D.

So this is my result which I am very happy with:

But than a problem appeared. For some reason the X is not clickable anymore. It shows the pointy mouse curser but clicking doesn’t make anything disappear.
The weird thing is that after changing the position and removing all changes I made, the X still did not have any function.

Okay I really don’t know what to do since this is also extremely frustrating. I have been trying out everything for more than an hour now, also inspecting the element and removing parts of it but nothing works. The thing is it did work in the beginning when I put the code in for the first time, so what I am going to do now is reset everything to the start and then try to figure out what went wrong.

So after rewriting all the code snippets step by step to figure out what caused the not clicking error, I managed to get it working properly but didn’t really found out what the problem was. Since I was really interested and kind of wanted to learn out of my mistake I opened both versions, the working and the old not working one and compared every single line of code.
I noticed that the problem neither came from the html, nor the javascript. But after checking the css code I didn’t find anything either. Then I switched the css codes and it worked. So what I am guessing that I might have put in a small typo at any point which made everything stop working.

Anyways I managed to get it working and this is how it looks:

 

Since this is finally done, I only need my arrow pointing down to show that there is more below the video. Once I had the arrow image I just added img inside my html and put some css to it. I also made the opacity less bright and moved it to the right side of the video. But to completely honest I wasn’t really happy with it. I think now that I have the help screen, people now that there are buttons and they will look for them. So I removed the arrow again.

Since this development step doesn’t have the length of total 8 hours yet, but I am quite satisfied with my website, I got one more idea. I want to implement the ability to press keys on the keyboard as an option. So B stands for banana, R for the Revolver, D for Dildo, G for Gun and Spacebar will play and pause the video.
First of all I obviously had to google key inputs in javascript and got to this link. Here they tell you whichever keycode the key that you are pressing has. Through this I got the following informations:

B = 66
D = 68
R = 82
G = 71
<Spacebar> = 32

Then I read through this page to figure out how to implement the Key Codes. It did deliver a lot of information but it felt more like too much to take in, so I googled a little more and found this on stack overflow.

document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.ctrlKey && evt.keyCode == 90) {
        alert("Ctrl-Z");
    }
};

I implemented this into my code and tried it and it worked! When I pressed ctrl + z it showed me the alert. So all I had to do now was putting that into my code and calling out the right functions on key presses. And this is how it looks:

document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 32) {
playPause();
}
if (evt.keyCode == 66) {
Banana();
}
if (evt.keyCode == 68) {
Dildo();
}
if (evt.keyCode == 82) {
Gun();
}
if (evt.keyCode == 71) {
sGenre();
}
};

Now the last thing is to add a small text on the site that shows that you can press you keys as well as the buttons. Or I might put it into the help pop up.

After some time elaborating, I figured that I don’t really want anything else on my website other than the buttons so I decided to put the key shortcuts into the help menu that pops up once you enter the website. But there was one more problem that came into my way and just didn’t want me to finish everything. I changed the code and added my new help pop up image and on the brackets preview it was working fine, but once I uploaded everything to Cyberduck and previewed it in my browser, the margins and changes i made in my code applied, but the image was still the old one even tho I checked that it wasn’t.

I even uploaded the image, and then downloaded it and saw that it was the new one. And then, when I checked it on a friends laptop it worked. So I am just guessing that it might take a while for me, or maybe that it has something to do with my cookies.
So after clearing my cache everything worked perfectly.

Now the last thing I want to add is a little icon in the top browser. And give the tab a name. I googled on how to do it and found this helpful threat on stack overflow. I implemented it on my website using the title and the converted my png image into an .ico image online and connected that as an href.

And this is my final product:

Retrospective:

I am happy.
Very happy and satisfied. All the work I have done till now really payed off and I can now happily show all my friends and also maybe feature bosses the work I have done. And even tho I worked more than 2 months on this there are still points to improve on like a responsive site if people visit it on a phone. But all in all I am relieved that this turned out so well and looking forward to all upcoming future projects.