| 0 | kirasiris | Categories: Tags: , , ,

moving around
Final Preview

Well, this is about – moving a div – snippet that took about 15mins to be built and was created due to wanting to do something stupid in Html and because I wanted to do something similar to my previous JavaFX assignment.

However that’s just the introduction of why I decided to do this.

The technical stuff

As always, I went to CodePen to store this snippet and be able to embed it in this post. Otherwise, I would have only put the image shown above.

Furthermore, let’s begin with the cool stuff.

The first thing to be seen is the design, it only requires an <h1> element and two anchors, with the difference being the second button requiring a position of absolute; that being very important or moving it around will not be possible.

What matters the most in this snippet is the JQuery and JavaScript. Check the first line and tell me what I’m doing there…..if you’re not a programmer this might confuse you but is easy to understand once you grab the concepts; I’m making a reference to the element that shares said Id.

This Id will be the html element that will be shown as an alert whenever the – Yes-button – gets fired and will be hidden once again the – No-button – is fired.

const Alert = document.getElementById("hidden");

With that being said, the code requires to be more complex and the only place to do that, is within the Html element that you wish to be “moved around”. Once here, is about time for you to research about hover() and mouseover because I’m not really explaining the differences between them.

MouseOver?

What’s a mouseover? well that is, an event/funtion native of most browsers. This event is very similar to the .hover() function that most developers know or should know about; what I did not like about the hover() event is that it flickers a lot, I mean a lot. In the example given below, this flickering effect is not visible but try it with an image or with a bigger div and you will see what I’m talking about.

Getting started…

We start by defining the width and height of our window and the best way to access to said attributes is by calling the – document – object.

var bodyWidth = document.body.clientWidth;
var bodyHeight = document.body.clientHeight;

Remember a document is a Html file in which the <body></body> tags are found, which in ‘iFrame concept’ is the view displayed inside of it. Put it this way, this article you’re reading is inside an undeclared iFrame, why is that?, that is because browsers know where to look for Html elements by default. In our case we’re just strictly typing one to let the browser KNOW there’s one. At least thats my understanding…

After that, we simply call our floor() and random() Math methods from JavaScript. These two methods are important because they are the ones that will allows us to get the most random and closest Integer number. With that being said we still need to multiply them by the Width and Height of our window, we do that by:

var randPosX = Math.floor((Math.random() * bodyWidth));
var randPosY = Math.floor((Math.random() * bodyHeight));

Once that is done, the rest is self explanatory. Just tell the browser to position the div whatever the fuck it wants. We’re also telling it to keep the alert hidden as long as the No-button is triggered.

Otherwise just keep moving it…

See the Pen Quieres ser mi Amigovia? by Kevin Fonseca (@kirasiris) on CodePen.

That is it. Bye Bye 🙂

NOTE: Yes, JQuery is obsolete nowawadays and is not needed but schools are still teaching Math when is not even needed in projects made with Rapberry’s PI lol…..not needed in CS in general; yes, Math is probably the reason I’ll be a “college-dropout” in May lol xD vhfsdjgkhs,fghdsg;fasg. I hate Math, it makes me think a lot. Working with code and circuits(currently watching a lot of tutorials and so far I’m loving them) is easy.

Leave a Reply

Back to Top