<div class="column"> <script> $(document).ready(function(){ setInterval(function(){ $("#refresh").load(window.location.href + " #refresh" ); }, 3000); }); </script> <div id="refresh" class="" style="border: 3px solid"> <img class="Proxy_img" src="/static/images/Proxy33.png" height="300"> <!-- <img class="Proxy_img" src="/static/images/Proxy22.jpg" height="350"> --> <div id="image2" class="View" style="border: 1px solid; float: left"> <h3> {{ front_proxy_distance }} Mtr <br><br><br><br> ⬤</h3> <p > </p> </div> </div> <script> var dist2 = 32; var objImage = null; function init2() { objImage = document.getElementById("image2"); objImage.style.position = "relative"; //objImage.style.left = "235px"; objImage.style.top = "50px"; if (dist2 >= 0 && dist2 <= 5) { objImage.style.left = "780px"; } else if (dist2 >= 6 && dist2 <= 10) { objImage.style.left = "810px"; } else if (dist2 >= 11 && dist2 <= 15) { objImage.style.left = "840px"; } else if (dist2 >= 16 && dist2 <= 20) { objImage.style.left = "870px"; } else if (dist2 >= 21 && dist2 <= 25) { objImage.style.left = "900px"; } else if (dist2 >= 26 && dist2 <= 30) { objImage.style.left = "930px"; } else if (dist2 >= 31 && dist2 <= 35) { objImage.style.left = "960px"; } else { objImage.style.left = "990px"; } } </script> </div>{% cuerpo del bloque final %}