@tylerjj17 You'll have to move your if/else into your getJSON and use
temp, or wrap it into a function and send temp as an argument to that function. Make sure it's a number not text too - should work fine after that
Right now, you're doing
var far; which sets it to undefined and then asking if far > 80 or undefined > 80
and i think there's an other pb sky
Look @
.css('background-image','url(http://res.cloudinary.com/dh8lrmygd/image/upload/v1496705892/pexels-photo-29724_gwrog9.jpg)'
is
http://res.cloudinary.com/dh8lrmygd/image/upload/v1496705892/pexels-photo-29724_gwrog9.jpghave to be quoted ? ;)
.css('background-image','url("http://res.cloudinary.com/dh8lrmygd/image/upload/v1496705892/pexels-photo-29724_gwrog9.jpg")'
Isn't it better? ;)
Alright, so I got the banner and the navbar functioning properly. The order is the problem now. I need to the banner to get on top of the navbar. In the code, the header where the banner pic is come before the navbar but in the display the navbar is on top of the banner. Any suggestions as to what might be the reason for this?
@SkyC0der I see. I think I saw somewhere that my css was already minified, but I'll check again. A lot of the problems seem to stem from the fact that I use several URIs, including Google Fonts, minified bootstrap, etc
oops, I see I forgot to include the link. Alright, so I got the banner and the navbar functioning properly. The order is the problem now. I need to the banner to get on top of the navbar. In the code, the header where the banner pic is come before the navbar but in the display the navbar is on top of the banner. Any suggestions as to what might be the reason for this? https://codepen.io/iggy1906/pen/WjLwWK?editors=1100
@SkyC0der i moved the if/else but it says unexpected token if
https://codepen.io/tylerjj17/pen/XgWpRj
https://codepen.io/tylerjj17/pen/XgWpRj
@LordMathis awesome thanks.. have never heard of that but will check it out
ericvoigt sends brownie points to @lordmathis :sparkles: :thumbsup: :sparkles:
:cookie: 342 | @lordmathis |http://www.freecodecamp.com/lordmathis
is there a way to view codepen without the side panel?
and never mind
@AmitP88 I didn't look, but I saw "style.css" and assumed it wasn't minified
@tylerjj17 Just a copy/paste error - your brackets are out of place
Ideally, however, you'll want that if/else code in your ajax success function where you define
temp
My background picture takes like 4 seconds to load, is there anyway to speed it up?
nvm, i think its the website, gunna host it myself
These are some crazy eyes lol: http://alteredqualia.com/xg/examples/eyes_gaze2.html
If anyone knows how to get that DeepWarp eye gaze effect, I want to try it out :p
@SkyC0der that looks so creepy
I know lol, going to give me nightmares
glad i dont have the api or whatever lol
stop looking at my mouse pointer
@SkyC0der it should work for horror movie's poster
lol, would be great for that
how can i move an image so it stays fixed on the page and doesn't move around when resize
make it a background image and specify an exact size
@ericvoigt position: fixed
define: "move around" - I thought you meant resize :)
ahh sheeeet lol.. yeah not resize.. tried position: fixed and it jump down to the bottom (original position) also have.. top: #; right: #;
can i do relative, fixed?
think i got i
t
thanks
@ravikishorethella @SkyC0der my image is fixed but now it is moving up and down with the scroll.. thought relative, fixed would do it but not sure
what do to
I don't manage to do what i want to do
Give me hints
How can I do for JS to "listen" to my checkbox to change temperature units ? :)
so im having a hell of a time changing text color on the bootstrap nav bar, anyone mind helping me out?
@fullmetal7777 explain ;)
@R0ulito alright so first issue, i get the thing on codepen from sublime and a couple of color changes ive made arent showing up. Otherwise, im just trying to get colors changed and getting to targeting it in css is a huge pain in the ass lol Actually, ive found targeting anything in css with bootstrap is a ton harder than without it. Still, the gain much outweights the troubles lol
but, ive got it up on codepen :D @R0ulito https://codepen.io/fullmetal7777/pen/KqwByL
@R0ulito just so you get an idea of what it looks like now http://prntscr.com/fgd208
@ericvoigt Like this? https://codepen.io/skycoder/pen/XgJoWp
That uses
background-attachment: fixed
@R0ulito i hate codepen btw lol
Hello All,
@R0ulito You're very close - just set up a click function for your toggle switch
Hello All,
I could use some feedback on my FCC: wikipedia project
https://codepen.io/sconde/full/LLYJYr/
@R0ulito Some very solid input there lol :P
i didn't get it @fullmetal7777
What's the problem (i'm french, maybe i didn't get it cause of it)
@R0ulito its in the chat, you didnt?
@R0ulito ah french, yesh that explains everything lol https://codepen.io/fullmetal7777/pen/KqwByL
What are the color you want to change ?
I'm done :)
thank again @SkyC0der
r0ulito sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1624 | @skyc0der |http://www.freecodecamp.com/skyc0der
I just have to change append method to html
And i'm good
@R0ulito prettty much everything. The color when i hover, background colors, both disabled and active, that sort of thing. Ive even looked in the bootstrap css and copied the way they do it and notta
Hellow Worldw
You have to overpass it
like
.the-class-you-want-to-change {
prop1:value!important;
prop2:value!important;
@fullmetal7777 if you want to change color while hovering try .class-you-want-to-change:hover
@R0ulito !important did it lol thanks buddy, i appareciate it.
fullmetal7777 sends brownie points to @r0ulito :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @r0ulito |http://www.freecodecamp.com/r0ulito
That's the way it is @fullmetal7777 ;)
Some people help me
I help some people ;)
In fact @SkyC0der helps everyone and we help some people :tongue:
hello I m working on personal portfolio webpage. I am working in code pen. I am trying to add background but its not work here is my code
html{ background: url(../images/office.jpg);}
@SkyC0der thanks again for the hint !!! Tomorrow i'll put the weather icons and i'm done with that
r0ulito sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: r0ulito already gave skyc0der points
@djfrakes you're trying to reach a local picture
@Fullmetal777 - you should be able to do it without
!important.
And then I jump in and help people when you're trying to help people lol
but thank you too for being helpful @R0ulito :)
skyc0der sends brownie points to @r0ulito :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @r0ulito |http://www.freecodecamp.com/r0ulito
I'm at the gym, but I could look at it later unless it's all working
I have to agree with Ken on that @fullmetal7777
!important is for the weak :) always a way around it
@R0ulito yes Im trying to use a picture from my images folder that I download
The point is, when i use codepen i don't code anywhere else
=)
So i have no problems like these
change it for https://cdn.pixabay.com/photo/2014/09/11/18/23/london-441853_960_720.jpg @djfrakes
just to try
@fullmetal7777 The problem is that you aren't using codepen correctly :p All of your resources must go in the settings or nothing will work as expected
@R0ulito I used unsplash.com
@djfrakes whats your problem?
link your codepen tho :)
https://codepen.io/djfrakes/pen/MoYzpM @fdemaa I trying add a background image that I download from unsplash.com
you cant upload a image from your computer to codepen, unless you have a premium account
@djfrakes first :
Don't apply bg to html but body instead
Don't apply bg to html but body instead
then already told you you can't use local ressource ;)
i changed it
oohhhh
body{background: url("https://cdn.pixabay.com/photo/2014/09/11/18/23/london-441853_960_720.jpg");}
@djfrakes use a image from the web
Works fine
ohhh
why you can't use local resource ?
@djfrakes you have to pay
@djfrakes because it's private
@djfrakes You can do it if you use codepen projects which allows you to store actual files of your project. But you're only allowed one project on the free version.
nobody can access your computer
ok
@djfrakes I recommend using http://cloudinary.com to upload your images and then it gives you a url which you can paste on codepen.
@longnt80 hi man!
@fdemaa hello!
@sergrdz7 @longnt80 @fdemaa @R0ulito thank you all
djfrakes sends brownie points to @sergrdz7 and @longnt80 and @fdemaa and @r0ulito :sparkles: :thumbsup: :sparkles:
:cookie: 137 | @fdemaa |http://www.freecodecamp.com/fdemaa
:cookie: 328 | @longnt80 |http://www.freecodecamp.com/longnt80
:cookie: 274 | @r0ulito |http://www.freecodecamp.com/r0ulito
:cookie: 281 | @sergrdz7 |http://www.freecodecamp.com/sergrdz7
@longnt80 i finish my portfolio man
@fdemaa good job! can I have a look
what do you think ?
@fdemaa WOW! How did u make it? It is absolutely elegant!
@fdemaa I am struggling on how to make it! haha
you are being too nice :smile:
@fdemaa looks great. Maybe you should center the contact
@sconde yes it might look much better centering ! thanks!
fdemaa sends brownie points to @sconde :sparkles: :thumbsup: :sparkles:
:cookie: 295 | @sconde |http://www.freecodecamp.com/sconde
@ccs99817 on what are you having problems?
@fdemaa still have room for improvement for sure, but at this stage, it's good enough!
@longnt80 thanks man!
fdemaa sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 329 | @longnt80 |http://www.freecodecamp.com/longnt80
@fdemaa nice portfolio man, gj
@bytao7mao thanks man!
fdemaa sends brownie points to @bytao7mao :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @bytao7mao |http://www.freecodecamp.com/bytao7mao
going sleep
Bye mates ;)
bye!
so my profile pic that trying to include above my name is not showing up https://codepen.io/djfrakes/pen/MoYzpM
Hey everyone. I'm taking a first crack at the Twitch API project and I decided to try to use a for loop combined with string concatenation to output the streaming status. The code I have right now does is not working, but could anyone tell me if the JavaScript code that I already have is perhaps close to working, or do I need to make radical changes to it? I will post a link to the CodePen below.
@dax change the scr into src
and add to class= the line - between prof and pic
mine worked
https://codepen.io/bytao7mao/pen/bRNzBq
https://codepen.io/bytao7mao/pen/bRNzBq
hey guys!
@Azmah21 hello
@bytao7mao thank you
djfrakes sends brownie points to @bytao7mao :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @bytao7mao |http://www.freecodecamp.com/bytao7mao
can you guys please tell me how to use a scaled down version of an image as my background?
I want to make my portfolio responsive so that the image has similar proportions on different screen sizes
Why isnt my background image showing up?
@jskowronek Try adding in background-size: cover; to your CSS and see if that does the trick.
@jskowronek Ah nevermind, I see that you already have it. Maybe you have to make the picture height smaller?
here's my pen
Yup tried that :( is my page 1 in the wrong spot on HTML
how can I stretch my image so that it covers the entire div?
@Azmah21 try
background-size:cover;
@jskowronek already using it
Maybe increase the height
@jskowronek the link is not valid for image
@jskowronek Your URL to that background image is a web page, not an image
If I increase the height wouldn't my image appear differently on different screen sizes?
Hey guys
@jskowronek and organize the divs and tags better, you have some divs which is not closed
I'm on my portfolio project now!
question is should I use bootstrap 3 or 4?
@Alvin-Capello
Hey everyone. I'm taking a first crack at the Twitch API project and I decided to try to use a for loop combined with string concatenation to output the streaming status. The code I have right now does is not working, but could anyone tell me if the JavaScript code that I already have is perhaps close to working, or do I need to make radical changes to it? I will post a link to the CodePen below.
https://codepen.io/AlvinCapello/pen/EXaeQQ?editors=0010
Hey everyone. I'm taking a first crack at the Twitch API project and I decided to try to use a for loop combined with string concatenation to output the streaming status. The code I have right now does is not working, but could anyone tell me if the JavaScript code that I already have is perhaps close to working, or do I need to make radical changes to it? I will post a link to the CodePen below.
https://codepen.io/AlvinCapello/pen/EXaeQQ?editors=0010
4 is still in alpha stage and I want to make my project live with a. host when I'm done
so should I use 3?
@1code1 3 is what I used. Here is the URL for it...
ha ha it was not a jpg I used a different image and it worked
Right, it was a .html :)
Thanks
Im gonna use this one @Alvin-Capello
You can still use that other image @jskowronek
https://cdn.pixabay.com/photo/2017/04/10/10/08/universe-2218012_960_720.jpg
@1code1 No problem. Just go to Pen Settings and paste that link in the Add External CSS section.
@jskowronek Nice!
@Alvin-Capello ohh you can do that I was just gonna link it in the header
here is my first project
tribute page
if anyone cares loll
@1code1 very nice maybe you can add a footer and a link to the information about.
@bytao7mao can do a footer, good idea. What do you mean information about?
@bytao7mao I did a little different than the example from FCC I wanted to be creative and have a magazine vibe to it
i mean a link to Kobe Bryant
@bytao7mao ohh ok I put one to him in the first paragraph
@bytao7mao link is his name (first words)
@1code1 found it :)) nice, gj
@bytao7mao thanks
1code1 sends brownie points to @bytao7mao :sparkles: :thumbsup: :sparkles:
:cookie: 124 | @bytao7mao |http://www.freecodecamp.com/bytao7mao
Hey guys, I'm doing the tribute page challenge and was wondering could anyone tell me how to link my image on codepen? I mean it's in my root folder on my desktop but how do i get it online? Does that makes sense? Thank you (:
upload it on some uploading site and get the link from there
@JazzLiberation Most people use https://postimage.org
@JazzLiberation it has to be online, try finding it online
It will give you a link to use for your tribute page
Thanks so much @1code1 @SkyC0der!!! seems obvious now :O (:
jazzliberation sends brownie points to @1code1 and @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: @1code1's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
:star2: 1625 | @skyc0der |http://www.freecodecamp.com/skyc0der
It's all obvious once you figure it out :)
Have fun writing your tribute page :p
Exactly! haha thank you!!
enjoy
Im having trouble with a background image for my portfolio page
pageOne{
background:url("https://ak8.picdn.net/shutterstock/videos/16830700/thumb/1.jpg");
background:url("https://ak8.picdn.net/shutterstock/videos/16830700/thumb/1.jpg");
this is my code for it
but it won't pop up on the screen
give codepen url
@1code1 the code is a mess :)))
really
omg
I'm very new
could you also please help me with my background image?
https://codepen.io/Azmah21/pen/gRbQrX?editors=1000
https://codepen.io/Azmah21/pen/gRbQrX?editors=1000
height: 100% only works when the element outside has a specific height already set.
@1code1 wait 1 min , i'm editing right now to set it up
man im so lost
I thought I was doing good lol
I'm less than a week in tho
@SkyC0der what should I set the outside height to?
@Azmah21 your code looks better than mine
@1code1 thanks man but it still doesn't run
azmah21 sends brownie points to @1code1 :sparkles: :thumbsup: :sparkles:
:warning: @1code1's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
@Azmah21 How tall do you want the background image to be?
100% of the height of the page?
@bytao7mao thanks
1code1 sends brownie points to @bytao7mao :sparkles: :thumbsup: :sparkles:
:warning: 1code1 already gave bytao7mao points
@bytao7mao how would I break it up when I want to put a second image underneath
@SkyC0der I want to divide the page into three sections and make it a single scroll page. The idea is that the image will cover their screen when they open the webpage kind of like the first image in this portfolio https://youtu.be/V72o34gY4Lw
I want a continuous scrolling page
@Azmah21 thats what I want to!!!
@1code1 that's cause we're both working on the same project
@Azmah21 yup
@Azmah21 not everyone does it that way tho, some people do one background all the way down
I don't like that look
I'm going for a modern vibe
@1code1 me neither
If you want a second image underneath, you can simply add in HTML <div class="thumbnail"><img src="#">
I want to have different backgrounds for different sections
@1code1 and of course don;t forget to close the divs
Hey everyone. I'm taking a first crack at the Twitch API project and I decided to try to use a for loop combined with string concatenation to output the streaming status. The code I have right now does is not working, but could anyone tell me if the JavaScript code that I already have is perhaps close to working, or do I need to make radical changes to it? I will post a link to the CodePen below.
https://codepen.io/AlvinCapello/pen/EXaeQQ?editors=0010
https://codepen.io/AlvinCapello/pen/EXaeQQ?editors=0010
@bytao7mao it didn't work for me https://codepen.io/Azmah21/pen/gRbQrX?editors=1000
@Azmah21 What didn't worked ? the image is there.
Hey I have completed my 2d game, https://codepen.io/shivamg11000/full/RgwwwQ/
Suggestions are encouraged, tell me of any error in the game.
Suggestions are encouraged, tell me of any error in the game.
@Azmah21 @1code1 You'll need to set up a <section> for each different section and specify a height. You can then use a background image for each of those sections. Something like this: https://codepen.io/skycoder/pen/xrbBZw?editors=1100
@bytao7mao it's too big and I don't think I can edit text inside the image since it's a thumbnail
@SkyC0der thanks man this pretty much sums up what I'm trying to do
I tried to make it as simple as possible to show an example
<section> for each section, then a height for each one of those sections and a background image
default bootstrap navbar from the documentation
@SkyC0der https://codepen.io/AN_code/pen/yXyZKE
could you take a look at my pen
instead of nav class I used ul class
for navigation
should I do <ul class and pills or <nav class and buttons
If it's your main navbar, I think you should use <nav>
It's supposed to help with screen readers and search engines so they can better tell what that part of your page is for
@1code1
I used this one in my example above: http://getbootstrap.com/components/#navbar
thanks
@SkyC0der thanks
1code1 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1626 | @skyc0der |http://www.freecodecamp.com/skyc0der
I could really use some help here.
hi im creating portfolio using codepen bootstrap. but my menu is appearing vertically instead of horizontally
I need help!!
What could I add if I want that when I click the nav bar, the page move to specific height?
What could I add if I want that when I click the nav bar, the page move to specific height?
@ccs99817 you mean smooth scrolling ?
you need javascript for that i think
@fdemaa I see no javascript in this example(https://codepen.io/Azmah21/pen/gRbQrX?editors=1100). Sorry for copying the link directly, Azmah21!
@ccs99817 ah yes you can do that matching each href with an id
<li><a href="#About">About</a></li>
<div id="About"></div>
@fdemaa Thanks a lot! I got it!~~~
:cookie: 138 | @fdemaa |http://www.freecodecamp.com/fdemaa
ccs99817 sends brownie points to @fdemaa :sparkles: :thumbsup: :sparkles:
:+1:
!
@fdemaa https://codepen.io/ccs99817/pen/owgXKz?editors=1100
Here's mine! Can you give me some feedbacks?
Here's mine! Can you give me some feedbacks?
Don't care about the context! HAHA><
<div class=thumbnail img-responsive> why this is not adding a white background??
@MachineVision2020 can we see your link? hard to tell without it.
@ccs99817 nice work man! you do it in 1 day ? omg ?
@MachineVision2020 you want the background to be white?
I want a white background behind the image
can anyone help me im trying to resize the logos in my "about" but cant figure out how
@MachineVision2020
style="background-color: white"
@MachineVision2020 place it in your image div
@jtan3 will it add background only to the image or entire page??
Hi all. I just pushed up a design update on my website. If you're up for it, would some of you take a look and let me know if anything's gone horribly wrong? Thanks so much! https://vickylai.io/
@MachineVision2020 should be in that div
@vickylaiio looks great, the only thing is cut is the about part , but other than that i really like it
@fdemaa Cut? What do you mean?
@vickylaiio wow, super nice! Did you have design experience before?
@jtan3 thank you so much but one more qustion how do I set that background to be same size of the image and then both(img and background) same size of jumbotron??
machinevision2020 sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 393 | @jtan3 |http://www.freecodecamp.com/jtan3
@botenga you should try using font-awesome, they have the icons for all of that stuff and you can also resize the logos using fa-2x fa-3x fa-4x in the class
@fdemaa Yesterday, I got this challenge. I thought i can't do this. But, this morning, i gave it a try. I found it is not that hard if you google. Just like what you have mentioned in your personal website, google teaches us a lot. Of course, without your help, i couldnt complete so fast. You are so helpful!!👍🏿👍🏿👍🏿😝
@vickylaiio that's really awesome
@vickylaiio it looks great. In my opinion you should also add your links to your social at the bottom of your page around where this was made with.
@MachineVision2020 you can center the img. You can add width to the picture.
@vickylaiio when i mean add it i mean add images
/icons
@kirontoo thanks I will you font awesome instead
botenga sends brownie points to @kirontoo :sparkles: :thumbsup: :sparkles:
:cookie: 250 | @kirontoo |http://www.freecodecamp.com/kirontoo
How can i set a background for a specific city with the API OpenWeatherMap for Local Weather project ?
@Atalaa If you're using codepen, you won't be able to use the openweather API without paying for a premium account.
Thanks @jtan3
vickylaiio sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 394 | @jtan3 |http://www.freecodecamp.com/jtan3
@jdtdesigns they have free option
Thanks @Botenga
vickylaiio sends brownie points to @botenga :sparkles: :thumbsup: :sparkles:
:cookie: 124 | @botenga |http://www.freecodecamp.com/botenga
@jdtdesigns http://openweathermap.org/price
@jtan3 I don't know what's happening!! I tried all methods to center image still it not centering. what's the code to center??
Thanks @MachineVision2020
vickylaiio sends brownie points to @machinevision2020 :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @machinevision2020 |http://www.freecodecamp.com/machinevision2020
@Atalaa Yes, they have a free option for http, not https which Codepen requires now. So in order to use the API on Codepen, you'll need the premium account. ;)
@MachineVision2020 text-center the row where your picture is
They offer https for free
@jdtdesigns Yeah i heard there is 3 top api are Yahoo, Wunderground and openweather
@jdtdesigns and how should i do to have a specific background for each city automatically ?
To answer your question regarding backgrounds for a specific location, you could use https://developers.google.com/maps/documentation/javascript/places along with https://developers.google.com/places/web-service/photos to get a photo.
@Atalaa
@jdtdesigns means i will use the google api as well or its aapart
@Atalaa Yes, you would need to register an app with your google account to use the api. The google API is challenging but offers an unlimited amount of data. ;)
@jdtdesigns thank you
atalaa sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:star2: 1010 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
is it an google weather api u sent me right now ? @jdtdesigns
@jdtdesigns
@Atalaa No, you would still use either apixu or weatherunderground for weather. Use the google API to get a photo for a city.
@jdtdesigns ok, i will use google for photo and https://darksky.net/dev/docs for my weather api
;)
@jdtdesigns youy google link u sent me is in french wich its ok cuz im french, but is it in english for u ?
@Atalaa Google knows all
@jdtdesigns hahahahaha it change it auto right
right ;)
@jdtdesigns thank u my friend
atalaa sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: atalaa already gave jdtdesigns points
welcome
how to do source-over and destination-over with canvas background as black so,that black background doesnot take part in global composition?
<script type="text/javascript">
var canvas;
var cvasCntext;
window.onload=function()
{
canvas=document.getElementById('cArea'); cvasCntext=canvas.getContext('2d'); cvasCntext.fillStyle="black";
cvasCntext.fillRect(0,0,400,400);
cvasCntext.fillStyle='green';
cvasCntext.fillRect(25,0,100,100); cvasCntext.globalCompositeOperation='destination-over';//here my yellow rectangle disappears.I want my yellow rectangle to be visible and not overlap by black rectangle.
cvasCntext.fillStyle='yellow';
cvasCntext.fillRect(50,0,100,100);
cvasCntext.restore();
}
</script>
help!!
Hey, could someone take a look at my code and let me know why its malfunctioning? https://codepen.io/DRick504/pen/XgWpaj
@DRick504 you are on the last project?
No, still one more after this one I believe
@fdemaa still one more, I believe
@DRick504 you are so close :smile:
@fdemaa which makes it all the more frustrating that I'm stuck lol
@DRick504 lol
hey guys, I'm trying to get a pagespeed score above 90% and I'm kind of stuck. It says that my styles.css and media_queries.css files are render blocking. Is the only way to get around this is to inline all css from these two files? or is there another way to unblock it while keeping the css in their own files?
about @AmitP88
:cookie: 293 | @amitp88 |http://www.freecodecamp.com/amitp88
which challenge is this for, @AmitP88 I can't read images cuz I'm visually-impaired.
did you looked at link Optimize css delivery @AmitP88 ?
I need your help. I need to make sure that the block with pictures on the right is scrolled, and all other blocks remain in their places http://mysolaris.xyz/slide1.html Please help me
Hi guys! Can you please tell me why the navbar is not showing in my page,
@noobcoder007 you're using Bootstrap 3 classes but adding Bootstrap 4
can someone help me with bootstrap container
Does anyone know if it is possible to change the .container's background into an image?
@h1tag thanks!
noobcoder007 sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 834 | @h1tag |http://www.freecodecamp.com/h1tag
Hi Guys i am working on weather application i want to change the background image as per the weather condition how to approach on this
@manjulam83 point_up :point_up:
or u can use an array for the images and change it based on the weather condition
@kylehopev yes, you can
Michiel @MichielHuijse 12:13
Hi I want to use the localweather json api. But I think I am doing something wrong with parenthesis. Can someone tell me what I am doing wrong! thanks https://codepen.io/michiel-huijse/pen/eBWBVz
Hi I want to use the localweather json api. But I think I am doing something wrong with parenthesis. Can someone tell me what I am doing wrong! thanks https://codepen.io/michiel-huijse/pen/eBWBVz
sorry michielhuijse, you can't send brownie points to yourself! :sparkles: :sparkles:
@h1tag my api sends back some weather condition and codes , so u mean to say i need to decide some weather conditions like sunny, could, rain.
@MichielHuijse if you check the browser console, you'll find a mixed content error
@manjulam83 yes
how many conditions we need to decide
as many as u can, or the main ones
when building a code Pen - i want to use bootstrap, but it tells me not to include anything in the <head> of the html document - how can I use bootstrap in codepen then?
@h1tag the console of codepen gives no errors
@MichielHuijse this error happens basically when there's http and https urls in the same page. And you're loading the pen using https and using a http url in your code
the browser one, not the codepen one (you can launch it using ctrl+shift+i or j on windows/linux)
@osirisseye from the css settings
@h1tag can you elaborate? (I should change sth in the css settings in CodePen?)
@h1tag thanks !
osirisseye sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 835 | @h1tag |http://www.freecodecamp.com/h1tag
@h1tag ok, but when I change everything to https it is not working, what is the best workarround?
@MichielHuijse it's working
you can do something like
console.log(lat + long) to test it
@h1tag ok thanks
@h1tag thanks
michielhuijse sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 836 | @h1tag |http://www.freecodecamp.com/h1tag
Question for anyone with a personal website hosted on GitHub pages: Did you include a license in your repo? If so, which?
Hey guys! I’ve been pouring over this for hours and I can’t figure out what wrong. The console is printing out this error:
Uncaught TypeError: Cannot read property 'id' of undefined
at getUserIDs (VM409 pen.js:26)
at VM409 pen.js:47
getUserIDs @ VM409 pen.js:26
(anonymous) @ VM409 pen.js:47
//List of channels
var channelList = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
//Getting the user information using the list above
var getUser = function(){
var api = "https://cors-anywhere.herokuapp.com/https://wind-bow.gomix.me/twitch-api/users/";
var result = [];
for (var j = 0; j < channelList.length; j++){
$.getJSON(api+channelList[j],function(data){
result.push({
"id":data["_id"],
"username":data["display_name"],
"logo":data["logo"]
});
})
}
return result;
};
//Getting user IDs from the information we requested
function getUserIDs(users){
var IDs = [];
for (var i =0; i < channelList.length; i++){
IDs.push(users[i]["id"]);
}
return IDs;
}
//Getting the stream information from the userIds we collected
var getStream = function(userIDs){
var api = "https://cors-anywhere.herokuapp.com/https://wind-bow.gomix.me/twitch-api/streams/channel/"
var streamData = []
for( var i = 0; i < channelList.length; i++){
$.getJSON(api+userIDs[i], function(data){
streamData.push(data.stream[i]);
})
}
return streamData;
};
console.log(getStream(getUserIDs(getUser())));
I don’t know why though :/
@oakypokey Hello! My console shows that : users[i] is undefined , and your getUser returns empty array
@zhann1982 my console shows that too: but when I change the
return result in the getUser function, it outputs an array with 8 objects as it should?
*when i change it from return result to console.log(result);
Hi guys, I'm stuck at the javascript calculator project. I can't figure out the logic, do I need to work with strings, arrays, objects or what? the problem is that I can't understand how to multiply, divide, add and substract user's inputs following expressions order
some hints?
@oakypokey can you share the pen?
Right now the JS isn’t interacting with the DOM, I just want to be able to log something correctly to the console before I do anything else
@MichielHuijse why are u using http as code pen works as https ,it will be problem which i had faced and redo my application
@oakypokey you fixed the error?
using https://api.apixu.com for api
@h1tag no :/
@oakypokey I don't see it
@h1tag what are you looking for?
the error
@MichielHuijse https://freegeoip.net/json/ for lat and long and
check the Javascript console
I did
https://api.apixu.com for api weather
the browser one not hte codepen one
yes, I did
make sure you saved your progress
yeah i did
try now?
This is the error that I am getting:/
but when I log result to the console from getUser, it has all the objects:
@oakypokey I can see it when I launch it using ctrl+shift+j but not when I use ctrl+shift+i, weird
Could be a synchronization error, a line of code executes before you get the result from the API
:worried:
@oakypokey do you know at which line the error happens?
it would be line 21
but I’m calling the function at the very end
@oakypokey I think you have problem with asynchronose loading of data. I guess you are declaring "result" before the data arrive
it's at line 24
@zhann1982 how would i go about fixing it? I tried doing something to do with callbacks but i don’t think i did it right :/
@oakypokey what do u get when u log
result inside getUser?
This
It’s all the objects that I’m creating
I think you should make "result" a global variable. That would help to skip "return result" @oakypokey
@oakypokey Also the reason may be in second json call. It might shoot out first before you get "users"
@zhann1982 okay i’ll give it a shit
*shot
hahahahahha
:)
wow i’m really tired
Thanks @zhann1982 @h1tag
oakypokey sends brownie points to @zhann1982 and @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 837 | @h1tag |http://www.freecodecamp.com/h1tag
:cookie: 326 | @zhann1982 |http://www.freecodecamp.com/zhann1982
@oakypokey wait
hmm?
@oakypokey Using "promises" in this task is strongly recommended
@zhann1982 yeah— i just got to lean how they work :worried:
@oakypokey Good Luck!
@zhann1982 thanks!
oakypokey sends brownie points to @zhann1982 :sparkles: :thumbsup: :sparkles:
:warning: oakypokey already gave zhann1982 points
@oakypokey maybe find a way to put all your function calls inside the first getJSON, you'll have to change other things in those functions like the parameters
and use
let instead of var in loops with your getjson
Hey guys. I'm building a pomodoro clock. I have a function, which is just two switch statements, that I can't get to work properly.
function checkNumLength(mins, seconds){
switch(seconds.toString().length){
case 1:
$('#countWindow').text(mins + ':0' + seconds);
console.log(mins + ':' + '0' + seconds);
break;
case 2:
$('#countWindow').text(mins + ':' + seconds);
console.log(mins + ':' + seconds);
break;
}
switch(mins.toString().length){
case 1:
$('#countWindow').text('0' + mins + ':' + seconds);
break;
case 2:
$('#countWindow').text(mins + ':' + seconds);
break;
}
return mins, seconds;
}The idea of the switch statements is to check the length of two variables ('mins' and 'seconds') and then add a '0' in front of a single-numbered digit, similar to what a clock does. This works in the console (the console.logs output the correct value). However, the value displayed on the screen – at $('#countWindow') – always displays a single-digit number, like '25:0'; I want it to display '25:00'. Any ideas? Thanks. Also, for some reason, the minutes side seems to work well. The code is the same, so I'm confused as to what's going on.
@robertridley1988 You could try this https://www.w3schools.com/jsref/jsref_tofixed.asp
@robertridley1988 it's because the second switch overwrite the first switch
@longnt80 Haha. I just figured that to be the problem. Thanks for the spot, though. Just need to assign the value of 'seconds' to be "':0' + seconds" before running the second switch statement.
robertridley1988 sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 330 | @longnt80 |http://www.freecodecamp.com/longnt80
@robertridley1988 why don't you use
if? It's shorter
if ( s < 10 ) { s = "0" + s; }
if ( m < 10 ) { m = "0" + m; }
if ( h < 10 ) { h = "0" + h; }
$('#countWindow').text(h + ':' + m + ':' + s);
hi ! how can i add fontawesome to codePen ?
@robertridley1988 btw, I'm currently working on Pomodoro Clock too
please help :(
@Yaroush Add it to the external css resources in settings of your project
@Yaroush add this to your css https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
ok i know but how can i add it ?
what shall i write ?
go to setting, and go to CSS tab, copy and paste the link above into
thank you so much @longnt80
yaroush sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 331 | @longnt80 |http://www.freecodecamp.com/longnt80
how can i change a button background color ?
@Yaroush give the background-color to the button
CSS
@longnt80 Thanks for the tip. How's the clock going for you?
robertridley1988 sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:warning: robertridley1988 already gave longnt80 points
@robertridley1988 I've been working for a few days now. I figure out how to start and pause the timer. Now I need to display it correctly.
@longnt80 Nice. Which timer function are you using, setInterval()?
@robertridley1988 that's what I tried first, but I learned the hard way that setInterval() is not reliable
@Yaroush The same way you change text color, but instead you use
background-color
@robertridley1988 now I use
setTimeout() and the Date object
@longnt80 Oh, right. I've used setInterval(). Haven't run into any issues so far – just the stop button to figure out now.
@robertridley1988 that's because you haven't looked hard enough ;)
@longnt80 Haha. Okay
@robertridley1988 setInterval() will have lag so your timer actually a little bit slower than real time
@robertridley1988 when you try to setInterval in ONE millisecond, you'll see
@robertridley1988 what I learned is to use
but the most accurate is to use the Date.now() to grab the real millisecond
setTimeout(), it is more accuratebut the most accurate is to use the Date.now() to grab the real millisecond
@longnt80 I see. I'll have to look at the docs to check that out.
@robertridley1988 w3school and MDN didn't say anything about this though
@robertridley1988 if you want, I can send you the link discussing about this on stackoverflow.
@longnt80 Awesome! That would be much appreciated. Thanks!!
robertridley1988 sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:warning: robertridley1988 already gave longnt80 points
@robertridley1988 but I suggest you play around with setInterval() in
1 millisecond to see the lag effect
Hi guys. Does the FCC Twitch API (https://wind-bow.gomix.me/twitch-api) only allow data from one stream at a time?
@sjurs1 yes
you need to connect multiple APIs
@longnt80 So I need to perform three separate ajax calls for example?
yes
Alright, simple enough. Thanks @longnt80 !
sjurs1 sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 332 | @longnt80 |http://www.freecodecamp.com/longnt80
no problem
If you are starting out as a freelancer, join http://remoteapprentice.com today to grow in your freelance career. Get coaching and jobs!
I am trying to use this code but when use on a page all the links are changing the color , when I just want when radio button is selected to change the link background color - http://jsfiddle.net/sEwM6/148/
Any thoughts on this would be much appreciated
$(document).ready(function(){
// https://en.wikipedia.org/w/api.php?action=opensearch&search=doggy&callback=?
$("#search").click(function(){
var searchTerm= $('#searchTerm').val();
$.ajax({
type:'GET',
url:'https://en.wikipedia.org/w/api.php?action=opensearch&search=' + searchTerm + '&callback=?',
contentType: "application/json; charset=utf-8",
async:false,
dataType:'json',
success:function(data){
$('#output').html('');
for(var i=0;i<data[1].length;i++){
$('#output').prepend("<div><div class='btn-primary'><a href="+data[3][i]+"><h2>" + data[1][i] + "</h2>" + "<p>" + data[2][i] + "</p></a></div></div>");
}
$("#searchTerm").val('');
},
error:function(errorMessage){
alert("ErrorMessage");
},});
});
$("#searchTerm").keypress(function(e){
if(e.which==13){
$("#search").click();
}
});
});
please help tell me what is the error
@ambuja
$('h2 a').css('background-color', 'transparent')
got a question.
so i created a button with a <a> but for some reason if i want to stytle the text inside the button i have to add the style directly in the <a> if i remove the style and try to add it in the css it doesnt effect it
here is the button code <button class="btn-primary cmbtn"><a href="#" class="btnfont" style="font-family:'Lobster'; font-size:1.8em">Contact Me</a></button>
</div>
$('#' + dt).css('background-color', 'red')- this code is making the entire links on my page change color
@longnt80 $('#' + dt).css('background-color', 'red') this code is turning the links color on entire page I think
@priyanka-bhalla Your ajax call looks fine, but it could be simplified:
$.ajax({
url: "https://en.wikipedia.org/w/api.php?action=opensearch&origin=*&search=" + searchTerm,
success: function(data) {Do you have a codepen? It's hard to tell what else might be going on - maybe an issue with IDs in your HTML
@ambuja When I click on a radio button, the relevant link is highlighted. Other links are not.
Click "Workshops" radio button, "Workshops" link background is red.
Click "Courses" radio button, "Courses" link background is red.
Click "Exclusivess" radio button, "Exclusives" link background is red.
Click "Workshops" radio button, "Workshops" link background is red.
Click "Courses" radio button, "Courses" link background is red.
Click "Exclusivess" radio button, "Exclusives" link background is red.
please help
@priyanka-bhalla You changed your link, it was working before. Add an
Or, simplify your $.ajax call:
& before format=jsonhttps://en.wikipedia.org/w/api.php?action=opensearch&search=' + searchTerm + '&format=json&callback=?',Or, simplify your $.ajax call:
$.ajax({
url: "https://en.wikipedia.org/w/api.php?action=opensearch&origin=*&search=" + searchTerm,
success: function(data) {
@SkyC0der - When I use this code on another page that I am working on thats when the link are changing
If you can show more code, we can try to help debug it better
The code you have shown us seems to do what you expect it to do
@SkyC0der ok let me put something up and send it over
I would change this:
$('h2 a').css('background-color', 'white')To:
$('h2 a').css('background-color', '')
@ambuja I don't see how it change the color of other links
@SkyC0der still not working
so when a user is on the page the CTA button needs to be grey in color and when the user selects the radio only then the CTA button changes to say Red
so I have two radio buttons
@priyanka-bhalla It works fine for me. Maybe an issue with your network? I mean, the text is all blue with a blue background, but I get results shown on the page.
thats the problem text is not visible
@priyanka-bhalla Use CSS to change the color of the text
but text is not visible
@priyanka-bhalla Hover over the blue boxes with your mouse and you will see the text. It is visible.
You just need to use CSS to change the color
@priyanka-bhalla Does that make sense? ^^ See the text in the picture?
@ambuja Sorry, I don't understand :/
You don't have any code for grey text. You have three radio buttons, not two.
I don't see a CTA button
thanks alot m done
@SkyC0der thanks dear
priyanka-bhalla sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1628 | @skyc0der |http://www.freecodecamp.com/skyc0der
Congrats :)
Hey, can anyone help me figure out why this code is malfunctioning. When played it fills in multiple boxes instead of one: https://codepen.io/DRick504/pen/XgWpaj
@SkyC0der Hey Sky - How comfortable are you with React?
@MadsSN I can tell what's going on when I read it, but couldn't write anything without copy/paste/modify :p
i'm having some trouble with bootstrap button groups, anyone able to take a look at my code and see what's going on?
@SwarmSE Sure
https://codepen.io/swarmse/pen/qjBERQ
I'm trying to justify the buttons with the other cities on them within the centered window. i'd like them to squeeze together as the page is resized, but as it is now, they push out over the right side of the box as the window is resized to a narrower aspect.
I'm trying to justify the buttons with the other cities on them within the centered window. i'd like them to squeeze together as the page is resized, but as it is now, they push out over the right side of the box as the window is resized to a narrower aspect.
@SwarmSE This won't fix it, but there are a few issues:
btn-group is meant for more than one button, your row needs a <div class="col"> inside of it, and the .buttonRow class set up in your CSS is going to override the default bootstrap row CSS and possibly cause some issues with the btn-group class.
I'll see if I can take a closer look
i was a little perplexed by wrapping each button in a button group as well. This was the method that was explained on the w3 page though.
For <button> elements, you must wrap each button in a .btn-group class:
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
The W3 page shows how to use Bootstrap 3. You are currently using Bootstrap 4 which is a completely different library - different class names, HTML, etc.
ohhhhh, that makes sense
Some of the class names are the same (like btn-group), but others changed...which makes it even more confusing
right? i'll convert to bs3. that's probably the issue that was really holding things up.
Good plan :) might clear things up a bit. Use this link in your settings and watch everything change :(
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
Good luck :)
@SkyC0der thanks!
swarmse sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1629 | @skyc0der |http://www.freecodecamp.com/skyc0der
oh it changed, but I think I can fix it now
someone replied to this for me yesterday but it would take me an eternity to scroll back to it.. how can i have a fixed image that doesn't scroll up and down with the page? thank you
@SkyC0der do you sleep?
@ericvoigt I slept 10hrs last night :) done with final exams :)
I replied to you yesterday, was asking if this is what you wanted: https://codepen.io/skycoder/pen/XgJoWp
I replied to you yesterday, was asking if this is what you wanted: https://codepen.io/skycoder/pen/XgJoWp
@SkyC0der - this is pen I have created , so when user is on the page the CTA buttons needs to be grey only when the user selects the radio button needs to change to orange
@SkyC0der https://codepen.io/Ambuja/pen/BZNzRx
@SkyC0der nice congrats on finals!.. not sure i have a circle image that i want to keep anchored on the page at a specific location.. here is the file you will see the circle image right away.. it;s supposed to be next to portfolio blurb https://codepen.io/ericvoigt/pen/XRLQqw?editors=1000
@ambuja Like this?
$('span a').css('background-color','grey')
$('input').on('change', function () {
if ($(this).is(':checked')) {
var dt = $(this).data('title')
$('span a').css('background-color','grey')
$('#' + dt).css('background-color','orange')
console.log(dt)
}
})
@SkyC0der yes , but I need to set default radio buttons to be unchecked and CTA buttons be grey
@ericvoigt looks good
@ericvoigt It seems anchored to me, do you just want to keep it next to the text "Adjust your Altitude"?
@ambuja You can make them all unchecked with
$('input').prop('checked', false);
$('span a').css('background-color','grey')
$('input').prop('checked', false);
$('input').on('change', function () {
if ($(this).is(':checked')) {
var dt = $(this).data('title')
$('span a').css('background-color','grey')
$('#' + dt).css('background-color','orange')
console.log(dt)
}
})
@SkyC0der yep that works , I am going to try it out
@SkyC0der trying to keep it next to about me but same technique.. tried a few things but it would either stay in one spot and then move when i changed the size of the web page
@MadsSN I could maybe help
@SkyC0der one more thing If I want to call in a class that has all the button styles for the orange one
$('#' + dt).css('background-color','orange')
@SkyC0der Instead of using background-color , Is it possible to call in <a> class
@ericvoigt I'm having trouble visualizing what you're trying to achieve :/
I noticed you have containers nested inside of containers and rows nested inside of rows - all of that may be contributing to the challenges you're facing with that image
I noticed you have containers nested inside of containers and rows nested inside of rows - all of that may be contributing to the challenges you're facing with that image
@SkyC0der just want to be able to make the image stay where I want in.. sheeeet... have lots to learn and i guess that is what i thought would be best.. but i guess not
@ambuja I'm not sure I understand the question, but you can loop through all <a> elements of your page to get their background colors with something like this:
$('body a').filter(function() {
console.log($(this).css('background-color'))
});
@SkyC0der this is really my first go at a portfolio and thought with the divs you are just being more specific
@ericvoigt The divs along with their class names make up the grid system, which is really the main benefit of using bootstrap: http://getbootstrap.com/css/#grid
@SkyC0der not all the body a element , so I have a CTA button already styled so instead of back-ground :orange
orange , I want to use a class
I see, you can use the
.addClass() method for that: https://api.jquery.com/addclass/
And
.removeClass() to remove the class
This may take a couple of days to practice, but all of these methods will help you build what you want to achieve: https://api.jquery.com/category/manipulation/
@SkyC0der thanks will look through that again and implement the right procedure
ericvoigt sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1630 | @skyc0der |http://www.freecodecamp.com/skyc0der
Man this twitch challenge is really fun!
hey @SkyC0der!
do you what these means in CSS
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -moz-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);?
@saeedjassani I haven't used translate() very much, but it moves the position of the element.
So,
transform: translate(-50%, -50%) would move something left and up by 50%
It moves it relatively to itself (50% mean half of its own width or height)
thanks @alpox @SkyC0der !
saeedjassani sends brownie points to @alpox and @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1143 | @alpox |http://www.freecodecamp.com/alpox
:star2: 1631 | @skyc0der |http://www.freecodecamp.com/skyc0der
Hey everyone. I'm taking a first crack at the Twitch API project and I decided to try to use a for loop combined with string concatenation to output the streaming status. The code I have right now does is not working, but could anyone tell me if the JavaScript code that I already have is perhaps close to working, or do I need to make radical changes to it? I will post a link to the CodePen below.
https://codepen.io/AlvinCapello/pen/EXaeQQ?editors=0010
https://codepen.io/AlvinCapello/pen/EXaeQQ?editors=0010
I have a problem with (I belive) a function "compare" that stops program from going beyond first move (it shoudl theoreticly, use "start" function with updated variables https://codepen.io/Gr8Gonadini/pen/YQKqqN
@Alvin-Capello As pseudo code, it looks fine. Your URL is incorrect, the
stream variable isn't defined, and you'll want to avoid running async methods like getJSON inside a for loop. https://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript
Try to generate your table in your JavaScript too - that way, you can pass in any array of streamers and it will always work.
@SkyC0der OK thank you. I will make the adjustments you said and keep working on it. These async methods can be quite confusing!
alvin-capello sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1632 | @skyc0der |http://www.freecodecamp.com/skyc0der
hey, i am almost done with the Local Weather app, just one thing remaining C to F and vice versa... any suggestions till now?
Hi guys. I'm on the twitch app and I'm at the point of implementing buttons that hide or show streams depending on their status (all, offline, online). If my ajax call returns an offline string, I add text displaying "Offline" by using jQuery. Can't I use that applied offline status to make my buttons perform the way I want to? Here's my document ready function:
$(document).ready(function(){
getFCC(); //first stream ajax call
getESLSC2(); //second stream ajax call
getEPICENTEREN1(); //third stream ajax call
$("#online").click(function(){
console.log($("#fccbox").val());
});
$("#all").click(function(){
$("div").slideDown();
});
});
All I get is an empty string
hey guys, i need help. https://codepen.io/whdhli/full/jwPBgy/
there is something strange at the top, theres a rectangular block on top with image repetition, why is that so?
@whdhli add
no-repeat center center fixed to your background css
@whdhli
background:url("http://i.imgur.com/m36sYaY.jpg")no-repeat center center fixed;
thanks @jtan3
whdhli sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 395 | @jtan3 |http://www.freecodecamp.com/jtan3
@sjurs1 The
.val() method is for <input> elements. Otherwise, you'll want to use .html() to get the HTML inside that element or .text()
@SkyC0der Yeah, thanks! I posted to HelpJavaScript and got help there :-)
sjurs1 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1633 | @skyc0der |http://www.freecodecamp.com/skyc0der
They're always a good help over there too :p
Hello :)
A question, could someone tell me how to share my CodePen? i would need someone to look on it, i think i messed up a part of it..
Anyone have some critique for the Twitch API challenge? I feel like I'm ready to call it a day on this:
Someone there? :)
@MaxMemphisjunior Just copy the link from your browser :)
@sjurs1 Could you help me? i really back(on tribute page challenge)
ohhh okay
could you tell me if the picture is in the middle? :)
and just saying code is a bit messy :/
i would like to help/say something about your work, but im not close to that project i think
@MaxMemphisjunior I guess it is, but you should try adding
class="img-responsive" to your image element
Also, because of codepen, you don't have to include <head> or <style>, it's already ingrained
So in the CSS rectangle below the HTML rectangle, just place all your <style> elements and remove them from the html-section
oh i see i didnt know that..
@sjurs1 you are a genius, thank you so much
maxmemphisjunior sends brownie points to @sjurs1 :sparkles: :thumbsup: :sparkles:
:cookie: 270 | @sjurs1 |http://www.freecodecamp.com/sjurs1
Why all of suddent people use let to declare variable rather than var?
Haha, that's a pretty big stretch @MaxMemphisjunior . But keep at it, not long since I was on the portfolio page myself, the learning curve is pretty steep if you just put some effort in and don't get discouraged.
@sjurs1 yeah i really want to learn, but i keep on making mistakes, but thanks to people like you i can keep on going :) i really appreciate it :D
maxmemphisjunior sends brownie points to @sjurs1 :sparkles: :thumbsup: :sparkles:
:warning: maxmemphisjunior already gave sjurs1 points
@MaxMemphisjunior I think everyone has been there, that's why people in this group are so helpful :)
@sjurs1 im sorry but i have a other question now ...
im making changes to h4 in css, but the changes are taking no effect...
im making changes to h4 in css, but the changes are taking no effect...
Yeah people are very nice here :)
actually it doesnt apply anywhere... i messed something seriously up
ohh got it
@MaxMemphisjunior whats your problem?
@fdemaa i sorted out so i use the css right but my image is not responsive anymore..
i deleted the bootstrap link in my html, because it should be in the css, but i did something wrong... seemingly
i tried to clean up my mess, but i made a bigger one...
you want to add bootstrap ?
you are using
the version 4
i added it through the css settings
before i had it directly in my html
add that
and delete your link with the version4
in the css settings or in the html with a link?
oh in css okay thank you @fdemaa
maxmemphisjunior sends brownie points to @fdemaa :sparkles: :thumbsup: :sparkles:
:cookie: 139 | @fdemaa |http://www.freecodecamp.com/fdemaa
so i was using the wrong bootstrap?
use that version
3.3.7
and put it in the quick add on css
yeah it works now, but it turned part of my last added sentece with the link to a link...
ahh i mean it turned something that isnt a link to alink..
<h4 class="Artist">(Here is a <a href="https://www.artstation.com/artist/aquarelainfinity" target="_blank">link <a/>[which will open in a new Tab] to his ArtStationaccount, if you want to see more of his work's!)</h4>
this is my code for the link, but the rest of h4 after the anchor turned into a link too
okay sorry i found the typo i did... sorry for this unneeded post
But thank you again for the help with bootstrap @fdemaa :D
maxmemphisjunior sends brownie points to @fdemaa :sparkles: :thumbsup: :sparkles:
:warning: maxmemphisjunior already gave fdemaa points
@MaxMemphisjunior no problem man! you should use just the header tag instead of adding a class but thats my opinion
just put on css
h1
h2
etc
do you mean because of my center or the #SG?
and you do sorry
nothing my mistake
is good
oh okay
well, im gonna take a brake for now, have a good day/night @fdemaa :D
hi guys. Please how do I render pdf in browser using jquery ajax
any clue
cheers you too!
how do i make my logo, h1, and h3 elements be on the same line? https://codepen.io/bestintown23/pen/LLVjOd
@bestintown23 in the styling try display: inline;
@bestintown23 https://codepen.io/fdemaa/pen/yXNoGg
thats what you want ?
hello everyone
what do you think of my quote machine?
how can i move my text to be all the way to the right of the page.? https://codepen.io/bestintown23/pen/LLVjOd
you are using the grid wrong
@baseballpoetess oh no, it's not for a challenge, it's just for my portfolio site. I'll be applying for dev jobs soon and I wanted to make sure my site wasn't slow to load @AlexanderDom yeah, I looked at it, but it pretty much says to inline my css code, but that's a ton of css to inline. I've decided to leave the loading speed as is, as I've gotten feedback that it's not that slow to load. imamitpatel.com
@bestintown23 You might want to try one room at a time with your question. May be considered spam (I think you've been banned for that before)
:point_up: June 6, 2017 1:22 PM
:point_up: June 6, 2017 1:22 PM
:point_up: June 6, 2017 1:22 PM
:point_up: June 6, 2017 1:22 PM
:point_up: June 6, 2017 1:22 PM
:point_up: June 6, 2017 1:22 PM
:point_up: June 6, 2017 1:22 PM
:point_up: June 6, 2017 1:22 PM
@AmitP88 Try running some of Google's sites through the pagespeed test :) they don't get 100/100 on them.
I found this great conversation on that tool yesterday, thought I'd share: https://www.reddit.com/r/webdev/comments/3ur94w/how_to_get_100100_in_google_pagespeed_insights/
@SkyC0der i can only upload one room at a time, and i did.
@SkyC0der lmao I see. Yeah, I think I got around 63% on mobile and 84% for desktop
@bestintown23 That's 4 rooms in one minute according to my clock. You end up with four different people all spending their own time to duplicate efforts.
@SkyC0der I figure that's fast enough for an employer (only takes a second to load) so I'm just gonna focus on FCC for now
An employer probably also wants to hear why you don't care about 100 as much as you care about getting close to it. Both good things to know I'm guessing. Good plan though, move on :)
@SkyC0der ok how is that a problem? especially if ones solution was not to work, which has happened to me in numerous cases.
@bestintown23 I can see your point of view. I'm personally more inclined to help answer your question if you aren't spamming it out to four rooms at the same time. This is why I don't respond to your questions.
Otherwise, I'd be happy to help you sort out your front-end questions...
@SkyC0der well im sorry. i could use all the help i could get, and i only do it to get the answer to my question so ill ease up
I'm working on the Local Weather app and having a couple of issues... 1) when I console.log(weatherApi) my longitude and latitude return as undefined. 2) my api link says that my api key is invalid. I tried making a new api key, but the results are the same. Any suggestions? https://codepen.io/jrwoods42/pen/WObNRP?editors=1111
@jrwoods42 man, that is weird. not sure why it's not returning lat & lon
@jrwoods42 if you look in your dev tool's console it has a mixed content error.
@jrwoods42 you might want to use another weather api that uses https.
@jrwoods42 darksky.net, wunderground.com, apixu.com are pretty good
Mixed Content: The page at 'https://codepen.io/jrwoods42/pen/WObNRP?editors=1111' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?lat=undefined&lon=undefined&appid=a3bd5ae4156214c3ebb1b5787d0b43a3'. This request has been blocked; the content must be served over HTTPS.
Try dark sky API ? ;)
(i was having the same issues -> switched to dark sky)
@SkyC0der taaaadaaaaa -> https://codepen.io/R0ulito/full/owNoZG/
But i need to change the backgrounds -> i used pixabay CDN... And it seems like they don't agree with that :tongue:
cool thanks guys... I'll give dark sky a try
Can you guys can check if backgrounds are displaying on your computer please ?
Not seeing any backgrounds @R0ulito
ok i have to change
I see'em on my computer, but cause they're cached -_-
OK and now @jrwoods42
???
@R0ulito i can see the wallpaper
:)
Pixabay block the use or their CDN
I didn't know that
@MrBoolean hey would you mind looking at some javascript im writing? i need some advice
@R0ulito Don't see any picture
@R0ulito And as soon as i said that i see a background :D
:satisfied:
But its somehow really slow. I wait for about 10 sec for it to come
And it appears only after tabchange
It's part of the get.json method
Maybe it's caused by that
dark sky is not really accurate on some datas... E.G : When you switch from FR to EN, temp is changing cause they're not providing the same datas whether you request it in french or in english
how can i make the three images in my featured section to display in a even row? https://codepen.io/bestintown23/pen/LLVjOd
bootstrap's using a 12 columns grid
I'm merely sure you have to apply them col-*-4
Hey, all.
trying to figure out why the text in my section named "about_me_container" is not staying within the container.
Hi @FlawlessSardine . I will reply since everyone must be eating dinner
I removed the id "about_me_container" from the div, and it is better
but of course you lose the styles, so i am trying to narrow it down
you can add " word-wrap:break-word;" to the selector "section#about_me_container"
the narvar code is not aligning well on my pen pls any one with a solution on how i can use navigation bar on codepen
the narvar code is not aligning well on my pen pls any one with a solution on how i can use navigation bar on codepen
@FlawlessSardine class col-- always add of float property
```
<div class="col-xs-4" style="float:none;">
<p>dlkfaldjflkajdklfakldjflkajsdlkfaslkdflkajdlfkakdsjflkajdlkfjaldlfjakldjfklakldjflkajldfjklajdklfjal</p>
</div>
your img will not be @ the right place, but your text not overflowing from parent element ;)