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
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
if you want haze i think its weather[0].description
ah right, i will give that a try
thank you @valmassoi
bananahavana sends brownie points to @valmassoi :sparkles: :thumbsup: :sparkles:
:star: 276 | @valmassoi | http://www.freecodecamp.com/valmassoi
let me know if it works
i had that problem earlier
it worked!!
ur a genius!! haha!!
thanks
i spent so long fig that one out this morning lol
its basically an array with length of 1
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?
Ah sorry this is probably better suited for the code review room, mb
What is wrong with my nav bar?
http://codepen.io/reacorbett/pen/EPzmqY?editors=1000
http://codepen.io/reacorbett/pen/EPzmqY?editors=1000
tried to add a collapse feature so my buttons dont end up verticle whenever you make the window smaller. but its not working properly.
@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!
@alexanderkopke AHHH!!!!! thanks.
reacorbett sends brownie points to @alexanderkopke :sparkles: :thumbsup: :sparkles:
:star: 482 | @alexanderkopke | http://www.freecodecamp.com/alexanderkopke
how do I chacne the color of the links overhead.. nothing seems to work
@tommygebru thanks so much :smile:
ahzuxramsey sends brownie points to @tommygebru :sparkles: :thumbsup: :sparkles:
:star: 635 | @tommygebru | http://www.freecodecamp.com/tommygebru
@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
@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=
lol, @valmassoi ... if I had that question, I'd probably just do a google search for the function in question ...
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 ...
@bitgrower googleing that url doesnt bring anything up
yeah ... I went to googling wikipedia api opensearch ... I did get a page for that ...
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.
that is really unsatisfying, @valmassoi -- and surprising ...
iframe -- @amirghafouri
Exactly what I was looking for - thanks @bitgrower
amirghafouri sends brownie points to @bitgrower :sparkles: :thumbsup: :sparkles:
y
:star: 582 | @bitgrower | http://www.freecodecamp.com/bitgrower
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 ... :)
Noted - thanks.
It doesn't really look how I imagined either though, so I might just go with screenshots hmmm
well, you can adjust how it looks to some extent ... :)
@bryarcole If you haven’t figured it out yet, try .link-header a {
color:black;
}
color:black;
}
or whatever color. I just tried it in your codepen and it worked for me
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
nice @LarrySimiyu
@LarrySimiyu I am having the same issue with mine.
@reacorbett ive grown a hatred for CSS
what does yours look like @reacorbett
@LarrySimiyu Try closing your section tag.
for the home class
@livmaria7891 which one I cant see any open section tags
wait i see it
I tried it.. it got rid of the blue at the bottom but messed up the whole layout. yikes
damn
..Oh wait. Not as bad as I thought. It just messed up the top. You can adjust the height if you want to.
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...
@livmaria7891 the high of the sections?
im trying,
not a fan of how big the sections are
Ya, you can probably just adjust the height of the section with css.
@livmaria7891 also I tried linking a picture from my desktop onto the page but its not working
thanks I will @reacorbett
bkilrain sends brownie points to @reacorbett :sparkles: :thumbsup: :sparkles:
:star: 136 | @reacorbett | http://www.freecodecamp.com/reacorbett
I usually use photobucket to get a url for my images to use on codepen
@LarrySimiyu
You can use any image hosting site
@bkilrain sorry taht is for linux.
@livmaria7891 Im not using codepen, im using brackets on my computer and just posting what I have when I need help..
@LarrySimiyu -- most hosting services are fine. Frequent recommendations are dropbox, drive, and photo bucket. ( Dont use imgur, they dont play well with codepen. )
some people seem to have trouble use imgur with codepen ...
(lol, @bitgrower !! :blush: Fancy seeing you here... )
hi there, @rphares ....
@LarrySimiyu Hmm. Do you have it the same folder with the index.html file you’re working with?
@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
@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
@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
@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
:smile:
@bkilrain im going to try do the same thing, but with scrolling
slick
@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
@livmaria7891 aha no no no, I hate messing with those two, but its no biggy for now Ill figure it out later
@LarrySimiyu Hahaha I know that feeling too well!!
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.
@LarrySimiyu You’re gonna have to use margins for that :worried:
so in css i do something like margin-left: 20; margin right: blah blah?/
Ya, I’d make both of them the same
@livmaria7891 how far have you gotten on free code camp aha
larry you have nice colors on that website
@caleb272 eh still working on it, not a fan of how inconsistent it is currently haa
but thank you good sir
how did you get the background to change color on hover
of the title bar
@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 ... :)
k thanks
li a:hover {
background-color: red;
}
background-color: red;
}
taa daa !!!!
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
Is there a way to make the top edge of my grey box opaque so it fades into the background picture?
this is awesome https://www.youtube.com/watch?v=uJ7wyUkXPdE
how do I move items in the navbar to the right
i tried nav bar right didnt work
@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 -->
@h4r1m4u thanks
reacorbett sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1441 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
:thumbsup:
@h4r1m4u What is going on here? is it the <div id="boxtransition"></div>
http://codepen.io/reacorbett/pen/EPzmqY?editors=1100></div>
http://codepen.io/reacorbett/pen/EPzmqY?editors=1100></div>
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?
it's because of the margin-top property on the <h3> inside your box. do this:
#box h3 {
margin-top: 0;
}@reacorbett
@h4r1m4u thanks
reacorbett sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: reacorbett already gave h4r1m4u points
@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)
@h4r1m4u so that is overriding the h3 { margin-top: 40px; } ?
correct. because the margin-top on the h3 is pushing the transition box up
got it. thanks again @h4r1m4u
:warning: reacorbett already gave h4r1m4u points
reacorbett sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
np
@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.
ansakoy sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1442 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
@ansakoy my pleasure!
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.
@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
@h4r1m4u Thank you, I'll check it out.
antonwibowo sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1443 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
no worries
thank you @h4r1m4u
bitgrower sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1444 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
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
I'm a quite poor designer, was wondering if anyone had any ideas for layout/palette or anything else to do with style
@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 ...
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
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
does anyone here use bitcoin?
@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.
@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.)
ansakoy sends brownie points to @pallavihegde1 :sparkles: :thumbsup: :sparkles:
:star: 228 | @pallavihegde1 | http://www.freecodecamp.com/pallavihegde1
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.
@ansakoy why is that grey kind background coming only untill the h3 part?
@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
@ansakoy ohh.. its looks fine in urs
its looks like this mine :(
Imgur blocks CodePen
*in
Oh never mind
I thought you guys were talking about using those links inside your CodePen
ignore me :D
na na
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
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
http://jsbin.com/qinohew/edit?js,console,output
@roryavant8 Have you already tried background-attachment? (I'm not quite sure, whether this helps ...)
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 ?
@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>
<div id = "textholder">
<p>word</p>
</div>
Is there a way to make my background resize for mobile friendlyness?
http://codepen.io/reacorbett/pen/EPzmqY
http://codepen.io/reacorbett/pen/EPzmqY
@URobert you have a fixed padding-left: 200px; on .effectClassUL make it in percent ;)
@reacorbett on ff it's resized correct
@cla63 thx, but that does not fix it
urobert sends brownie points to @cla63 :sparkles: :thumbsup: :sparkles:
:star: 292 | @cla63 | http://www.freecodecamp.com/cla63
@URobert ... I see solved now
@cla63 ?
no plus left margin now
@cla63 resize the screen, horizontally and you get the right white margin
Just reduce the font size
@cla63 there is a scroll bar at the bottom of the screen, use that and you`ll see what i'm talking about
yes the 20 px issue ;)
yeah... it's too much code for me to comb through
body ... oversrcoll-x ;) but try ..
overflow.. sorry
:(
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?
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
@cla63 that ain't helping
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! ;)
fuck
this drives me nut
s
welcome to the beatiful word of coder :)
hah
wiping out all CSSS
fixes the issue
:D
so I have where to start from
YEY
:)
overall what do you think about the page?
good job!
... just play more with the bootstrap grid element for the mobile eperience
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
hey guys i just finished my countdown clock.. any feedback would be awesome!
@JackEdwardLyons i like the js.. clen and simple
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"]);
@caleb272 because in your execution of for loop; if once the value of var
Say for index=0;
Hence it returns
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
@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
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"]);
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!
@gskll Post link to your pen.
@maulikdarji Here it is : http://codepen.io/gskll/pen/JGqrKz
@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
also css3 animations [http://www.w3schools.com/css/css3_animations.asp]
@maulikdarji Hmm I see, okay thanks for your help
gskll sends brownie points to @maulikdarji :sparkles: :thumbsup: :sparkles:
:star: 480 | @maulikdarji | http://www.freecodecamp.com/maulikdarji
@gskll Just add this to your body style in css:
transition:all 0.5s;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
Okay
I have no idea what that means though!
@maulikdarji Okay will do, the code works very well, thanks again :+1:
gskll sends brownie points to @maulikdarji :sparkles: :thumbsup: :sparkles:
:warning: gskll already gave maulikdarji points
@gskll :+1:
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
http://codepen.io/AnnasLab/pen/jWojjg
I need the final result show like this + autotype effect
http://codepen.io/AnnasLab/pen/mVgGba
http://codepen.io/AnnasLab/pen/mVgGba
@AnnasLab you are using innerHTML that's why u are getting the error
if you use .text () it will work
var str = $("#annasnotes").text();
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.
@ZeeMax yes I tried this but It doesn't give the desired result
@AnnasLab how to you want to display it ?
@ZeeMax I need the final result show like this + autotype effect
http://codepen.io/AnnasLab/pen/mVgGba
http://codepen.io/AnnasLab/pen/mVgGba
Should I give each tag element a Class or there is a smarter way to do it :/
@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
@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)
@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!
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/
http://codepen.io/reacorbett/full/EPzmqY/
@SaintPeter thanks
urobert sends brownie points to @saintpeter :sparkles: :thumbsup: :sparkles:
:star: 2516 | @saintpeter | http://www.freecodecamp.com/saintpeter
@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
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.
@Heyjp interesting, may I see ?
have you added &callback=? to the url, @Heyjp ?
@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*
@URobert how wouldi do that?
@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
@URobert I'm not sure I understand.
@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
@URobert thanks for taking a look.
heyjp sends brownie points to @urobert :sparkles: :thumbsup: :sparkles:
:star: 603 | @urobert | http://www.freecodecamp.com/urobert
@Heyjp yw
@URobert Thanks.
reacorbett sends brownie points to @urobert :sparkles: :thumbsup: :sparkles:
:star: 604 | @urobert | http://www.freecodecamp.com/urobert
@reacorbett yw, hope you can work it out
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
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
This message was deleted
This message was deleted
@UnlimiWorks put http:// in front of the api
Hope it helps
Hello @mbrad26
It did.. Kind of, it's giving me a 401 unauthorized now
It did.. Kind of, it's giving me a 401 unauthorized now
@UnlimiWorks 401 is Invalid API Key, check it again!
Yep you should reset the apiKey
I've resetted the API Key but the problem still persists...
@UnlimiWorks should be
appid=
Resolved with appid. Thatnks @maulikdarji , @mbrad26 and @wearenotgroot
:+1:
Why did i have to use appid even if the API uses id ?
@UnlimiWorks because that is the proper api call
I see, i might have understood it wrong
Thanks a bunch for the quick reply guys
@UnlimiWorks YW
@UnlimiWorks id refers to the city id not the api key
@wearenotgroot Thanks a bunch, i wasn't paying attention to the 'use api key' explanation
unlimiworks sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 896 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
And thanks @maulikdarji , @mbrad26 . You deserve a brownie :)
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
@UnlimiWorks :smile: :+1:
random quote machine from where to begin???
I need help with Factorialize a Number
hello, can somebody tell me why my media queries are not working here? http://codepen.io/Fuzyon/pen/QyPyLy
@ghcarrolljr what help do u need?
@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/
@radheyIndia my for loop will not function. trying to show it now
show your code
sorry I am a little new at this
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++)
{}
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
@Absolutestunna What do you have so far, can you post your formatted code please.
help format
: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
@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
Can somebody help me with the problem I posted above? :D
@radheyIndia Got it Thanks
ghcarrolljr sends brownie points to @radheyindia :sparkles: :thumbsup: :sparkles:
:star: 267 | @radheyindia | http://www.freecodecamp.com/radheyindia
np @ghcarrolljr
@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.
@cragsify I'm talking about my media queries in this codepen: http://codepen.io/Fuzyon/pen/QyPyLy :D
@Fuzyon Hang on, what is wrong with it?
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
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
oh right, didn't notice that, thanks @kirbyedy
fuzyon sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 508 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
i'll try to change the width
let's see
it will work, I just tested it
what values did you use?
80% for the width
80% looks pretty good, thanks again!
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") });
}
@ConorMack please post code formatted or link to the codepen
help format
: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
@cragsify sorry about that
@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.
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
thanks, I am assuming i need to put the json.coords into the api link
the code you are copying this from must have that line somewhere, check it
@kirbyedy thanks, I will look into it!
conormack sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 509 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
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
@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.
oh haha, sorry nevermind, Im pulled in multiple directiosn right now, have paying attention to everything
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?
@ansakoy you mean hotlinking?
@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?
@ansakoy imgur blocks codepen btw
@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?
ansakoy sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 901 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
@ansakoy you can either put the images on other sites or add this infront of the url ----https://crossorigin.me/
@wearenotgroot got it, thanks again!
ansakoy sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: ansakoy already gave wearenotgroot points
@ansakoy YW
@ansakoy dropbox is a good alternative to imgur for hosting your images. or http://postimage.org. github also works
@h4r1m4u good point, thanks!
ansakoy sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1446 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
np
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
@ZeeMax
$("#onlineButton").click(function(e){
var index1, len1;
$("#showOnline").empty(); // ADD THIS
for (index1 = 0, len1 = users.length; index1 < len1; ++index1) {
...
@ZeeMax You have used .append, so it appends to the hhtml.
yep, every time you click on the button, all the users get appended to the users you've already added before
@cragsify thanks. I used empty() in the wrong way. Good to know where to place it
zeemax sends brownie points to @cragsify :sparkles: :thumbsup: :sparkles:
:star: 344 | @cragsify | http://www.freecodecamp.com/cragsify
as a sidenote, it's not the most elegant solution to poll the API for the data every time the user changes the tab
@h4r1m4u I am just testing for now I clean it up later . thanks
zeemax sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1447 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
ok. ideally you'd want to poll the API only once and then hide/show the users under the tabs when the user changes.
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
http://codepen.io/reacorbett/pen/EPzmqY
@h4r1m4u so one tab for online user and other for offline right
correct. you'd get the user data on the page load
and then your JS code would just hide and show them as needed
@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.
@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 ??
@ZeeMax no, it is good to only send one request for the JSON data and then re-use the data.
@cragsify so Only one request . i'll try that
@ZeeMax if you get stuck, just ask again.
@cragsify Great. thanks
zeemax sends brownie points to @cragsify :sparkles: :thumbsup: :sparkles:
:warning: zeemax already gave cragsify points
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
@AnnasLab .visibility
@cragsify is this a jquery ?
@AnnasLab it is a css attribute that you can set with jQuery.
ahh I know it in css but how can I make the element show up after 5 sec
@AnnasLab Use a timer.
I know just how to hide element with it
Okay I'll search how to this thanks @cragsify
annaslab sends brownie points to @cragsify :sparkles: :thumbsup: :sparkles:
:star: 348 | @cragsify | http://www.freecodecamp.com/cragsify
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
http://codepen.io/reacorbett/pen/EPzmqY
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
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
@ZeeMax Good, not you need to work out how to deal with undefined.
@cragsify should not I use this https://api.twitch.tv/kraken/users/ instead of stream when the stream === null
@ZeeMax You could, although that's not the way I would do it,.
Any sugesstions on how I can retrieve data when the stream is off
@ZeeMax What kind of data do you want? There's not much to get with no stream.
@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
@ZeeMax ok, then maybe that will be sufficient.
@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 );
});
@AnnasLab glad to help :D
@cragsify :D
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 ??
@ZeeMax Try to find out why it is happening or deal with it in code.
@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
@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
@ZeeMax post your pen
nvm
it's ^
@ZeeMax that problem is users doesnt indicate streaming or not so
@wearenotgroot so should i change it to channel or stream
@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
@wearenotgroot I'll try to do the first one as I want to retrieve the usernames and logos
@ZeeMax :+1:
someone use this icon font? https://erikflowers.github.io/weather-icons/api-list.html
the icon of the api-list dont work =(
I'm working on the weather app
@julianasobreira did you download it and place it in your projects directory?
Has anyone had any luck returning urls from the wikipedia api builder?
yeah
you need to use opensearch
ah ok, I started off with open search, and switched to query, guess I'm going back!
thanks @Fuzyon
heyjp sends brownie points to @fuzyon :sparkles: :thumbsup: :sparkles:
:star: 182 | @fuzyon | http://www.freecodecamp.com/fuzyon
np bud, good luck
What do you all think?
http://codepen.io/reacorbett/pen/EPzmqY/
http://codepen.io/reacorbett/pen/EPzmqY/
@wearenotgroot I included the cndj! Here: https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css
the background image is really choppy while scrolling
@reacorbett
@reacorbett I love it. I didn’t find it to be choppy on my computer..
@livmaria7891 thank you.
reacorbett sends brownie points to @livmaria7891 :sparkles: :thumbsup: :sparkles:
:star: 284 | @livmaria7891 | http://www.freecodecamp.com/livmaria7891
@caleb272 I am looking into it. It isn't mobile friendly either. I have issues i need to fix for sure.
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
@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.
@wearenotgroot thank you very much! I will try this.
julianasobreira sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 904 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
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?
@ZeeMax remember getJSON is async
@ZeeMax so the app/code will run and not wait for values from api
how do you tell it to wait?
my console.log(offlineUsers) gives the same user i times
the last user it runs
@valmassoi you can use promise->https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise or use timeout on the display function
is that the best practice or should we not be using getJSON if you have to iterate it. and use a different method? @wearenotgroot
@valmassoi using promises is best praqctice.
@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 + "    " + "<span id ='onlineUser'>" + "OnLine" + "</span>" + '</div>');
}
});
})(index1); // NOTE THIS
}
do you promise @cragsify ? ;)
@valmassoi yes use promise :+1:
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)
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...
@h4r1m4u IIFE worked for me, thanks. so basically wrapping the getJSON in a function waits for the method to complete until it runs again?
valmassoi sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1448 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
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"]);
@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
you may want to give this a read: http://javascriptissexy.com/understand-javascript-closures-with-ease/
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"]);
that makes sense thanks
yw
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
@h4r1m4u thanks your solution worked but i still don’t know why iterating over it the other way should have made any difference
caleb272 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1449 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
@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
o ok that makes sense
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);
});
}}
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
@valmassoi after t[index]
yes
$.getJSON("https://api.twitch.tv/kraken/streams/" + t[index] + "?callback=?", function(channels) {
$.getJSON("https://api.twitch.tv/kraken/streams/" + t[index] + "?callback=?", function(channels) {
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?
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
hello world
welcome to FreeCodeCamp @mbrad26!
welcome @mbrad26
Hi
@caleb272 -- you might also get a bit more focused help in the help javascript room
help rooms
:point_right: help rooms [wiki]
Help Rooms
- HTML/CSS/Bootstrap -
[FreeCodeCamp/Help] - Javascript/Algorimths -
[FreeCodeCamp/HelpJavaScript] - Front End -
[FreeCodeCamp/HelpFrontEnd] - Data Visualization -
[FreeCodeCamp/HelpDataViz] - Back End -
[FreeCodeCamp/HelpBackEnd] - Non-profit Projects -
[FreeCodeCamp/NonprofitProjects] - Code Review -
[FreeCodeCamp/CodeReview] - You Can Do This -
[FreeCodeCamp/YouCanDoThis]
Choose the right room for your question!
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
@mbrad26 did you try this syntax (recommended by MDN):
```
if ('geolocation' in navigator) {
// do magic
} else {
// don't do magic
}
```
if ('geolocation' in navigator) {
// do magic
} else {
// don't do magic
}
I will now. Thanks
@BenjaminDowns Still no alert to be seen.
it was working for me in codepen
@bigkatspence You talking about my code?
yes
thanks
@valmassoi you have to invoke the addHTML() function inside the getJSON callback function
if(i== users.length -1){
addHTML();
}
addHTML();
}
i had to have it check for last iteration. does that seem right?
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
@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
```function addHTML (){
console.log(offlineUsers);
for (i=0; i<offlineUsers.count; i++){
console.log("ran addHTML for loop!")
$("#createOff").append("<div class='btn''>• " + offlineUsers[i] + "</div><br>");
}
}```
i get the first log but not the second?
for (i=0; i<offlineUsers.length; i++)
not count
ahh duh, time for a <br> for me. thanks
np
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
@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");
}
thanks @cla63 :)
jackedwardlyons sends brownie points to @cla63 :sparkles: :thumbsup: :sparkles:
:star: 293 | @cla63 | http://www.freecodecamp.com/cla63
@wearenotgroot I tried, but then the .jumbotron is in front of the image
@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
@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%
@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;
}
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
@valmassoi it worked but now I got problem with duplicate users
@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%;}
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
@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)
}
}
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.
@wearenotgroot thanks I think I was complicating me more
zeemax sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 908 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
@wearenotgroot thank for the help
@ZeeMax YW
@ZeeMax try and use promise for more cleaner api callback handling
@AnnasLab what do you mean by
loaded before, and more interesting why do you need it?
@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
http://codepen.io/AnnasLab/pen/LGoBLb
annaslab sends brownie points to @tvotyakov :sparkles: :thumbsup: :sparkles:
thanks @wearenotgroot
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
(a little late) but thanks! it works now!
@BananaThief :+1:
@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.
@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
annaslab sends brownie points to @tvotyakov :sparkles: :thumbsup: :sparkles:
:warning: annaslab already gave tvotyakov points
@wearenotgroot I did not know how to do it . I'll to read more about it
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.
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.
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.
Hey guys, is it ok to use jQuery on the Tribute page challenge?
@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?
@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 ?
how can we add dash between letters/words?
something like this........code - academy
whats the best way to put that dash in?4
@max77p use the minus key.
... code wise lol
is there a css trick i can do?
@max77p str = "code-academy";
@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"
@max77p like that ^^ put that as the string...
@cragsify that wont work if i need each item separate
becuase they are linked to other pages
@max77p You never said each item was seperate...
@max77p You only asked how to add dashes between letters.,
ok so, do you know?
@max77p like this:
<p>
<a href=""> number one</a> - <a href=""> number two</a>
</p>
@astringham @papigers sorry for the late reply - I just managed to puzzle this out and get it to work. Thank you for the help!
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
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?