Issue
When I want to display the result of the function mia_posizione the style I choose is not displayed. I traied converting the result into a string, but nothing changed. The result should be displayed in the box in the middle (vertical-align), but it doesn`t even change the font size. Any idea of what I did wrong?
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Gulzar', serif;
}
.Mappa{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.Mappa ul{
list-style: none;
}
.Mappa li{
border-style: ridge;
padding: 10px;
}
.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;
}
.Distanza{
font-size: 200px;
vertical-align: middle;
}<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 = [49.706851, 49.706453, 49.707533, 50.052488, 50.018528, 50.049205];
let longitudini = [0.200447, 0.197414, 0.368854, 1.378315, 1.489809, 1.404092];
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);
var String = Approssimazione.toString();
document.getElementById(i).innerHTML += String;
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="container">
<div class="row">
<div class="row-2">
<h1>Vicino a te</h1>
<p> Ecco a te una lista dei principali centri di riciclaggio vicino alla tua posizione. Se dovessi avere domande controlla le informazioni fornite, oppure contattaci direttamente</p>
<a class="btn" onclick="SortData();">Trova il centro più vicino a te</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>
<p> <span class="Distanza" id=0> </span> <span style="font-size: 25px; padding-left: 150px"> Eco-centro</span> <br> <span style="font-size: 20px; padding-left: 150px"><a href="" class="Indirizzo">Chiasso</a></span> <br><span class="Categorie"> <img src="PET.png"></span> </p>
</li>
<br>
<li class="index" data-index="1" id=1> <h3 id=1> </h3> </li>
<br>
<li class="index" data-index="3" id=2> <h3 id=2> </h3> <p> Ciaooo</p> </li>
<li class="index" data-index="3" id=3> <h3 id=3> </h3> <p> Come</p> </li>
<li class="index" data-index="3" id=4> <h3 id=4> </h3> <p> va?</p> </li>
<li class="index" data-index="3" id=5> <h3 id=5> </h3> <p> MA non benissimo</p> </li>
</ul>
</div>
</div>
</div>
</body>
</html>Solution
Could it be that your span with class "Distanza" closes immediately after doesnt wrap any information to be displayed?
try moving your after the information that you want to have vertical-align applied to.
Answered By - Nephter
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.