Home > Software design >  After executing a function style is no more displayed
After executing a function style is no more displayed

Time：08-07

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 > 
    
        <div >

                <div >
                    <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"  onclick="menutoggle()">
        </div>
        
        <div >
            
            <div >
                <div >
                    <h1>Try it!</h1>
                    <p> Now</p>

                    <a  onclick="SortData();"> Find</a>
                </div>

                <div >
                    <img src="Spazzatura.jpg">
                </div>

            </div>
            
         
            
            
            <div >
                
                <ul id="list">
                    
                    <li  data-index="2" id=0> 
                         <div ><h2> Closed </h2> <h3>
                            <a href="" > Hello </a></h3>
                            
                         
                            
                            <a href="" > 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  data-index="1" id=1> <div id=1> </div> 
                            <div ><h2> Hello</h2> <h3>
                            <a href="" > My name </a></h3>
                            
                           
                            
                            <a href="" > 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  data-index="3" id=2> <h3 id=2>  </h3> 
                            <div ><h2>   Hi </h2> <h3>
                            <a href="" > Good Morning </a></h3>
                            
                            <p>
                            <a href="" > 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  data-index="3" id=3> <h3 id=3>  </h3> <div ><h2> 
 Good afternoon</h2> <h3>
                            <a href="" > Hello </a></h3>
                            
                            <p>
                            <a href="" > 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;
    }
}

CodePudding user response：

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 >
  <div >
    <div >
      <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"  onclick="menutoggle()">
  </div>
  <div >
    <div >
      <div >
        <h1>Try it!</h1>
        <p> Now</p>
        <a  onclick="SortData();">Find</a>
      </div>
      <div >
        <img src="Spazzatura.jpg">
      </div>
    </div>
    <div >
      <ul id="list">
        <li  data-index="2" id=0>
          <div >
            <h2> Closed </h2>
            <h3><a href="" > Hello </a></h3>
            <a href="" > 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  data-index="1" id=1>
          <div id=1> </div>
          <div >
            <h2> Hello</h2>
            <h3><a href="" > My name </a></h3>
            <a href="" > 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  data-index="3" id=2>
          <h3 id=2> </h3>
          <div >
            <h2> Hi </h2>
            <h3><a href="" > Good Morning </a></h3>
            <p><a href="" > 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  data-index="3" id=3>
          <h3 id=3> </h3>
          <div >
            <h2>Good afternoon</h2>
            <h3><a href="" > Hello </a></h3>
            <p><a href="" > 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>

Page link：https//www.codepudding.com/Softwaredesign/501612.html

Prev:The concatenation returns me the name of the variable
Next:Not sure how to use addEventListener to watch for media query
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding