javascript - Chrome does not show my website -
website not loading javascript on chrome not know why, while mozilla shows properly. not know whats wrong.
website main function 1. geo-location of client (first lat long , find nearest city) 2. weather data openweathermap api 3. display in website.
// taken , modifed https://roessland.com/blog/free-code-camp-3-a-random-quote-machine/ $(document).ready(function () { // geo if (navigator.geolocation) { navigator.geolocation.getcurrentposition(function(position) { var lat_lat = position.coords.latitude; var lon_lon = position.coords.longitude; //google maps var geocoder = new google.maps.geocoder(); var latitude = lat_lat; var longitude = lon_lon; var latlng = new google.maps.latlng(latitude,longitude); geocoder.geocode({ latlng: latlng }, function(responses) { if (responses && responses.length > 0) { // starting weather api var addressas = (responses[2].address_components[4].long_name); //get address $.getjson("http://api.openweathermap.org/data/2.5/forecast/daily?q="+addressas+"&mode=json&units=metric&cnt=10&appid=5b18b37cb72f7fbdc5714dc6b3798007 ",function(result){ // , convert temperatures celsius farenghate var curentdaytemp = math.round(result.list[0].temp.day); var curentnighttemp = math.round(result.list[0].temp.night); var secdaytemp = math.round(result.list[1].temp.day); var secnighttemp = math.round(result.list[1].temp.night); var thirddaytemp = math.round(result.list[2].temp.day); var thirdnighttemp = math.round(result.list[2].temp.night); var forthdaytemp = math.round(result.list[3].temp.day); var forthnighttemp = math.round(result.list[3].temp.night); // feting celsius far function tofar(cels) { return cels*1.8 + 32; } $("p.city").html(result.city.name); $("div.today > p.cur-weather").html(result.list[0].weather[0].description); $("div.today > p.max-temp-cel").html("day "+ curentdaytemp+" ℃"); $("div.today > p.min-temp-cel").html("night "+ curentnighttemp+" ℃"); $("div.today > p.max-temp-far").html("day "+ math.round(tofar(curentdaytemp))+" ℉"); $("div.today > p.min-temp-far").html("night "+ math.round(tofar(curentnighttemp))+" ℉"); $("div.today > p.humidity").html("humidity: "+result.list[0].humidity); $("div.today > p.wind-speed").html("wind speed: "+ result.list[0].speed); $("div.today > p.pressure").html("pressure: "+ result.list[0].pressure); $("div.today > p.clouds").html("clouds: "+ result.list[0].clouds+"%"); // 2nd day $("div.2nd-day > p.cur-weather").html(result.list[1].weather[0].description); $("div.2nd-day > p.max-temp-cel").html("day "+ secdaytemp+" ℃"); $("div.2nd-day > p.min-temp-cel").html("night "+ secnighttemp+" ℃"); $("div.2nd-day > p.max-temp-far").html("day "+ math.round(tofar(secdaytemp))+" ℉"); $("div.2nd-day > p.min-temp-far").html("night "+ math.round(tofar(secnighttemp))+" ℉"); $("div.2nd-day > p.humidity").html("humidity: "+result.list[1].humidity); $("div.2nd-day > p.wind-speed").html("wind speed: "+ result.list[1].speed); $("div.2nd-day > p.clouds").html("clouds: "+ result.list[1].clouds+"%"); // 3rd day $("div.3rd-day > p.cur-weather").html(result.list[2].weather[0].description); $("div.3rd-day > p.max-temp-cel").html("day "+ thirddaytemp+" ℃"); $("div.3rd-day > p.min-temp-cel").html("night "+ thirdnighttemp+" ℃"); $("div.3rd-day > p.max-temp-far").html("day "+ math.round(tofar(thirddaytemp))+" ℉"); $("div.3rd-day > p.min-temp-far").html("night "+ math.round(tofar(thirdnighttemp))+" ℉"); $("div.3rd-day > p.humidity").html("humidity: "+result.list[2].humidity); $("div.3rd-day > p.wind-speed").html("wind speed: "+ result.list[2].speed); $("div.3rd-day > p.clouds").html("clouds: "+ result.list[2].clouds+"%"); // 4th day $("div.4th-day > p.cur-weather").html(result.list[3].weather[0].description); $("div.4th-day > p.max-temp-cel").html("day "+ forthdaytemp+" ℃"); $("div.4th-day > p.min-temp-cel").html("night "+ forthnighttemp+" ℃"); $("div.4th-day > p.max-temp-far").html("day "+ math.round(tofar(forthdaytemp))+" ℉"); $("div.4th-day > p.min-temp-far").html("night "+ math.round(tofar(forthnighttemp))+" ℉"); $("div.4th-day > p.humidity").html("humidity: "+result.list[3].humidity); $("div.4th-day > p.wind-speed").html("wind speed: "+ result.list[3].speed); $("div.4th-day > p.clouds").html("clouds: "+ result.list[3].clouds+"%"); // add dates var today = new date(); var tod = today.getdate(); var tom = today.getdate()+1; var toat = today.getdate()+2; var toatt = today.getdate()+3; var mm = today.getmonth(); var yyyy = today.getfullyear(); today = yyyy+'-'+mm+'-'+tod; tomorow = yyyy+'-'+mm+'-'+tom; dayaftertomorow = yyyy+'-'+mm+'-'+toat; dayaftertomorowtomorow = yyyy+'-'+mm+'-'+toatt; $("p.today-time").html(today); $("p.sec-time").html(tomorow); $("p.thrd-time").html(dayaftertomorow); $("p.forth-time").html(dayaftertomorowtomorow); $('.celsius').click(function() { var $this = $(this); $this.toggleclass('fahrenheit celsius'); if($this.hasclass('fahrenheit')){ $this.text('fahrenheit'); } else { $this.text('celsius'); } $('.far-cel-toggle').toggleclass('hide show'); }); // add class body background var str = result.list[0].weather[0].id; var chclass = document.getelementbyid("tarback"); chclass.classname += "a"+str; // add class weather icons var str1 = result.list[1].weather[0].id; var str2 = result.list[2].weather[0].id; var str3 = result.list[3].weather[0].id; var icclass = document.getelementbyid("wi-ic"); icclass.classname += "wi wi-owm-"+str; var icclass = document.getelementbyid("wi-ic1"); icclass.classname += "wi wi-owm-"+str1; var icclass = document.getelementbyid("wi-ic2"); icclass.classname += "wi wi-owm-"+str2; var icclass = document.getelementbyid("wi-ic3"); icclass.classname += "wi wi-owm-"+str3; }); } else { alert('not getting address given latitude , longitude.'); } } ); }); } }); /* thunderstorm */ body.a200, body.a201, body.a202, body.a210, body.a211, body.a212, body.a221, body.a230, body.a231, body.a232 { background-image: url(https://simsim.lt/fcc/img/thunderstorm.jpg); } /* drizzle */ body.a300, body.a301, body.a302, body.a310, body.a311, body.a312, body.a313, body.a314, body.a321 { background-image: url(https://simsim.lt/fcc/img/drizzle.jpg); } /* rain */ body.a500, body.a501, body.a502, body.a503, body.a504, body.a511, body.a520, body.a521, body.a522, body.a531 { background-image: url(https://simsim.lt/fcc/img/rain.jpg); } /* snow */ body.a906, body.a903, body.a600, body.a601, body.a602, body.a611, body.a612, body.a615, body.a616, body.a620, body.a621, body.a622 { background-image: url(https://simsim.lt/fcc/img/snow.jpg); } /* atmosphere */ body.a701, body.a711, body.a721, body.a731, body.a741, body.a751, body.a761, body.a762, body.a771, body.a781 { background-image: url(https://simsim.lt/fcc/img/fog.jpg); } /* clear sky */ body.a800 { background-image: url(https://simsim.lt/fcc/img/clear-sky.jpeg); } /* clouds */ body.a801, body.a802, body.a803, body.a804 { background-image: url(https://simsim.lt/fcc/img/clouds.jpg); } /* hurricane */ body.a961, body.a960, body.a902, body.a962, body.a900, body.a901 { background-image: url(https://simsim.lt/fcc/img/hurricane.jpg); } /* hot */ body.a904 { background-image: url(https://simsim.lt/fcc/img/hot.jpg); } /* windy */ body.a905, body.a954, body.a955, body.a956, body.a958, body.a957, body.a959 { background-image: url(https://simsim.lt/fcc/img/windy.jpg); } /* clam */ body.a951, body.a952, body.a953 { background-image: url(https://simsim.lt/fcc/img/clam.jpg); } .block-warp { background-color: rgba(0, 0, 0, 0.7); border-radius: 5px; margin: 2% 0 0 0; padding: 1%; } .last-3 p, .last-3 { color: darkseagreen; } .strong {font-weight: bold;} .main i, .main p { color: beige; } .icon-wrap, .icon, .icon-wrap, .wi { font-size: 50px; padding: 0% 0 1% 0;} .link {text-align: center;} .hide {display: none;} #buttonas{ display: block; margin:1% auto; font-family: 'oswald', sans-serif; background-color: transparent; border: black 3px solid; width: 10%; line-height: 2em; }<html> <head> <link rel="stylesheet" type="text/css" href="https://simsim.lt/fcc/style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=oswald|shrikhand" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="http://simsim.lt/fcc/css/weather-icons.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfxpqpzzvqgk6tah5pvlgofqnhsod2xbe+qkpxcaflneevoeh3sl0sibvcoqvnn" crossorigin="anonymous"> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> </script> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body id="tarback" class=""> <div class="warp container-fluid"> <div class="link strong red"><a class="test" href="https://freecodecamp.com">free code camp</a> , <a href="http://openweathermap.org/">open weather map api</a></div> <div> <button id="buttonas" class="celsius">celsius</button> </div> <div class="block-warp"> <!-- main block--> <div class="row text-center"> <div class="today main strong"> <p class="today-time"></p> <p class="city h1"></p> <p class="cur-weather h3"></p> <!-- curent temp --> <i id="wi-ic" class=""></i> <div class="row"> <div class="col-xs-4 col-sm-1 today col-md-offset-5"> <p class="far-cel-toggle curent-temp-min min-temp-cel show"></p> <p class="far-cel-toggle curent-temp-min min-temp-far hide"></p> </div> <div class="col-xs-2 col-sm-1 today"> <p class="far-cel-toggle curent-temp-max max-temp-cel show"></p> <p class="far-cel-toggle curent-temp-max max-temp-far hide"></p> </div> </div> <div class="row"> <div class="col-xs-4 col-sm-1 today col-md-offset-5"> <p class="humidity"></p> </div> <div class="col-xs-2 col-sm-1 today"> <p class="wind-speed"></p> </div> </div> <div class="row"> <div class="col-xs-4 col-sm-1 today col-md-offset-5"> <p class="clouds"></p> </div> <div class="col-xs-2 col-sm-1 today"> <p class="pressure"></p> </div> </div> </div> <!-- today ends --> </div><!-- row ends --> </div><!-- inner warp ends --> <div class="last-3"> <div class="row text-center"> <div class="col-xs-2 col-md-2 col-md-offset-2 block-warp"> <div class="2nd-day"> <p class="sec-time"></p> <p class="cur-weather h4"></p> <!-- curent temp --> <i id="wi-ic1" class=""></i> <p class="cur-temp"></p> <p class="far-cel-toggle min-temp-cel show"></p> <p class="far-cel-toggle min-temp-far hide"></p> <p class="far-cel-toggle max-temp-cel show"></p> <p class="far-cel-toggle max-temp-far hide"></p> <p class="humidity"></p> <p class="wind-speed"></p> <p class="clouds"></p> </div><!-- 2nd day ends --> </div><!-- coll ends --> <div class="col-xs-2 col-md-2 col-md-offset-1 block-warp"> <div class="3rd-day"> <p class="thrd-time"></p> <p class="cur-weather h4"></p> <!-- curent temp --> <i id="wi-ic2" class=""></i> <p class="cur-temp"></p> <p class="far-cel-toggle min-temp-cel show"></p> <p class="far-cel-toggle min-temp-far hide"></p> <p class="far-cel-toggle max-temp-cel show"></p> <p class="far-cel-toggle max-temp-far hide"></p> <p class="humidity"></p> <p class="wind-speed"></p> <p class="clouds"></p> </div><!-- 3rd day ends --> </div><!-- coll ends --> <div class="col-xs-2 col-md-2 col-md-offset-1 block-warp"> <div class="4th-day"> <p class="forth-time"></p> <p class="cur-weather h4"></p> <!-- curent temp --> <i id="wi-ic3" class=""></i> <p class="cur-temp"></p> <p class="far-cel-toggle min-temp-cel show"></p> <p class="far-cel-toggle min-temp-far hide"></p> <p class="far-cel-toggle max-temp-cel show"></p> <p class="far-cel-toggle max-temp-far hide"></p> <p class="humidity"></p> <p class="wind-speed"></p> <p class="clouds"></p> </div><!-- 4th day ends --> </div><!-- coll ends --> </div><!-- row ends --> </div> </div> </body> </html>
you can use geolocation in chrome fom secure website (i.e. https protocol):
note: of chrome 50, geolocation api work on secure contexts such https. if site hosted on non-secure origin (such http) requests users location no longer function.
Comments
Post a Comment