spatial-navigation-polyfill
Version:
A polyfill for the spatial navigation
50 lines (46 loc) • 2.72 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="application-name" content="Default Spatial Navigation Behavior">
<meta name="author" content="Jihye Hong">
<meta name="description" content="You can check the <b>default spatial navigation behavior using arrow keys.</b>">
<link rel="stylesheet" href="spatnav-style.css">
<script src="spatnav-utils.js"></script>
<script src="../../polyfill/spatial-navigation-polyfill.js"></script>
</head>
<body>
<div class="container" style="width:600px; height:100px;">
<button class="box" style="top: 70px; left: 100px;"></button>
<button class="box" style="top: 10px; left: 200px;"></button>
<button class="box" style="top: 80px; left: 400px;"></button>
</div>
<div class="container" style="width:600px; height:100px;">
<button class="box" style="top: 10px; left: 200px; width: 200px"></button>
<button class="box" style="top: 50px; left: -10px;"></button>
<button class="box" style="top: 50px; left: 60px;"></button>
<button class="box" style="top: 50px; left: 130px;"></button>
</div>
<div class="container" style="width:600px; height:100px;">
<button class="box" style="position: absolute; top: 320px; left: 300px; width: 150px; height: 50px;"></button>
<button class="box" style="position: absolute; top: 300px; left: 240px; width: 100px; height: 50px;"></button>
</div>
<div class="container" style="width:600px; height:150px;">
<div class="box" tabindex="1" style="position: absolute; top: 450px; left: 200px; height: 130px; width: 350px; --spatial-navigation-contain: contain;"></div>
<button class="box" style="position: absolute; top: 450px; left: 200px; height: 90px; width: 150px;"></button>
<button class="box" style="position: absolute; top: 450px; left: 200px;"></button>
</div>
<div class="container" tabindex="0" style="width:600px; height:100px; overflow-y: scroll;">
<button class="box" style="top: 70px; left: 200px;"></button>
<button class="box" style="top: 550px; left: 200px;"></button>
</div>
<div class="container" style="width:600px; height:100px;">
<button class="box" style="top: 0px; left: 100px;"></button>
<button class="box" style="top: 0px; left: 200px;"></button>
<button class="box" style="top: 0px; left: 300px;"></button>
<button class="box" style="top: 80px; left: 100px;"></button>
<button class="box" style="top: 80px; left: 200px;"></button>
</div>
</body>
</html>