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.
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
mouseover because I’m not really explaining the differences between them.
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.
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…
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…
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.