Orientation example

Developer
Moreno Di Domenico
Size
2,205 Kb
Views
2,024
  1. Orientation example Previews
  2. Orientation example HTML Codes
  3. Orientation example CSS Codes
  4. Orientation example JS Codes

How do I make an orientation example?

What is a orientation example? How do you make a orientation example? This script and codes were developed by Moreno Di Domenico on 09 January 2023, Monday.

Orientation example Previews
IQ Test

Orientation example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Orientation example</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation -->
<div class="garden"> <div class="ball"></div>
</div>
<pre class="output"></pre> <script src="js/index.js"></script>
</body>
</html>

Orientation example - Script Codes CSS Codes

.garden { position: relative; width : 200px; height: 200px; border: 5px solid #CCC; border-radius: 10px;
}
.ball { position: absolute; top : 90px; left : 90px; width : 20px; height: 20px; background: green; border-radius: 100%;
}

Orientation example - Script Codes JS Codes

var ball = document.querySelector('.ball');
var garden = document.querySelector('.garden');
var output = document.querySelector('.output');
var maxX = garden.clientWidth - ball.clientWidth;
var maxY = garden.clientHeight - ball.clientHeight;
function handleOrientation(event) { var x = event.beta; // In degree in the range [-180,180] var y = event.gamma; // In degree in the range [-90,90] output.innerHTML = "absolute : " + event.absolute + "\n"; output.innerHTML += "beta : " + x + "\n"; output.innerHTML += "gamma: " + y + "\n"; // Because we don't want to have the device upside down // We constrain the x value to the range [-90,90] if (x > 90) { x = 90}; if (x < -90) { x = -90}; // To make computation easier we shift the range of // x and y to [0,180] x += 90; y += 90; // 10 is half the size of the ball // It center the positioning point to the center of the ball ball.style.top = (maxX*x/180 - 10) + "px"; ball.style.left = (maxY*y/180 - 10) + "px";
}
//window.addEventListener('deviceorientation', handleOrientation);
Orientation example - Script Codes
Orientation example - Script Codes
Home Page Home
Developer Moreno Di Domenico
Username MorenoDiDomenico
Uploaded January 09, 2023
Rating 3
Size 2,205 Kb
Views 2,024
Do you need developer help for Orientation example?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Moreno Di Domenico (MorenoDiDomenico) Script Codes
Name
A Pen by Moreno Di Domenico
Canvas Wall
OwlCarousel
Bootstrap Clean Buttons
Dependency
CSS3 Explode Menu
Animations
ScrollInView
Interactive CSS3 iPhone 6
Wheel of Fortune
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!