speaking of project, I was wondering if someone could help me with something i'm stuck on the first proj3ect
trying to figure out how to add "written and coded by Allen Swain" below the greay body
*grey
@allenlswain putting it at the very bottom under both of the </div>s worked for me
why upon clicking "New Quote', i still can't get what i wanted
@kokleong94 you can't just stringify it because there's multiple properties of the object that is returned, such as quoteText, quoteAuthor, etc. If you put the api url in your browser you will see. So you should do something along the lines of var value = object.property and then output that
I see. I thought .stringify() is supposed to let us see the rawest possible data, so that we could know whether it's an object within 1 array, objects within objects, etc. Then could you explain why in the tutorial, we could simply strinify data from /json/cats.json?
which tutorial is that?
Get JSON with the jQuery getJSON Method
Sorry, I misunderstood your problem. Hmmmm. Could you post a link to your pen?
Ah I see
You forgot to add jquery
o.O have to add under html, css and javascript?
also unrelated to the current problem, but you forgot to add the bootstrap css, that's why your button is unchanged even though you added the btn-primary class
yeah you can add it in the quick-add in codepen
I added jQuery, but still nothing happens :/
yeah, just noticed that. hmmm
ok got it
i dont know what crossorigin.me does, but removing that part of the url fixed it. codepen doesn't work well with https
@Rallph people used crossorigin to bypass the same-origin policy
but it is not working very well recently
i dont know what the same-origin policy is
it is a measure of security in which one web-page can only access another if it they have the same origin, like host and protocol. You probably will hit it sometime if you work a lot with APIs
https://en.wikipedia.org/wiki/Same-origin_policy
https://en.wikipedia.org/wiki/Same-origin_policy
ok thanks everybody, got to afk , have something on! thankssss
ok thanks @paulotokimatu
rallph sends brownie points to @paulotokimatu :sparkles: :thumbsup: :sparkles:
:cookie: 338 | @paulotokimatu |http://www.freecodecamp.com/paulotokimatu
Hey guys I have some div elements being displaced by an unknown object that I can't find with inspector or outlining elements with borders any css gurus willing to take a look?
@JosefSaltz I can try
@paulotokimatu http://codepen.io/inkuplex/pen/yVZVRp
you're a saint for doing this on Christmas ftr
haha np
BTW do you understand the problem I'm having or should I explain more
where is the problematic div?
Assuming you are not using mobile view resolution, you should see two streamer rows are shoved to the right whilst the bottom is aligned to the left as is normal for static block elements
your resolution may be too small
but yeah they shouldn't be displaying to the right like that afaik period
ah, ok
Ideally that third panel should have three divs that contain streamer icon and name appended to it via jQuery then display like normal block elements in typical document flow
I understand, pretty strange indeed
@JosefSaltz Which element is the one behind the title?
that would be #title
unless you're talking about the header
if you add a background property in #title, you will see that it takes just a little bit of space
if you change the font-size or remove the float pro from #title it will work
@JosefSaltz If you add width: 100% to #title it will solve the problem of being in the right, but you will still have some dead space between #title and .streams. This seems like is caused by
transform: translateY(80px); from #bottom
@paulotokimatu nonetheless its a step forward thanks
josefsaltz sends brownie points to @paulotokimatu :sparkles: :thumbsup: :sparkles:
:cookie: 339 | @paulotokimatu |http://www.freecodecamp.com/paulotokimatu
How did you arrive at that conclusion #title should be on a different 3d plane than the streamer divs
@JosefSaltz Sorry, I did not understand
@paulotokimatu as far as I understand that plane that #title resides in should not be interacting with the top layers, as far as the top layers should be concerned that is just the background
@JosefSaltz I think I got it, when the page renders, #title is actually below of the final position, so the rest is rendered in the space right next to it
oh cool that was my initial idea, but I don't understand why those divs would care about their background elements
Maybe if you use something like a flexbox it would fix that?
I don't know much about these type of animations, but maybe there is something remaining in the initial position or something like that
Can someone please help me to understand why the error clause on my ajax call function doesn't trigger?
I can see the error returned through Chrome Dev Tools: GET https://api.twitch.tv/kraken/channels/brunofin 404
The returned object contains
{
"error": "Not Found",
"status": 404,
"message": "Channel 'brunofindoesntexist' does not exist"
}Can someone please help me to understand why the error clause on my ajax call function doesn't trigger?
I can see the error returned through Chrome Dev Tools: GET https://api.twitch.tv/kraken/channels/brunofin 404
The returned object contains
{
"error": "Not Found",
"status": 404,
"message": "Channel 'brunofindoesntexist' does not exist"
}
why can't I empty the previous quote text whenever I clicked "New Quote"?
@kokleong94 : Well, that's because you have your
$('#newQuote').empty() inside $.getJSON callback. Make it as a first line in your .on('click' callback and it should work
can anyone tell me if my <a> tag is set up properly at the bottom of my code. http://codepen.io/Troutman21/pen/yVrzge?editors=1000
function diffArray(arr1, arr2) {
var limit = [];
var min = [];
var newArr = [];
if (arr1.length<arr2.length){
limit = arr2;
min = arr1;
}
else if (arr1.length>arr2.length){
limit = arr1;
min = arr2;
}
else{
limit = arr1;
min = arr2;
}
for (var i =0; i<limit.length; i++){
if (limit.indexOf(min[i]) === -1){
console.log("pusing min " + min[i]);
newArr.push(min[i]);
}
if (min.indexOf(limit[i]) === -1){
console.log("pushin limit " +limit[i]);
newArr.push(limit[i]);
}
if (min.length<i){
console.log("after min " +limit[i]);
newArr.push(limit[i]);
}
}
return newArr;
}
diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]);
diffArray(["andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]);
diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]);
why can't i pass this :(
:(
any buddy to help me with CSS?
@mirrortorrent I will try, what's the issue?
still can't empty it, not sure why mine can't
CSS and html are not talking to each other, cant get CSS to show in my preview
@mirrortorrent always load your styles.css after you load all other frameworks, fonts etc
@mirrortorrent You need to put this <link rel="stylesheet" href="css/style.css"> inside <head> tag if your style.css file is in css folder
@mirrortorrent And as @sorinr said you need to load it at at last to override everything
@mirrortorrent Give the correct path of CSS file in your html file
@mirrortorrent by the time styles.css is loading the font its not available yet as you load it later. hope it makes sense
got nothing :worried:
and I cant find any examples anywhare!
Any link where we can see your code?
@mirrortorrent where do you have the styles.css file on server?
its not on my server https://thimble.mozilla.org
@mirrortorrent I guess your file name is style.css as you have used style.css here <li><a href="style.css">Online Academy</a></li>
yes
@mirrortorrent try changing this <link rel="stylesheet" type="text/css" href="styles.css"> to <link rel="stylesheet" type="text/css" href="style.css">
and i load the fonts first?
Yes load the fonts first
ok I got <head> fonts then css link </head> ?
Yes
look better , but still....
fonts did change nothing else
did you change to style.css?
<head>
<link href="https://fonts.googleapis.com/css?family=Lobster|Oxygen" rel="style.css">
<link rel="styles.css" type="text/css" href="style.css">
</head>
<link href="https://fonts.googleapis.com/css?family=Lobster|Oxygen" rel="style.css">
<link rel="styles.css" type="text/css" href="style.css">
</head>
@mirrortorrent change in css ul instead of lu and remove the . (point) after a in lu a.
@mirrortorrent Add this <link rel="stylesheet" type="text/css" href="style.css">
@mirrortorrent yup, is it working?
just the fonts
navbar dose not exist
thank you! :)
You figured it out?
oh!oh!oh!oh! my links highlight !
thanks I know I was over looking something!
better then it was!
Cool
@mirrortorrent in css change #navbar to .navbar. its not an id its a class
did that, that did'ent change
ul .navbar{
@mirrortorrent take a look here
looks the same?
@mirrortorrent nope. i just added in css some properties to make your navbar looking inline
sorry, not coming up
@mirrortorrent have you opened that link("here") provided above?
opened, i see a older version. dont see what you are trying to show me
but I am loving the effort
how you do that??????????
@mirrortorrent do what?
be awesome!
how do you post a screenshot on this chat?
@nathanthai drag and drop the img
I am trying to center my name in the middle of the h1
not just horizontally, but vertically as well
have you played wtih the padding? up it!
20px
i brooked it @sorinr , the whole thing is red
@mirrortorrent oh, ok. I was originally thinking there was some sort of automatic way of making the text centered vertically, sort of like what "text-align: center" does horizontally
@mirrortorrent look again at the screenshot above and see what have you added or not commented out
took out <hr>
@nathanthai try putting the height 1em? making a guess here.
var myJSON = [
{ "firstName":"John", "lastName":"Doe" },
{ "firstName":"Anna", "lastName":"Smith" },
{ "firstName":"Peter","lastName": "Jones" }
];
var myObj = JSON.parse(myJSON);
//document.getElementById("demo").innerHTML = "Hello";
$("#demo").html(myObj[0]["firstName"]);
@nathanthai add line-height: 2em as the font-size
@sorinr fixed it
@mirrortorrent :+1:
how do you spaced the links equity?
thank you and goodnight
In media queries, how do i target devices with more than 1400px to infinity?
hello campers
campers please i need help i want to build my portfolio and the jquery on the javascript keeps putting a red exclamation sign under the code page in codepen i changed the settings to jquery still showing error please help
$(document).ready(function() {});
```js
var myJSON = [
{ "firstName":"John", "lastName":"Doe" },
{ "firstName":"Anna", "lastName":"Smith" },
{ "firstName":"Peter","lastName": "Jones" }
];
var myObj = JSON.parse(myJSON);
//document.getElementById("demo").innerHTML = "Hello";
$("#demo").html(myObj[0]["firstName"]);
```
This does not give the desired effect in html. Why?
Fixed it, seems you should no tparse
@Bene2dict add the jquery library
please how do i do it please
@Bene2dict got to settings, and then under javascript, add jquery
@Bene2dict after that save and close
yeah i did but it stilll doesn't show
anyone there
@Bene2dict remove the bracket after documetn
thanks its gone
$( document ).ready(function() {
console.log( "ready!" );
});
could anybody can help these 2 issues? 1, if i delete one recipe, then the next following recipe will open immeadiately; 2, how can i make the delete and edit buttons be both moved to the right end ? http://codepen.io/c0d0er/pen/RoEBvx?editors=0100
This is a CSS Only Gallery with Zoom
hi dudes
i hope you all doing well
hai guys
<p><span class="circle transparent-text">i</span> Lorem Ipsum</p>
why this code doesnt going to be one line<
the circle class is just that
background-color: #E74C3C;
border-radius: 50%;
width: 16px;
height: 16px;
border-radius: 50%;
width: 16px;
height: 16px;
:/
<p><span class="circle transparent-text">i</span> Lorem ipsum</p>.circle {
background-color: #E74C3C;
border-radius: 50%;
width: 16px;
height: 16px;
}
HI guys! Just got to the tribute page challenge of FCC. It feels great to be here.
@Kaykwanu :+1:
I'm trying to make my way around the Basic Algorithm Scripting module and I'm kind of stuck at the title case . This is what I've came up to 'function titleCase(str) {
var arrayStr = str.split(' ');
for (var i = 0; i < arrayStr.length; i++){
arrayStr[i][0] = arrayStr[i][0].toUpperCase();
}
console.log(arrayStr.join(' '));
}' (I'm using NodeJS to be able to experiment a bit more ) .
var arrayStr = str.split(' ');
for (var i = 0; i < arrayStr.length; i++){
arrayStr[i][0] = arrayStr[i][0].toUpperCase();
}
console.log(arrayStr.join(' '));
}' (I'm using NodeJS to be able to experiment a bit more ) .
@evilmann2 : Remember, strings are are immutable (can't be changed)
You must reassign them with new value should you want to change them
arrayStr[i] = arrayStr[i][0].toUpperCase() + arrayStr[i].slice(1);
thank you very much @adityaparab kind Sir :D
evilmann2 sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 731 | @adityaparab |http://www.freecodecamp.com/adityaparab
@evilmann2 :+1:
you also need to convert your entire string to lower case before you split it
@adityaparab I understand
@Recas this is the way you want it? example
hi ppl! I'm trying to build a gallery, i want to make it so when i hover over an image, it gains a little opacity and simultaneously a text appears in the middle of the image, the way i went about this is I wrapped the div (that contains the text) in a div that has the image as background, the problem with this is that the text also gains opacity during hover, how would you go about fixing this? every post about the topic only mentions a fix for colour backgrounds, not images
can someone give me a hint how i can make a menu like this with swipe and clickable top and bottom buttons ?
I want to build it with JQuery, what methods am i looking for ? googling slide menu gives me different results
Hey guys, I'm using darksky api for the weather project and the getJSON does not return anything. I have this as url in getJSON. url=" var api="https://api.darksky.net/forecast/myKey/"+lat+","+long; lat and long are coordinates from geolocation
anyone?
@AkashVibhute Did you set the
myKey to your right api key?
yeah
does anybody know how to make this sliding background pictures? https://codepen.io/ThiagoFerreir4/pen/eNMxEp?editors=1100
set background-attachment:fixed;
Got it, had to use ajax .
$.ajax({
url: url,
dataType: "jsonp",
success: function (data) {
alert("Success");
}
});
url: url,
dataType: "jsonp",
success: function (data) {
alert("Success");
}
});
@sorinr thanks man!
recas sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1009 | @sorinr |http://www.freecodecamp.com/sorinr
@Recas welcome
hi guys, how can i align the text in the center and left at the same time?
Hi everyone, my ajax call is not responding, no errors in the console, what should i do?
my code:
$(document).ready(function() {
$("#submit").on("click", function() {
var title = $('#title').val();
var link = "https://en.wikipedia.org/w/api.php?action=query&list=search&srwhat=text&prop=links&srsearch=" + title + "&format=json";
var req = $.ajax({
url:link,
dataType: "jsonp"
});//end ajax call
req.done(function(json) {
var resultArray = json.query.search;
alert("yes");
});
req.fail(function() {
alert("failed");
});
});//end click
// function search(title) {
// }
});//end document ready
// function search(title) {
// }
// $.ajax( {
// url: "https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm",
// data: queryData,
// dataType: 'json',
// type: 'POST',
// headers: { 'Api-User-Agent': 'Example/1.0' },
// success: function(data) {
// // do something with data
// }
// });codepen link: http://codepen.io/purpose/pen/pNmmoB
anyone who can help me please?
there is no fluid container version in materializer like i used to in bootstrap?
another thing
<div class="parallax-container valign-wrapper">
<div id="scrolljs">
<nav class="transparent">
<div class="nav-wrapper transparent">
<div class="brand-logo center">
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li class="active waves-effect waves-light"><a href="#">Home</a></li>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="row">
<div class="col s12 center">
<h3 class="valign">Programmer | University student | Gamer | Series addicted</h3>
<h1 id="name" class="valign">Mihók Balázs</h1>
</div>
<div class="row">
<div class="col s6 left">
<a class="waves-effect waves-light btn-large border-light max-width valign">Email me</a>
</div>
<div class="col s6 right">
<a class="waves-effect waves-light btn-large teal max-width valign">Buy templates</a>
</div>
</div>
</div>
<div class="parallax"><img src="img/mountain.jpg"></div>
</div>
this is the site http://miracle.site40.net/
What is this question about May I ask.
Build a Tribute Page
Number around 100 i think
how can I centre an image in HTML, could anyone help me please
<img style="text-align:center;" src="http://theburtonwire.com/wp-content/uploads/2013/06/Mandela-Black-and-White-e1370706927193.jpg" alt="nelson mandela">
??
@jin99 put this in your css .imgAlign{display:block; margin-left:auto ; margin-right:auto;}
@jin99 Declare class imgAlign inside your image tag
when i finish in CodePen
where is the link of this Code Pen? May I ask
can you guys see this?
@kenbbetter Yes we can
She's almost done :)
http://codepen.io/amidzicigor/full/zoQJRV/
http://codepen.io/amidzicigor/full/zoQJRV/
@amidzicigor Wow awesome. Hard to spot a difference between your's codepen and real website. Great work :+1:
@ankit-prgmr Thank you :) Really appreciate it
amidzicigor sends brownie points to @ankit-prgmr :sparkles: :thumbsup: :sparkles:
:cookie: 227 | @ankit-prgmr |http://www.freecodecamp.com/ankit-prgmr
Can someone please explain to me why the following stacks instead of laying out side by side: <div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Does anyone know of some sites, with ideas for making websites (need for motivation) , like dribbble , that kind of stuff
Anyone familiar with negamax and alpha-beta pruning algorithms?
http://mihok-balazs.tk/ when i wanted to check the bottom thumbnails in mobile responsive (col s12), 2 box is missing, where are they?
@remdata try this
how can I make an image bigger?
Hello
Can I ask you for help?
http://codepen.io/Voidereles/pen/LbKGPo Everything it's ok on my desktop - but on my mobile phone if I'll open this codepen - I see only white background, no that image...
anyone free to help me figure out why my AJAX request is not updating my webpage contenty
here is my code