Skip to content

AmazingFeature - Added essential mouseover handling to the OK button. #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
adamgede wants to merge 1 commit into
base: main
Choose a base branch
from
+37 −2
Open

AmazingFeature - Added essential mouseover handling to the OK button. #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions dist/js/ok.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions runhacx.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@

<link href="./dist/css/98.css" rel="stylesheet" type="text/css">
<link href="./dist/css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./dist/js/ok.js"></script>
</head>
<body>
<div class="window-layer">
<div class="window" style="width: 350px; height: auto;">
<div class="window" style="width: 350px; height: auto;" id="HacxWindow">
<div class="title-bar">
<div class="title-bar-text"><img src="./dist/img/run.png"><span>RunHacx</span></div>
<div class="title-bar-controls">
Expand All @@ -35,7 +36,7 @@
</section>

<div class="field-row">
<button type="button">Ok</button>
<button type="button" id="OkButton">Ok</button>
<button type="button">Cancel</button>
<button type="button">Browse...</button>
</div>
Expand Down
33 changes: 33 additions & 0 deletions src/js/ok.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/**
* Wait to set up the OK functionality until after the window has completed loading.
* @remarks Why 'var' instead of 'let'? Great question! We need to support WebExplorer, a precursor to Netscape, so we'll need some ancient JavaScript.
*/
window.onload = function () {
var container = document.getElementById('HacxWindow'); // Get a pointer to the container of the OK button (HacxWindow).
container.style.position = 'relative'; // Make the position relative so we can absolutely position the OK button!

/**
* Find a random number between the specified minimum and maximum.
* @param {Number} aMin Minimum value to use in the lookup.
* @param {Number} aMax Maximum value to use in the lookup.
*/
var GetRandomInRange = function (aMin, aMax) {
var random = Math.random(); // Get a pseudorandom number between 0 and 1.
var absoluteRange = (aMax - aMin); // Get the Absolute range (distance from aMin to aMax).
var randomInAbsoluteRange = random * absoluteRange; // Convert the random number to the Absolute range space.
var randomInRelativeRange = randomInAbsoluteRange + 1 + aMin; // Convert to the Relative range, by jumping up to the minimum amount and adding 1 so it's not Zero.
result = Math.floor(randomInRelativeRange); // Get the floor of this relative random number so it's an even integer.
return result; // Job's done! https://www.youtube.com/watch?v=5r06heQ5HsI
};

/**
* When a user moves their mouse over the OK button, move the button.
* @param {MouseEvent} aEvent JavaScript MouseEvent containing the target (OK button) and other relevant information.
* @remarks May have unexpected results for Mobile Devices, if those are ever invented.
*/
document.getElementById('OkButton').onmouseover = function (aEvent) {
aEvent.target.style.position = 'absolute'; // Make positioning absolute so we can move it all around in the container!
aEvent.target.style.left = GetRandomInRange(0, container.clientWidth) + 'px'; // Move the OK button to a random horizontal location (in pixels) within the container.
aEvent.target.style.top = GetRandomInRange(0, container.clientHeight) + 'px'; // Move the OK button to a random vertical location (in pixels) within the container.
};
};