These are chat archives for FreeCodeCamp/HelpFrontEnd

10th
Sep 2016
Elizabeth Fine
@elizabethfinedev
Sep 10 2016 00:06
hellooo everyone. I am trying to make a website with crossfading background images, and Ive gotten them to crossfade but Im stuck on how to add navigation

``
$(document).ready(function() {

var images = $(".slides");
var imageIndex = 0;
images.eq(imageIndex).fadeIn('fast');

$('#next').click(function() {
//help
});

$("#prev").click(function() {
//help
});

slider();
function slider(){
images.delay(4000).fadeOut(2000).eq(++imageIndex % images.length).fadeIn(2000, slider);
}

});
``

does anyone have any ideas ? thank you
Garrus Napp
@GarrusNapp
Sep 10 2016 00:11
@elizabethfinedev do you want to scroll to certain part of your site?
Theo M.
@cnngraphics
Sep 10 2016 00:53
@elizabethfinedev
@elizabethfinedev you showed your JS. You could have html like <button class="btn btn-primary" onclick="next ();">next </button>
@elizabethfinedev Add id="next" to button
Theo M.
@cnngraphics
Sep 10 2016 00:58
And if you want your button to just be a round dot you could try
<button id="next" style="width:15px; height:15px; border: 1px solid silver; border-radius:50%;" class="btn btn-primary"></button>
Rick
@xajh
Sep 10 2016 01:03
is there a markup for signature of quotes?
anyone konws?
Marc Droz
@b1tc0de
Sep 10 2016 01:28
Hi people i'm building my portfolio and i need help, i am trying to use a free svg template of icons from W3C and i cannot find a visual representation of what each one looks like, i cannot find it in their website
vínαч puppαl
@vinaypuppal
Sep 10 2016 01:37
@b1tc0de try http://fontawesome.io icons it is well documented.
Marc Droz
@b1tc0de
Sep 10 2016 01:37
thanks @vinaypuppal
CamperBot
@camperbot
Sep 10 2016 01:37
b1tc0de sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 490 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Anush Reddy
@anushreddy
Sep 10 2016 01:48
can anyone help me with Local Weather API
vínαч puppαl
@vinaypuppal
Sep 10 2016 01:49
@anush6533 what is the issue??
Anush Reddy
@anushreddy
Sep 10 2016 01:49
i dnt know how to start
i never used api
Jose Barakat
@JoseBarakat
Sep 10 2016 01:51
@anush6533 are you going to work with the OpenWeather API?
Anush Reddy
@anushreddy
Sep 10 2016 01:52
yes
@JoseBarakat
Jose Barakat
@JoseBarakat
Sep 10 2016 01:52
Don't worry, is just a name
vínαч puppαl
@vinaypuppal
Sep 10 2016 01:52
@anush6533 oh okay do this course https://www.udacity.com/course/intro-to-ajax--ud110 to understand how AJAX works and it also teaches how to use few API's. And read openweather API docs
Anush Reddy
@anushreddy
Sep 10 2016 01:53
let me see
Kapil Dutta
@duttakapil
Sep 10 2016 01:57
@vinaypuppal @anush6533 I would suggest going through that course as well. I went through it last year and then the Twitch API, Weather API and Wikipedia projects were super easy
vínαч puppαl
@vinaypuppal
Sep 10 2016 01:59
@duttakapil yes i also did it during my initial days of FCC. It helped me a lot in understanding JSONP :smile:
Kapil Dutta
@duttakapil
Sep 10 2016 01:59
Yup. I went through it last year May I think
Good course
@anush6533 also read this discussion : FreeCodeCamp/FreeCodeCamp#9145
It's the one I was telling you about
Anush Reddy
@anushreddy
Sep 10 2016 02:03
Yeah ok kapil
Let me go through course
J4yKay
@J4yKay
Sep 10 2016 02:38
Hey guys. Can I get some critique on my tribute page? http://codepen.io/J4yKay/pen/YWmERz
vínαч puppαl
@vinaypuppal
Sep 10 2016 02:48
@J4yKay Good design. Put you last div i.e the div after #timeline inside .container as well to avoid horizontal overflow presently you have.
You used orderdlist syntax incorrectly it should be
<ol>
<li>....</li>
</ol>
J4yKay
@J4yKay
Sep 10 2016 02:50
@vinaypuppal I didn’t use li intentionally because it kept numbering the entries which I didn’t want
Also, what is the horizontal overflow you’re talking about?
vínαч puppαl
@vinaypuppal
Sep 10 2016 02:51
@J4yKay then use unordered list and use list-style: none for ul tag in css to remove bullet points
Sabrina Ferguson
@itsacoyote
Sep 10 2016 02:51
@J4yKay <ol> is for ordered lists, <ul> is for unordered lists.
vínαч puppαl
@vinaypuppal
Sep 10 2016 02:53
@J4yKay horizontal overflow i.e the horizontal scroll bars you have
J4yKay
@J4yKay
Sep 10 2016 02:53
Thanks @vinaypuppal @itsacoyote
CamperBot
@camperbot
Sep 10 2016 02:53
j4ykay sends brownie points to @vinaypuppal and @itsacoyote :sparkles: :thumbsup: :sparkles:
:cookie: 375 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
:cookie: 491 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
J4yKay
@J4yKay
Sep 10 2016 02:53
also when I remove the ul tags, my text is no longer indented
vínαч puppαl
@vinaypuppal
Sep 10 2016 02:57
@J4yKay just add padding-left to li for the indentation you want
J4yKay
@J4yKay
Sep 10 2016 02:58
@vinaypuppal thankyou!
CamperBot
@camperbot
Sep 10 2016 02:58
j4ykay sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: j4ykay already gave vinaypuppal points
lypena35
@lypena35
Sep 10 2016 03:15
hello. I am having a problem where my background keeps splitting and I can't figure out how to fix it. Help! Thanks@
Screen Shot 2016-09-09 at 9.14.44 PM.png
vínαч puppαl
@vinaypuppal
Sep 10 2016 03:26
@lypena35 use background-repeat property to avoid that http://www.w3schools.com/cssref/pr_background-repeat.asp
lypena35
@lypena35
Sep 10 2016 03:29
it's still doing it :(
vínαч puppαl
@vinaypuppal
Sep 10 2016 03:31
@lypena35 link to your pen
the other background in my second section won't work right either. hum...
vínαч puppαl
@vinaypuppal
Sep 10 2016 03:35
@lypena35 go through the above link i shared you will find
background-repeat: no-repeat to avoid repetition. You just used background-repeat: repeat-y
lypena35
@lypena35
Sep 10 2016 03:36
i tried that before. I went back to fix it and yep still not working.
vínαч puppαl
@vinaypuppal
Sep 10 2016 03:36
@lypena35 and the image in second section is not background image its an img tag
@lypena35 tell me what you want to achieve with those images ?? is it you want three different background images for three sections you have??
lypena35
@lypena35
Sep 10 2016 03:38
its for the portfolio webpage challenge. I wanted a different background for each section home, about, portfolio, contact. etc.
I tried changing the second image (the colorful one to img but all it did was split my text)
Basically the heading and the jumbotron should all be on the background with the spheres.
@vinaypuppal sorry forgot to tag you.
vínαч puppαl
@vinaypuppal
Sep 10 2016 03:42
@lypena35 if you want background images don't use img tags. In css for each section specify background-image:url(...) and background-repeat: no-repeat dont use background image on body
lypena35
@lypena35
Sep 10 2016 03:43
ok so what should i name the first background image in CSS as?
vínαч puppαl
@vinaypuppal
Sep 10 2016 03:44
@lypena35 and each section need to have some height, give min-height: somevalue to view background image if you dont have any content inside each section now
@lypena35 target you each sections with class or id and apply styles to them
lypena35
@lypena35
Sep 10 2016 03:47
Ok i changed the two pictures to min-height:some value for both and changed the body part in CSS to the #Home. Know its one image but it left my heading part blank.
@vinaypuppal
I also tried other configurations I found on that webpage but its still giving me problems.
the w3schools to be exact.
vínαч puppαl
@vinaypuppal
Sep 10 2016 03:50
@lypena35 :worried: i literally did not mean min-height: somevalue its should be min-height: 600px or some preferred value you want according to your UI.
lypena35
@lypena35
Sep 10 2016 03:51
Oh! lol I'm sorry my bad! thanks!
@vinaypuppal ok I set them to 500px but it is still not covering the h1 or the h2.
vínαч puppαl
@vinaypuppal
Sep 10 2016 03:55
@lypena35 you used #home in css and #Home in HTML
lypena35
@lypena35
Sep 10 2016 03:56
@vinaypuppal Ok I fixed it but its still splitting.
vínαч puppαl
@vinaypuppal
Sep 10 2016 03:58
@lypena35 well as i told before remove img tag in html
lypena35
@lypena35
Sep 10 2016 04:00
@vinaypuppal Ok got it! It worked! Thank you very much for you help! I see what I did wrong. I tried deleting the img tags earlier but because I didn't have the image set to a id it was causing it to disappear. Your awesome!
CamperBot
@camperbot
Sep 10 2016 04:00
lypena35 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 492 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
vínαч puppαl
@vinaypuppal
Sep 10 2016 04:02
:smile: @lypena35
lypena35
@lypena35
Sep 10 2016 04:05
:thumbsup: :thumbsup: Thanks again! Hope you have a good day or night!
@vinaypuppal
Jai Hashim
@jaihashim
Sep 10 2016 04:12

Can anyone help me with this problem that's baffling me
http://codepen.io/jaihashim/pen/VKLzJo

The usernames are showing up on the page as "undefined". When I move the var username = users[i] outside of the $.getJSON call, even stranger the usernames both show up as "noobs2ninjas".
http://codepen.io/jaihashim/pen/kkryGj

I can't really understand this. I've had similar issues before that my best guess is that the $.getJSON call is taking a while to execute and in the meantime the for loop keeps increment i? Not sure if this is true or not and if so, what the workaround is

Jai Hashim
@jaihashim
Sep 10 2016 04:18
If my guess is correct, is there a way that I can get the $.getJSON to "hold on" to the value of i before the loop increments it?
vínαч puppαl
@vinaypuppal
Sep 10 2016 04:30
@jaihashim yes your are correct $.getJSON() is aynchronous so to get username use data.stream.channel.name which is channel name
Jai Hashim
@jaihashim
Sep 10 2016 04:41
thanks Vinay. More generally, if I wanted to use the i value in the getJSON call, how would I "capture" it before it got incremented?
maybe wrap it in a function? is that the most common way?
honesty1997
@Honesty1997
Sep 10 2016 05:17
I used the exact code Free Code Camp provides,but it doesn't work.
honesty1997
@Honesty1997
Sep 10 2016 05:23
@vinaypuppal Thanks for help with the tweet button ,I will change that later.
CamperBot
@camperbot
Sep 10 2016 05:23
honesty1997 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 493 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Sorin Ruse
@sorinr
Sep 10 2016 06:02
@Honesty1997 if you are using navigator geolocation you must run the pen over https not http in order to work
Ynraw
@Ynraw
Sep 10 2016 06:06
i have a question, can one view its error messages after running codepen with errors in the code?
Kapil Dutta
@duttakapil
Sep 10 2016 06:38
@Ynraw see if it logs anything to the console. CopePen provides their own console, but you can open your Browser's dev tools console as well
It also provides a simple message with a X or Error symbol on the left of the line that consists the bug/error.
You need to just click on it to see the message
And that might help you understand what's wrong
Mohit Sharma
@xxholyChalicexx
Sep 10 2016 06:46
$.getJSON()-- does this function works in codepen website...... coz for some reason it aint working
Muhammad Hasham
@MohammadHasham
Sep 10 2016 06:53
How can i change text written in a pragraph when my carousel image is changed?
Mohit Sharma
@xxholyChalicexx
Sep 10 2016 06:57
can anyone show me a simple example of json from url ........... i am trying from different sites...... i cant seem to make it work........ HELP
Greg Duncan
@GregatGit
Sep 10 2016 07:23
@xxholyChalicexx just click on this and you'll see some http://ip-api.com/json
Muhammad Hasham
@MohammadHasham
Sep 10 2016 07:23
Is there a way in javascript that when i change the image in carousel it also changes the paragraph
Greg Duncan
@GregatGit
Sep 10 2016 07:24
@xxholyChalicexx
$.getJSON('http://ip-api.com/json', function (data){
    console.log(data);
});
Mohit Sharma
@xxholyChalicexx
Sep 10 2016 07:25
@GregatGit thnx (y)
CamperBot
@camperbot
Sep 10 2016 07:25
xxholychalicexx sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 762 | @gregatgit |http://www.freecodecamp.com/gregatgit
Greg Duncan
@GregatGit
Sep 10 2016 07:25
@xxholyChalicexx :+1:
Mohit Sharma
@xxholyChalicexx
Sep 10 2016 07:26
instead of console.log()...........$("#id").html(data)....will this work
lol....m sorry i will check it by myself
ZAHEER AFZAL
@zaheer442
Sep 10 2016 07:38
Hi want I want to make an array of string , and by clicking a button string updated counter wise using Json, any help/link?
Mohit Sharma
@xxholyChalicexx
Sep 10 2016 07:44
This message was deleted
@GregatGit nope not working
honesty1997
@Honesty1997
Sep 10 2016 08:21
@sorinr How can I do that??
George Mbugua
@gmbugua
Sep 10 2016 08:36
Hey so I started my portfolio project today, and I used bootstrap classes to make a navigation bar that is collapsable in the event that my portfolio is opened on a mobile device. However, whenever I refresh/reload/re-run the website on code-pen the nav-bar is un-collapsed and must be collapsed by the user for them to view my Jumbotron! :worried:. Here is the link to the codepen: http://codepen.io/gmbugua/pen/pEjwoQ/
zcehy
@zcehy
Sep 10 2016 08:42
I can't insert pictures in codepen
please help me
Kapil Dutta
@duttakapil
Sep 10 2016 08:45
@zcehy are you trying to use Imgur?
zcehy
@zcehy
Sep 10 2016 08:45
<img class="img-responsive"src="img/jxl.jpg"></img>
no
what can I do
@duttakapil
zcehy
@zcehy
Sep 10 2016 08:52
I see,thank you
@duttakapil
Muhammad Hasham
@MohammadHasham
Sep 10 2016 08:52
blob
how can i add a border bottom like this
an underline would stick to the text
Ynraw
@Ynraw
Sep 10 2016 08:56
thanks @duttakapil !
CamperBot
@camperbot
Sep 10 2016 08:56
ynraw sends brownie points to @duttakapil :sparkles: :thumbsup: :sparkles:
:star2: 1494 | @duttakapil |http://www.freecodecamp.com/duttakapil
Muhammad Hasham
@MohammadHasham
Sep 10 2016 08:58
@duttakapil can you help?
Kapil Dutta
@duttakapil
Sep 10 2016 08:59
@zcehy you need to host the image online. Imgur is generally what people use, but they have blocked codepen. I would suggest going to any GitHub issue, click on the comment box and drag and drop your image. It will host it on GitHub. Copy the link from there and paste it in your img tag
@MohammadHasham did you try inspecting the area? Right click on it and then click inspect. Check the html. You'll understand how they are doing it
Muhammad Hasham
@MohammadHasham
Sep 10 2016 09:01
i want the border to just underline my text not the whole screen @duttakapil @sorinr
Kapil Dutta
@duttakapil
Sep 10 2016 09:02
@MohammadHasham you can give it a max-width
Muhammad Hasham
@MohammadHasham
Sep 10 2016 09:03
@duttakapil wouldnt that effect responsiveness of the page?
honesty1997
@Honesty1997
Sep 10 2016 09:04
I am now getJSON but the it seems I can't access the property in there
My pen here
Kapil Dutta
@duttakapil
Sep 10 2016 09:04
Use a hr tag, give it a class name, and style it
That is what they are doing @MohammadHasham
honesty1997
@Honesty1997
Sep 10 2016 09:05
console.log(data.weather) doesn't show anything.......
Kapil Dutta
@duttakapil
Sep 10 2016 09:05
@MohammadHasham go here, right click on the underline, click on inspect
<hr class="star-light">
    ::after
</hr>
you'll see this
Now check the CSS for it on the right
You'll understand how it works
Muhammad Hasham
@MohammadHasham
Sep 10 2016 09:07
where is the css @duttakapil
Kapil Dutta
@duttakapil
Sep 10 2016 09:07
Did you click on Inspect?
Muhammad Hasham
@MohammadHasham
Sep 10 2016 09:07
yes i can see the hr tag and stuff but no css
Kapil Dutta
@duttakapil
Sep 10 2016 09:07
It should be on the right, under the styles tab
Muhammad Hasham
@MohammadHasham
Sep 10 2016 09:09
ok found that
but there is alot of css
Kapil Dutta
@duttakapil
Sep 10 2016 09:09
Click on the <hr> tag on the left
It will show the respective CSS for it on the right
Muhammad Hasham
@MohammadHasham
Sep 10 2016 09:14
@duttakapil Thanks
CamperBot
@camperbot
Sep 10 2016 09:14
mohammadhasham sends brownie points to @duttakapil :sparkles: :thumbsup: :sparkles:
:star2: 1495 | @duttakapil |http://www.freecodecamp.com/duttakapil
Muhammad Hasham
@MohammadHasham
Sep 10 2016 09:14
is it alright if i just copy paste the css from other websites?
@duttakapil
Kapil Dutta
@duttakapil
Sep 10 2016 09:15
@Honesty1997 did you check the console log?
It says This request has been blocked; the content must be served over HTTPS
And XMLHttpRequest cannot load. Failed to start loading.
Muhammad Hasham
@MohammadHasham
Sep 10 2016 09:17
@duttakapil can you please tell
Kapil Dutta
@duttakapil
Sep 10 2016 09:17
@MohammadHasham you won't need to do that if you understand how it works. Re-implementing it on your own will teach you a lot
Muhammad Hasham
@MohammadHasham
Sep 10 2016 09:17
@duttakapil thanks
CamperBot
@camperbot
Sep 10 2016 09:17
mohammadhasham sends brownie points to @duttakapil :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave duttakapil points
Kapil Dutta
@duttakapil
Sep 10 2016 09:21
@Honesty1997 you might find this helpful : https://crossorigin.me/
honesty1997
@Honesty1997
Sep 10 2016 09:24
@duttakapil wow my console section doesn't show anything....
Kapil Dutta
@duttakapil
Sep 10 2016 09:25
Codepen console or the Dev Tools console?
You wanna check the dev tools console
honesty1997
@Honesty1997
Sep 10 2016 09:25
Codepen console
Kapil Dutta
@duttakapil
Sep 10 2016 09:25
Ya, open your dev tools console. F12 should open it mostly
honesty1997
@Honesty1997
Sep 10 2016 09:27
Oh I see the Dev Tools seciton
Kapil Dutta
@duttakapil
Sep 10 2016 09:28
You'll find your errors there
Under the console tab
honesty1997
@Honesty1997
Sep 10 2016 09:31
Still really confused....
this works
when I use $.getJSON() to access the data
It just failed....
Stephen James
@sjames1958gm
Sep 10 2016 09:34
@Honesty1997 Have you tried putting http:// in front of your URL?
honesty1997
@Honesty1997
Sep 10 2016 09:35
@sjames1958gm yeah But it said it needs to run over https
this is the code right now.
Kapil Dutta
@duttakapil
Sep 10 2016 09:39
@Honesty1997 read this : FreeCodeCamp/FreeCodeCamp#9145
and/or this : FreeCodeCamp/FreeCodeCamp#7853
honesty1997
@Honesty1997
Sep 10 2016 09:43
Ok it seem it has really hard problems in there.I will just skip this project for now......at least i finally found out how to use getJSON.
Stephen James
@sjames1958gm
Sep 10 2016 09:43
@Honesty1997 Well, in order to get location from the browser (at least chrome) you have to be https:// which means any URL access through getJSON also has to be
over https:// however unless you give openweathermap money you won't be able to access them over https://
That is where a proxy can come in handy. http://crossorigin.me is such a proxy.
'https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+lon+'&appid=a35f6f7cf842f5c2e3b03a3e093f0fe9'
Mettcon
@Mettcon
Sep 10 2016 09:44
do we get marks on our codepen challenges?
Kapil Dutta
@duttakapil
Sep 10 2016 09:45
You get a brownie point for submission
Mettcon
@Mettcon
Sep 10 2016 09:45
is it possible to fail those tests?
honesty1997
@Honesty1997
Sep 10 2016 09:46
@stephen so,if i don't pay the weather api company money,I can't use getJSON to access the data??
while i still can use the api to just see the weather data in a strange form......
Stephen James
@sjames1958gm
Sep 10 2016 09:47
@Honesty1997 If you use that URL above you can because the proxy goes to the http:// address which is still free
@Honesty1997 That form is json
honesty1997
@Honesty1997
Sep 10 2016 09:51
haha i know that.
Thanks it is really helpful
Pavel Antonov
@pavel-antonov
Sep 10 2016 09:54
Hey guys i have a quesiton, im coding on Codepen.io and this is my code :
<a href="https://www.facebook.com/pavell.antonov"><button class="button-1 btn-primary">FaceBook</button></a>
Its button and when i click it, it doesnt redirect me, if i code
<a href="www.facebook.com/pavell.antonov"><button class="button-1 btn-primary">FaceBook</button></a>
(Without http:// ) It says EROR 404
can some1 help me ? it will be much appreciated !!!! : )
Stephen James
@sjames1958gm
Sep 10 2016 09:56
@pavel-antonov add target="_blank" to your a tag - I think it is that codepen doesn't allow redirects directly, but only to a new tab
Pavel Antonov
@pavel-antonov
Sep 10 2016 09:57

<a href="www.facebook.com/pavell.antonov" taget="_blank"><button class="button-1 btn-primary">FaceBook</button></a>

so it must be like this ? @sjames1958gm

i put it and when i clikc the button it just opens in new tab and still says 404 ERROR @sjames1958gm
Stephen James
@sjames1958gm
Sep 10 2016 09:59
@pavel-antonov You need the https:// to not get the 404
Pavel Antonov
@pavel-antonov
Sep 10 2016 10:00
FINALLY, thank you @sjames1958gm
CamperBot
@camperbot
Sep 10 2016 10:00
pavel-antonov sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3206 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Mettcon
@Mettcon
Sep 10 2016 10:05
do i have some benefit from those brownie points?
Austin Magnuson
@MagnumSun
Sep 10 2016 10:05
How should I go about applying a transform animation to the cube that turns it into a book that has pages with customizable text and can be turned by the user. Is it possible only using css? Or will I have to look for a javascript library? ䷴䷡䷼
honesty1997
@Honesty1997
Sep 10 2016 10:18
Oh i finally solve the problem.Now i can access the api normally.
I change the way I get the location with the URL above.Then it works!!!
@sjames1958gm @duttakapil Thanks for help!!
CamperBot
@camperbot
Sep 10 2016 10:19
honesty1997 sends brownie points to @sjames1958gm and @duttakapil :sparkles: :thumbsup: :sparkles:
:star2: 3207 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
:star2: 1496 | @duttakapil |http://www.freecodecamp.com/duttakapil
Stephen James
@sjames1958gm
Sep 10 2016 10:20
@Honesty1997 :+1:
Muhammad Hasham
@MohammadHasham
Sep 10 2016 10:22
how to use vector graphics in websites
how to embed them?
@sjames1958gm
Richa
@richa-coder
Sep 10 2016 10:27
@MohammadHasham ,u can use somethin like this:<embed type="image/svg+xml" src="image.svg" /> or u can also include your svg in an iframe or u can directly include it in your css file with any image properties.
Sorin Ruse
@sorinr
Sep 10 2016 11:03
@Honesty1997 if you still want to use navigator geolocation an alternative weather api that works both over http and https with a free limited plan is : http://www.apixu.com . If you think the 5000 calls per month are not enough you can just make some test calls, grab the json response an put in a variable and work on that var until you have your app finished to go "live" and then change it to make calls to the api directly
Pavel Antonov
@pavel-antonov
Sep 10 2016 11:30

Guys i need help, Im working on my Portfolio and i just added a navigation bar, but it appears under my " header ". When you click this link, you will see what I mean, can some1 help me ? http://codepen.io/pavel-antonov/full/zBgZrw/

It will be much appreciated !

Joris Labie
@labiej
Sep 10 2016 11:31
Since you are using bootstrap I would advise using it's navigation classes
Pavel Antonov
@pavel-antonov
Sep 10 2016 11:44
Im feeling confused @labiej
Joris Labie
@labiej
Sep 10 2016 11:45
I justed looked at your CSS btw and can't help but notice that you'll want to rethink it a little
3 classes for buttons, 4 classes for images are signs that you are making it hard on yourself
I do like the skill "meter" though, it's whimsical although I suppose the pacman ghosts can be made a little sharper
Pavel Antonov
@pavel-antonov
Sep 10 2016 11:51
im new and i just try to do the things i noticed that there are 10 000 ways to do 1 thing :D
Joris Labie
@labiej
Sep 10 2016 11:53
I'm not sure if mine's that much better when I checked it just now
It might be helpful to see how I did the navbar
Klaus Mana
@KlausMana
Sep 10 2016 12:01
hi
I am working on the Wikipedia api but what link do I have to use in order to integrate this API?
Muhammad Hasham
@MohammadHasham
Sep 10 2016 12:02
blob
how can i make the input element smaller in width
@sorinr @sjames1958gm @labiej
Klaus Mana
@KlausMana
Sep 10 2016 12:02
use margins
margin-left and margin-right in css
Joris Labie
@labiej
Sep 10 2016 12:03
Or use width: 100px in CSS
(change 100px to whatever size you want, even relative to it's container)
Muhammad Hasham
@MohammadHasham
Sep 10 2016 12:03
no is there any other wayh
Klaus Mana
@KlausMana
Sep 10 2016 12:03
yes you can do that too but isn't that not available in IE 6 and lower?
sb help me tho?
Joris Labie
@labiej
Sep 10 2016 12:04
I refuse to cater to anything lower than IE9
Klaus Mana
@KlausMana
Sep 10 2016 12:04
what is the url for integrating the Wikipedia api?
Joris Labie
@labiej
Sep 10 2016 12:04
What do you mean integrating?
The URL you call with AJAX?
Klaus Mana
@KlausMana
Sep 10 2016 12:04
being able to use
yes
the one you call with AJAX
Joris Labie
@labiej
Sep 10 2016 12:04
Have you read the docs?
there is a generator for the URL in there
It's an important exercise to do that one yourself
Klaus Mana
@KlausMana
Sep 10 2016 12:05
ok
It took me a couple hours to fully understand
Klaus Mana
@KlausMana
Sep 10 2016 12:06
wow ok
that's gonna be a nuisance
Joris Labie
@labiej
Sep 10 2016 12:08
When you understand it, it should allow you to communicate with any other api you encounter
Ricky11
@ricky11
Sep 10 2016 12:12
how to search my last posted message on gitter?
Joris Labie
@labiej
Sep 10 2016 12:13
scroll
Sorin Ruse
@sorinr
Sep 10 2016 12:23
@MohammadHasham you can also use <input type="text" size="50"> depends on your context
Hussain Haider
@HussainHaider
Sep 10 2016 13:03

Hello guys ..Hopefully U all are doing well....I have a problem in my code. I am using Bootstrap Collapse....here is the <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#do" >Lesson From this Story</button>

<div id="do" class="collapse">
Winning is less about skills, more about attitude.Life is waiting for you.Give your Best shot</div> But its not working...Anyone know whats the problem?

theone
@theoneinskane
Sep 10 2016 13:08
help portfolio page
CamperBot
@camperbot
Sep 10 2016 13:08
no wiki entry for: portfolio page
theone
@theoneinskane
Sep 10 2016 13:08
help portfolio
CamperBot
@camperbot
Sep 10 2016 13:08
no wiki entry for: portfolio
Joffrey Nolting
@Yovvel
Sep 10 2016 13:11
@theoneinskane how can we help?
theone
@theoneinskane
Sep 10 2016 13:11
@Yovvel I was actually trying to get to the wiki page that I wrote a few months ago, but can't find where it is anymore :)
Joffrey Nolting
@Yovvel
Sep 10 2016 13:12
@theoneinskane ohh! sorry :P well weird that it is gone..
kamaldinov
@kamaldinov
Sep 10 2016 13:46
Hey people, need some help. Please ignore the shitty code, I'll be working on semantics a bit later.
I need the robot image to change it's size depending on screen resolution
And the image to stay in place
Ahmed
@HosTilezZz
Sep 10 2016 13:57
This message was deleted
Ahmed
@HosTilezZz
Sep 10 2016 14:04
hello everyone,i need some help in order to finish my twitch API project, I'm getting an infinite loop whenever i run the page, what I'm trying to do is to increase the value of " i " by one after each AJAX call ( check lines 23,39,43 ) whether it was successful or not, i didn't use " for( i ; i<streamers.length ; i++ ) " because then the script WOULD NOT WAIT FOR THE AJAX CALL TO FINISH FIRST causing many errors due to the dependency on the variable " i " ( check lines 11, 29 ) , I'm trying to avoid using ( async : off ) because it is considered a bad practice, so instead i decided to add i++ inside error: or success: to make sure that this line is executed only after finishing the AJAX call ( again .. lines 23,39,43 ) http://codepen.io/HosTilez/pen/RGwEBA
Sorin Ruse
@sorinr
Sep 10 2016 14:17
@HosTilezZz u can use $.each function
Ahmed
@HosTilezZz
Sep 10 2016 14:18
@sorinr I'll look into it.. thanks a lot
CamperBot
@camperbot
Sep 10 2016 14:18
hostilezzz sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 689 | @sorinr |http://www.freecodecamp.com/sorinr
Gary Holland
@garyhollandxyz
Sep 10 2016 14:21
I'm struggling to find a Google-friendly way to phrase this question, so I hope it makes sense! I'm working on my first site, using bootstrap. What is the best way to keep all content within a central portion of the page, with the background, navbar etc still extending across the whole page? Here is an example of what I want to achieve: https://blackrockdigital.github.io/startbootstrap-freelancer/ (but I couldn't figure out what part of the code is achieving it!)
Sorin Ruse
@sorinr
Sep 10 2016 14:25
@HosTilezZz welcome. it should be like: $.each(streamers, function (key,value) {var channelRequest = "https://api.twitch.tv/kraken/channels/" + streamers[key]; $.ajax call after
Florencia
@flopywood
Sep 10 2016 15:29
@hgary you can download the theme and read the code
Mikail Bayram
@mikail1998
Sep 10 2016 15:30
http://codepen.io/mikail1998/pen/ozgXzb
Im working on the pomodoro clock and I couldnt start the break-time count down after the work session, dont know what to do....
Khan Bifov
@irestone
Sep 10 2016 16:02
@hgary the whole page usually is devided by sections and in each of them you have a wrapper for content with margin: auto property
miriam-z
@miriam-z
Sep 10 2016 16:36
hi I need some help with the following : http://codepen.io/miriam-z/pen/ZOdQgO
both lines are in different colours
I need there to be a 17px space between and vertically and horizontally aligned in the centre
Harry Adel
@harryadel
Sep 10 2016 16:47
@miriam-z Could you please elaborate more?
all I can see is a little black box, what do you want to do with it?
miriam-z
@miriam-z
Sep 10 2016 16:49
@Harry97 Hi I would like “as many times as you choose” to be on the next line with a 17px space between noth lines
can you not see the text?
Harry Adel
@harryadel
Sep 10 2016 16:50
oh gotcha I'mma fork it and figure out a solution
Mario Luevanos
@marioluevanos
Sep 10 2016 16:54
@miriam-z here is one way to do it
http://codepen.io/marioluevanos/pen/ORyOoo
Harry Adel
@harryadel
Sep 10 2016 16:57
@miriam-z How about using line break tag then modifying the line-height property?
http://www.w3schools.com/tags/tag_br.asp
http://www.w3schools.com/cssref/pr_dim_line-height.asp
Guys, would it be considered cheating if i used some plugins in my advanced front-end projects?
miriam-z
@miriam-z
Sep 10 2016 16:59
@marioluevanos I have managed to get as many times as you like on the second line but the line-height is not 17px
@marioluevanos thanks
CamperBot
@camperbot
Sep 10 2016 17:00
miriam-z sends brownie points to @marioluevanos :sparkles: :thumbsup: :sparkles:
:cookie: 5 | @marioluevanos |http://www.freecodecamp.com/marioluevanos
miriam-z
@miriam-z
Sep 10 2016 17:00
@Harry97 thanks
CamperBot
@camperbot
Sep 10 2016 17:00
miriam-z sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:cookie: 233 | @harry97 |http://www.freecodecamp.com/harry97
Girzima
@Girzima
Sep 10 2016 17:04
@miriam-z I don't understand. Why do you have multiple positions and width/heights etc when they're just overwriting each other
Muhammad Hasham
@MohammadHasham
Sep 10 2016 17:06
How to use font awesome in bootstrap currently i have used
<i class = "fa-facebook-official"></i>
but i cant see the icon?
Girzima
@Girzima
Sep 10 2016 17:07
@MohammadHasham can you post the challenge url
Muhammad Hasham
@MohammadHasham
Sep 10 2016 17:07
it's not the challenge i am working locally
@Girzima
Harry Adel
@harryadel
Sep 10 2016 17:08
@MohammadHasham Have you added the font awesome library?
Larry DeThomasis
@ldethomasis1
Sep 10 2016 17:08
I just finished the tribute page but the submit button won't work. Am I doing something wrong?
Muhammad Hasham
@MohammadHasham
Sep 10 2016 17:08
No do i need that?
@Harry97
where is that located?
Harry Adel
@harryadel
Sep 10 2016 17:10
We can't do much without having a look on your project, so we're just guessing
@ldethomasis1 try using a different browser
Larry DeThomasis
@ldethomasis1
Sep 10 2016 17:12
thanks- what browser is best supported? I'm on chrome
Harry Adel
@harryadel
Sep 10 2016 17:12
submit button won't scan your project or anything like that, It just accepts whatever codepen link you put in
try mozilla
Larry DeThomasis
@ldethomasis1
Sep 10 2016 17:13
where do you link?
Sorin Ruse
@sorinr
Sep 10 2016 17:16
@miriam-z instead of margin-bottom: 17px; make it line-height: 17px if this is what you want
Harry Adel
@harryadel
Sep 10 2016 17:16
@ldethomasis1 click the "I've completed the challenge" button then paste your codepen link
Larry DeThomasis
@ldethomasis1
Sep 10 2016 17:16
thanks- Explorer actually worked!
Harry Adel
@harryadel
Sep 10 2016 17:16
any browser will do
you might want clear your chrome cache
to clear*
Muhammad Hasham
@MohammadHasham
Sep 10 2016 17:27
i have the font-awesome folder in my bootstrap folder and i am using this lib
<link rel="stylesheet" href="font-awesome.min.css">
@Girzima @Harry97
but i can't see the icons
can you help?
Harry Adel
@harryadel
Sep 10 2016 17:30
The way you linked font awesome means that your HTML file is in the same directory, correct?
I'm afraid that the pathing is incorrect
@MohammadHasham
William Maes
@maeswilliam
Sep 10 2016 17:32
Can anyone tell me why my buttons transition isn't working?
Muhammad Hasham
@MohammadHasham
Sep 10 2016 17:32
@Harry97 do i need to place it somewhere else
Harry Adel
@harryadel
Sep 10 2016 17:33
@MohammadHasham It's not about where you place it, it's all about how you link your files to it
@maeswilliam I'm getting some errors in the console regarding those external css files
if you wanna add anything make sure to use the settings tab
William Maes
@maeswilliam
Sep 10 2016 17:36
@Harry97 yeah don't worr y about that, it's the transition that is not working when you hove on the buttons
@Harry97 i added a 0.2s delay but it's not working
@Harry97 do i need to set it right for you?
@Harry97 i can even add the background picture that is missing :clap:
Willame Barroso
@willamesoares
Sep 10 2016 17:41
Hello everyone!
I'm currently working on a rails project and having a problem with javascript files loading order. I'm using a gem called 'bootstrap-slider-rails' in order to transform input fields into sliders. I'm trying to use the jquery 'on' method within the slider.js file but then the browser does not recognize it. It seems I'm doing the wrong loading order inside 'application.js'. Does anybody work with ruby on rails here? Can anyone help me with this? Thanks
It's giving me this error Uncaught TypeError: Cannot read property 'on' of undefined
Harry Adel
@harryadel
Sep 10 2016 17:45
@maeswilliam transition: background-color 1s, border 1s, color 1s;
William Maes
@maeswilliam
Sep 10 2016 17:46
@Harry97 shiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiit
Harry Adel
@harryadel
Sep 10 2016 17:46
@willamesoares most ppl here are learning JS, so you're better off finding some place else to help you with ruby on rails
William Maes
@maeswilliam
Sep 10 2016 17:46
@Harry97 i love you
Harry Adel
@harryadel
Sep 10 2016 17:46
@maeswilliam lol ik :D
William Maes
@maeswilliam
Sep 10 2016 17:46
@Harry97 thanks
CamperBot
@camperbot
Sep 10 2016 17:46
maeswilliam sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:cookie: 234 | @harry97 |http://www.freecodecamp.com/harry97
Harry Adel
@harryadel
Sep 10 2016 17:46
your welcome ^^
William Maes
@maeswilliam
Sep 10 2016 17:47
@Harry97 did i really forget the :
Harry Adel
@harryadel
Sep 10 2016 17:47
@maeswilliam no it was there but you added some more like background-color: 1s
as you already know, you must only add it after transition only
William Maes
@maeswilliam
Sep 10 2016 17:49
@Harry97 to put it lightly, i'm rather happy ^^
Theodore P.
@Ierofantis
Sep 10 2016 18:11
Hi !I am making a project and when I click the button, when the element slide up I want the button to remain in its place an the list to slide up (above the button)How can i achieve this?
Here is my pen
https://codepen.io/Ierofantis/pen/vXNOaK
William Maes
@maeswilliam
Sep 10 2016 18:13
@Harry97 one question, can you tell me why my url is not working in header {
Harry Adel
@harryadel
Sep 10 2016 18:14
@maeswilliam You mean your normalise.css and main.css ?
William Maes
@maeswilliam
Sep 10 2016 18:15
@Harry97 i try to show my project via codepen, i've been coding on brackets, my image is on my desktop folder, so i uploaded the img on imgur to show it off on codepen, it's not displaying my picture in background
Harry Adel
@harryadel
Sep 10 2016 18:16
@maeswilliam don't use imgur yo upload you images
for some reason they restrict access to it
upload to any other website
@maeswilliam and also make sure that your background has a height and width
William Maes
@maeswilliam
Sep 10 2016 18:19
@Harry97 any recommendation?
@Harry97 well it worked perfectly on brackets
@Harry97 where should i upload it?
Theodore P.
@Ierofantis
Sep 10 2016 18:19
anyone? :P
Harry Adel
@harryadel
Sep 10 2016 18:20
@Ierofantis try to change postion to absolute

fixed-menu's position

Theodore P.
@Ierofantis
Sep 10 2016 18:21
@Harry97 yup you are right many thanks
CamperBot
@camperbot
Sep 10 2016 18:21
ierofantis sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:cookie: 235 | @harry97 |http://www.freecodecamp.com/harry97
Harry Adel
@harryadel
Sep 10 2016 18:21
@maeswilliam try this website: https://postimage.org/
@Ierofantis glad I was of a use to you ^^
Theodore P.
@Ierofantis
Sep 10 2016 18:23
@Harry97 y were indeed! :)
William Maes
@maeswilliam
Sep 10 2016 18:23
@Harry97 http://codepen.io/Tywin32/pen/PGPEYx - can you please have a look it's in header
Harry Adel
@harryadel
Sep 10 2016 18:24
@maeswilliam okidoki
@maeswilliam I can't find any images in the header!
William Maes
@maeswilliam
Sep 10 2016 18:26
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://postimg.org/image/a31dlfeln');
background-size: cover;
background-position: center;
height: 100vh;
Harry Adel
@harryadel
Sep 10 2016 18:26
oh the css code, sorry :D
William Maes
@maeswilliam
Sep 10 2016 18:26
@Harry97 haha np
Harry Adel
@harryadel
Sep 10 2016 18:28
William Maes
@maeswilliam
Sep 10 2016 18:29
@Harry97 that scared me a bit
Harry Adel
@harryadel
Sep 10 2016 18:30
:D yeah, I hate kittens too, but they are useful for placeholder images
William Maes
@maeswilliam
Sep 10 2016 18:31
@Harry97 but wait why is yours working and not mine
Harry Adel
@harryadel
Sep 10 2016 18:32
eh I don't know to be honest, try Photobucket.com
I hesitated to link photobucket at first because it requires registration
brb m8
@Harry97 can you tell me which freaking link i need to put inside :D
@Harry97 haha i'm getting borderline insane ^^
@Harry97 sure
ok i got it working
i'm too ashamed to tell you what i did wrong
it'll remain a mystery for eternity
Harry Adel
@harryadel
Sep 10 2016 18:42
@maeswilliam I'm glad you got it working, buddy
William Maes
@maeswilliam
Sep 10 2016 18:43
@Harry97 what do you think?
Harry Adel
@harryadel
Sep 10 2016 18:44
regarding the visuals and the aesthetic part, goddamn man
It looks so pretty
but ..
responsiveness :D
Muhammad Hasham
@MohammadHasham
Sep 10 2016 18:46
whenever i apply fixed top classs to my navbar brand and navbar-default it just collapses
<nav class = "navbar navbar">
          <div class = "container-fluid">

              <a class = "navbar-brand " href="#" id="banner">Portfolio</a>

              <ul class = "nav navbar-nav navbar-right">
                    <li class = "active"><a href="#home"> Home </a></li>
                    <li><a href="#skills">Skills</a></li>
                    <li><a href="#work">Work</a></li>
                    <li><a href="#aboutme">About Me</a></li>
                    <li><a href="#contactus">Contact </a></li> 
               </ul>

         </nav>
Harry Adel
@harryadel
Sep 10 2016 18:46
when I resize the window, some stuff are out of place
William Maes
@maeswilliam
Sep 10 2016 18:46
@Harry97 ah sure, it'll come later
@Harry97 well i'll try :P
anyways
Harry Adel
@harryadel
Sep 10 2016 18:46
@maeswilliam well keep it up, you're killin' it so far ^^
William Maes
@maeswilliam
Sep 10 2016 18:47
@Harry97 cheers
well still didn't eat anything, that's what coding does to you
Harry Adel
@harryadel
Sep 10 2016 18:50
@maeswilliam who needs to eat when you got coffee :D
William Maes
@maeswilliam
Sep 10 2016 18:51
@Harry97 i can't drink coffee, you know those kind of people that can't drink anything that excites you because they are allready enough excited
does that even make sense?
anyway i drink green tea, it's milder :P
Harry Adel
@harryadel
Sep 10 2016 18:52
tea! lmao , that's boring af
but whatever floats your boat :D
William Maes
@maeswilliam
Sep 10 2016 18:53
@Harry97 i mean there are 165161656154165 flavours for green tea :P
yeah to each their own
the only thing i remember from coffee is how much i need to take a dump after drinking it ^^
Harry Adel
@harryadel
Sep 10 2016 18:54
@MohammadHasham you want all of the stuff to collapse into a small button that you can click to get a drop down menu, right?
Muhammad Hasham
@MohammadHasham
Sep 10 2016 18:55
blob
@Harry97 no actually the site content is overlapped
like the image above
Harry Adel
@harryadel
Sep 10 2016 18:56
@MohammadHasham How about this? http://codepen.io/Hadouken/pen/QKjagb
William Maes
@maeswilliam
Sep 10 2016 18:57
@Harry97 are you working as a front end?
Muhammad Hasham
@MohammadHasham
Sep 10 2016 18:57
how can i apply the fix top effect
i mean where? @Harry97
Harry Adel
@harryadel
Sep 10 2016 18:57
@maeswilliam yeah, I'm currently working on tic tac toe
@MohammadHasham in the nav tag
Harry Adel
@harryadel
Sep 10 2016 19:01
<nav class="navbar navbar-inverse navbar-fixed-top">
Muhammad Hasham
@MohammadHasham
Sep 10 2016 19:01
@Harry97 Thanks
CamperBot
@camperbot
Sep 10 2016 19:01
:cookie: 236 | @harry97 |http://www.freecodecamp.com/harry97
mohammadhasham sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
Muhammad Hasham
@MohammadHasham
Sep 10 2016 19:01
do i need to make a seperate container for the rest of code
or should i use this one?
@Harry97
Harry Adel
@harryadel
Sep 10 2016 19:02
make a new one
Muhammad Hasham
@MohammadHasham
Sep 10 2016 19:02
okay and just a last thing that should one use container or container-fluid?
@Harry97
Harry Adel
@harryadel
Sep 10 2016 19:02
after the nav tag
@MohammadHasham for the navbar or the rest of your page?
Muhammad Hasham
@MohammadHasham
Sep 10 2016 19:03
there would be container for navbar but i am talking about the resto f the page?
@Harry97
sleh
@MarlboroGrammer
Sep 10 2016 19:04
Hey guys
I am stuck in wikipedia viewer projet :\
Harry Adel
@harryadel
Sep 10 2016 19:04
It depends on your needs, both would work without any problems
sleh
@MarlboroGrammer
Sep 10 2016 19:04
help wikipedia viewer
CamperBot
@camperbot
Sep 10 2016 19:04
no wiki entry for: wikipedia
Sekamarques
@sekamarques
Sep 10 2016 19:04
hey guys
sleh
@MarlboroGrammer
Sep 10 2016 19:04
help wikipedia viewer
CamperBot
@camperbot
Sep 10 2016 19:04
no wiki entry for: wikipedia viewer
Sekamarques
@sekamarques
Sep 10 2016 19:05
can anyone help me with my portfolio website?
i dont know how to make a vertical navbar
Harry Adel
@harryadel
Sep 10 2016 19:05
@sekamarques yeah, what's the problem?
Sekamarques
@sekamarques
Sep 10 2016 19:05
how do you make a vertical navbar
like, adjusted to the left
Harry Adel
@harryadel
Sep 10 2016 19:06
Sekamarques
@sekamarques
Sep 10 2016 19:06
thanks
Harry Adel
@harryadel
Sep 10 2016 19:09
I'm logging off, have a nice day, guys
Muhammad Hasham
@MohammadHasham
Sep 10 2016 19:10
blob
whys i my border being displayed like that
padding-top: 20%;
width:70%;
height: 70%;
border:5px solid white;
border-radius: 50px;
here is my css
how can i make that with the image round?
William Maes
@maeswilliam
Sep 10 2016 19:13
@MohammadHasham border radius 20em
@MohammadHasham give codepen
Muhammad Hasham
@MohammadHasham
Sep 10 2016 19:14
@maeswilliam i am working locally on sublime :worried:
it is working but still the image is not fitting in properly can you help me please
@maeswilliam
shall i send you my html?
William Maes
@maeswilliam
Sep 10 2016 19:18
@MohammadHasham yeah i can so yo uwant the border of the image on the picture right?
Muhammad Hasham
@MohammadHasham
Sep 10 2016 19:18
yes
just with the image exactly
William Maes
@maeswilliam
Sep 10 2016 19:18
remove width/height
it's much better if you copy/paste on codepen.io
i also work on an external program
and copy/paste when i need assistance
on codepen
Muhammad Hasham
@MohammadHasham
Sep 10 2016 19:19
ill paste that on codepen
just a sedc
second
Irina
@2Irina2
Sep 10 2016 19:19
Hi guys!
I need a little help with my Wikipedia Viewer
William Maes
@maeswilliam
Sep 10 2016 19:20
@2Irina2 javascript really scares me :P
@maeswilliam
Irina
@2Irina2
Sep 10 2016 19:21
@maeswilliam hehe :D maybe it isn't really a javascript problem
@maeswilliam i'm not sure.. hear me out
William Maes
@maeswilliam
Sep 10 2016 19:21
@2Irina2 i'm a beginner i can try :P
Irina
@2Irina2
Sep 10 2016 19:22
@maeswilliamyou do get the results you are looking for... but i am not able to add any class to the newly appended html tags
William Maes
@maeswilliam
Sep 10 2016 19:22
@MohammadHasham upload your picture
Harry Adel
@harryadel
Sep 10 2016 19:22
I EXIST
Irina
@2Irina2
Sep 10 2016 19:22
i wanted to make the background of those results red, for example, as you can probably see in my CSS
but it doesn't happen.. no matter what i type in the .entry class in css, it doesn't apply to my webpage
William Maes
@maeswilliam
Sep 10 2016 19:23
@Harry97 please help darling irina
i'm busy with momo :P
Harry Adel
@harryadel
Sep 10 2016 19:24
"momo" :D
ok, Irina, how can I help you ?
@maeswilliam
Harry Adel
@harryadel
Sep 10 2016 19:26
@2Irina2 u there?
Irina
@2Irina2
Sep 10 2016 19:26
@Harry97 yes
William Maes
@maeswilliam
Sep 10 2016 19:26
@MohammadHasham you need to resize the picture
@MohammadHasham first of all
@maeswilliam it's way too big
Irina
@2Irina2
Sep 10 2016 19:26
@Harry97 thank you
CamperBot
@camperbot
Sep 10 2016 19:26
2irina2 sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:cookie: 237 | @harry97 |http://www.freecodecamp.com/harry97
Irina
@2Irina2
Sep 10 2016 19:27
@Harry97 i am trying to stylize the results i get on my wikipedia viewer page
William Maes
@maeswilliam
Sep 10 2016 19:27
@MohammadHasham do you want something like this?
Harry Adel
@harryadel
Sep 10 2016 19:27
@2Irina2 show me your codepen
Muhammad Hasham
@MohammadHasham
Sep 10 2016 19:27
@maeswilliam please check again
Muhammad Hasham
@MohammadHasham
Sep 10 2016 19:28
@maeswilliam i have maded the adjustments please check that again
Harry Adel
@harryadel
Sep 10 2016 19:28
@2Irina2 I'mma fiddle a bit with it then report back to you
Muhammad Hasham
@MohammadHasham
Sep 10 2016 19:28
i just want to add a white background with the image
Irina
@2Irina2
Sep 10 2016 19:29
@Harry97 hold on... i got it.. it was a spelling mistake :|
@Harry97 ytped in enrty instead of entry :|
@Harry97 bangs head against desk
@Harry97 thank you anyway
CamperBot
@camperbot
Sep 10 2016 19:30
:warning: 2irina2 already gave harry97 points
2irina2 sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
Irina
@2Irina2
Sep 10 2016 19:30
:)
Harry Adel
@harryadel
Sep 10 2016 19:30
;_; I didn't get to do anything
Muhammad Hasham
@MohammadHasham
Sep 10 2016 19:30
@maeswilliam u there?
William Maes
@maeswilliam
Sep 10 2016 19:31
@MohammadHasham you allready have a white background?
Muhammad Hasham
@MohammadHasham
Sep 10 2016 19:31
okay then a black border
Irina
@2Irina2
Sep 10 2016 19:31
@Harry97 it's alright :) aaahhh it's so embarrassing :D
Muhammad Hasham
@MohammadHasham
Sep 10 2016 19:31
actually i havent added background on codepen
@maeswilliam
Harry Adel
@harryadel
Sep 10 2016 19:32
@maeswilliam Is there anything I can help you guys with?
@MohammadHasham أنا مصري :smile:
Irina
@2Irina2
Sep 10 2016 19:32
@Harry97 i spend so much time looking throught the code and thinking of a way to solve the bug... then google it... and find the stupid mistake only after posting my code here
Muhammad Hasham
@MohammadHasham
Sep 10 2016 19:33
@Harry97 sorry i couldnt get that is this arabic?
i am really stuck guys...
Harry Adel
@harryadel
Sep 10 2016 19:34
@2Irina2 you could've referenced .results in css and modified if you were stuck with entry
but I gotta say It was smart of you to use single quotes to surround the class
Muhammad Hasham
@MohammadHasham
Sep 10 2016 19:35
Harry Adel
@harryadel
Sep 10 2016 19:35
I didn't think it was possible
Irina
@2Irina2
Sep 10 2016 19:35
@Harry97 heh heh thanks! :)
CamperBot
@camperbot
Sep 10 2016 19:35
2irina2 sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: 2irina2 already gave harry97 points
Irina
@2Irina2
Sep 10 2016 19:35
@Harry97 it seemed easier this way
Muhammad Hasham
@MohammadHasham
Sep 10 2016 19:35
how can i add circle border along the image?
Harry Adel
@harryadel
Sep 10 2016 19:35
@MohammadHasham lw enta 3ayz aft7 m3ak private chat w as3dk e4ta m3ndi4 man3
@MohammadHasham border-radius: 50%
Muhammad Hasham
@MohammadHasham
Sep 10 2016 19:36
did that nothing happened
pm?
Michael Cavataio
@MCavataio
Sep 10 2016 19:42
did you add to the image or the div? @MohammadHasham
Muhammad Hasham
@MohammadHasham
Sep 10 2016 19:43
div class = "container-fluid">
         <div class = "row">
           <div class = "col-xs-6">
             <div class = "col-xs-offset-2">
             <div class = "picture_frame">
             <img src="profile.jpg" class="img-fluid img-responsive img-circle"></img>
             </div>
             </div>
           </div>
And the CSS
.picture_frame{
    padding-top: 20%;
    width:70%;
    height: 70%;
    border:2px solid white;
    border-radius: 50%;
@MCavataio
Michael Cavataio
@MCavataio
Sep 10 2016 19:47
right so as of right now you're adding a radius to the div element
flindip
@flindip
Sep 10 2016 19:49

I'm doing the simon game project:

I just want some feedback for the HTML/CSS before I starting working on the JS. Make sure I didn't forget anything....
https://codepen.io/flindip/pen/wzKrYK

Dave
@db001
Sep 10 2016 20:07
Can someone give me an idea how I can make my jumbotron match the height of the background image please?
I know I can do {height: height of image} but then that doesn't work on the smaller screens
Harry Adel
@harryadel
Sep 10 2016 20:11
@db001 make sure to add some space to the top of your jumbotron using margin-top
Dave
@db001
Sep 10 2016 20:14
@Harry97 Thanks, but I meant so that you can see the full height of the background image, at the moment it's getting cut off after the <p>
CamperBot
@camperbot
Sep 10 2016 20:14
db001 sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:cookie: 238 | @harry97 |http://www.freecodecamp.com/harry97
Harry Adel
@harryadel
Sep 10 2016 20:16
@db001 oh, sorry about that, I'mma modify it now
Kantra
@removed~kantrakantra
Sep 10 2016 20:17

Hey guys can anybody point out why, in this code, I can't see the page when I wrap the css in @media screen and (min-width: 480px)

http://codepen.io/kantrakantra/pen/kXyVoB

I want to essentially create two style sheets. One for 0px-480px and one for everything above 480px
Harry Adel
@harryadel
Sep 10 2016 20:17
Dave
@db001
Sep 10 2016 20:18
@Harry97 That's it! Thanks
CamperBot
@camperbot
Sep 10 2016 20:18
db001 sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: db001 already gave harry97 points
Harry Adel
@harryadel
Sep 10 2016 20:19
@kantrakantra it work fine http://codepen.io/Hadouken/pen/GjpQWp
@db001 cheers man ^^
Irina
@2Irina2
Sep 10 2016 20:19

How do i make the link come up in a new tab when i click the search results? :)

http://codepen.io/2Irina2/pen/LkvNdo?editors=0010

Harry Adel
@harryadel
Sep 10 2016 20:20
@kantrakantra you forgot to close the body in the media query
Irina
@2Irina2
Sep 10 2016 20:20
target = blank doesn't seem to do it
Harry Adel
@harryadel
Sep 10 2016 20:20
@2Irina2 target=_blank
add it to the a href tag
Tyler Moeller
@TylerMoeller
Sep 10 2016 20:20

@kantrakantra Instead of this:

html,
@media screen and (min-width: 480px){

do this:

@media screen and (min-width: 480px){
html,
Kantra
@removed~kantrakantra
Sep 10 2016 20:21
@TylerMoeller ok I'll try that. thx
CamperBot
@camperbot
Sep 10 2016 20:21
kantrakantra sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 815 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Harry Adel
@harryadel
Sep 10 2016 20:22
@2Irina2 <a href="http://www.google.com" target="_blank">ftw</a>
Tyler Moeller
@TylerMoeller
Sep 10 2016 20:22
@2Irina2 You have some spacing issues in your target. It should look like this: +" target='_blank'><span>" +
Irina
@2Irina2
Sep 10 2016 20:24
@TylerMoeller aaahhh man come on not again
@TylerMoeller thank you! gosh darn it
CamperBot
@camperbot
Sep 10 2016 20:24
2irina2 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 816 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Sep 10 2016 20:24
:)
Dawit Belaineh
@dawit1
Sep 10 2016 20:45
this is what i have//running test
var a;
var a = 5+1;
var a = 6;
var b;
var b = 10+5;
var b = 15;
var c;
var c = "I am a+String";
var c = "I am a String!";
//test completed
and it keep saying "do not change code below the line"
what is wrong?
LenaSUI
@LenaSUI
Sep 10 2016 21:00
Can someone please help me with my navbar button? It just doesn't display the menu correctly
Joel Santos
@St3ps
Sep 10 2016 21:14
@LenaSUI
all html markup must go under <body>
Ok 1st
Kantra
@removed~kantrakantra
Sep 10 2016 21:15

Hey guys, so I'm having another issue related to setting up a @media screen and (min-width: 480px) "version" of my css. I've essentially made two copies of the css, one which is "normal" wrapped in the @media screen and (min-width: 480px) and one which is for anything below 480px in screen-width not wrapped in anything and preceding the wrapped css.

The problem I've encountered is that it appears the the code preceding the wrapped code is taking precedent over the wrapped code even though the wrapped code is below it. Here's the pen:

http://codepen.io/kantrakantra/pen/kXyVoB

Joel Santos
@St3ps
Sep 10 2016 21:16
Close the <div class="container-fluid" first. Then <nav> (you have the wrong order, you should see jsut before <body> begins)
@LenaSUI
then notice that you have all of this code just above <body>, and that won't work, you must move it INSIDE the <body> tag
MaveyMa
@MaveyMa
Sep 10 2016 21:20
Hello! Can a 3rd party please confirm this bug I found before I decide to submit an issue on github?
LenaSUI
@LenaSUI
Sep 10 2016 21:21
@St3ps So the order must be <body> <div class="container-fluid> <nav>?
MaveyMa
@MaveyMa
Sep 10 2016 21:21
https://www.freecodecamp.com/challenges/get-set-for-our-front-end-development-projects When I click “Go to my next step”, nothing happens.
Joel Santos
@St3ps
Sep 10 2016 21:21
@LenaSUI yes
@kantrakantra I'm sorry, I don't understand: You have code preceding a media query, and it's taking priority over it? It sounds normal, css with no media queries will execute unconditionally. I don't see the css preceding the media query though, all i see is the code wrapped inside the @media tag
Kantra
@removed~kantrakantra
Sep 10 2016 21:28
@St3ps I've edited it since I left the comment
Joel Santos
@St3ps
Sep 10 2016 21:28
@kantrakantra Oh.
Kantra
@removed~kantrakantra
Sep 10 2016 21:28
thx. I think I actually figured it out
Joel Santos
@St3ps
Sep 10 2016 21:28
@kantrakantra Sweet ;)
Kantra
@removed~kantrakantra
Sep 10 2016 21:28
@St3ps thx
CamperBot
@camperbot
Sep 10 2016 21:28
:cookie: 336 | @st3ps |http://www.freecodecamp.com/st3ps
kantrakantra sends brownie points to @st3ps :sparkles: :thumbsup: :sparkles:
Asif Raza
@siffie
Sep 10 2016 21:28
Hi i am done the tribute page project but when I click on I've completed button .... nothing happen
Joel Santos
@St3ps
Sep 10 2016 21:29
@siffie refresh the page
Asif Raza
@siffie
Sep 10 2016 21:30
I did sir but still problem there
Seth
@sethmchris
Sep 10 2016 21:30
@MaveyMa Confirmed.
Asif Raza
@siffie
Sep 10 2016 21:30
here is the link http://codepen.io/Siffie/pen/mAZBOJ what i made for tribute page
LenaSUI
@LenaSUI
Sep 10 2016 21:31
@MaveyMa Same here!
Joel Santos
@St3ps
Sep 10 2016 21:31
@siffie Alright, try ... closing the browser and opening it again. It sounds silly, but i've had the same problem you did (i clicked on "Complete Challenge" and nothing happened) then i just clowsed the browser, went back to the challenge and the button was working
scratch that, it's a problem on freecodecamp's end, just sit back and wait it out :p
Lydia Larae
@nevaIsDreaming
Sep 10 2016 21:34
hi everyone.
does anyone here have advice about getting a button to align on the right side within a div?
Henrik Christensen
@henrikac
Sep 10 2016 21:37
@nevaIsDreaming tried float: right; or text-align: right; ? :-)
Tyler Moeller
@TylerMoeller
Sep 10 2016 21:39
@nevaIsDreaming
<div class="button-div">
  <button>button</button>
</div>
.button-div {
  text-align: right;
}
Matthew Allen
@unscodst
Sep 10 2016 21:39
@nevaIsDreaming Can you provide your code? I have an idea of how to fix it and I would need to see what you have now
George Mbugua
@gmbugua
Sep 10 2016 21:39
Hello CodeCampers! I need some help on my portfolio website. I've made generous strides the past 2 days, but I'm having a scrolling issue. My portfolio is a 1 long html page, with multiple pages that are accessible through the navbar, or simply scrolling. The problem is the pages are off. When i click the page I want to go to in the navbar it sends me closer to the middle of the page rather than to where I can see the title of the page then view it's content. This, in my opinion, ruins the user experience to some extent. If anyone can help here's the link to my Portfolio Project Codepen: http://codepen.io/gmbugua/full/LRpQOK/
Lydia Larae
@nevaIsDreaming
Sep 10 2016 21:40
@regnis1695 yep. I've tried putting it in line in the button opening tag and creating an id in the style sheet and neither worked. When it loads it flashes on the right, but then jumps back to the left like something is overriding it. The way I understand inheritance though, I can't figure out what it is.
Alright so here is the code
<body>
  <div class="container-fluid">
  <div class = "machina col-md";> 
    <blockquote style = "align: center;"><p>"I mam a proud kittis queen. I wonder what this will look like as I add more text to it." </p></blockquote>
    <cite>Tilda</cite>
    <br></br>
    <button type="button" class="btn btn-primary btn-small margin-btn"> New Quote! </button>
    <a href="https://twitter.com/share" class="twitter-share-button right-btn" data-show-count="false" data-size="large" id="right-btn">Tweet</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</a>
  </div>
  </div>
</body>
So it's the second button which is actually in there as an anchor element.
This is the relevant CSS
#right-btn {
  float: right;
}
Matthew Allen
@unscodst
Sep 10 2016 21:44
try:
#right-btn {
display: block;
float: right;
}
Henrik Christensen
@henrikac
Sep 10 2016 21:45
@nevaIsDreaming might not be relevant but why do you have 2x </a> ?
Matthew Allen
@unscodst
Sep 10 2016 21:45
If you can provide your code in CodePen or another online editor that would be helpful
@gmbugua I'm looking into it, give me a sec
Bjørn Arild Andersen
@BjoAndersen
Sep 10 2016 21:49
I am not able to deliver my page for the first "assignment". Nothing works. No buttons or anything. What to do?
Lydia Larae
@nevaIsDreaming
Sep 10 2016 21:49
@regnis1695 probably leftovers from how many times I change the code trying to make the button look right
thanks for pointing it out @regnis1695
CamperBot
@camperbot
Sep 10 2016 21:50
nevaisdreaming sends brownie points to @regnis1695 :sparkles: :thumbsup: :sparkles:
:cookie: 289 | @regnis1695 |http://www.freecodecamp.com/regnis1695
that should help too
Bjørn Arild Andersen
@BjoAndersen
Sep 10 2016 21:50
But I am not able to continue or deliver
:-(
Anyone got any advice??
Lydia Larae
@nevaIsDreaming
Sep 10 2016 21:55
@unscodst Thanks for the idea! That's not quite doing it either.
CamperBot
@camperbot
Sep 10 2016 21:55
nevaisdreaming sends brownie points to @unscodst :sparkles: :thumbsup: :sparkles:
:cookie: 78 | @unscodst |http://www.freecodecamp.com/unscodst
Matthew Allen
@unscodst
Sep 10 2016 21:55
@nevaIsDreaming Yeah I see, that's odd
Henrik Christensen
@henrikac
Sep 10 2016 21:56
@nevaIsDreaming The script in your html is prolly the reason cause all scripts should be in the JS block
@nevaIsDreaming Try remove the script and you will see the #right-btn floating to the right :-)
Lydia Larae
@nevaIsDreaming
Sep 10 2016 21:58
@regnis1695 Thanks. So the way I figured out to do the Twitter button was by getting the code from the developers section on the twitter site. Will it still run the right way if I move that part to the JS part of code pen?
CamperBot
@camperbot
Sep 10 2016 21:58
nevaisdreaming sends brownie points to @regnis1695 :sparkles: :thumbsup: :sparkles:
:warning: nevaisdreaming already gave regnis1695 points
Lydia Larae
@nevaIsDreaming
Sep 10 2016 21:59
nevermind, I'll just check myself.
Hmmm...None of that actually worked on the tweet button, but I'm very grateful to you both for offering your help. I just assigned the id to the new quote button and that moved it to the right, so at least I have buttons on opposite sides now.
Matthew Allen
@unscodst
Sep 10 2016 22:03
@nevaIsDreaming @regnis1695 is right. You should also check what is in the widget.js file that the script is linking too. My thinking is the widget is set up to display where you have it on the page to align with their branding and stlye guide. This can be over ridden but you may need to dig s little deeper into the source of the widget to see what it's actually doing
Tyler Moeller
@TylerMoeller
Sep 10 2016 22:04
@nevaIsDreaming When you use the twitter button the way you have, it creates an <iframe> to house the button. It will be much easier to not use the twitter widget code, just create a button with an icon like they show here: http://fontawesome.io/examples/#bootstrap
Use the Settings or Delete buttons as examples with the twitter icon: http://fontawesome.io/icon/twitter/
Matthew Allen
@unscodst
Sep 10 2016 22:06
@BjoAndersen It seems to be working finr for me
@gmbugua Did you just edit your site to get it working? It seems fixed on that CodePen
Space Ghost
@MegaMan-X
Sep 10 2016 22:23
Anyone have a moment? I've encountered a problem I cant seem to fix
    <form method="post" action="#">
      <input id="search-box" class="search-for-word clearable" type="text" autocomplete="off" />
      <button class="blah" id="clear-button">X</button>
    </form>

  clearButton.click(function() {
    clearButton.fadeOut(500);
  });
When I click the X button, Codepen errors and says "You've just POSTed to a Pen. Values Posted: Values as JSON {}"
Happens with and without the .click function attached, but only while the button is inside the form
Space Ghost
@MegaMan-X
Sep 10 2016 22:29
I just answered my own question
john94
@lpy1994
Sep 10 2016 23:55
guys, I am starting my twitch stream api project right now
ZhaoZiyu1998
@ZhaoZiyu1998
Sep 10 2016 23:55
How to make that gray box?
wondering why the search image for the search button can’t display