These are chat archives for FreeCodeCamp/HelpFrontEnd

20th
Feb 2016
Robert Valmassoi
@valmassoi
Feb 20 2016 00:02
weird one of them was commented out on mine, but yeah for testing. the callback addition made it work! thank you
@mutantspore do i not need to get a unique key, that was my next step to look into
Elizabeth Fine
@elizabethfinedev
Feb 20 2016 00:15
hey guys, does anyone know why this object is formatted like this
weather: [Object{
  description: "haze",
  icon: "50n",
}]
why does it have the straight brackets around it? does that mean i have to do something differently when trying to use those properties?
right now if i do var weather = weather.description
it is returning undefined
Robert Valmassoi
@valmassoi
Feb 20 2016 00:17
if you want haze i think its weather[0].description
Elizabeth Fine
@elizabethfinedev
Feb 20 2016 00:17
ah right, i will give that a try
thank you @valmassoi
CamperBot
@camperbot
Feb 20 2016 00:17
bananahavana sends brownie points to @valmassoi :sparkles: :thumbsup: :sparkles:
:star: 276 | @valmassoi | http://www.freecodecamp.com/valmassoi
Robert Valmassoi
@valmassoi
Feb 20 2016 00:18
let me know if it works
i had that problem earlier
Elizabeth Fine
@elizabethfinedev
Feb 20 2016 00:18
it worked!!
ur a genius!! haha!!
thanks
Robert Valmassoi
@valmassoi
Feb 20 2016 00:18
i spent so long fig that one out this morning lol
its basically an array with length of 1
Raphaël Beaugiraud
@impucky
Feb 20 2016 00:37
I'm almost done with my wikipedia viewer, would love any feedback: http://codepen.io/impucky/pen/eJojpO I was also wondering if it's worth it learning a templating engine to make rendering the results cleaner?
Richard Corbett
@reacorbett
Feb 20 2016 00:38
@feitla I have a question about the link you sent me.
http://getbootstrap.com/components/#navbar
Raphaël Beaugiraud
@impucky
Feb 20 2016 00:38
Ah sorry this is probably better suited for the code review room, mb
Richard Corbett
@reacorbett
Feb 20 2016 00:46
tried to add a collapse feature so my buttons dont end up verticle whenever you make the window smaller. but its not working properly.
Alexander Køpke
@alexanderkopke
Feb 20 2016 00:57
@reacorbett you misspelled navbar-collapse you wrote bavbar-collapse
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
change that and it works fine :) good job!
Richard Corbett
@reacorbett
Feb 20 2016 00:59
@alexanderkopke AHHH!!!!! thanks.
CamperBot
@camperbot
Feb 20 2016 00:59
reacorbett sends brownie points to @alexanderkopke :sparkles: :thumbsup: :sparkles:
:star: 482 | @alexanderkopke | http://www.freecodecamp.com/alexanderkopke
bryarcole
@bryarcole
Feb 20 2016 01:14
how do I chacne the color of the links overhead.. nothing seems to work
Ahzux
@AhzuxRamsey
Feb 20 2016 01:32
@tommygebru thanks so much :smile:
CamperBot
@camperbot
Feb 20 2016 01:32
ahzuxramsey sends brownie points to @tommygebru :sparkles: :thumbsup: :sparkles:
:star: 635 | @tommygebru | http://www.freecodecamp.com/tommygebru
bitgrower
@bitgrower
Feb 20 2016 01:59

@bryarcole -- for some reason can't pull up your code at the moment ... but it SHOULD be something like this ...

$(".myClass").css("color","blue");

if you are using text-primary, you may want to look at the source of the bootstrap code and see if that css rule is "important!" -- which would prevent it from being changed ... fix would be to not use text-primary
Robert Valmassoi
@valmassoi
Feb 20 2016 02:14
@impucky looks good. where did you find the .wikipedia.org/w/api.php?action=opensearch&format=json&search= url. all the api docs im seeing show .wikipedia.org/w/api.php?action=query&titles=
bitgrower
@bitgrower
Feb 20 2016 02:34
lol, @valmassoi ... if I had that question, I'd probably just do a google search for the function in question ...
bitgrower
@bitgrower
Feb 20 2016 02:43
though, on doing it, it's not been particularly satisfying ... that is, I find the page of documentation, but the apparent "parent" page does not refer to opensearch directly ...
Robert Valmassoi
@valmassoi
Feb 20 2016 02:43
@bitgrower googleing that url doesnt bring anything up
bitgrower
@bitgrower
Feb 20 2016 02:44
yeah ... I went to googling wikipedia api opensearch ... I did get a page for that ...
Amir Ghafouri
@amirghafouri
Feb 20 2016 02:50
How can I embed another website within a website? For example, instead of taking screenshots of my FCC projects and putting them on my portfolio page as images, I want to have "windows" to the actual codepens so that as I update my portfolio the images on my portfolio website reflect those changes.
bitgrower
@bitgrower
Feb 20 2016 02:50
that is really unsatisfying, @valmassoi -- and surprising ...
iframe -- @amirghafouri
Amir Ghafouri
@amirghafouri
Feb 20 2016 02:56
Exactly what I was looking for - thanks @bitgrower
CamperBot
@camperbot
Feb 20 2016 02:56
amirghafouri sends brownie points to @bitgrower :sparkles: :thumbsup: :sparkles:
bitgrower
@bitgrower
Feb 20 2016 02:56
y
CamperBot
@camperbot
Feb 20 2016 02:56
:star: 582 | @bitgrower | http://www.freecodecamp.com/bitgrower
bitgrower
@bitgrower
Feb 20 2016 02:56
yw

do be aware that if you try to iframe other websites, they can have frame breaker code which will prevent it ...

Some marketers like to iframe top websites ... and steal their traffic ... :)

Amir Ghafouri
@amirghafouri
Feb 20 2016 03:04

Noted - thanks.

It doesn't really look how I imagined either though, so I might just go with screenshots hmmm

bitgrower
@bitgrower
Feb 20 2016 03:08
well, you can adjust how it looks to some extent ... :)
Olivia Legge
@livmaria7891
Feb 20 2016 03:09
@bryarcole If you haven’t figured it out yet, try .link-header a {
color:black;
}
or whatever color. I just tried it in your codepen and it worked for me
Larry Simiyu
@LarrySimiyu
Feb 20 2016 03:10
http://codepen.io/LarrySimiyu95/pen/eJaoWg on the create a portfolio page, I am having trouble getting rid of the extra blue color on the bottom of the page. Can someone help me please
Richard Corbett
@reacorbett
Feb 20 2016 03:10
nice @LarrySimiyu
@LarrySimiyu I am having the same issue with mine.
Larry Simiyu
@LarrySimiyu
Feb 20 2016 03:12
@reacorbett ive grown a hatred for CSS
what does yours look like @reacorbett
Olivia Legge
@livmaria7891
Feb 20 2016 03:13
@LarrySimiyu Try closing your section tag.
for the home class
Richard Corbett
@reacorbett
Feb 20 2016 03:13
@LarrySimiyu its a work in progress
http://codepen.io/reacorbett/pen/EPzmqY?editors=1100
Larry Simiyu
@LarrySimiyu
Feb 20 2016 03:13
@livmaria7891 which one I cant see any open section tags
wait i see it
Olivia Legge
@livmaria7891
Feb 20 2016 03:14
I tried it.. it got rid of the blue at the bottom but messed up the whole layout. yikes
Larry Simiyu
@LarrySimiyu
Feb 20 2016 03:14
damn
Olivia Legge
@livmaria7891
Feb 20 2016 03:15
..Oh wait. Not as bad as I thought. It just messed up the top. You can adjust the height if you want to.
Brian Kilrain
@bkilrain
Feb 20 2016 03:15
Hello all — Does anyone know of a nice tool to get easy screenshots of webpages for the portfolio project? I was going to do a screen grab and then host it on imgur but I’m wondering if anyone has a better idea...
Larry Simiyu
@LarrySimiyu
Feb 20 2016 03:16
@livmaria7891 the high of the sections?
im trying,
not a fan of how big the sections are
Olivia Legge
@livmaria7891
Feb 20 2016 03:16
Ya, you can probably just adjust the height of the section with css.
Larry Simiyu
@LarrySimiyu
Feb 20 2016 03:17
@livmaria7891 also I tried linking a picture from my desktop onto the page but its not working
Richard Corbett
@reacorbett
Feb 20 2016 03:18
@bkilrain http://shutter-project.org/
Try that out.
Brian Kilrain
@bkilrain
Feb 20 2016 03:18
thanks I will @reacorbett
CamperBot
@camperbot
Feb 20 2016 03:18
bkilrain sends brownie points to @reacorbett :sparkles: :thumbsup: :sparkles:
:star: 136 | @reacorbett | http://www.freecodecamp.com/reacorbett
Olivia Legge
@livmaria7891
Feb 20 2016 03:18
I usually use photobucket to get a url for my images to use on codepen
@LarrySimiyu
You can use any image hosting site
Richard Corbett
@reacorbett
Feb 20 2016 03:19
@bkilrain sorry taht is for linux.
Larry Simiyu
@LarrySimiyu
Feb 20 2016 03:20
@livmaria7891 Im not using codepen, im using brackets on my computer and just posting what I have when I need help..
rphares
@rphares
Feb 20 2016 03:20
@LarrySimiyu -- most hosting services are fine. Frequent recommendations are dropbox, drive, and photo bucket. ( Dont use imgur, they dont play well with codepen. )
bitgrower
@bitgrower
Feb 20 2016 03:20
some people seem to have trouble use imgur with codepen ...
Richard Corbett
@reacorbett
Feb 20 2016 03:20
rphares
@rphares
Feb 20 2016 03:21
(lol, @bitgrower !! :blush: Fancy seeing you here... )
bitgrower
@bitgrower
Feb 20 2016 03:21
hi there, @rphares ....
Olivia Legge
@livmaria7891
Feb 20 2016 03:21
@LarrySimiyu Hmm. Do you have it the same folder with the index.html file you’re working with?
Brian Kilrain
@bkilrain
Feb 20 2016 03:21
@LarrySimiyu, I noticed your navbar links aren’t working. I got mine working by assigning an id for each section with a div and then pointing the href that way. You can check out my code to see what I’m talking about: http://codepen.io/bkilrain/pen/eJXorr
Larry Simiyu
@LarrySimiyu
Feb 20 2016 03:21
@livmaria7891 do you mind telling me how i can center my words not just horizontally but also vertically, lol or anyone who reads this. Just want my words to be at the very center
@livmaria7891 no I do not
Olivia Legge
@livmaria7891
Feb 20 2016 03:22
@LarrySimiyu Try putting it in the same folder.. maybe that’ll do it? Otherwise, I’d probably need to see your code
And CSS has a vertical-align property
Larry Simiyu
@LarrySimiyu
Feb 20 2016 03:23
@bkilrain appreciate it, but I just didnt set them to work yet. But I like how when you click your link it takes you to a specific section
Brian Kilrain
@bkilrain
Feb 20 2016 03:24
:smile:
Larry Simiyu
@LarrySimiyu
Feb 20 2016 03:25
@bkilrain im going to try do the same thing, but with scrolling
Brian Kilrain
@bkilrain
Feb 20 2016 03:26
slick
Olivia Legge
@livmaria7891
Feb 20 2016 03:26
@LarrySimiyu Hmm maybe I’m mixed up about vertical-align. I tried it on your code and it didn’t work. You can always try adjusting the padding/margin
Larry Simiyu
@LarrySimiyu
Feb 20 2016 03:27
@livmaria7891 aha no no no, I hate messing with those two, but its no biggy for now Ill figure it out later
Olivia Legge
@livmaria7891
Feb 20 2016 03:28
@LarrySimiyu Hahaha I know that feeling too well!!
Larry Simiyu
@LarrySimiyu
Feb 20 2016 03:33
http://codepen.io/LarrySimiyu95/pen/eJaoWg can someone tell me how to get the rest of my paragraph aligned and not just drag out to the end of the page.
Olivia Legge
@livmaria7891
Feb 20 2016 03:36
@LarrySimiyu You’re gonna have to use margins for that :worried:
Larry Simiyu
@LarrySimiyu
Feb 20 2016 03:36
so in css i do something like margin-left: 20; margin right: blah blah?/
Olivia Legge
@livmaria7891
Feb 20 2016 03:37
Ya, I’d make both of them the same
Larry Simiyu
@LarrySimiyu
Feb 20 2016 03:43
@livmaria7891 how far have you gotten on free code camp aha
Caleb Martin
@caleb272
Feb 20 2016 03:48
larry you have nice colors on that website
Larry Simiyu
@LarrySimiyu
Feb 20 2016 03:50
@caleb272 eh still working on it, not a fan of how inconsistent it is currently haa
but thank you good sir
Caleb Martin
@caleb272
Feb 20 2016 03:51
how did you get the background to change color on hover
of the title bar
bitgrower
@bitgrower
Feb 20 2016 03:53
@caleb272 - hover is a css construct available for use ... :) try looking it up on w3schools ...
so ... he could capture the hover event and then change the color of the background ... :)
Caleb Martin
@caleb272
Feb 20 2016 03:54
k thanks
Larry Simiyu
@LarrySimiyu
Feb 20 2016 03:55
li a:hover {
background-color: red;
}
bitgrower
@bitgrower
Feb 20 2016 03:57
taa daa !!!!
Larry Simiyu
@LarrySimiyu
Feb 20 2016 04:01
does anyone know how to make the nav bar have a fixed position while I scroll, i tried doing position fixed but it messed everything up
Richard Corbett
@reacorbett
Feb 20 2016 04:07
Is there a way to make the top edge of my grey box opaque so it fades into the background picture?
Caleb Martin
@caleb272
Feb 20 2016 04:08
Larry Simiyu
@LarrySimiyu
Feb 20 2016 04:08
how do I move items in the navbar to the right
i tried nav bar right didnt work
h4r1m4u
@h4r1m4u
Feb 20 2016 04:14

@reacorbett yeah, using gradients. CSS:

#box-transition {
  background: rgba(47,47,47,1);
  background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(47,47,47,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(47,47,47,1)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(47,47,47,1) 100%);
  background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(47,47,47,1) 100%);
  background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(47,47,47,1) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(47,47,47,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f2f2f', endColorstr='#ffffff', GradientType=0 );
  height: 50px;
  width: 100%;
}

HTML:

   <div id="box-transition"></div>
   <div id="box">
     ... <!-- the rest of your code as it is, we're just adding the extra #box-transition div -->
Richard Corbett
@reacorbett
Feb 20 2016 04:15
@h4r1m4u thanks
CamperBot
@camperbot
Feb 20 2016 04:15
reacorbett sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1441 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 20 2016 04:15
:thumbsup:
Richard Corbett
@reacorbett
Feb 20 2016 04:23
@h4r1m4u What is going on here? is it the <div id="boxtransition"></div>
http://codepen.io/reacorbett/pen/EPzmqY?editors=1100></div>
Anna Sakoyan
@ansakoy
Feb 20 2016 04:25
Hi. I've got some trouble with navbar collapse in bootstrap. Thing is, it collapses into a button alright, but then it is just dead, meaning the collapsed navigation doesn't drop down on click like it's supposed to. Moreover, I tried to experiment with working navbar collapse code I found within Codepen just by pasting it into my own pen. And I got exactly the same dead button effect. Here's an example. http://codepen.io/ansakoy/pen/mVYXVy Does anybody have an idea of what might be going wrong?
h4r1m4u
@h4r1m4u
Feb 20 2016 04:26

it's because of the margin-top property on the <h3> inside your box. do this:

#box h3 {
  margin-top: 0;
}

@reacorbett

Richard Corbett
@reacorbett
Feb 20 2016 04:26
@h4r1m4u thanks
CamperBot
@camperbot
Feb 20 2016 04:26
reacorbett sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: reacorbett already gave h4r1m4u points
h4r1m4u
@h4r1m4u
Feb 20 2016 04:27
@ansakoy you forgot to import the bootstrap.js library. add this in the JS resources settings section of your codepen: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
(after jquery; the order matters)
Richard Corbett
@reacorbett
Feb 20 2016 04:31
@h4r1m4u so that is overriding the h3 { margin-top: 40px; } ?
h4r1m4u
@h4r1m4u
Feb 20 2016 04:32
correct. because the margin-top on the h3 is pushing the transition box up
Richard Corbett
@reacorbett
Feb 20 2016 04:32
got it. thanks again @h4r1m4u
CamperBot
@camperbot
Feb 20 2016 04:32
:warning: reacorbett already gave h4r1m4u points
reacorbett sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
h4r1m4u
@h4r1m4u
Feb 20 2016 04:33
np
Anna Sakoyan
@ansakoy
Feb 20 2016 04:37
@h4r1m4u thanks a lot! Yes, that was the problem. For some reason there's still some trouble within codepen ( I think I'll figure it out), but what's most important it started working in my testing html page. Many thanks, it was really driving me crazy.
CamperBot
@camperbot
Feb 20 2016 04:37
ansakoy sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1442 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 20 2016 04:37
@ansakoy my pleasure!
Anton
@AntonWibowo
Feb 20 2016 04:43
Hi everyone. How do I make a scroll animation when the user chooses a specific section on the navbar ?
The one that I currently have, directs the user to the section without any scroll animation.
h4r1m4u
@h4r1m4u
Feb 20 2016 04:50
@AntonWibowo there are various JS libraries you can use for that, for example https://github.com/kswedberg/jquery-smooth-scroll or https://github.com/cferdinandi/smooth-scroll. if you google for 'smooth scroll', you'll find a ton of them
Anton
@AntonWibowo
Feb 20 2016 04:51
@h4r1m4u Thank you, I'll check it out.
CamperBot
@camperbot
Feb 20 2016 04:51
antonwibowo sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1443 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 20 2016 04:51
no worries
bitgrower
@bitgrower
Feb 20 2016 04:56
thank you @h4r1m4u
CamperBot
@camperbot
Feb 20 2016 04:56
bitgrower sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1444 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
Marek Slabicki
@thaniri
Feb 20 2016 05:09
hello, anyone want to critique my styling for a project? http://codepen.io/thaniri/full/MKPEXm/
I'm a quite poor designer, was wondering if anyone had any ideas for layout/palette or anything else to do with style
bitgrower
@bitgrower
Feb 20 2016 05:24
@thaniri -- go find styling that you like & copy ... you can also google for web design style and similar and find things which you like ... and then steal liberally ...
(ethically, though...if someone provides a piece of code and wants attribution -- or even if they don't say they want attribution, giving attribution is a nice thing to do ... )
I ain't much on design either ... but that's what I would do /am doing ...
Pallavi Hegde
@pallavihegde1
Feb 20 2016 05:26
hello people
http://codepen.io/pallavihegde/pen/eJaamy this is my first tribute project
i have used jumbotron class, but its getting applied only for the first part, divs seems to be correct
can anybody help me on this
Tomás G. Martínez
@TomGM
Feb 20 2016 05:39
http://codepen.io/GMATom/full/WrBWVG/ What can I do on this project to exercise some jquery? need some small challenges to learn as much as possible within reason, I feel like for the first time I'm progressing a lot, I've learned more in like 15 hours of FCC than I would normally learn in a paid classroom course :D
Caleb Martin
@caleb272
Feb 20 2016 05:59
does anyone here use bitcoin?
Bruce Young
@mutantspore
Feb 20 2016 06:14
@TomGM You haven’t added any dummy portfolio projects yet. That whole area has a ton of scope for JS or jquery. I stored the info for my projects in an object and then created the project cards on the fly. You can add effects at that point too.
Anna Sakoyan
@ansakoy
Feb 20 2016 06:22
@pallavihegde1 Hi. From what I see, your jumbotron actually applies to the whole area you defined in your HTML markup, that is right until 'Thanks for reading' part. I wonder if you've already fixed. At least it is so inside the editor's view. (The full view is unavailable, because you haven't confirmed your email yet.)
CamperBot
@camperbot
Feb 20 2016 06:22
ansakoy sends brownie points to @pallavihegde1 :sparkles: :thumbsup: :sparkles:
:star: 228 | @pallavihegde1 | http://www.freecodecamp.com/pallavihegde1
Tushar Saurabh
@tusharacc
Feb 20 2016 06:42
I am doing my portfolio challenge. I am not able to keep the section height equal to browser height. Currently I am using Jquery to keep the section height equal to browser height, but there are lot of white spaces. How do i handle.
Pallavi Hegde
@pallavihegde1
Feb 20 2016 07:02
@ansakoy why is that grey kind background coming only untill the h3 part?
Anna Sakoyan
@ansakoy
Feb 20 2016 07:12
@pallavihegde1 that's strange, because when I look at your pen, it looks like everything's OK. Like this: http://i.imgur.com/e97lWeQ.png
Pallavi Hegde
@pallavihegde1
Feb 20 2016 07:45
@ansakoy ohh.. its looks fine in urs
its looks like this mine :(
Brian
@sludge256
Feb 20 2016 07:45
Imgur blocks CodePen
Pallavi Hegde
@pallavihegde1
Feb 20 2016 07:45
*in
Brian
@sludge256
Feb 20 2016 07:45
Oh never mind
I thought you guys were talking about using those links inside your CodePen
ignore me :D
Pallavi Hegde
@pallavihegde1
Feb 20 2016 07:46
na na
Rory Avant
@roryavant8
Feb 20 2016 08:12
Hey guys, I am currently working on the tribute page. Currently I am trying to move the image of Einstein down, using margin-top in CSS, in attempt to move it down while preserving the black background. When I do this, my <div id = "wrapper"> which has the black background is moved down as well. How can I achieve what I am wanting?
Here is the link to my pen: http://codepen.io/roryavant8/pen/PZvvab
Harry Aydin
@HMAN1911
Feb 20 2016 08:15
Hi all! Can someone with react experience help me out? I'm trying to render components based on a conditional, but I get an error in the console.
http://jsbin.com/qinohew/edit?js,console,output
nicjacob
@nicjacob
Feb 20 2016 09:26
@roryavant8 Have you already tried background-attachment? (I'm not quite sure, whether this helps ...)
Robert Uivarosi
@URobert
Feb 20 2016 09:27
http://codepen.io/URobert/pen/rxrrNo/?editors=1100 - Can anyone help me out figure out how to make that right hand side white space go away on mobile devices and small resolution screens ?
cla63
@cla63
Feb 20 2016 09:27
@roryavant8 avoid the negative margin when you can just invert the element order <img id="Einstein" src=http://a4.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE5NDg0MDU0OTU2OTAxOTAz.jpg>
<div id = "textholder">
<p>word</p>
</div>
Richard Corbett
@reacorbett
Feb 20 2016 09:32
Is there a way to make my background resize for mobile friendlyness?
http://codepen.io/reacorbett/pen/EPzmqY
cla63
@cla63
Feb 20 2016 09:34
@URobert you have a fixed padding-left: 200px; on .effectClassUL make it in percent ;)
@reacorbett on ff it's resized correct
Robert Uivarosi
@URobert
Feb 20 2016 09:36
@cla63 thx, but that does not fix it
CamperBot
@camperbot
Feb 20 2016 09:36
urobert sends brownie points to @cla63 :sparkles: :thumbsup: :sparkles:
:star: 292 | @cla63 | http://www.freecodecamp.com/cla63
cla63
@cla63
Feb 20 2016 09:42
@URobert ... I see solved now
Robert Uivarosi
@URobert
Feb 20 2016 09:42
@cla63 ?
cla63
@cla63
Feb 20 2016 09:42
no plus left margin now
Robert Uivarosi
@URobert
Feb 20 2016 09:42
@cla63 resize the screen, horizontally and you get the right white margin
cla63
@cla63
Feb 20 2016 09:43
Just reduce the font size
Robert Uivarosi
@URobert
Feb 20 2016 09:43
@cla63 there is a scroll bar at the bottom of the screen, use that and you`ll see what i'm talking about
cla63
@cla63
Feb 20 2016 09:44
yes the 20 px issue ;)
Jose E. Pimentel
@jedpimentel
Feb 20 2016 09:44
yeah... it's too much code for me to comb through
cla63
@cla63
Feb 20 2016 09:44
body ... oversrcoll-x ;) but try ..
overflow.. sorry
Robert Uivarosi
@URobert
Feb 20 2016 09:46
:(
i tried deleting each section of my html to identify where is the problem, but it couldn't
it seems like w/e I delete the problem persists
on a side note, what do you think about the page?
cla63
@cla63
Feb 20 2016 09:47
add this to css : HTML { overflow-y: scroll;}
is also a trick to prevent strange layout movement from a page without scollbar and another with
Robert Uivarosi
@URobert
Feb 20 2016 09:49
@cla63 that ain't helping
cla63
@cla63
Feb 20 2016 09:52
I' m sorry ... maybe the best choice is restart from zero .. delete all.. and add one element test... add another an so on
keep it simple! ;)
Robert Uivarosi
@URobert
Feb 20 2016 09:52
fuck
this drives me nut
s
cla63
@cla63
Feb 20 2016 09:53
welcome to the beatiful word of coder :)
Robert Uivarosi
@URobert
Feb 20 2016 09:53
hah
wiping out all CSSS
fixes the issue
:D
so I have where to start from
YEY
cla63
@cla63
Feb 20 2016 09:54
:)
Robert Uivarosi
@URobert
Feb 20 2016 09:54
overall what do you think about the page?
cla63
@cla63
Feb 20 2016 09:54
good job!
... just play more with the bootstrap grid element for the mobile eperience
Robert Uivarosi
@URobert
Feb 20 2016 09:57
yeah
should have used only bootstrap
and save me the trouble
now
if I delete
only one section of a time from css
I still have the problem
<3
Jack Lyons
@JackEdwardLyons
Feb 20 2016 09:58
hey guys i just finished my countdown clock.. any feedback would be awesome!
cla63
@cla63
Feb 20 2016 10:18
@JackEdwardLyons i like the js.. clen and simple
Caleb Martin
@caleb272
Feb 20 2016 10:22
cane someone explain to me why this doesn’t work it returns false when it should return true ```
‘''
function mutation(arr) {
  var contains = true;

  arr[0] = arr[0].toLowerCase();
  arr[1] = arr[1].toLowerCase();

  for (var index=0; index < arr[0].length; index++){
    console.log(arr[1].indexOf(arr[0][index]));
    if (arr[1].indexOf(arr[0][index]) == -1){
        contains = false;
    }
  }

  return contains;
}

mutation(["Alien", "line"]);
Maulik Darji
@maulikdarji
Feb 20 2016 10:41
@caleb272 because in your execution of for loop; if once the value of var contains changes to false it stays false throughout the loop.
Say for index=0;
arr[1].indexOf(arr[0][0]) would be -1 (as A is not present in arr[1])
Hence it returns false
Maulik Darji
@maulikdarji
Feb 20 2016 10:48
@caleb272 In your code you are trying to check if each latter of first array is present in second or not;
But i think the challenge is to do vice-versa.
i.e. You just need to interchange arr[0] and arr[1] in your present code;
@caleb272 It should be like this:
function mutation(arr) {
  var contains = true;

  arr[0] = arr[0].toLowerCase();
  arr[1] = arr[1].toLowerCase();

  for (var index=0; index < arr[1].length; index++){
    console.log(arr[0].indexOf(arr[1][index]));
    if (arr[0].indexOf(arr[1][index]) == -1){
        contains = false;
    }
  }

  return contains;
}

mutation(["Alien", "line"]);
Andrew
@gskll
Feb 20 2016 10:51

hi all, I’m trying to do the random quote generator, and get an effect where the background color changes with the quote like in the example

I have the following code

function changeColor() {
    var colorsIndex = Math.floor(Math.random() * colors.length);
    $("body").css({
        "background-color": colors[colorsIndex],
        "color": colors[colorsIndex]
    });
    $(".button").css("background-color", colors[colorsIndex]);
}

which changes the colors as i hoped, but is too quick compared to the changing of the quote. Some googling has led me to try to animate the color change, but it’s not working with my code..

function changeColor() {
    var colorsIndex = Math.floor(Math.random() * colors.length);
    $("body").animate({
        backgroundColor: colors[colorsIndex],
        color: colors[colorsIndex]
    }, 1000);
    $(".button").animate({
        backgroundColor: colors[colorsIndex]
    }, 1000);
}

Does anybody know why? All help appreciated thanks!

Maulik Darji
@maulikdarji
Feb 20 2016 10:53
@gskll Post link to your pen.
Andrew
@gskll
Feb 20 2016 10:55
@maulikdarji Here it is : http://codepen.io/gskll/pen/JGqrKz
Maulik Darji
@maulikdarji
Feb 20 2016 10:58
@gskll actually animate can work with numeric values only, string values like backgroundColor=redcan't be changed.
You can make use of css transitions , if you want to change them slowly
Andrew
@gskll
Feb 20 2016 11:01
@maulikdarji Hmm I see, okay thanks for your help
CamperBot
@camperbot
Feb 20 2016 11:01
gskll sends brownie points to @maulikdarji :sparkles: :thumbsup: :sparkles:
:star: 480 | @maulikdarji | http://www.freecodecamp.com/maulikdarji
Maulik Darji
@maulikdarji
Feb 20 2016 11:02
@gskll Just add this to your body style in css:
transition:all 0.5s;
  -webkit-transition:all 0.5s;
  -moz-transition:all 0.5s;
Andrew
@gskll
Feb 20 2016 11:02
Okay
I have no idea what that means though!
Andrew
@gskll
Feb 20 2016 11:04
@maulikdarji Okay will do, the code works very well, thanks again :+1:
CamperBot
@camperbot
Feb 20 2016 11:04
gskll sends brownie points to @maulikdarji :sparkles: :thumbsup: :sparkles:
:warning: gskll already gave maulikdarji points
Maulik Darji
@maulikdarji
Feb 20 2016 11:05
@gskll :+1:
AnnasLab
@AnnasLab
Feb 20 2016 11:17
Hello frontEnd campers
I need some help to get an AutoType effect for my logo, but I have a problem, the thml tags show up in the string, take look and u will understand the problem
http://codepen.io/AnnasLab/pen/jWojjg
I need the final result show like this + autotype effect
http://codepen.io/AnnasLab/pen/mVgGba
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 11:56
@AnnasLab you are using innerHTML that's why u are getting the error
if you use .text () it will work
var str = $("#annasnotes").text();
Catalin Scripcariu
@CatalinScr
Feb 20 2016 12:05
HI, can someone help me at the JSON api weather. It seems that I have some problems understanding how to read the info from the object.
AnnasLab
@AnnasLab
Feb 20 2016 12:06
@ZeeMax yes I tried this but It doesn't give the desired result
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 12:10
@AnnasLab how to you want to display it ?
AnnasLab
@AnnasLab
Feb 20 2016 12:11
@ZeeMax I need the final result show like this + autotype effect
http://codepen.io/AnnasLab/pen/mVgGba
Should I give each tag element a Class or there is a smarter way to do it :/
cla63
@cla63
Feb 20 2016 12:33
@AnnasLab I think you need some Jquery plugin or a pure js script http://www.permadi.com/tutorial/jsTypewriter/
or a css animation I see this http://codepen.io/samarkandiy/pen/nyLsx
AnnasLab
@AnnasLab
Feb 20 2016 12:40
@cla63 I did the autotype using javascript, now I need to make this string and html, I'm trying to do it with $.parseHTML (jQuery)
Anna Sakoyan
@ansakoy
Feb 20 2016 12:46
@pallavihegde1 right, now I see what you're talking about. What looked correct in the editors mode really gets messy in full view. It's interesting, I'll try to look into it after a while (got to finish my job task first). If you fix it before, please let me know!
Richard Corbett
@reacorbett
Feb 20 2016 13:00
when you resize my page, The blur image resizes different than the background image. What do i need to know to fix this?
http://codepen.io/reacorbett/full/EPzmqY/
Robert Uivarosi
@URobert
Feb 20 2016 13:19
@SaintPeter thanks
CamperBot
@camperbot
Feb 20 2016 13:19
urobert sends brownie points to @saintpeter :sparkles: :thumbsup: :sparkles:
:star: 2516 | @saintpeter | http://www.freecodecamp.com/saintpeter
Robert Uivarosi
@URobert
Feb 20 2016 13:21
@reacorbett i see you're using bootstrap for your "blured images"
you want to do that for the background image too if you want to obtain a similar effect
J Player
@Heyjp
Feb 20 2016 13:21
I'm doing the wikipedia viewer, why is it that the json request doesn't work if the request is made inside a form??
I take out the form tags and everything works peachy.
Robert Uivarosi
@URobert
Feb 20 2016 13:22
@Heyjp interesting, may I see ?
Doandes Razvan
@Fuzyon
Feb 20 2016 13:22
have you added &callback=? to the url, @Heyjp ?
Robert Uivarosi
@URobert
Feb 20 2016 13:23
@Fuzyon he must have, if he says it's working outside
Few things to keep in mind
I havent got round to having the form value insert itself into the javascript, im just using the submit button to trigger a search which already has the opensearch value assigned
if u add the form tags around the input it request doesn't work
the*
Richard Corbett
@reacorbett
Feb 20 2016 13:26
@URobert how wouldi do that?
Robert Uivarosi
@URobert
Feb 20 2016 13:28
@reacorbett don't use background, but img instead, and within col-md-...
@Heyjp seems to me that <input type="submit won't trigger the call`
@Heyjp used a simple button instead and it worked that way
Richard Corbett
@reacorbett
Feb 20 2016 13:33
@URobert I'm not sure I understand.
Robert Uivarosi
@URobert
Feb 20 2016 13:35
@reacorbett you could use <img src=""> that you would use as background cover instead of using background url on a div. I don't know how you can match bootstrap resize with background resize
J Player
@Heyjp
Feb 20 2016 13:45
@URobert thanks for taking a look.
CamperBot
@camperbot
Feb 20 2016 13:45
heyjp sends brownie points to @urobert :sparkles: :thumbsup: :sparkles:
:star: 603 | @urobert | http://www.freecodecamp.com/urobert
Robert Uivarosi
@URobert
Feb 20 2016 13:46
@Heyjp yw
Richard Corbett
@reacorbett
Feb 20 2016 13:46
@URobert Thanks.
CamperBot
@camperbot
Feb 20 2016 13:46
reacorbett sends brownie points to @urobert :sparkles: :thumbsup: :sparkles:
:star: 604 | @urobert | http://www.freecodecamp.com/urobert
Robert Uivarosi
@URobert
Feb 20 2016 13:47
@reacorbett yw, hope you can work it out
Richard Corbett
@reacorbett
Feb 20 2016 13:50
@URobert This guy did it somehow. I just cant figure out how.
http://codepen.io/oky/pen/xZgzmV
Maddah Anass
@unlimiworks
Feb 20 2016 13:56
Hi guys.
I have a problem getting the API response. When looking at the console, i see that it's giving me a 404 for my http GET. Is it something related to codepen ?
http://codepen.io/UnlimiWorks/pen/mVYwwp
blob
Richard Corbett
@reacorbett
Feb 20 2016 14:00
This message was deleted
This message was deleted
Marius Brad
@mbrad26
Feb 20 2016 14:03
@UnlimiWorks put http:// in front of the api
Hope it helps
Maddah Anass
@unlimiworks
Feb 20 2016 14:05
Hello @mbrad26
It did.. Kind of, it's giving me a 401 unauthorized now
Maulik Darji
@maulikdarji
Feb 20 2016 14:06
@UnlimiWorks 401 is Invalid API Key, check it again!
Marius Brad
@mbrad26
Feb 20 2016 14:06
Yep you should reset the apiKey
Maddah Anass
@unlimiworks
Feb 20 2016 14:09
I've resetted the API Key but the problem still persists...
greg
@wearenotgroot
Feb 20 2016 14:09
@UnlimiWorks should be appid=
Maddah Anass
@unlimiworks
Feb 20 2016 14:10
blob
Resolved with appid. Thatnks @maulikdarji , @mbrad26 and @wearenotgroot
greg
@wearenotgroot
Feb 20 2016 14:10
:+1:
Maddah Anass
@unlimiworks
Feb 20 2016 14:10
Why did i have to use appid even if the API uses id ?
greg
@wearenotgroot
Feb 20 2016 14:11
@UnlimiWorks because that is the proper api call
Maddah Anass
@unlimiworks
Feb 20 2016 14:11
I see, i might have understood it wrong
Thanks a bunch for the quick reply guys
greg
@wearenotgroot
Feb 20 2016 14:12
@UnlimiWorks YW
@UnlimiWorks id refers to the city id not the api key
Maddah Anass
@unlimiworks
Feb 20 2016 14:16
@wearenotgroot Thanks a bunch, i wasn't paying attention to the 'use api key' explanation
CamperBot
@camperbot
Feb 20 2016 14:16
unlimiworks sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 896 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
Maddah Anass
@unlimiworks
Feb 20 2016 14:17
And thanks @maulikdarji , @mbrad26 . You deserve a brownie :)
CamperBot
@camperbot
Feb 20 2016 14:17
unlimiworks sends brownie points to @maulikdarji and @mbrad26 :sparkles: :thumbsup: :sparkles:
:star: 484 | @maulikdarji | http://www.freecodecamp.com/maulikdarji
:star: 280 | @mbrad26 | http://www.freecodecamp.com/mbrad26
Maulik Darji
@maulikdarji
Feb 20 2016 14:17
@UnlimiWorks :smile: :+1:
Radhika Chaudhary
@radheyIndia
Feb 20 2016 14:34
random quote machine from where to begin???
George Carroll
@ghcarrolljr
Feb 20 2016 14:38
I need help with Factorialize a Number
Doandes Razvan
@Fuzyon
Feb 20 2016 14:38
hello, can somebody tell me why my media queries are not working here? http://codepen.io/Fuzyon/pen/QyPyLy
Radhika Chaudhary
@radheyIndia
Feb 20 2016 14:39
@ghcarrolljr what help do u need?
Anna Sakoyan
@ansakoy
Feb 20 2016 14:39
@pallavihegde1 well, looks like the problem was that you didn't wrap your div .col- into a div .row. Now it seems fixed - see my forked pen: http://codepen.io/ansakoy/full/xZoKPB/
George Carroll
@ghcarrolljr
Feb 20 2016 14:40
@radheyIndia my for loop will not function. trying to show it now
Radhika Chaudhary
@radheyIndia
Feb 20 2016 14:40
show your code
George Carroll
@ghcarrolljr
Feb 20 2016 14:42
sorry I am a little new at this
Radhika Chaudhary
@radheyIndia
Feb 20 2016 14:43
its ok dont worry @ghcarrolljr
in your for loop
u have given i=1 and i==num-1
it should be i<=num
your have stored results in result
return result not i
let me show u
for(i=1;i<=num;i++)
{}
Joshua Abu
@Absolutestunna
Feb 20 2016 14:45
I want a true/false result "AFTER" an array containing ["a", "b", "c", "d"]has been evaluated to find f. In order words return f, if f doesn't exist. Can anyone suggest how I can find that solution. Remember I want one answer after the evaluation has been completed. Thanks in advance
Craig Banach
@CraigBanach
Feb 20 2016 14:46
@Absolutestunna What do you have so far, can you post your formatted code please.
help format
CamperBot
@camperbot
Feb 20 2016 14:46

:point_right: code formatting [wiki]

Inline code

This an inline `<paste code here>` code formatting with a single backtick(`) at start and end around the code.

Code Block

```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)

<paste your code here>,
then press [shift + enter ⏎]

``` ⇦ Type 3 backticks, then press [enter ⏎]

See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics

:pencil: read more about code formatting on the FCC Wiki

Joshua Abu
@Absolutestunna
Feb 20 2016 14:48
@cragsify I am actually working on a different project outside of FCC. I'm looking to find a solution as stated before where I'm to return false if an entire array has been evaluated and the element in question doesn't exist in the array
Doandes Razvan
@Fuzyon
Feb 20 2016 14:48
Can somebody help me with the problem I posted above? :D
George Carroll
@ghcarrolljr
Feb 20 2016 14:49
@radheyIndia Got it Thanks
CamperBot
@camperbot
Feb 20 2016 14:49
ghcarrolljr sends brownie points to @radheyindia :sparkles: :thumbsup: :sparkles:
:star: 267 | @radheyindia | http://www.freecodecamp.com/radheyindia
Radhika Chaudhary
@radheyIndia
Feb 20 2016 14:49
np @ghcarrolljr
Craig Banach
@CraigBanach
Feb 20 2016 14:49
@Fuzyon You need to use another HTTP request as wikipedia will reject request that have a default client header on them. I used $.AJAX
@Fuzyon I belive some people have had success by modifying the data request in a getJSON or AJAX request.
Doandes Razvan
@Fuzyon
Feb 20 2016 14:51
@cragsify I'm talking about my media queries in this codepen: http://codepen.io/Fuzyon/pen/QyPyLy :D
Craig Banach
@CraigBanach
Feb 20 2016 14:52
@Fuzyon Hang on, what is wrong with it?
Doandes Razvan
@Fuzyon
Feb 20 2016 14:54
so, my media query is supposed to shrink the search bar and the divs with the results by 100px when you view it on a phone
yet I tried it and it doesn't work, everything just expands to the right and I get a horizontal scrollbar
kirbyedy
@kirbyedy
Feb 20 2016 15:04
if you use % it would be better
@Fuzyon you are using pixels for the width
and btw how does this work ? width: 375px; !important
semicolon should be at the end
Doandes Razvan
@Fuzyon
Feb 20 2016 15:08
oh right, didn't notice that, thanks @kirbyedy
CamperBot
@camperbot
Feb 20 2016 15:08
fuzyon sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 508 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
Doandes Razvan
@Fuzyon
Feb 20 2016 15:08
i'll try to change the width
let's see
kirbyedy
@kirbyedy
Feb 20 2016 15:09
it will work, I just tested it
Doandes Razvan
@Fuzyon
Feb 20 2016 15:11
what values did you use?
kirbyedy
@kirbyedy
Feb 20 2016 15:24
80% for the width
Doandes Razvan
@Fuzyon
Feb 20 2016 15:26
80% looks pretty good, thanks again!
Conor Mack
@ConorMack
Feb 20 2016 15:27
Can someone give me a hand with the weather app? I have done well up until this project and feeling pretty lost. Not even sure what to do. I get the basic idea on how, but nothing seems to work. I think I have the beginning code, if someone can help me just get the api working, id be grateful

$(document).ready(function(){

var updateWeather;

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
var latitude =position.coords.latitude;
var longitude = position.coords.longitude;

$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat="+ latitude + "&lon=" + longitude + "&units=metric&APPID=71dc704300327b14eac3f2fbb6ba74ac")

});
}

Craig Banach
@CraigBanach
Feb 20 2016 15:28
@ConorMack please post code formatted or link to the codepen
help format
CamperBot
@camperbot
Feb 20 2016 15:28

:point_right: code formatting [wiki]

Inline code

This an inline `<paste code here>` code formatting with a single backtick(`) at start and end around the code.

Code Block

```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)

<paste your code here>,
then press [shift + enter ⏎]

``` ⇦ Type 3 backticks, then press [enter ⏎]

See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics

:pencil: read more about code formatting on the FCC Wiki

@cragsify sorry about that
Craig Banach
@CraigBanach
Feb 20 2016 15:30
@ConorMack No prob, I'm doing some debuggin atm
@ConorMack ok, take everything out except this
$(document).ready(function(){

    var udateWeather;

  if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position){
    var latitude =position.coords.latitude;
    var longitude = position.coords.longitude;

    $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat="+ latitude + "&lon=" + longitude + "&units=metric&APPID=71dc704300327b14eac3f2fbb6ba74ac", function(json){
      updateWeather = json;
      //alert(json)
      presentWeather();
      weatherIcon();
    });
  });
}})
@ConorMack Now you have the json data, you need to get what you want from the json data and then display this on the webpage.
@ConorMack Let me know if you are struggling with any of those tasks or how you propose to do them.
kirbyedy
@kirbyedy
Feb 20 2016 15:33
second line has a typo... says udateWeather, and later on you are calling updateWeather
ajax call has an url call to apiUrl which you did not declare anywhere
Conor Mack
@ConorMack
Feb 20 2016 15:34
thanks, I am assuming i need to put the json.coords into the api link
kirbyedy
@kirbyedy
Feb 20 2016 15:34
the code you are copying this from must have that line somewhere, check it
Conor Mack
@ConorMack
Feb 20 2016 15:34
@kirbyedy thanks, I will look into it!
CamperBot
@camperbot
Feb 20 2016 15:34
conormack sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 509 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
Conor Mack
@ConorMack
Feb 20 2016 15:35
I think I took the wrong snippets. Im trying not to just pull code so I have been trying to select the api sections of the code to get me in the right direction
Craig Banach
@CraigBanach
Feb 20 2016 15:36
@ConorMack Why are you using two HTTP requests?
@ConorMack What I've posted above is what you use to get all the data you need from the api, now you just need to amnipulate it and show it.
Conor Mack
@ConorMack
Feb 20 2016 15:37
oh haha, sorry nevermind, Im pulled in multiple directiosn right now, have paying attention to everything
Anna Sakoyan
@ansakoy
Feb 20 2016 15:40
Does anybody know why CodePen sometimes refuses to display images, while they are perfectly displayed elsewhere (I mean the pages with identical code)? And does anybody know if it can be fixed somehow?
Alexander Køpke
@alexanderkopke
Feb 20 2016 15:46
@ansakoy you mean hotlinking?
Anna Sakoyan
@ansakoy
Feb 20 2016 15:53
@alexanderkopke I mean just trivial img src stuff. Right now, while I'm working on my portfolio page, it sometimes shows broken images, although their src is perfectly alive. Sometimes it all comes back and works fine again, which would make me think it's just some traffic issue. But then I noticed that some of my older pens seem to have stopped displaying their images completely (I checked the source links, they're OK).
UPD. Another piece of mystery: after I checked one of the broken images in my old pen (and established it's OK), the pen began to display it properly again (ONLY the one I checked). Which leaves me even more confused. A cash problem?
greg
@wearenotgroot
Feb 20 2016 15:56
@ansakoy imgur blocks codepen btw
Anna Sakoyan
@ansakoy
Feb 20 2016 15:58
@wearenotgroot wow! right, imgur is exactly the place where I was storing my images. thanks a lot, I'll try another storage. any recommendations, btw?
CamperBot
@camperbot
Feb 20 2016 15:58
ansakoy sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 901 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
greg
@wearenotgroot
Feb 20 2016 15:59
@ansakoy you can either put the images on other sites or add this infront of the url ----https://crossorigin.me/
Anna Sakoyan
@ansakoy
Feb 20 2016 16:00
@wearenotgroot got it, thanks again!
CamperBot
@camperbot
Feb 20 2016 16:00
ansakoy sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: ansakoy already gave wearenotgroot points
greg
@wearenotgroot
Feb 20 2016 16:00
@ansakoy YW
h4r1m4u
@h4r1m4u
Feb 20 2016 16:13
@ansakoy dropbox is a good alternative to imgur for hosting your images. or http://postimage.org. github also works
Anna Sakoyan
@ansakoy
Feb 20 2016 16:15
@h4r1m4u good point, thanks!
CamperBot
@camperbot
Feb 20 2016 16:15
ansakoy sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1446 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 20 2016 16:15
np
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 16:16
I have problem with Twitch. project every time I click on the online button it get copies of Online users instead of just one time
how to prevent appending more the one click
h4r1m4u
@h4r1m4u
Feb 20 2016 16:19
@ZeeMax
  $("#onlineButton").click(function(e){

  var index1, len1;

  $("#showOnline").empty();  // ADD THIS

  for (index1 = 0, len1 = users.length; index1 < len1; ++index1) {
    ...
Craig Banach
@CraigBanach
Feb 20 2016 16:20
@ZeeMax You have used .append, so it appends to the hhtml.
h4r1m4u
@h4r1m4u
Feb 20 2016 16:20
yep, every time you click on the button, all the users get appended to the users you've already added before
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 16:21
@cragsify thanks. I used empty() in the wrong way. Good to know where to place it
CamperBot
@camperbot
Feb 20 2016 16:21
zeemax sends brownie points to @cragsify :sparkles: :thumbsup: :sparkles:
:star: 344 | @cragsify | http://www.freecodecamp.com/cragsify
h4r1m4u
@h4r1m4u
Feb 20 2016 16:21
as a sidenote, it's not the most elegant solution to poll the API for the data every time the user changes the tab
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 16:21
@h4r1m4u I am just testing for now I clean it up later . thanks
CamperBot
@camperbot
Feb 20 2016 16:21
zeemax sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1447 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 20 2016 16:22
ok. ideally you'd want to poll the API only once and then hide/show the users under the tabs when the user changes.
Richard Corbett
@reacorbett
Feb 20 2016 16:22
I need to push the image that say "Richard's portfolio" down to the top of that blurry box. How would I do that?
http://codepen.io/reacorbett/pen/EPzmqY
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 16:23
@h4r1m4u so one tab for online user and other for offline right
h4r1m4u
@h4r1m4u
Feb 20 2016 16:23
correct. you'd get the user data on the page load
and then your JS code would just hide and show them as needed
Craig Banach
@CraigBanach
Feb 20 2016 16:24
@ZeeMax I think he meeans, get the API info once when the page loads, and then use it to do whatever when a user clicks something.
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 16:25
@h4r1m4u @cragsify so it is good to use to divs one for online user and the other for offline . then use show/hide method
is it ??
Craig Banach
@CraigBanach
Feb 20 2016 16:26
@ZeeMax no, it is good to only send one request for the JSON data and then re-use the data.
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 16:26
@cragsify so Only one request . i'll try that
Craig Banach
@CraigBanach
Feb 20 2016 16:27
@ZeeMax if you get stuck, just ask again.
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 16:27
@cragsify Great. thanks
CamperBot
@camperbot
Feb 20 2016 16:27
zeemax sends brownie points to @cragsify :sparkles: :thumbsup: :sparkles:
:warning: zeemax already gave cragsify points
AnnasLab
@AnnasLab
Feb 20 2016 16:36
Hello everyone, I hope that u having a great day, I searched a lot in google but I didn't found what I'm looking for so I'm here to get help from the best dev community ^^, I need a jquery or pure JS code to hide an HTML element by ID, for specific moment, by example it show up after 5 sec after the page loading. thanks
Craig Banach
@CraigBanach
Feb 20 2016 16:36
@AnnasLab .visibility
AnnasLab
@AnnasLab
Feb 20 2016 16:37
@cragsify is this a jquery ?
Craig Banach
@CraigBanach
Feb 20 2016 16:38
@AnnasLab it is a css attribute that you can set with jQuery.
AnnasLab
@AnnasLab
Feb 20 2016 16:39
ahh I know it in css but how can I make the element show up after 5 sec
Craig Banach
@CraigBanach
Feb 20 2016 16:39
@AnnasLab Use a timer.
AnnasLab
@AnnasLab
Feb 20 2016 16:39
I know just how to hide element with it
Okay I'll search how to this thanks @cragsify
CamperBot
@camperbot
Feb 20 2016 16:39
annaslab sends brownie points to @cragsify :sparkles: :thumbsup: :sparkles:
:star: 348 | @cragsify | http://www.freecodecamp.com/cragsify
Richard Corbett
@reacorbett
Feb 20 2016 16:39
What is keeping me from pushing the image that say Richard's portfolio to thetop of the Blurred box?
http://codepen.io/reacorbett/pen/EPzmqY
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 16:44
if i accessed the twitch api once i get only online users with their logo and status but if the stream is null I get undefined
adhok
@adhok
Feb 20 2016 16:44
Hi, this is regarding the initial set of front end project(Portfolio page). How do I make the About section of this page(below the horizontal line) appear a little lower without using the <br> tags? I have created a class named "section1" with the height 800px and margin bottom and top as 10px. http://codepen.io/adhok/pen/PZVVPJ
Craig Banach
@CraigBanach
Feb 20 2016 16:45
@ZeeMax Good, not you need to work out how to deal with undefined.
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 16:47
@cragsify should not I use this https://api.twitch.tv/kraken/users/ instead of stream when the stream === null
Craig Banach
@CraigBanach
Feb 20 2016 16:48
@ZeeMax You could, although that's not the way I would do it,.
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 16:49
Any sugesstions on how I can retrieve data when the stream is off
Craig Banach
@CraigBanach
Feb 20 2016 16:49
@ZeeMax What kind of data do you want? There's not much to get with no stream.
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 16:51
@cragsify yeah I know that is why I am thinking of using users/. I want to retrieve the username, logo
if the stream is null i cannot access these infos
Craig Banach
@CraigBanach
Feb 20 2016 16:51
@ZeeMax ok, then maybe that will be sufficient.
AnnasLab
@AnnasLab
Feb 20 2016 16:55
@cragsify I did this and it's work fine have a great day bro
$(document).ready(function(){
    $(".myMenu").hide();

    setTimeout(function(){
        $(".myMenu").fadeIn(23000)
    }, 1500 );

});
Craig Banach
@CraigBanach
Feb 20 2016 16:55
@AnnasLab glad to help :D
AnnasLab
@AnnasLab
Feb 20 2016 16:56
@cragsify :D
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 17:16
is possible to get 2 status form one user one of line and the online
I am having this issue currently with twitch api
some users appear offline and online too
any ideas for this type of issue ??
Craig Banach
@CraigBanach
Feb 20 2016 17:19
@ZeeMax Try to find out why it is happening or deal with it in code.
greg
@wearenotgroot
Feb 20 2016 17:30
@ZeeMax well /streams is the best option to check if the channel is online
@ZeeMax while /channel is where you can get info about the channel whether online or offline
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 17:31
@wearenotgroot you use this https://api.twitch.tv/kraken/channels/
or users
for offline users
the online users show correctly but the offline has some issues
greg
@wearenotgroot
Feb 20 2016 17:32
@ZeeMax post your pen
nvm
it's ^
greg
@wearenotgroot
Feb 20 2016 17:36
@ZeeMax that problem is users doesnt indicate streaming or not so
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 17:37
@wearenotgroot so should i change it to channel or stream
greg
@wearenotgroot
Feb 20 2016 17:39
@ZeeMax if you want all info necessary, what you can do is use /user or channel store it an array with objects that represents a channels
@ZeeMax then do another api call for /stream then update the online/offline status
@ZeeMax otherwise you can just use one call with /streams but people that are offline wont have the logos/pictures
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 17:43
@wearenotgroot I'll try to do the first one as I want to retrieve the usernames and logos
greg
@wearenotgroot
Feb 20 2016 17:44
@ZeeMax :+1:
julianasobreira
@julianasobreira
Feb 20 2016 17:45
the icon of the api-list dont work =(
I'm working on the weather app
greg
@wearenotgroot
Feb 20 2016 17:51
@julianasobreira did you download it and place it in your projects directory?
J Player
@Heyjp
Feb 20 2016 17:52
Has anyone had any luck returning urls from the wikipedia api builder?
Doandes Razvan
@Fuzyon
Feb 20 2016 17:54
yeah
you need to use opensearch
J Player
@Heyjp
Feb 20 2016 17:55
ah ok, I started off with open search, and switched to query, guess I'm going back!
thanks @Fuzyon
CamperBot
@camperbot
Feb 20 2016 17:55
heyjp sends brownie points to @fuzyon :sparkles: :thumbsup: :sparkles:
:star: 182 | @fuzyon | http://www.freecodecamp.com/fuzyon
Doandes Razvan
@Fuzyon
Feb 20 2016 17:56
np bud, good luck
Richard Corbett
@reacorbett
Feb 20 2016 17:58
julianasobreira
@julianasobreira
Feb 20 2016 17:59
Caleb Martin
@caleb272
Feb 20 2016 18:00
the background image is really choppy while scrolling
@reacorbett
Olivia Legge
@livmaria7891
Feb 20 2016 18:02
@reacorbett I love it. I didn’t find it to be choppy on my computer..
Richard Corbett
@reacorbett
Feb 20 2016 18:02
@livmaria7891 thank you.
CamperBot
@camperbot
Feb 20 2016 18:02
reacorbett sends brownie points to @livmaria7891 :sparkles: :thumbsup: :sparkles:
:star: 284 | @livmaria7891 | http://www.freecodecamp.com/livmaria7891
Richard Corbett
@reacorbett
Feb 20 2016 18:03
@caleb272 I am looking into it. It isn't mobile friendly either. I have issues i need to fix for sure.
Caleb Martin
@caleb272
Feb 20 2016 18:07
function mutation(arr) {
  var contains = 0;

  arr[0] = arr[0].toLowerCase();
  arr[1] = arr[1].toLowerCase();

  for (var index1=0; index1 < arr[0].length; index1++){
    for (var index2=0; index2 < arr[1].length; index2++){
      if (arr[0][index1] === arr[1][index2]){
        contains++;
        console.log(arr[0][index1] + ':' + arr[0][index2] + ':' + true);
      } else {
        console.log(arr[0][index1] + ':' + arr[0][index2]);
      }
    }
  }

  console.log(contains + ':' + arr[0].length + ':' + arr);
  return contains >= arr[0].length - 2;
}

mutation(["zyxwvutsrqponmlkjihgfedcba", "qrstu"]);
can someone tell me why this returns false instead of true like its supposed to
greg
@wearenotgroot
Feb 20 2016 18:08

@julianasobreira
Basic Usage

Place the 5 font files and the main weather-icons.min.css file in your project, with the assumption that the fonts are located up ../ from your CSS directory.

The icons are displayed by using an i element and adding the base class wi and then the icon class you want, such as day-sunny. This then looks like <i class="wi wi-day-sunny"></i>.

To add a modifier, include the class you want after the icon name, which looks like <i class="wi wi-day-sunny wi-flip-vertical"></i>. You can flip, rotate, or add a fixed with. See it all at http://weathericons.io.

julianasobreira
@julianasobreira
Feb 20 2016 18:10
@wearenotgroot thank you very much! I will try this.
CamperBot
@camperbot
Feb 20 2016 18:10
julianasobreira sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 904 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 18:18
Can anyone tell me I get empty array when I try to push offline users to an array
why?
im having the same problem as @ZeeMax. I think
should we not be using for loops?
greg
@wearenotgroot
Feb 20 2016 18:21
@ZeeMax remember getJSON is async
@ZeeMax so the app/code will run and not wait for values from api
Robert Valmassoi
@valmassoi
Feb 20 2016 18:22
how do you tell it to wait?
my console.log(offlineUsers) gives the same user i times
the last user it runs
greg
@wearenotgroot
Feb 20 2016 18:24
@valmassoi you can use promise->https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise or use timeout on the display function
Robert Valmassoi
@valmassoi
Feb 20 2016 18:26
is that the best practice or should we not be using getJSON if you have to iterate it. and use a different method? @wearenotgroot
Craig Banach
@CraigBanach
Feb 20 2016 18:26
@valmassoi using promises is best praqctice.
h4r1m4u
@h4r1m4u
Feb 20 2016 18:26
@valmassoi @ZeeMax it's easier to use closures/IIFE. wrap the inside of your forloop in an iIFE, for example:
    for (index1 = 0, len1 = users.length; index1 < len1; ++index1) {
      (function(index1) { // NOTE THIS
      $.getJSON("https://api.twitch.tv/kraken/streams/" + users[index1], function(channels) {

        if (channels["stream"] != null) {
          $("#showOnline").append('<div class="twitchUsers">' + '</span>' + "<img class='userImage' src= '" + channels.stream.channel.logo + "'>" + '<span class="userName">' + channels.stream.channel.name + "&#160; &#160; " + "<span id ='onlineUser'>" + "OnLine" + "</span>" + '</div>');
        }

      });

      })(index1); // NOTE THIS

    }
Robert Valmassoi
@valmassoi
Feb 20 2016 18:27
do you promise @cragsify ? ;)
greg
@wearenotgroot
Feb 20 2016 18:27
@valmassoi yes use promise :+1:
h4r1m4u
@h4r1m4u
Feb 20 2016 18:27
using the IIFE will 'lock' the value of your index and the inside of the loop will execute as you'd expect it too
more on the topic for example here: http://benalman.com/news/2010/11/immediately-invoked-function-expression/. (section Saving state with closures)
Sujit Karki
@Swoozeki
Feb 20 2016 18:33
I'm just wondering why the calculator exercise got moved to ADVANCED front-end? As far as front-end projects went, that was one of the easiest. I feel like I'm missing something...
Robert Valmassoi
@valmassoi
Feb 20 2016 18:36
@h4r1m4u IIFE worked for me, thanks. so basically wrapping the getJSON in a function waits for the method to complete until it runs again?
CamperBot
@camperbot
Feb 20 2016 18:36
valmassoi sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1448 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
Caleb Martin
@caleb272
Feb 20 2016 18:37
function mutation(arr) {
  arr[0] = arr[0].toLowerCase();
  arr[1] = arr[1].toLowerCase();

  for (var i=0; i < arr[0].length; i++){
    if (arr[1].indexOf(arr[0][i]) == -1){
      return false;
    }
  }

  return true;
}

mutation(["zyxwvutsrqponmlkjihgfedcba", "qrstu"]);
shouldn’t this work
h4r1m4u
@h4r1m4u
Feb 20 2016 18:38
@valmassoi no, it doesn't wait per se. but the closure locks the value of the index (i) that you use for the iteration, so it's correctly used inside the getJSON callback once you get the response from the API. the rest of the code after the forloop will execute immediately without waiting for the response from the API, just like if you didn't use the closure
Caleb Martin
@caleb272
Feb 20 2016 18:42
so i got it to work i changed the string i itterate over it should have worked both ways this is weird
function mutation(arr) {
  arr[0] = arr[0].toLowerCase();
  arr[1] = arr[1].toLowerCase();

  for (var i=0; i < arr[1].length; i++){
    if (arr[0].indexOf(arr[1][i]) == -1){
      return false;
    }
  }

  return true;
}

mutation(["zyxwvutsrqponmlkjihgfedcba", "qrstu"]);
Robert Valmassoi
@valmassoi
Feb 20 2016 18:42
that makes sense thanks
h4r1m4u
@h4r1m4u
Feb 20 2016 18:42
yw
adhok
@adhok
Feb 20 2016 18:46
Hi, this is regarding the initial set of front end project(Portfolio page). How do I make the About section of this page(below the horizontal line) appear a little lower without using the <br> tags? I have created a class named "section1" with the height 800px and margin bottom and top as 10px. http://codepen.io/adhok/pen/PZVVPJ
Caleb Martin
@caleb272
Feb 20 2016 18:47
@h4r1m4u thanks your solution worked but i still don’t know why iterating over it the other way should have made any difference
CamperBot
@camperbot
Feb 20 2016 18:47
caleb272 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1449 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
bitgrower
@bitgrower
Feb 20 2016 18:49

@caleb272 -- because you are looking for letters in the second array that are NOT in the first array ...

the other way, you were looking for letters in the first array which aren't in the second ... and there are quite a few of those ... LOL

Caleb Martin
@caleb272
Feb 20 2016 18:49
o ok that makes sense
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 19:01
I am still having difficulty in getting the offline users with Twitch API .
    ``` (shift+enter for line break)
var code = "formatted";

```
function showOffline_Users() {
var index, len;

var newArray = [];

for (index = 0, len = t.length; index < len; ++index) {

  $.getJSON(" https://api.twitch.tv/kraken/streams/" + t[index], function(channels) {
    if (channels["stream"] == null) {


    }
    //newArray.push(channels.display_name); 
  }); 

}

}

Robert Valmassoi
@valmassoi
Feb 20 2016 19:11
did you look at @h4r1m4u solution @ZeeMax ?
my console.log(offlineUsers) displays correctly
but now i need help getting addHTML(); function to run. Do i need to add a handler or something to the original function? @h4r1m4u
also @ZeeMax you need to add "?callback=?" to your URL
might need to remove the space " https:// too
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 19:16
@valmassoi after t[index]
Robert Valmassoi
@valmassoi
Feb 20 2016 19:19
yes
$.getJSON("https://api.twitch.tv/kraken/streams/" + t[index] + "?callback=?", function(channels) {
Brigette Eckert
@Brigette-Eckert
Feb 20 2016 19:22
what is kraken in the twitch api ? I see you are all talking about it and i'm confused by it :P
also which version of the callback are you all using? GET/steams or GET/streams:channel?
Jeff
@adzam5
Feb 20 2016 19:32
Hello. I am building my Personal Portfolio Webpage using Boostrap nav. It works great in FF but on an iPad you can only click a nav link once. You then have to refresh to click another link
Marius Brad
@mbrad26
Feb 20 2016 19:35
hello world
CamperBot
@camperbot
Feb 20 2016 19:35

welcome to FreeCodeCamp @mbrad26!

Brigette Eckert
@Brigette-Eckert
Feb 20 2016 19:36
welcome @mbrad26
Marius Brad
@mbrad26
Feb 20 2016 19:36
Hi
bitgrower
@bitgrower
Feb 20 2016 19:37
@caleb272 -- you might also get a bit more focused help in the help javascript room
help rooms
CamperBot
@camperbot
Feb 20 2016 19:37

:point_right: help rooms [wiki]

Help Rooms

Choose the right room for your question!

:pencil: read more about help rooms on the FCC Wiki

Marius Brad
@mbrad26
Feb 20 2016 19:37
Could someone figure out what's wrong with my code? I'm trying to alert the user that they need to update their browser settings in order get their location for my weather app. http://codepen.io/mbrad26/pen/eJaGRL?editors=0011
BenjaminDowns
@BenjaminDowns
Feb 20 2016 19:43
@mbrad26 did you try this syntax (recommended by MDN):
```
if ('geolocation' in navigator) {
// do magic
} else {
// don't do magic
}
Marius Brad
@mbrad26
Feb 20 2016 19:43
I will now. Thanks
@BenjaminDowns Still no alert to be seen.
bigkatspence
@bigkatspence
Feb 20 2016 19:50
it was working for me in codepen
Marius Brad
@mbrad26
Feb 20 2016 19:52
@bigkatspence You talking about my code?
bigkatspence
@bigkatspence
Feb 20 2016 19:57
yes
Marius Brad
@mbrad26
Feb 20 2016 20:02
thanks
h4r1m4u
@h4r1m4u
Feb 20 2016 20:05
@valmassoi you have to invoke the addHTML() function inside the getJSON callback function
if(i== users.length -1){
addHTML();
}
i had to have it check for last iteration. does that seem right?
Hugh McKenna
@hfmckenna
Feb 20 2016 20:06
Hi folks, not been on FCC long. If anyone wanted to have a look at my Tribute Page that would be great. Think having two images for different screens is maybe a little janky but otherwise happy enough. http://codepen.io/hfmckenna/pen/NxVWMJ
h4r1m4u
@h4r1m4u
Feb 20 2016 20:07
@valmassoi you could just append each user information into the DOM when you get the response from the API
i guess what you have works too, although it's not particularly pretty
Robert Valmassoi
@valmassoi
Feb 20 2016 20:09

```function addHTML (){
console.log(offlineUsers);
for (i=0; i<offlineUsers.count; i++){
console.log("ran addHTML for loop!")
$("#createOff").append("<div class='btn''>&#8226 " + offlineUsers[i] + "</div><br>");
}

}```

i get the first log but not the second?
h4r1m4u
@h4r1m4u
Feb 20 2016 20:10
for (i=0; i<offlineUsers.length; i++)
not count
Robert Valmassoi
@valmassoi
Feb 20 2016 20:12
ahh duh, time for a <br> for me. thanks
h4r1m4u
@h4r1m4u
Feb 20 2016 20:12
np
BananaThief
@BananaThief
Feb 20 2016 20:27
hey guys, can ya help me? I dont understand why the .jumbotron div in my weather app is not full screen
min-height: 100%;, but that does not work
greg
@wearenotgroot
Feb 20 2016 20:33
@BananaThief did you want to put the image on the entire page?
@BananaThief why not put the image on the body itself?
@BananaThief
body{
  min-height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("https://source.unsplash.com/Kt5hRENuotI/1600x1000");
}
Jack Lyons
@JackEdwardLyons
Feb 20 2016 20:37
thanks @cla63 :)
CamperBot
@camperbot
Feb 20 2016 20:37
jackedwardlyons sends brownie points to @cla63 :sparkles: :thumbsup: :sparkles:
:star: 293 | @cla63 | http://www.freecodecamp.com/cla63
BananaThief
@BananaThief
Feb 20 2016 20:38
@wearenotgroot I tried, but then the .jumbotron is in front of the image
greg
@wearenotgroot
Feb 20 2016 20:39
@BananaThief then replace jumbotron with container if jumbotron is no longer in use
@BananaThief or try and use height:100% instead of min-height 100 % on the body and html
BananaThief
@BananaThief
Feb 20 2016 20:44
@wearenotgroot I found the solution: the bootstra .jumbotron class adds a background color. by setting background-color: transparent; i could remove it and apply the background-image to html
height instead of min-height did not change anything. I don't know why I could not size the jumbotron to 100%
greg
@wearenotgroot
Feb 20 2016 20:47
@BananaThief did you tried this
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;  
}

.jumbotron
{
  min-height:100%;
  background-image: url("https://source.unsplash.com/Kt5hRENuotI/1600x1000");
  background-size: cover;
  background-repeat: no-repeat;
}
BananaThief
@BananaThief
Feb 20 2016 20:55
that works (almost). I don't understand what I did differently before.
almost because there is a white block below the fold with your version
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 21:00
@valmassoi it worked but now I got problem with duplicate users
greg
@wearenotgroot
Feb 20 2016 21:01
@BananaThief here
html,body{
  height:100%;
}

body{  
  height:100%;
  margin: 0;
  padding: 0;
  overflow: auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("https://source.unsplash.com/Kt5hRENuotI/1600x1000");
}

.jumbotron {
  background:transparent!important;
}

#tempConverter {
  display: none;
}
@BananaThief always do a separate html,body{width:100%; height:100%;}
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 21:05
Any one know how to remove duplicate of offline users
@wearenotgroot I did the array way and it worked . except now I am getting duplicate users
greg
@wearenotgroot
Feb 20 2016 21:20
@ZeeMax why not just do this
@ZeeMax
function showOffline_Users(){




 for (i=0; i<users.length; i++){

   (function(i) {
        var user = users[i];

  $.getJSON("https://api.twitch.tv/kraken/streams/" + user + "?callback=?", function(data1) {
     if(data1.stream == null){//offline
      offline_Users.push(user);

       $.getJSON(" https://api.twitch.tv/kraken/users/" + user, function(data) {
                $("#showOnline").append('<div class="twitchUsers">' + " <img class= 'userImage' src='" + data.logo + "'>" + '<span class ="userName">' + data.display_name + '</span>' + "<span id ='offlineUser'>" + "Offline" + "</span>" + '</div>');

        //newArray.push(channels.display_name); 
      });  
    }
    console.log(offline_Users)  

    ///////////////////////////////// 
    }); 




    ///////////////////////// 
   })(i)  


    //console.log(offline_Users)
 }



}
AnnasLab
@AnnasLab
Feb 20 2016 21:24
Hello again campers, I know that's my case is little bit bizarre :worried: , I need that my JavaScript be loaded before the HTML, all modern browser load HTML first by default, so is there a trick to force browser to load JS first, I searched in Google but I didn't found a technical solution.
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 21:25
@wearenotgroot thanks I think I was complicating me more
CamperBot
@camperbot
Feb 20 2016 21:25
zeemax sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 908 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 21:25
@wearenotgroot thank for the help
greg
@wearenotgroot
Feb 20 2016 21:25
@ZeeMax YW
@ZeeMax try and use promise for more cleaner api callback handling
Timofey Votyakov
@tvotyakov
Feb 20 2016 21:33
@AnnasLab what do you mean by loaded before, and more interesting why do you need it?
AnnasLab
@AnnasLab
Feb 20 2016 21:37
@tvotyakov thanks for ur answer that's so kind, take a look on my portfolio, As u see JS is important for the user experience so I need it to be loaded first (FAST)
http://codepen.io/AnnasLab/pen/LGoBLb
CamperBot
@camperbot
Feb 20 2016 21:37
annaslab sends brownie points to @tvotyakov :sparkles: :thumbsup: :sparkles:
BananaThief
@BananaThief
Feb 20 2016 21:37
thanks @wearenotgroot
CamperBot
@camperbot
Feb 20 2016 21:37
bananathief sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 909 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
:star: 205 | @tvotyakov | http://www.freecodecamp.com/tvotyakov
BananaThief
@BananaThief
Feb 20 2016 21:38
(a little late) but thanks! it works now!
greg
@wearenotgroot
Feb 20 2016 21:38
@BananaThief :+1:
Timofey Votyakov
@tvotyakov
Feb 20 2016 21:48
@AnnasLab First of all you can't do many here, because of all your code should manipulate with html. And even if you could to load JS before html, you should wait while your html will be loaded before you can do something with it. This is what $(document).ready() do. It is wait while html will be loaded and only after that executes your code.
@AnnasLab you can try to do one thing. Try to wrap all your html in one dummy div, and set its css property to display: none; using style tag. You can also add before or after that div another visible div with something like loading. please wait..... And in your JS code you will be show first div and hide second.
AnnasLab
@AnnasLab
Feb 20 2016 21:54
@tvotyakov I get u, I need some lessons about the DOM to understand more the concept, thanks me u have really helped me a lot today thanks to people like you that community became awsome
CamperBot
@camperbot
Feb 20 2016 21:54
annaslab sends brownie points to @tvotyakov :sparkles: :thumbsup: :sparkles:
:warning: annaslab already gave tvotyakov points
Nairuz.Abulhul
@nairuzabulhul
Feb 20 2016 21:58
@wearenotgroot I did not know how to do it . I'll to read more about it
Jeff
@adzam5
Feb 20 2016 21:59
Hello all
I am working on my Personal Portfolio Webpage. So far everthing works great in FF. Most functionality does not work on an iPad though. I have been trying to fix the issues for hours and have gotten no where.
Carrie
@littlemahi
Feb 20 2016 22:05
Hi all, I’m having trouble adding text on top of an image. I've got a text-box with a transparent background which I've managed to overlap ontop of an image in the position I want it - BUT when I resize my browser the text doesn't stay in the same position over the image, so they are no longer aligned. Any advice?
The way I've positioned it is by having the text position as absolute, and assigning pixels to the top and right.
Is there a way to 'stick' the text to a fixed place on the image? I've searched online but can't find the right answer to fix the issue.
Gershon Papi
@papigers
Feb 20 2016 23:04
Hey guys, is it ok to use jQuery on the Tribute page challenge?
Andrea Stringham
@astringham
Feb 20 2016 23:05
@littlemahi can you use percentages instead of pixels so the position scales with the image? Or maybe set breakpoints so the position moves as the box resizes?
Robert Uivarosi
@URobert
Feb 20 2016 23:17
@papigers what do you want to use jQuery for? IMO you can use whatever you like as long as it satisfies the user stories
@littlemahi can we see the code ?
max77p
@max77p
Feb 20 2016 23:20
how can we add dash between letters/words?
something like this........code - academy
whats the best way to put that dash in?4
Craig Banach
@CraigBanach
Feb 20 2016 23:20
@max77p use the minus key.
max77p
@max77p
Feb 20 2016 23:21
... code wise lol
is there a css trick i can do?
Craig Banach
@CraigBanach
Feb 20 2016 23:21
@max77p str = "code-academy";
max77p
@max77p
Feb 20 2016 23:22
@cragsify ok the reason i was asking is, because i have 4 list items in a unordered list..and i have them inline block..so i want to have a dash between each item
so something like "item1 - item2 - item3 - item4"
Craig Banach
@CraigBanach
Feb 20 2016 23:22
@max77p like that ^^ put that as the string...
max77p
@max77p
Feb 20 2016 23:23
@cragsify that wont work if i need each item separate
becuase they are linked to other pages
Craig Banach
@CraigBanach
Feb 20 2016 23:24
@max77p You never said each item was seperate...
@max77p You only asked how to add dashes between letters.,
max77p
@max77p
Feb 20 2016 23:24
ok so, do you know?
Craig Banach
@CraigBanach
Feb 20 2016 23:25
@max77p like this:
<p>
<a href=""> number one</a> - <a href=""> number two</a>
</p>
Carrie
@littlemahi
Feb 20 2016 23:26
@astringham @papigers sorry for the late reply - I just managed to puzzle this out and get it to work. Thank you for the help!
CamperBot
@camperbot
Feb 20 2016 23:26
littlemahi sends brownie points to @astringham and @papigers :sparkles: :thumbsup: :sparkles:
:star: 131 | @papigers | http://www.freecodecamp.com/papigers
:star: 121 | @astringham | http://www.freecodecamp.com/astringham
Andrea Stringham
@astringham
Feb 20 2016 23:58
I swear I remember seeing someone say you can’t use CSS in the tribute page, but that doesn’t look like it’s part of the rules. The video mentions not using any CSS on that particular page, but unless I missed it, I don’t see that we can’t. Can someone confirm please?