I need to display some boxes, however when I activate the function to order them the padding between each box desappears. Do you know how to fix this?
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sito cestini</title>
<link rel="stylesheet" href="Sito.css">
<link rel="preconnect" href="https://fonts.googleapis.com" rel="preconnect" href="https://fonts.gstatic.com" crossorigin href="https://fonts.googleapis.com/css2?family=Gulzar&display=swap" rel="stylesheet">
<style>
.vertical {
border-left: 6px solid black;
height: 20px;
position:absolute;
left: 50%;
}
</style>
<script>
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(mia_posizione);
}
else{
alert('La geo-localizzazione NON è possibile');
}
function deg2rad(deg) {
return deg * (Math.PI/180);
}
function aprox(x){
if (0.1<x<1){
var k = x*10;
var m = Math.ceil(k);
var t = m *100;
return t + " m";
}
else{
return Math.ceil(x) + " km";
}
}
function mia_posizione(position) {
let latitudini = [
45.830527, 45.879442, 46.017065, 46.045482,
];
let longitudini = [
9.029344, 8.979577, 8.931969, 8.978964,
];
for(let i=0; i<latitudini.length; i++){
var latLocation = latitudini[i];
var lonLocation = longitudini[i];
var latUser = position.coords.latitude;
var lonUser = position.coords.longitude;
var R = 6371;
var dLat = deg2rad(latLocation - latUser);
var dLon = deg2rad(lonLocation - lonUser);
var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(deg2rad(latUser)) * Math.cos(deg2rad(latLocation)) * Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var y = R * c;
var Approssimazione = aprox(y)
document.getElementById(i).setAttribute("data-index", y);
const Raggio = document.getElementById(i);
if(Raggio.dataset.index>1000){
document.getElementById(i).style.display="none";
}
}
}
function comparator(a, b) {
if (a.dataset.index < b.dataset.index)
return -1;
if (a.dataset.index > b.dataset.index)
return 1;
return 0;
}
// Function to sort Data
function SortData() {
var indexes = document.querySelectorAll("[data-index]");
var indexesArray = Array.from(indexes);
let sorted = indexesArray.sort(comparator);
sorted.forEach(e =>
document.querySelector("#list").appendChild(e));
}
</script>
</head>
<body>
<div class="Map">
<div class="navbar">
<div class="logo">
<img src="Cestino.png" width="30px">
</div>
<nav>
<ul id="MenuItems">
<li><a href="">Mappa</a></li>
<li><a href="">Contatti</a></li>
<li><a href="">Missione</a></li>
<li><a href="">Supporta</a></li>
</ul>
</nav>
<img src="hamburger-menu.png" width="20px" class="menu" onclick="menutoggle()">
</div>
<div class="container">
<div class="row">
<div class="row-2">
<h1>Try it!</h1>
<p> Now</p>
<a class="btn" onclick="SortData();"> Find</a>
</div>
<div class="row-2">
<img src="Spazzatura.jpg">
</div>
</div>
<div class="Mappa">
<ul id="list">
<li class="index" data-index="2" id=0>
<div class="via"><h2> Closed </h2> <h3>
<a href="" class="Indirizzo"> Hello </a></h3>
<a href="" class="indirizzo"> Info </a></p>
<br>
<img src="water.png"> <img src="wine.png"> <img src="wood.png"> <img src="shirt.png"><img src="battery.png"><img src="documents.png"><img src="television.png"> <img src="canned-food.png"></div>
</li>
<br>
<li class="index" data-index="1" id=1> <div id=1> </div>
<div class="via"><h2> Hello</h2> <h3>
<a href="" class="Indirizzo"> My name </a></h3>
<a href="" class="indirizzo"> Info </a></p>
<br>
<img src="water.png"> <img src="wine.png"> <img src="wood.png"> <img src="shirt.png"><img src="battery.png"><img src="documents.png"><img src="television.png"><img src="canned-food.png"></div>
</li>
<br>
<li class="index" data-index="3" id=2> <h3 id=2> </h3>
<div class="via"><h2> Hi </h2> <h3>
<a href="" class="Indirizzo"> Good Morning </a></h3>
<p>
<a href="" class="indirizzo"> Info </a></p>
<br>
<img src="water.png"> <img src="wine.png"> <img src="wood.png"> <img src="battery.png"><img src="documents.png"><img src="television.png"> <img src="canned-food.png"> <img src="leaf.png"></div> </li>
<br>
<li class="index" data-index="3" id=3> <h3 id=3> </h3> <div class="via"><h2>
Good afternoon</h2> <h3>
<a href="" class="Indirizzo"> Hello </a></h3>
<p>
<a href="" class="indirizzo"> Info </a></p>
<br>
<img src="water.png"> <img src="wine.png"> <img src="wood.png"> <img src="battery.png"><img src="documents.png"><img src="television.png"> <img src="canned-food.png"> <img src="leaf.png"></div> </li>
</ul>
</div>
</div>
</div>
<!------toggle menu--------->
<script>
var MenuItems = document.getElementById("MenuItems");
MenuItems.style.maxHeight = "0px";
function menutoggle(){
if(MenuItems.style.maxHeight == "0px")
{
MenuItems.style.maxHeight = "200px"
}
else
{
MenuItems.style.maxHeight = "0px"
}
}
</script>
</body>
</html>
There is also some css code for the style of the list. But when i execute the function mia_posizione the padding between the boxes is canceled and they are displayed all too close to each other
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Gulzar', serif;
}
.navbar{
display: flex;
align-items: center;
padding: 20px;
background-color: seagreen;
}
nav{
flex: 1;
text-align: right;
}
nav ul{
display: inline-block
flex: 1;
text-align: right;
}
nav ul li{
display: inline-block;
margin-right: 20px;
}
a{
text-decoration: none;
color: black;
}
p{
color: black;
}
.container{
max-width: 1300px;
margin: auto;
padding-right: 25px;
}
.row{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.row-2{
flex-basis: 50%;
min-width: 300px;
}
.row-2 img{
max-width: 100%;
padding: 50px 0;
}
.row-2 h1{
font-size: 45px;
line-height: 55px;
margin: 25px 0;
}
.btn{
display: inline-block;
background-color: cornflowerblue;
color: #fff;
padding: 8px 30px;
margin: 30px 0;
border-radius: 30px;
transition: background 0.5s;
}
.btn:hover{
background-color: palegreen
}
.Informazioni{
display: block;
text-align: center;
padding: 50px;
margin-left: 30px;
}
.Informazioni h2{
text-align: center;
}
.Mappa{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.Mappa ul{
list-style: none;
margin: 40px 0;
}
.Mappa li{
border-style: ridge;
height: 280px;
width: 330px;
}
.Indirizzo{
text-align:center
margin-right: 20px;
}
.Categorie img{
display: block;
margin-left: auto;
margin-right: auto;
width: 35px;
padding-top: 20px;
}
.Indirizzo{
border-radius: 10px;
transition: background 0.5s;
}
.Indirizzo:hover{
color: skyblue;
}
.via{
text-align: center;
line-height: 30px;
position: relative;
top: 20px;
}
.Mappa li img{
width: 35px;
height: 35px;
display: inline-block;
margin: 4px;
}
.menu{
display: none
}
}
/*----- Menu on small screens ----*/
@media only screen and (max-width: 800px){
nav ul{
position: absolute;
top: 70px;
left: 0;
background: #333;
width: 100%;
overflow: hidden;
transition: 1s;
}
nav ul li{
display: list-item;
margin-right: 50px;
margin-bottom: 10px;
margin-top: 10px;
}
nav ul li a{
color: #fff;
}
.menu{
display: block;
cursor: pointer;
}
}
Advertisement
Answer
In your original HTML you had <br> nodes between your <li> elements providing some vertical distance. After sorting the list items you then append()-ed the <li> directly one after the other – without the <br> nodes between them into the <ul> container.
In the following snippet I removed the <br> nodes and introduced some spacing between the <li> elements with the CSS directive #list li {margin-bottom:2em}:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(mia_posizione);
} else {
alert('La geo-localizzazione NON è possibile');
}
function deg2rad(deg) {
return deg * (Math.PI / 180);
}
function aprox(x) {
if (0.1 < x < 1) {
var k = x * 10;
var m = Math.ceil(k);
var t = m * 100;
return t + " m";
} else {
return Math.ceil(x) + " km";
}
}
function mia_posizione(position) {
let latitudini = [
45.830527, 45.879442, 46.017065, 46.045482,
];
let longitudini = [
9.029344, 8.979577, 8.931969, 8.978964,
];
for (let i = 0; i < latitudini.length; i++) {
var latLocation = latitudini[i];
var lonLocation = longitudini[i];
var latUser = position.coords.latitude;
var lonUser = position.coords.longitude;
var R = 6371;
var dLat = deg2rad(latLocation - latUser);
var dLon = deg2rad(lonLocation - lonUser);
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(deg2rad(latUser)) * Math.cos(deg2rad(latLocation)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var y = R * c;
var Approssimazione = aprox(y)
document.getElementById(i).setAttribute("data-index", y);
const Raggio = document.getElementById(i);
if (Raggio.dataset.index > 1000) {
document.getElementById(i).style.display = "none";
}
}
}
function comparator(a, b) {
if (a.dataset.index < b.dataset.index)
return -1;
if (a.dataset.index > b.dataset.index)
return 1;
return 0;
}
// Function to sort Data
function SortData() {
var indexes = document.querySelectorAll("[data-index]");
var indexesArray = Array.from(indexes);
let sorted = indexesArray.sort(comparator);
sorted.forEach(e =>
document.querySelector("#list").appendChild(e));
}
var MenuItems = document.getElementById("MenuItems");
MenuItems.style.maxHeight = "0px";
function menutoggle() {
if (MenuItems.style.maxHeight == "0px") {
MenuItems.style.maxHeight = "200px"
} else {
MenuItems.style.maxHeight = "0px"
}
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.vertical {
border-left: 6px solid black;
height: 20px;
position: absolute;
left: 50%;
}
#list li {margin-bottom:2em}
body {
font-family: 'Gulzar', serif;
}
.navbar {
display: flex;
align-items: center;
padding: 20px;
background-color: seagreen;
}
nav {
flex: 1;
text-align: right;
}
nav ul {
display: inline-block flex: 1;
text-align: right;
}
nav ul li {
display: inline-block;
margin-right: 20px;
}
a {
text-decoration: none;
color: black;
}
p {
color: black;
}
.container {
max-width: 1300px;
margin: auto;
padding-right: 25px;
}
.row {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.row-2 {
flex-basis: 50%;
min-width: 300px;
}
.row-2 img {
max-width: 100%;
padding: 50px 0;
}
.row-2 h1 {
font-size: 45px;
line-height: 55px;
margin: 25px 0;
}
.btn {
display: inline-block;
background-color: cornflowerblue;
color: #fff;
padding: 8px 30px;
margin: 30px 0;
border-radius: 30px;
transition: background 0.5s;
}
.btn:hover {
background-color: palegreen
}
.Informazioni {
display: block;
text-align: center;
padding: 50px;
margin-left: 30px;
}
.Informazioni h2 {
text-align: center;
}
.Mappa {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.Mappa ul {
list-style: none;
margin: 40px 0;
}
.Mappa li {
border-style: ridge;
height: 280px;
width: 330px;
}
.Indirizzo {
text-align: center margin-right: 20px;
}
.Categorie img {
display: block;
margin-left: auto;
margin-right: auto;
width: 35px;
padding-top: 20px;
}
.Indirizzo {
border-radius: 10px;
transition: background 0.5s;
}
.Indirizzo:hover {
color: skyblue;
}
.via {
text-align: center;
line-height: 30px;
position: relative;
top: 20px;
}
.Mappa li img {
width: 35px;
height: 35px;
display: inline-block;
margin: 4px;
}
.menu {
display: none
}
}
/*----- Menu on small screens ----*/
@media only screen and (max-width: 800px) {
nav ul {
position: absolute;
top: 70px;
left: 0;
background: #333;
width: 100%;
overflow: hidden;
transition: 1s;
}
nav ul li {
display: list-item;
margin-right: 50px;
margin-bottom: 10px;
margin-top: 10px;
}
nav ul li a {
color: #fff;
}
.menu {
display: block;
cursor: pointer;
}
}<div class="Map">
<div class="navbar">
<div class="logo">
<img src="Cestino.png" width="30px">
</div>
<nav>
<ul id="MenuItems">
<li><a href="">Mappa</a></li>
<li><a href="">Contatti</a></li>
<li><a href="">Missione</a></li>
<li><a href="">Supporta</a></li>
</ul>
</nav>
<img src="hamburger-menu.png" width="20px" class="menu" onclick="menutoggle()">
</div>
<div class="container">
<div class="row">
<div class="row-2">
<h1>Try it!</h1>
<p> Now</p>
<a class="btn" onclick="SortData();">Find</a>
</div>
<div class="row-2">
<img src="Spazzatura.jpg">
</div>
</div>
<div class="Mappa">
<ul id="list">
<li class="index" data-index="2" id=0>
<div class="via">
<h2> Closed </h2>
<h3><a href="" class="Indirizzo"> Hello </a></h3>
<a href="" class="indirizzo"> Info </a></p>
<br>
<img src="water.png"> <img src="wine.png"> <img src="wood.png"> <img src="shirt.png"><img src="battery.png"><img src="documents.png"><img src="television.png"> <img src="canned-food.png"></div>
</li>
<li class="index" data-index="1" id=1>
<div id=1> </div>
<div class="via">
<h2> Hello</h2>
<h3><a href="" class="Indirizzo"> My name </a></h3>
<a href="" class="indirizzo"> Info </a></p>
<br>
<img src="water.png"> <img src="wine.png"> <img src="wood.png"> <img src="shirt.png"><img src="battery.png"><img src="documents.png"><img src="television.png"><img src="canned-food.png"></div>
</li>
<li class="index" data-index="3" id=2>
<h3 id=2> </h3>
<div class="via">
<h2> Hi </h2>
<h3><a href="" class="Indirizzo"> Good Morning </a></h3>
<p><a href="" class="indirizzo"> Info </a></p>
<br>
<img src="water.png"> <img src="wine.png"> <img src="wood.png"> <img src="battery.png"><img src="documents.png"><img src="television.png"> <img src="canned-food.png"> <img src="leaf.png"></div>
</li>
<li class="index" data-index="3" id=3>
<h3 id=3> </h3>
<div class="via">
<h2>Good afternoon</h2>
<h3><a href="" class="Indirizzo"> Hello </a></h3>
<p><a href="" class="indirizzo"> Info </a></p>
<br>
<img src="water.png"> <img src="wine.png"> <img src="wood.png"> <img src="battery.png"><img src="documents.png"><img src="television.png"> <img src="canned-food.png"> <img src="leaf.png"></div>
</li>
</ul>
</div>
</div>
</div>