}); //end #button.click
}); //end document.ready
for(var i=0; i<info[1].length; i++) {
$("#output").append('<div>'+info[1][i]+'</div><div>'+info[2][i]+'</div><br><br>');
}
I am getting a strange quirk.postion: absolute
hides the element even after i added z-index: 99
.
the above mentioned statement is on line-138 in the given codepen below.
https://codepen.io/neel111/pen/EvMmgZ
by removing the position: absolute
the element show up. Why position: absolute
is hidding the element?
nav ul li ul {
z-index: 99;
position: absolute;
background-color:green;
neeldvirus sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
var requestForecast = function(response) {
for (var i=0; i < response.length; i++) {
if (dom.searchText[0].value == response[i].name) {
let lat = response[i].coord.lat;
let lon = response[i].coord.lon
// break;
} else { console.log('not eq')}
// break;
}
// console.log(dom.searchText[0].value);
}
position: relative
to the parent element of the position: absolute
and still it is positioning the element relative the the parent element.var myFile = {
"New York": {
Lat: 1323,
Lon: 34234,...
}
}
[
{
"id": 707860,
"name": "Hurzuf",
"country": "UA",
"coord": {
"lon": 34.283333,
"lat": 44.549999
}
},
{
"id": 519188,
"name": "Novinki",
"country": "RU",
"coord": {
"lon": 37.666668,
"lat": 55.683334
}
},
{
"id": 1283378,
"name": "Gorkhā",
"country": "NP",
"coord": {
"lon": 84.633331,
"lat": 28
}
},
{
"id": 1270260,
"name": "State of Haryāna",
"country": "IN",
"coord": {
"lon": 76,
"lat": 29
}
},
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
let lat = position.coords.latitude;
let lon = position.coords.longitude;
let api = 'https://api.openweathermap.org/data/2.5/forecast?lat=' + lat + '&lon=' + lon + '&appid=4d8b02dd6a0915262d9f1d723f477f27&units=imperial';
$.ajax({
method:"GET",
url: api,
cache: false,
datatype: "json"
//populating HTML with data from ajax call
}).then(function(data) {
adamfaraj sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
position: absolute
is working even without assigning position: relative
to the parent element?
float
property and in the documentation it is mentioned that position:absolute
works on floated elements too. NOw it is making sense indeed and i am getting some relief :D
$(document).ready(function(){
var users = ["ESL_SC2", "freecodecamp","noobs2ninjas"]
var i=0;
while (i<users.length){
$.ajax({
type: 'GET',
url: 'https://wind-bow.glitch.me/twitch-api/users/'+users[i]+'?stream_type=live',
success: function(data) {
$('#users').append('<li>'+data.display_name+'</li>');
console.log(data)
}
})
i++
}
});
rafaelmonroy sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
$( functionName )
rafaelmonroy sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
adamfaraj sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
if (dom.wthr[0].textContent == "Clouds") {
dom.clouds.css({"display": "block"})
} else if (dom.wthr[0].textContent == "Rain" || dom.wthr[0].textContent == "Mist") {
dom.rain.css({"display": "block"})
} else if (dom.wthr[0].textContent == "Clear") {
dom.sunny.css({"display": "block"});
}
dom.searchButton.on('click keypress', requestForecast);
var requestForecast = function(e) {
if (e.which === 13 || e.type === 'click') {...
What kind of CSS tool do I need to use to make the background kinda cut off a bit to make this kind of effect? What is it called, anyway?
krckyboy sends brownie points to @hashtagyolo1 :sparkles: :thumbsup: :sparkles:
$(document).ready(function(){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
if(navigator.geolocation)
{
getTheLocation();
}
function getTheLocation()
{
img.src getJSON("https://api.apixu.com/v1/current.json?key=0ae3f8564e5642f19da100047172308&q=Paris")
output.appendChild(img);
}
});
quickspeedy sends brownie points to @feldbot :sparkles: :thumbsup: :sparkles:
getWeather(latitude, longitude);
inside your showPosition
function, after you define latitude and longitude.
latitude, longitude
in the parentheses so you can pass that data over
h1
selector
!important
:root * {
margin: 0;
}
https://fcc-weather-api.glitch.me/
as the endpoint, but the route is /api/current?lon=:longitude&lat=:latitude
. I wrote my code to have the endpoint URL as https://fcc-weather-api.glitch.me/api/current?
so I could then have the data append the query. How would I pass in something like api/current/?
to the Ajax call?
Instead of this:
var url = "https://en.wikipedia.org/w/api.php?action=query&origin=*&format=json&formatversion=2&prop=pageimages|extracts&pithumbsize=500&exintro=true&generator=search&gsrsearch=" + encodeURIComponent(searchInput.value) + "&gsrlimit=18";
I did this:
var url = [
"https://en.wikipedia.org/w/api.php",
"?action=query",
"&origin=*",
"&format=json",
"&formatversion=2",
"&prop=pageimages|extracts",
"&pithumbsize=500",
"&exintro=true",
"&generator=search",
"&gsrsearch=" + encodeURIComponent(searchInput.value),
"&gsrlimit=18"
].join("");
feldbot sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
<p style="font-style: italic;">My paragraph</p>
?
diegoignacious sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
diegoignacious sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
diegoignacious sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
<div class="overlay">
and put it under <div class='bg>
<div class="bg">
<div class="overlay">
<h1 class="text-center title">Web Developer</h1>
<h3 class="text-center subtitle">-- Daniel Saavedra --</h3>
</div>
</div>
quickspeedy sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
quickspeedy sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
const stream = "https://wind-bow.glitch.me/twitch-api/streamsssssssss/" + arr;
I'm still not sure what to test for within callback, I do
if (streamData === null) {
do the alternate;
}
and I still get nothing
streamData.stream
cjharkins sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
Hey everyone,
I'm having an issue with one of the API problems. Anyway I'm unable to get the the variables from my code to work in the rest of the code.
var navigator = '';
var latitude, longitude, url
function getVars(){
navigator.geolocation.getCurrentPosition(function(position){
latitude = position.coords.latitude;
longitude = position.coords.longitude;
url = "https://fcc-weather-api.glitch.me/api/current?lat="+latitude+"&lon="+longitude
});
console.log(url)
}
function getJson(json){
$.getJSON(url, function(json) {
$("#city").html(json.name + ", "+json.sys.country );
});
}
$(document).ready(function(){
getVars();
console.log(latitude, longitude)
getJson();
})
So when I run the page I get three undefined's for the console.logs that I ran. But then after everything has run, if I input latitude or longitude on the Chrome console, it will actually return those values. Can anyone think of the issue?
Thanks,
var latitude, longitude, url
function getVars(){
navigator.geolocation.getCurrentPosition(function(position){
latitude = position.coords.latitude;
longitude = position.coords.longitude;
url = "https://fcc-weather-api.glitch.me/api/current?lat="+latitude+"&lon="+longitude
});
getJson(url);
}
keggatron sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles: