sjurs1 sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @longnt80 |http://www.freecodecamp.com/longnt80
.navbar-default .navbar-nav>li>a {
color: skyblue;
}
@bytao7mao ^^ like that
.navbar-default .navbar-brand {
color: whatever color you want;
}
bytao7mao sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1610 | @skyc0der |http://www.freecodecamp.com/skyc0der
pagnito sends brownie points to @r1chard5mith :sparkles: :thumbsup: :sparkles:
:cookie: 541 | @r1chard5mith |http://www.freecodecamp.com/r1chard5mith
baseballpoetess sends brownie points to @r1chard5mith :sparkles: :thumbsup: :sparkles:
:cookie: 542 | @r1chard5mith |http://www.freecodecamp.com/r1chard5mith
img-fluid
for bootstrap 4
img-responsive
for 3
mlaos1997 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 700 | @mot01 |http://www.freecodecamp.com/mot01
02
has a hover effect, the rest dont
01
dubnetworkpaul sends brownie points to @gr8ayu :sparkles: :thumbsup: :sparkles:
:cookie: 296 | @gr8ayu |http://www.freecodecamp.com/gr8ayu
jazzliberation sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 701 | @mot01 |http://www.freecodecamp.com/mot01
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
bytao7mao sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1611 | @skyc0der |http://www.freecodecamp.com/skyc0der
abohannon sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1612 | @skyc0der |http://www.freecodecamp.com/skyc0der
https://codepen.io/bookofbash/pen/ZKmOXW
How can I make sure this works on all browsers? A friend said it didn't work on Windows/Firefox
+ "?calback=?"
wich is the best way to changes the order of elements on xs class ?
i mean i have something like this:
A
B
and on xs devices i want it like this:
B
A
I mean i have a gird with some columns , and the thing work great untill i hit the xs class, when i m in the xs class, i want to move the order of the columns,
I read that you can move it right and left with push and pull...
But why i want is to move them up and down;
:cookie: 120 | @bytao7mao |http://www.freecodecamp.com/bytao7mao
fdemaa sends brownie points to @bytao7mao :sparkles: :thumbsup: :sparkles:
index.html:1 Refused to execute script from 'https://github.com/darkskyapp/skycons/blob/7095ecf5f653dbcadbddb0d317b42e65fe091eae/skycons.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
@fdemaa okey check the layout for the movile class; you will like it ;)
:cookie: 371 | @taslack |http://www.freecodecamp.com/taslack
fdemaa sends brownie points to @taslack :sparkles: :thumbsup: :sparkles:
spiredarc sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1613 | @skyc0der |http://www.freecodecamp.com/skyc0der
botenga sends brownie points to @taslack and @fdemaa :sparkles: :thumbsup: :sparkles:
:cookie: 133 | @fdemaa |http://www.freecodecamp.com/fdemaa
:cookie: 372 | @taslack |http://www.freecodecamp.com/taslack
<button>
it fires off a submit
event. The default behavior of submit
is to refresh your page, so you have to replace: $("#search").click(function() {
with $('#idOfYourFormElement').on('submit', function(e) {
e.preventDefault();
.... the rest of your code, ajax, etc... like you already have
alvin-capello sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1614 | @skyc0der |http://www.freecodecamp.com/skyc0der
tehnuuki sends brownie points to @taslack and @alvin-capello :sparkles: :thumbsup: :sparkles:
:cookie: 260 | @alvin-capello |http://www.freecodecamp.com/alvin-capello
:cookie: 373 | @taslack |http://www.freecodecamp.com/taslack
netrunner21 sends brownie points to @taslack :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @taslack |http://www.freecodecamp.com/taslack
$(".green").addClass("animated zoomIn infinite").on()
, line 68
if (i == 8)
This way its adds the code only at the very end of the loop.
netrunner21 sends brownie points to @longnt80 and @taslack :sparkles: :thumbsup: :sparkles:
:cookie: 325 | @longnt80 |http://www.freecodecamp.com/longnt80
:warning: netrunner21 already gave taslack points
<div class="row">
<div class="col-xs-3 col-xs-offset-9">
<img id="headshot" src="https://avatars0.githubusercontent.com/u/28329025?v=3" alt="a handsome man headshot picture" class="img-responsive">
</div>
</div>
col-xs-offset-9
is like 9 empty columns
function titleCase(str) {
return str.toLowerCase().split(' ').map(function(val){
return val.replace(/^./, function(match){
return match.toUpperCase();
});
}).join(' ');
}
tehnuuki sends brownie points to @taslack :sparkles: :thumbsup: :sparkles:
:warning: tehnuuki already gave taslack points
var weatherURL = getGeolocation();
unless you use a promise(). Put your getJSON in the function(position)
function(position)
, I mean this:navigator.geolocation.getCurrentPosition(function(position) {
goodm0urning sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1615 | @skyc0der |http://www.freecodecamp.com/skyc0der
fdemaa sends brownie points to @pagnito :sparkles: :thumbsup: :sparkles:
:cookie: 250 | @pagnito |http://www.freecodecamp.com/pagnito
http://beta.freecodecamp.com/en/signin
login and see for yourself
amitp88 sends brownie points to @fdemaa :sparkles: :thumbsup: :sparkles:
:cookie: 134 | @fdemaa |http://www.freecodecamp.com/fdemaa
@Botenga i mean the text is vertical because you put 3 columns; Try playing with the number of columns and look what you like more;
For example i put
<div class="col-xs-6">
on your codepen and it looks much nicer
botenga sends brownie points to @fdemaa :sparkles: :thumbsup: :sparkles:
:cookie: 135 | @fdemaa |http://www.freecodecamp.com/fdemaa
haha thanks man!
I was in the same situation like you, if you want to understand how the grid works, watch this video:
this guy explain it really well
https://www.youtube.com/watch?v=qIULMnbH2-o&list=PL6gx4Cwl9DGBPw1sFodruZUPheWVKchlM&index=1
@Botenga
https://codepen.io/fdemaa/pen/YQPqWX
i put 4 col to your image and delte the margin-left
lovrom sends brownie points to @padunk :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @padunk |http://www.freecodecamp.com/padunk
function simulateClicks(i) {
if (i >== simonArray.length) return;
var grid = simonArray[i];
grid.mousedown();
setTimeout(function() {
grid.mouseup();
simulateClicks(i+1);
}, 350);
}
monkingame sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
:cookie: 335 | @lordmathis |http://www.freecodecamp.com/lordmathis
monkingame sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @lordmathis |http://www.freecodecamp.com/lordmathis
//this function error
//VM81:4 Uncaught TypeError: callRecurNotWorks is not a function
var callRecurNotWorks=function (num){
if(num>10)return;
console.log(num);
callRecurNotWorks(num++);
}(0);
//this function work normally
var callRecurWorks=function (num){
if(num>10)return;
console.log(num);
num++;
callRecurWorks(num++);
};
callRecurWorks(0);
<p>Some text here</p>
inline with my image <img src = "something.com/pic">
?
happyredditor59 sends brownie points to @ivyxia123 :sparkles: :thumbsup: :sparkles:
:warning: @ivyxia123's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
p
is a block element by default
happyredditor59 sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 829 | @h1tag |http://www.freecodecamp.com/h1tag
@monkingame the first one is a self invoked anonymous function. The variable has not been asigned before the function was called. If you want to use self invoked functions this will work
(function callRecurNotWorks(num){
if(num>10)return;
console.log(num);
callRecurNotWorks(++num);
})(0);
also lookup num++ and ++num, first one returns the num value and then increments it so in your callRecurWorks call you can just pass num because you already incremented it on the previous line and passing num++ as an argument will pass num and then increment it. The second one ++num first increments the variavle and then returns it. Hope it's a little clearer
adondi sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @lordmathis |http://www.freecodecamp.com/lordmathis
$(document).ready(function() {
var $element = $(...);
$element.hide();
setTimeout(function() {
$element.show();
}, 5000);
});
My code is
$(document).ready(function() {
var $element = $('#first');
$element.hide();
setTimeout(function() {
$element.show();
}, 5000);
});
?
function success(pos) {
var crd = pos.coords;
document.getElementById("where-1").innerHTML = "Latitude: " + ${crd.latitude};
document.getElementById("where-2").innerHTML = "Longitude: " +${crd.longitude};
};
navigator.geolocation.getCurrentPosition(success);
:cookie: 338 | @lordmathis |http://www.freecodecamp.com/lordmathis
monkingame sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
`Latitude: ${crd.latitude}
`
say thanks and click my name, ...will give me points, and fill the box
mot01 sends brownie points to @mr-henderson :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @mr-henderson |http://www.freecodecamp.com/mr-henderson
thanks
or ty
or thx
or some other recognized version
mr-henderson sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 702 | @mot01 |http://www.freecodecamp.com/mot01
mr-henderson sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: mr-henderson already gave mot01 points
@MrDrDr right click the picture, click view image, and then copy and use that url
mrdrdr sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 703 | @mot01 |http://www.freecodecamp.com/mot01
matlang sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 704 | @mot01 |http://www.freecodecamp.com/mot01
$.getJSON('api-url')
.then(function(data) {
var city = data.location.city;
$('#location').text(`City: ${city}`);
});
matlang sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: matlang already gave mot01 points
$.getJSON
is the jquery way to get json data
yelhsa sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
:cookie: 339 | @lordmathis |http://www.freecodecamp.com/lordmathis
Can anybody explain to me how to chain event listeners to listen only after a certain event listener is switched??
example,
ehsansh sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
:cookie: 340 | @lordmathis |http://www.freecodecamp.com/lordmathis
ericvoigt sends brownie points to @yelhsa :sparkles: :thumbsup: :sparkles:
:cookie: 128 | @yelhsa |http://www.freecodecamp.com/yelhsa
yelhsa sends brownie points to @ericvoigt :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @ericvoigt |http://www.freecodecamp.com/ericvoigt
@Nickadiemus
function eventListener1() {
console.log('Button 1 clicked');
$('#button2').on('click', eventListener2());
}
function eventListener2() {
console.log('Button 2 clicked after button 1')
$('#button2').prop('onclick',null).off('click');
}
$(document).ready(function() {
$('#button1').on('click', eventListener1());
});
Assuming jQuery, I have not tested it but hopefully it's a good example
lordmathis sends brownie points to @ehsansh :sparkles: :thumbsup: :sparkles:
:cookie: 83 | @ehsansh |http://www.freecodecamp.com/ehsansh
display:none
element click-able?
:cookie: 341 | @lordmathis |http://www.freecodecamp.com/lordmathis
nickadiemus sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
display: none
or visibility: hidden
https://stackoverflow.com/questions/5659563/css-is-a-hidden-object-clickable
:star2: 1616 | @skyc0der |http://www.freecodecamp.com/skyc0der
mikaeloduh sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
@ericvoigt If I can help explain it better, let me know. The basic rule is that you get 12 columns per row in bootstrap. If you break that rule, which is fine in your image example, you'll need to make sure the native resolution of all your images are exactly the same size. Replace your code with this to see what I mean:
<div class="row">
<h1 id="1" class="h1text">ADJUST YOUR ALTITUDE</h1>
<div class="col-xs-6 col-md-4 gallery img"><img src="https://unsplash.it/1280/1024/?random&sig=1" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 gallery img"><img src="https://unsplash.it/1280/1024/?random&sig=2" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 gallery img"><img src="https://unsplash.it/1280/1024/?random&sig=3" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 gallery img"><img src="https://unsplash.it/1280/1024/?random&sig=4" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 gallery img"><img src="https://unsplash.it/1280/1024/?random&sig=5" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 gallery img"><img src="https://unsplash.it/1280/1024/?random&sig=6" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 gallery img"><img src="https://unsplash.it/1280/1024/?random&sig=7" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 gallery img"><img src="https://unsplash.it/1280/1024/?random&sig=7" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 gallery img"><img src="https://unsplash.it/1280/1024/?random&sig=9" class="img-responsive"></div>
</div>
^^ Those are random placeholder images from unsplash that are all the same height x width (1280x1024)
var logo = document.querySelector("logo_official");
function init() {
window.addEventListener("scroll", function(e) {
logo.classList.add("smaller");
})
}
window.onload = init()
()
of window.onload = init()
.
in front of logo_official
?
var logo...
into init
because logo
will not be defined before the window is loaded.
()
then the function object will be retrieved instead of executing it
init()
instantly like you do, its called before window is loaded - and you assign undefined
to window.onload
window.onload
needs a function to be executed when its loaded
window.onload = init();
function init() {
console.log(window.onload); // null
}
window.onload = init;
function init() {
console.log(window.onload); //function init() {console.log(window.onload);}
}
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();
document.querySelector("logo_official");
trying to select an element like <logo_official>
?
<img class="logo_official">
, in which case, you need document.querySelector(".logo_official");
alexoros sends brownie points to @yelhsa :sparkles: :thumbsup: :sparkles:
:cookie: 129 | @yelhsa |http://www.freecodecamp.com/yelhsa
nav image.smaller
instead of nav img.smaller
I am working with a set of two radio buttons such that the first one is checked by default. Following is the HTML code:
<fieldset class="summary">
<label for="radio-1">Imperial</label>
<input type="radio" name="radio-1" id="radio-1" value="1" checked>
<label for="radio-2">Metric</label>
<input type="radio" name="radio-1" id="radio-2" value="0">
</fieldset>
I am trying to set the second button as 'checked' on clicking. Following is the code:
$("input[name='radio-1'][id='radio-2']").click(function(){
$(this).prop('checked', true);
});
I am not sure how this is supposed to work. Any ideas?
ericvoigt sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1617 | @skyc0der |http://www.freecodecamp.com/skyc0der
willybeans sends brownie points to @andpawlenko :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @andpawlenko |http://www.freecodecamp.com/andpawlenko
https://source.unsplash.com/GnU2altkUSQ/1600x900
neeldvirus sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1618 | @skyc0der |http://www.freecodecamp.com/skyc0der
Hello Guys, I'm trying to access the Wind-Bow API for the Twitch.tv challenge. However I get an error message. Can someone explain me what's going on or how can I fix it?
The request:
var url = "https://wind-bow.gomix.me/twitch-api/streams/";
var targetId = "freecodecamp?";
var callback = "callback=?";
url = url + targetId + callback;
$.ajax(url, function (data){
console.log(data);
});
The error message:index.html:1 XMLHttpRequest cannot load https://wind-bow.gomix.me/twitch-api/streams/freecodecamp?callback=?. Redirect from 'https://wind-bow.gomix.me/twitch-api/streams/freecodecamp?callback=?' to 'https://wind-bow.glitch.me/twitch-api/streams/freecodecamp?callback=?' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.
juanp97 sends brownie points to @monicaparrillo :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @monicaparrillo |http://www.freecodecamp.com/monicaparrillo
$(".getQuoteBtn").on("click", function(){
$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(jsonData) {
var obj = JSON.stringify(jsonData);
$(".quoteBox").append(obj.content);
but i can insert this into my html ' [{"ID":1923,"title":"John Wanamaker","content":"
Half the money I spend on advertising is wasted; the trouble is I don’t know which half.
\n","link":"https://quotesondesign.com/john-wanamaker/"}] '
$(".getQuoteBtn").on("click", function(){
$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(jsonData) {
$(".quoteBox").html(JSON.stringify(jsonData));
ghafor sends brownie points to @monicaparrillo :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @monicaparrillo |http://www.freecodecamp.com/monicaparrillo
"navbar-fixed-top
means the navbar will stay at top always even when scrolling down. There's also fixed-bottom.
<a><img src="logog"></a>
100px so the height of <nav> element becomes 100px..button
css
andrewmparker sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 392 | @jtan3 |http://www.freecodecamp.com/jtan3
https://mail.google.com/mail/u/1/?ui=2&ik=979911f0d4&view=att&th=15c74de77ec979b9&attid=0.1&disp=safe&zw
gets a 404
andrewmparker sends brownie points to @skyc0der and @jtan3 :sparkles: :thumbsup: :sparkles:
:warning: andrewmparker already gave jtan3 points
:star2: 1619 | @skyc0der |http://www.freecodecamp.com/skyc0der
http://http://api.openweathermap.org
, but either way, codepen requires us to use https:
for everything now and unfortunately, openweathermap doesn't support https unless you spend money for a premium account. Try the Dark Sky API - that seems to be a popular alternative: https://darksky.net/dev/docs
$(document).ready(function() {
if (document.getElementByClass("quoteBox").innerHTML) {
$(".getQuoteBtn").on("click", function(){
$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(jsonData) {
$(".quoteBox").html(jsonData[0].content + jsonData[0].title);
});
});
}
});
=
at the end of the URL
cache: false
&filter[posts_per_page]=30
$.now()
will put the current date and time there for you, and will always be a new number
isabelgarcia3 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1620 | @skyc0der |http://www.freecodecamp.com/skyc0der
vorousja sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1621 | @skyc0der |http://www.freecodecamp.com/skyc0der
Hello, I'm currently trying to make a jsonP request and execute a function once its loaded. However I'm getting an error. Could someone tell me what is going on?
Here's my code:
function connectToApi (target) {
target = target + "?";
url = url + target + callback;
$.getJSON(url,StreamerObjCreate(json, target));
}
and the mistake I'm getting is Uncaught ReferenceError: json is not defined
at connectToApi
Note: url and callback have been previously defined.
function StreamerObjCreate (jsonObj, name) {
streamersObj[name] = name;
streamerObj[name].onStream = jsonObj.stream;
streamersObj[name].channel = jsonObj._links.channel;
streamersObj[name].stream = jsonObj._links.self;
}
function connectToApi (target) {
target = target + "?";
url = url + target + callback;
$.getJSON(url,StreamerObjCreate(json, target));
}
?callback=?
jquery-3.2.1.js:3869 Uncaught ReferenceError: json is not defined
at connectToApi (http://127.0.0.1:54466/Twitch.tv%20Project/script.js:26:37)
at http://127.0.0.1:54466/Twitch.tv%20Project/script.js:11:9
at Array.forEach (native)
at HTMLDocument.<anonymous> (http://127.0.0.1:54466/Twitch.tv%20Project/script.js:10:11)
at mightThrow (http://127.0.0.1:54466/Twitch.tv%20Project/jquery-3.2.1.js:3583:29)
at process (http://127.0.0.1:54466/Twitch.tv%20Project/jquery-3.2.1.js:3651:12)
function connectToApi (target) {
target = target + "?";
url = url + target + callback;
$.getJSON(url, function(json) {
StreamerObjCreate(json, target)
});
}
juanp97 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1622 | @skyc0der |http://www.freecodecamp.com/skyc0der
$.getJSON(url, json => StreamerObjCreate(json, target));
img="responsive"
and add img-responsive
as a class name: class="imgfix img-responsive"
<img id="img4" class="img-responsive imgfix" alt="favorite city" src="https://upload.wikimedia.org/wikipedia/commons/a/a7/Atlanta_Skyline_from_Buckhead.jpg">
andrewmparker sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: andrewmparker already gave skyc0der points
if($('#id of your quote container').text() !== "") {add a new quote}
'''var firstName = "Ada";
var secondLetterOfFirstName = firstName[1];
// Setup
var lastName = "Lovelace";
// Only change code below this line.
var thirdLetterOfLastName = lastName;
'''
:bulb: to format code use backticks! ``` more info
var firstName = "Ada";
var secondLetterOfFirstName = firstName[1];
// Setup
var lastName = "Lovelace";
// Only change code below this line.
var thirdLetterOfLastName = lastName;
fullmetal7777 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1623 | @skyc0der |http://www.freecodecamp.com/skyc0der
$(document).ready(function() {
if ($(".quoteBox").text() !== "") getQuote();
$(".getQuoteBtn").on("click", getQuote);
});
function getQuote() {
// Disable caching of AJAX responses
$.ajaxSetup({cache: false});
$.getJSON("https://quotesondesign.com/wp-json/posts? filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(jsonData) {
$(".quoteBox").html(jsonData[0].content + jsonData[0].title);
});
}
background-color
wrong
https://www.freecodecamp.com/joshc1224Free Code Camp
Free Code Camp
text at the end