spatial-navigation-polyfill
Version:
A polyfill for the spatial navigation
25 lines (24 loc) • 1.5 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="application-name" content="Select the best candidate">
<meta name="author" content="Jihye Hong">
<meta name="description" content="Basically, the best candidate is selected among candidates depending the calculated distance. But if there are more than one elements having the same distance, select the best candidate in order of DOM tree.">
<link rel="stylesheet" href="spatnav-style.css">
<script src="spatnav-utils.js"></script>
<script src="../../polyfill/spatial-navigation-polyfill.js"></script>
</head>
<body>
<div tabindex="0" class="box b1" style="position: absolute; left: 250px; top: 80px;"></div>
<div class="container c1" tabindex="0" style="position: relative; top: 40px; left: 350px; width:100px; height:100px; --spatial-navigation-contain: contain;">
<div tabindex="0" class="box b2" style="position: absolute; left: 50px; top: 80px;"></div>
</div>
<div tabindex="0" class="box b1" style="position: absolute; left: 150px; top: 280px;"></div>
<div class="container c1" style="position: relative; top: 40px; width:400px; height:100px; --spatial-navigation-contain: contain;">
<div tabindex="0" class="box b2" style="position: absolute; left: 20px; top: 80px;"></div>
<div tabindex="0" class="box b2" style="position: absolute; left: 250px; top: 80px;"></div>
</div>
</body>
</html>