24th
Sep 2016
Christina Duncan
@bttrflywsh
Sep 24 2016 00:27 UTC
I have made it to the "Build a Tribute Page". Can I do it on anything/anyone?
Greg Duncan
@GregatGit
Sep 24 2016 00:47 UTC
@bttrflywsh Yes - just go for it
@bttrflywsh If you build it in codepen you get a lot more support here
LPR-309
@LPR-309
Sep 24 2016 00:52 UTC
@bttrflywsh You can also do it locally and upload it via Github Pages if you hate Codepen. But yes, it's a good option for easy sharing.
Oh, you meant the topic. Yeah, anything, doesn't have to be a person.
Ventje Engel
@ventjejle
Sep 24 2016 03:30 UTC
Jimmy Huynh
@jkchuynh829
Sep 24 2016 04:02 UTC
does anyone use sublime?
Karthi Keyan
@mskarthi95
Sep 24 2016 04:57 UTC
How to create server like Apache server. Did anyone know explain briefly
Purpose of node js ??
Robert Ridley
@robertridley1988
Sep 24 2016 07:37 UTC

I don't know why my 'Go!' button appears below the text input.

http://codepen.io/robertridley1988/full/YGNVpV/

Here's my HTML

<div class="container-fluid"><!-- fluid-->
<div class="jumbotron"><!--jumbo-->
<h1 class="text-center" id="search-icon"><button id="butt"><i class="fa fa-search" aria-hidden="true"></i></button></h1>
<div class="row"><!-- row-->
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="text-center"><!-- text-center -->
<div class="input-group"><!-- /input-group -->
<input type="text" class="form-control" placeholder="Search Wikipedia">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- text-center -->
</div><!-- col-md-6-->
</div><!--row-->
</div> <!--jumbo-->
</div> <!-- fluid-->

And here's my JS:

$(document).ready(function(){$('#search-icon').on('click', function(){
$('#search-icon').hide();$('.input-group').slideDown('slow');
});
});

Can anyone help?

Thanks

colince
@thewindcolince
Sep 24 2016 07:37 UTC
please how to input image to CodePen?
Jordan Bartholomew
@tourdejord
Sep 24 2016 07:41 UTC
Colince~ you should ask Google that. If you can't find what you are looking for on google. Try w3schools.com.
I'd start my search with a more direct question.
c0d0er
@c0d0er
Sep 24 2016 07:49 UTC
hi, could anybody help on this question?
$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?", function(data) {$(".quote-text").text(data.quoteText);
$(".quote-author").text(data.quoteAuthor);$("#quote-tweet").attr("href", "https://twitter.com/share?text=data.quoteText");// how should i add data.quoteText to href link?
});
})
})
Jordan Bartholomew
@tourdejord
Sep 24 2016 07:50 UTC
Mm
nm*
c0d0er
@c0d0er
Sep 24 2016 07:52 UTC
 $("#quote-tweet").attr("href", "https://twitter.com/share?text=data.quoteText");// how should i add data.quoteText to href link? @tourdejord how should i add data.quoteText to href link? Harry Adel @harryadel Sep 24 2016 08:14 UTC @c0d0er treat it as a variable $("#quote-tweet").attr("href", "https://twitter.com/share?text="+data.quoteText);
c0d0er
@c0d0er
Sep 24 2016 08:21 UTC
@Harry97 thanks the prolem resolved
CamperBot
@camperbot
Sep 24 2016 08:21 UTC
c0d0er sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
Sep 24 2016 08:23 UTC
lol I guess I was too late for the party :D
Jamie Weston
@monotone2k
Sep 24 2016 09:03 UTC
Could someone take a look at the behaviour of my smooth scroll JS and tell me where I'm going wrong?
It works perfectly within Codepen, but any Chrome/FF/IE, it 'bounces'. The first click of a link works. Subsequent clicks of the same link alternate between that spot and another spot.
Ghost
@ghost~57d8467640f3a6eec06510fd
Sep 24 2016 09:07 UTC
@monotone2k you mean your navbar size changes when clicking Contact?
Siva Sarath
@Siva-Sarath
Sep 24 2016 09:08 UTC
Guys,
my random quote machine works outside codepen but not within it. what have i missed. Please help!!
https://codepen.io/sivasarath/pen/kkBNvK
Jamie Weston
@monotone2k
Sep 24 2016 09:09 UTC
@APRim05 No, the smooth scroll. I'm happy with my navbar. The scrolling moves to the correct anchor on the first click - so clicking Portfolio correctly aligns the top of that div with the bottom of my navbar. But when I do this in a real browser instead of in Codepen, if I click Portfolio for a second time, it'll move the About div there instead.
I can't replicate it in Codepen, so it might not be obvious. But I've tried in Chrome/FF/IE and they all have the same problem, so clearly there's something wrong with my JS.
Ghost
@ghost~57d8467640f3a6eec06510fd
Sep 24 2016 09:10 UTC
@monotone2k no it's doing it on codepen too
Jamie Weston
@monotone2k
Sep 24 2016 09:11 UTC
@APRim05 Really? My Codepen works correctly. I
I'm glad you can see the problem. Any thoughts?
@Siva-Sarath You should really use the console more. It tells you the problem there :)
Siva Sarath
@Siva-Sarath
Sep 24 2016 09:14 UTC
@monotone2k I'm sorry i din't get you. http in external links? could you be more brief
Ghost
@ghost~57d8467640f3a6eec06510fd
Sep 24 2016 09:14 UTC
@monotone2k i read that it should be <a name=""> </a> but idk if that makes a difference
Jamie Weston
@monotone2k
Sep 24 2016 09:14 UTC
You can't request HTTP information if you're running in HTTPS. Check the console.
Ghost
@ghost~57d8467640f3a6eec06510fd
Sep 24 2016 09:15 UTC
@monotone2k where you wrote <a id=""></a> it might have to be <a name="">
Jamie Weston
@monotone2k
Sep 24 2016 09:15 UTC
@APRim05 id= should be correct. A lot of scripts won't work with name=, and technically name is just an attribute for forms.
I'll try changing it though
Sep 24 2016 09:16 UTC
@monotone2k : Not aware of the context of this discussion, but you can target with name as perfect as you do by id
Siva Sarath
@Siva-Sarath
Sep 24 2016 09:16 UTC
@monotone2k ohh thank god, i was scratching my head for hours. THANKYOU!!!
CamperBot
@camperbot
Sep 24 2016 09:16 UTC
siva-sarath sends brownie points to @monotone2k :sparkles: :thumbsup: :sparkles:
Jamie Weston
@monotone2k
Sep 24 2016 09:17 UTC
@Adi2Point0 I just changed it to name and it broke more. So that's not technically true.
Sep 24 2016 09:17 UTC
Jamie Weston
@monotone2k
Sep 24 2016 09:17 UTC
Sep 24 2016 09:18 UTC
@monotone2k : Where is the code in question?
Jamie Weston
@monotone2k
Sep 24 2016 09:19 UTC
If you mean which code do I think is causing the problem, I'm not sure. It's part of the smooth scroll JS - I'm using a plugin for this so it handles offets more easily (to account for the fixed navbar)
The unwanted behaviour is that the first click of a navbar link works but subsequent links move you to another position instead of staying in the same place.
Ghost
@ghost~57d8467640f3a6eec06510fd
Sep 24 2016 09:20 UTC
@monotone2k not sure sorry
Jamie Weston
@monotone2k
Sep 24 2016 09:20 UTC
In all browsers, clicking Portfolio twice results in being at the top of the page again.
@APRim05 No problem. Thanks for taking a look.
CamperBot
@camperbot
Sep 24 2016 09:20 UTC
monotone2k sends brownie points to @aprim05 :sparkles: :thumbsup: :sparkles:
Sep 24 2016 09:22 UTC

@monotone2k : I see, you're using a plugin, so you're right for the use of id.
I was thinking you're talking about something like

<a id="someId" name="my-anchor">some link text</a>

you can target this element with id as well as with name like

$('#someId'); //and / or$('a[name="my-anchor"]');
or even
$('[name="my-anchor"]'); Jamie Weston @monotone2k Sep 24 2016 09:23 UTC @Adi2Point0 Yes, if I took a more basic approach, name would work fine. Either way, that part isn't the problem - I think it has something to do with the section of the plugin where it calculates the difference between document position and window position. If I click the links while it's still scrolling, it'll 'settle' partway between the two. Adi2Point0 @Adi2Point0 Sep 24 2016 09:23 UTC @monotone2k : I'm not able to see that issue on my end strange! Jamie Weston @monotone2k Sep 24 2016 09:24 UTC @Adi2Point0 Yeah, I don't think it exhibits the problem in Pens. Adi2Point0 @Adi2Point0 Sep 24 2016 09:24 UTC if I'm on contact section and click on contact again and again, it stays there Jamie Weston @monotone2k Sep 24 2016 09:24 UTC Even more irritating... I'm happy to debug it myself but I'm not that experienced with JS yet and the plugin is a little over my head. Adi2Point0 @Adi2Point0 Sep 24 2016 09:24 UTC I see. Jamie Weston @monotone2k Sep 24 2016 09:25 UTC I don't understand why Codepen would run it differently to a 'real' browser. Adi2Point0 @Adi2Point0 Sep 24 2016 09:26 UTC @monotone2k : Try it like this, first block of your JS section should be $(document).on('ready', function(){
init();
});
and remove window.onload = init(); from your js
also get rid of onload="load()" from your body tag
you're using jQuery, so the native browser events may not behave as you expect them to be.
The thing is, codepen will make sure all your scripts are correctly loaded before it executes them. So if your code works correctly on codepen but fails on local (or on host) it's likely that your events are messed up
Jamie Weston
@monotone2k
Sep 24 2016 09:30 UTC
I made those changes and it's still doing the same thing.
Sep 24 2016 09:32 UTC
well.. then I'm not sure. Sorry mate. :)
Jamie Weston
@monotone2k
Sep 24 2016 09:33 UTC
@Adi2Point0 No problem, thanks for looking
CamperBot
@camperbot
Sep 24 2016 09:33 UTC
monotone2k sends brownie points to @adi2point0 :sparkles: :thumbsup: :sparkles:
Jamie Weston
@monotone2k
Sep 24 2016 10:14 UTC
@Adi2Point0 I finally found it. It's not the code, it's jQuery itself. If I use an older version, it works as expected. Guess I shouldn't rush to using the newest version every time.
Hansi2468
@Hansi2468
Sep 24 2016 11:49 UTC

Is there anyone that can help me with this? It says typeError

function truncateString(str, num) {
if (str.length>num){
return str.slice(num).prepend("...");
}

}

Ghost
@ghost~5571459415522ed4b3e17425
Sep 24 2016 11:52 UTC
can i build the project's in what the framework i want ??
like angular or meteor ??
Sam Roelants
@sroelants
Sep 24 2016 11:58 UTC
@Hansi2468 prepend() is a jQuery method, and operates on jQuery objects, not on strings. Maybe you can just prepend by concatenating: "..." + str.slice(num)
Hansi2468
@Hansi2468
Sep 24 2016 11:58 UTC
@sroelants Thanks! I solved that part ;)
CamperBot
@camperbot
Sep 24 2016 11:58 UTC
hansi2468 sends brownie points to @sroelants :sparkles: :thumbsup: :sparkles:
Sep 24 2016 11:59 UTC
@nuruddinbadawi - I think that I've seen people do all kinds of things. As long as you know the framework that you are using, it should be okay to do the projects with it. If you have knowledge in those areas, then you probably know the JS and basic stuff, so go for it!
Sam Roelants
@sroelants
Sep 24 2016 11:59 UTC
(Also, If I'm not mistaken, slice(num) will take the string starting at position num, so that's probably not what you want. But I guess you noticed that as well by now ;-) )
Ghost
@ghost~5571459415522ed4b3e17425
Sep 24 2016 12:01 UTC
CamperBot
@camperbot
Sep 24 2016 12:01 UTC
Hansi2468
@Hansi2468
Sep 24 2016 12:02 UTC
@sroelants I noticed, but I can’t find how the f**k i should make it slice the right place
Sam Roelants
@sroelants
Sep 24 2016 12:04 UTC
@Hansi2468 If you want the string up to but excluding the $n$'th position, you'd write str.slice(0, n)
And, since the exercise wants you to include 3 dots, you'll probably want something like str.slice(0, num-3) + "..."
Hansi2468
@Hansi2468
Sep 24 2016 12:05 UTC

@sroelants I know, this is my code:

function truncateString(str, num) {
if (str.length>num){
return str.slice(0,num)+("...");
}

But it doesn’t solve this challenge:truncateString("A-tisket a-tasket A green and yellow basket", 11) should return "A-tisket...".
Sam Roelants
@sroelants
Sep 24 2016 12:10 UTC
@Hansi2468 Basically, there's three situations you should distinguish:
1. The string is short enough, so you don't have to truncate at all, and don't append any "...".
2. The string needs to be truncated, in which case you truncate it a bit shorter (3 characters shorter), and append the "...".
3. The truncated string is SO short that if you make it 3 characters shorter in order to add the "...", you'd be left with nothing. (that is: the truncated string is shorter than 3 characters). In that case, the exercise says not to shorten the string by 3 characters, but to just append the "..." as is.
So I guess you'll have to add some different scenario's to your function to accomodate these. :-)
Hansi2468
@Hansi2468
Sep 24 2016 12:13 UTC
@sroelants Thanks i’ll try to do that
CamperBot
@camperbot
Sep 24 2016 12:13 UTC
hansi2468 sends brownie points to @sroelants :sparkles: :thumbsup: :sparkles:
:warning: hansi2468 already gave sroelants points
Hansi2468
@Hansi2468
Sep 24 2016 12:23 UTC

@sroelants I made this, but it doesn’t check them all of at once, what am i doing wrong?

function truncateString(str, num) {
if (num == str.length) {
return str;
}
else if (str.length>num){
return str.slice(0,(num-3))+("...");
}
else if (str.length>num){
return str.slice(0,num)+("...");
}

}

Sorin Ruse
@sorinr
Sep 24 2016 12:25 UTC
This message was deleted
Sam Roelants
@sroelants
Sep 24 2016 12:26 UTC
Try changing the first test to num >= str.length
also, I'm not sure why the second and third if-conditions are identical?
I think for the last case, you simply want to test if the length of the truncated string they're asking for is less than three (so, basically, if num <= 3 )
Sorin Ruse
@sorinr
Sep 24 2016 12:28 UTC
This message was deleted
Hansi2468
@Hansi2468
Sep 24 2016 12:30 UTC
@sorinr what’s the problem
@sroelants Thanks again
CamperBot
@camperbot
Sep 24 2016 12:30 UTC
hansi2468 sends brownie points to @sroelants :sparkles: :thumbsup: :sparkles:
:warning: hansi2468 already gave sroelants points
Sorin Ruse
@sorinr
Sep 24 2016 12:38 UTC
@Hansi2468 your string is zero based so the fifth char in the string its string[4] actually
cetaphil
@cetaphil
Sep 24 2016 13:50 UTC
Hey guys, can anybody help me? I'm having trouble with codepen and getjson call. In my codepen I can't load the json data , but a guy from stackoverflow shared with me his codepen with the exact same code and It worked!. What's happening?. I tried with crossorigin but didn't work either.
Sorin Ruse
@sorinr
Sep 24 2016 14:02 UTC
@cetaphil can u post ur pen link?
Ghost
@ghost~57d8467640f3a6eec06510fd
Sep 24 2016 14:05 UTC
@cetaphil have you went to settings -> javascript -> add external javascript and added json?
cetaphil
@cetaphil
Sep 24 2016 14:07 UTC
@APRim05 yes
Sorin Ruse
@sorinr
Sep 24 2016 14:08 UTC
@cetaphil run your pen over http not https
cetaphil
@cetaphil
Sep 24 2016 14:11 UTC
@sorinr didn't work. Could it be something with my browser?
@sorinr Okay sorry. Is working. Is something with the autorun preview, I disabled it and now is working.
Sorin Ruse
@sorinr
Sep 24 2016 14:14 UTC
@cetaphil ok. it worked for me before. it was strange not working for u too
Nicholas D Shaw
@NicholasDShaw
Sep 24 2016 14:15 UTC
@cetaphil ctrl, shift, 5 will run the code if you have that disabled
makkoli
@makkoli
Sep 24 2016 14:57 UTC
Does anyone know why the twitch tv api isn't working?
Monesul Haque
@mones-cse
Sep 24 2016 14:57 UTC
@makkoli recently twich api changed it requires a client id now
TrayBanks
@TrayBanks
Sep 24 2016 14:57 UTC

Can someone help with the Golf code JS challenge and tell me where I went wrong?

ction golfScore(par, strokes) {
// Only change code below this line

if (strokes>=1) { return "Hole-in-one!";}
else if (strokes<= par-2) { return "Eagle";}
else if (strokes==par-1) { return "Birdie";}
else if (strokes==par) { return "Par";}
else if (strokes==par+1) { return "Bogey";}
else if (strokes==par+2) { return "Double Bogey";}
else if (strokes>=par+3) { return "Go Home!";}

// Only change code above this line
}

// Change these values to test
golfScore(5, 4);

makkoli
@makkoli
Sep 24 2016 14:57 UTC
@mones-cse ah ok thank you
CamperBot
@camperbot
Sep 24 2016 14:57 UTC
makkoli sends brownie points to @mones-cse :sparkles: :thumbsup: :sparkles:
Ajay Tanwar
@ajayt365
Sep 24 2016 15:00 UTC

hey , i was appending an image in body through jquery . the webpage already has an image and i want to replace with the image i appended . i did

.imgclass{
background-size:cover;
background-repeat:no-repeat;
}

but nothing is happening . its just appended below the background image in it 640*480 resolution . can someone help me with this ?

Monesul Haque
@mones-cse
Sep 24 2016 15:02 UTC
@ajayt365 when you append it just add an content bellow existent content
Ajay Tanwar
@ajayt365
Sep 24 2016 15:02 UTC
can u write the code snippet ? i didn't get it ,content part
@mones-cse ?
Monesul Haque
@mones-cse
Sep 24 2016 15:05 UTC

lets say you want to append
<p>new<p>
into
div current
and div current is

<div id="current">
<p>old</p>
<div>


it will become

<div id="current">
<p>old</p>
<p>new<p>
<div>

@ajayt365
so if you want to replace then at first you have to remove <p>old</p>
then append <p>new<p>
Ajay Tanwar
@ajayt365
Sep 24 2016 15:14 UTC
if i don't want to remove , just want to replace it . then? @mones-cse
Monesul Haque
@mones-cse
Sep 24 2016 15:14 UTC
@ajayt365 do you have any codepen link ?
Sorin Ruse
@sorinr
Sep 24 2016 15:16 UTC
@ajayt365 $('#current>p").text('new') to just replace the old text Ajay Tanwar @ajayt365 Sep 24 2016 15:18 UTC nah i was doing it on my local machine . when page loads i am adding images through jquery . then after json request i get the src of image then i append it <img class="hah" src="link through ajax"> . with this image i want to replace the existing background . @sorinr that was not my question ,my question was about replacing image. @mones-cse Sorin Ruse @sorinr Sep 24 2016 15:19 UTC @ajayt365 then use$(you_img_element).attr('src', 'your new url')
Monesul Haque
@mones-cse
Sep 24 2016 15:25 UTC
@ajayt365 try $('your_img_element').attr('src', 'link through ajax'); and if you have time read http://api.jquery.com/attr/ TrayBanks @TrayBanks Sep 24 2016 15:29 UTC can someone help me out with selecting from many options in a switch statement JS??? Dont give me the answer just give me a hint or tell where I should focus my attention. Please and thank you! switch(val) { case 1: answer = "Alpha"; break; case 2: answer = "Beta"; break; case 3: answer = "Gamma"; break; case 4: answer = "Delta"; } Ajay Tanwar @ajayt365 Sep 24 2016 15:30 UTC @sorinr and @mones-cse when the page loads jquery adds a background image ,$("body").attr("background",".."). then i have a form when user write the necessary details and hits submit button , i want to replace the image . and i am doing it with

$("body").attr("background","link through ajax"); but this image didn't replace the pre-existing image it's still there . what could be wrong ? Sorin Ruse @sorinr Sep 24 2016 15:32 UTC @ajayt365 so if you want to change a css property then its something else. like:$("body").css("background","link through ajax");
Ajay Tanwar
@ajayt365
Sep 24 2016 15:35 UTC
var streetviewUrl = 'https://maps.googleapis.com/maps/api/streetview?size=600x400&location=' + address +''; $('body').css('background',streetviewUrl); @sorinr not working Sorin Ruse @sorinr Sep 24 2016 15:37 UTC @ajayt365 its not working because you are not formatting well the "link through ajax" part of the background attribute. Monesul Haque @mones-cse Sep 24 2016 15:39 UTC @ajayt365 can you try this ? $('body').css("background-image", "url(link through ajax)");
and check your streetviewUrl actually works or not
Ajay Tanwar
@ajayt365
Sep 24 2016 15:40 UTC
This is the code
function loadData() {
var $street=$('#street').val();
var $city=$('#city').val();
var address= $street + ','+$city;
var $body =$('body');
$body.css('background',streetviewUrl); return false; };$('#form-container').submit(loadData); // click on submit button and loading the function

$(document).ready(function(){ changeimage(3); }); var imageID=0; function changeimage(every_seconds){ //change the image if(!imageID){$("body").attr("background","https://assets.entrepreneur.com/slideshow/10-best-cities-start-business-atl.jpg");
imageID++;
}
else if (imageID==1)
{
$("body").attr("background","http://www.roughguides.com/wp-content/uploads/2014/07/8.-Overs-Vancouver-E1W1BG.jpg"); imageID++; } else if (imageID==2) {$("body").attr("background","http://blogs-images.forbes.com/meghancasserly/files/2012/10/nyc_dalyife.jpg");
imageID=0;
}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
Sorin Ruse
@sorinr
Sep 24 2016 15:40 UTC
@ajayt365 ye. as @mones-cse said but be aware of the concatenation
Ajay Tanwar
@ajayt365
Sep 24 2016 15:40 UTC
@sorinr see the code above
@sorinr i am trying to replace the images of changeimage function through image i get from streetview
Sorin Ruse
@sorinr
Sep 24 2016 15:43 UTC
@ajayt365 as i said.background its not an attribute of the body element. it is just a css property. so you have to use .css() function
Ajay Tanwar
@ajayt365
Sep 24 2016 15:45 UTC
@sorinr man changeimage function is working fine , images in that are loading just fine . the thing is image in loaddata is not replacing it .
Ajay Tanwar
@ajayt365
Sep 24 2016 15:50 UTC
@sorinr i change 'attr' to 'css' and now it'snot working in changeimage function, can't load the images .
Sorin Ruse
@sorinr
Sep 24 2016 15:52 UTC
@ajayt365 its coz in css you have to: background-image: url(your url here) . this is the syntax
@ajayt365 do u have it on codepen or working offline?
Ajay Tanwar
@ajayt365
Sep 24 2016 15:54 UTC
working offline give me 10 minutes i will add it on codepen and will share the link . wait
@sorinr
Sorin Ruse
@sorinr
Sep 24 2016 15:56 UTC
@ajayt365 no need. the problem is that no matter what you do your function setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000)); will override the new img attribution. so you have to stop the interval to work
Monesul Haque
@mones-cse
Sep 24 2016 15:57 UTC
@ajayt365
http://codepen.io/m1s/pen/YGkpVp
check this out background image is changing might have problem else where
Ajay Tanwar
@ajayt365
Sep 24 2016 15:59 UTC
how will i stop that ? @sorinr
Sorin Ruse
@sorinr
Sep 24 2016 16:00 UTC
@ajayt365 using clearInterval() function
TrayBanks
@TrayBanks
Sep 24 2016 16:05 UTC

can anyone help me with the Replacing else if chains with switch in JS. Please dont give me the answer just hints and where I should focus my attention. Please and thank you

function chainToSwitch(val) {
// Only change code below this line

switch(val){
case Bob:
break;
case 42:
break;
case 1:
answer = "There is no #1";
break;
case 99:
answer = "Missed me by this much!";
break;
case 7:

}
// Only change code above this line
}

// Change this value to test
chainToSwitch(7);

Ajay Tanwar
@ajayt365
Sep 24 2016 16:15 UTC
@sorinr i did clearInterval(changeimage) in loaddata function . but nothing happening . the image is changing every 2 secs.
Greg
@Gregb1609
Sep 24 2016 16:25 UTC
Hi room, can anyone help me with a .getJSON problem?
Sorin Ruse
@sorinr
Sep 24 2016 16:50 UTC
@ajayt365 sorry. i think the right function is clearTimeout() as you have setTimeout
Ajay Tanwar
@ajayt365
Sep 24 2016 16:56 UTC
@sorinr not working . Where should I add it ?
Sorin Ruse
@sorinr
Sep 24 2016 16:59 UTC
@ajayt365 when do you want to stop the function?
Ajay Tanwar
@ajayt365
Sep 24 2016 17:00 UTC
after the click of submit button and image has been loaded from ajax @sorinr
Sorin Ruse
@sorinr
Sep 24 2016 17:00 UTC
This message was deleted
Sergio
@serg337
Sep 24 2016 17:00 UTC
Hi guys, on the twitch tv challenge, does any one know about the sample api response?? there's no link to it
Ajay Tanwar
@ajayt365
Sep 24 2016 17:03 UTC
vínαч puppαl
@vinaypuppal
Sep 24 2016 17:11 UTC

@ajayt365 define var myTimeout; at top of your code
and setTimeout like this

myTimeout = setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));

and inside your loadData() function clearTimeout like below

function loadData() {
// some code...
clearTimeout(myTimeout);
// some code...
}
Sorin Ruse
@sorinr
Sep 24 2016 17:14 UTC
@ajayt365 take a look here: http://codepen.io/sorinr/pen/rryJpR
Lydia Larae
@nevaIsDreaming
Sep 24 2016 17:57 UTC
has anyone here been through the AJAX/JSON tutorials? I've passed all the challenges for them, but I still don't really understand how to write that kind of code myself. I'm wondering if anyone has some good resources that they can recommend?
Dylan
@dhcodes
Sep 24 2016 17:58 UTC
@nevaIsDreaming it will make more sense when you get more comfortable writing functions
$.getJSON(url, function(data) { console.log(data) } vínαч puppαl @vinaypuppal Sep 24 2016 17:59 UTC @nevaIsDreaming try this https://www.udacity.com/course/intro-to-ajax--ud110 it helped me a lot understanding AJAX and JSONP requests. Dylan @dhcodes Sep 24 2016 18:00 UTC @nevaIsDreaming that is a function built into jQuery that will collect the JSON from a url and then console.log it Greg @Gregb1609 Sep 24 2016 18:09 UTC Hi room, can anyone help me with a cross origin JSON request problem? Or just a hand to complete the weather api challenge? Lydia Larae @nevaIsDreaming Sep 24 2016 18:13 UTC @dhcodes @vinaypuppal thank you! both of those are very helpful. CamperBot @camperbot Sep 24 2016 18:13 UTC nevaisdreaming sends brownie points to @dhcodes and @vinaypuppal :sparkles: :thumbsup: :sparkles: :cookie: 567 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal :star2: 1432 | @dhcodes |http://www.freecodecamp.com/dhcodes Dylan @dhcodes Sep 24 2016 18:22 UTC @Gregb1609 what's up Greg @Gregb1609 Sep 24 2016 18:29 UTC @dhcodes Hey there, am struggling to get a JSON request to work. I am using a getJSON in codepen to get weather details from the Google weather API but am getting a silent fail every time I run the code. I suspect it is something to do with Cross Origins or wrapping the API URL but I just cant get the right page to help me out... Any thoughts? code that I think is problematic: -$("#units").click(function(){ if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(function(position){ var lat = position.coords.latitude; var long = position.coords.longitude; var url="api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&APPID=d63e75160789db4e0acf7c6474654917"; url2="https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=" console.log(url); $.getJSON(url2, function(json) { console.log(JSON.stringify(json)); }); }); var url is the one I am trying to get to work and url2 is one that is there for test purposes and works... Greg @Gregb1609 Sep 24 2016 18:35 UTC @vinaypuppal how do you get your code to appear in the black box? I only know the backtick formatting like this?? vínαч puppαl @vinaypuppal Sep 24 2016 18:36 UTC Greg @Gregb1609 Sep 24 2016 18:36 UTC @vinaypuppal thanks CamperBot @camperbot Sep 24 2016 18:36 UTC :cookie: 568 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal gregb1609 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles: Greg @Gregb1609 Sep 24 2016 18:37 UTC js$("#units").click(function(){ if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(function(position){ var lat = position.coords.latitude; var long = position.coords.longitude; var url="api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&APPID=d63e75160789db4e0acf7c6474654917"; url2="https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=" console.log(url); $.getJSON(url2, function(json) { console.log(JSON.stringify(json)); }); }); js test vínαч puppαl @vinaypuppal Sep 24 2016 18:38 UTC @Gregb1609 try three  [shift-enter] [then paste code] [and on new line close three backtics] Greg @Gregb1609 Sep 24 2016 18:39 UTC $("#units").click(function(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
var lat = position.coords.latitude;
var long = position.coords.longitude;
var url="api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&APPID=d63e75160789db4e0acf7c6474654917";
url2="https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback="
console.log(url);
.getJSON(url2, function(json) { console.log(JSON.stringify(json)); }); }); there we go!! much nicer... vínαч puppαl @vinaypuppal Sep 24 2016 18:40 UTC @Gregb1609 and in your code i see u missed protocol http:// in url part Greg @Gregb1609 Sep 24 2016 18:41 UTC I know, have tried putting that in but still doesn't work, tried http://, https:// but still cant get an object back also in the api docs the code is as I have it and finally if I copy and paste the console log of the url variable in to the address bar I get a JSON object just not in the code/on codepen vínαч puppαl @vinaypuppal Sep 24 2016 18:43 UTC @Gregb1609 did you load pen over http or https ?? openweathermap does not support https and you can see these errors in chrome console [Hit ctrl+shift+j to get console] Greg @Gregb1609 Sep 24 2016 18:44 UTC sorry how would I know which way I loaded the pen?? Am using explorer console so unfortunately don seem to get an error althought will double check now... vínαч puppαl @vinaypuppal Sep 24 2016 18:45 UTC @Gregb1609 see url in address bar in browser does it have https://codepen-url or only codepen-url @Gregb1609 geolocation API in chrome works only on https so load your pen over https and after that you need to make all API requests over https only. So you could try 'https://api.openweathermap.org/data/2.5/weather?lat=49.9071031&lon=28.563195399999998&APPID=6d9ef3b57680f710aca13086003811a6' But still it wont work as openweathermap does not support https so as temporary workaround you may use proxy server https://crossorigin.me like 'https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?lat=49.9071031&lon=28.563195399999998&APPID=6d9ef3b57680f710aca13086003811a6' But its not good to use public proxy servers(becoz of security issues and downtimes) so next time use API that supports https only Here is some discussion going on in FCC community FreeCodeCamp/FreeCodeCamp#9145 read this to find other alternatives Greg @Gregb1609 Sep 24 2016 18:47 UTC Is https for the pen. also the browser console is shedding some light. I have a hyperlink to a http img which it says is compromisisng security @vinaypuppal awesome. Thanks for the links and the help will have a read now. Cheers! CamperBot @camperbot Sep 24 2016 18:48 UTC gregb1609 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles: :warning: gregb1609 already gave vinaypuppal points Ajay Tanwar @ajayt365 Sep 24 2016 18:52 UTC @vinaypuppal what difference does a variable make ? i don't understand that . vínαч puppαl @vinaypuppal Sep 24 2016 18:54 UTC @ajayt365 this line var myTimeout; defines a variable upfront which we use to store a reference to setTimeout in this line myTimeout = setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000)); @ajayt365 and we use that reference inside loadData function to clearTimeout Ajay Tanwar @ajayt365 Sep 24 2016 18:55 UTC and when i was doing clearTimeout(changeimage) . what was i doing wrong ? @vinaypuppal vínαч puppαl @vinaypuppal Sep 24 2016 18:56 UTC @ajayt365 what is changeimage pointing to ?? Ajay Tanwar @ajayt365 Sep 24 2016 18:57 UTC changeimage is a function which changes images . n i used settimeout inside it for time interval Greg @Gregb1609 Sep 24 2016 18:57 UTC @vinaypuppal hey just wanted to let you know that the proxy fixed the issue. you don't know how many hours I've been stuck on that one!! :clap: vínαч puppαl @vinaypuppal Sep 24 2016 18:58 UTC @ajayt365 yes but clearTimeout needs a reference to created setTimeout @Gregb1609 :smile: But its not good to use public proxy servers(becoz of security issues and downtimes) so next time use API that supports https only Ajay Tanwar @ajayt365 Sep 24 2016 18:59 UTC hmm.. what does reference actually mean here ? is it different from what it means in c++ ? @vinaypuppal vínαч puppαl @vinaypuppal Sep 24 2016 19:02 UTC @ajayt365 var myTimeout = setTimeout(function(){console.log('hi')}, 3000) // setTimeout return some id as reference so later we can cancel it using clearTimeout // for example now myTimeout contains 8581 // which we use to clearTimeout later like clearTimeout(myTimeout) I hope you understood it @ajayt365 Ajay Tanwar @ajayt365 Sep 24 2016 19:04 UTC yeah thanks man , i understood it . but i was confused in reference differences between js and c++. @vinaypuppal CamperBot @camperbot Sep 24 2016 19:04 UTC ajayt365 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles: :cookie: 569 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal Ajay Tanwar @ajayt365 Sep 24 2016 19:05 UTC @sorinr and @mones-cse thanks to you two too :) CamperBot @camperbot Sep 24 2016 19:05 UTC ajayt365 sends brownie points to @sorinr and @mones-cse :sparkles: :thumbsup: :sparkles: :cookie: 725 | @sorinr |http://www.freecodecamp.com/sorinr :cookie: 407 | @mones-cse |http://www.freecodecamp.com/mones-cse sean9 @sean9 Sep 24 2016 19:08 UTC Hey all, im not sure why im having so much trouble getting the <p></p> out of the random quote api http://codepen.io/sean9/pen/wzzWoG David @davidwilson70 Sep 24 2016 19:11 UTC Hi, can I get someone to take a look at my code and help me sort out why my 2nd clock isn't working right ? I am working on the Pomodoro Clock. The 2 clocks works just the same and the code is just the same . I have spent 3 days trying to figure out the mistake and can't find it. http://codepen.io/DWilson70/pen/amJbxY?editors=1010 bad thing is you'll have to wait 5 minutes to see the issue . @sean9 take a look at mine man might help you out . http://codepen.io/DWilson70/pen/qaWLEv Utkarsh Mittal @utkarshmttl Sep 24 2016 19:13 UTC Hello! http://codepen.io/utkarshmttl/full/BLWJVL/ In the right side, I have 5 divs, why is the "your account div" not left aligned like the rest?? vínαч puppαl @vinaypuppal Sep 24 2016 19:18 UTC @utkarshmttl if you want 4 in a row then try col-lg-3 instead of col-lg-4 @utkarshmttl above is for large size screen, if you want same for medium size screen then change this also col-md-3 instead of col-md-4 sean9 @sean9 Sep 24 2016 19:21 UTC @davidwilson70 yeah i had some pre made quotes before too but I am looking to use a random quote api. David @davidwilson70 Sep 24 2016 19:21 UTC oh ok. i just "wrote" my own and added them Utkarsh Mittal @utkarshmttl Sep 24 2016 19:22 UTC @vinaypuppal what I want is, for large screens- 3 in a row equal size, then in next row size 4 and size 8 but for small screen- 2 in a row equal size, then again 2 in a row equal size then third row size 6 vínαч puppαl @vinaypuppal Sep 24 2016 19:26 UTC @utkarshmttl then play with col-md-* and col-sm-* where * is from 1 to 12 and if you add all * then it should be equal to 12. Before you were having four col-lg-4 div's inside row so the last div wrapped on to new row. since 4x4 = 16 which is not equal to 12 Utkarsh Mittal @utkarshmttl Sep 24 2016 19:29 UTC @vinaypuppal wrapping of last div is intentional, but why is it aligned to right of row vínαч puppαl @vinaypuppal Sep 24 2016 19:33 UTC @utkarshmttl don't know that is weird , as bootstrap has only 12 col grid if you want last div on new row place that div inside .row div so it will be placed as expected greg @wearenotgroot Sep 24 2016 19:33 UTC @sean9 just google free quote api. here's are some examples Utkarsh Mittal @utkarshmttl Sep 24 2016 19:34 UTC @vinaypuppal see this http://codepen.io/utkarshmttl/pen/qaAoJx Here 4*4=16 so the last div has automatically gone into new row but it is set to left only ^^check for large screen only vínαч puppαl @vinaypuppal Sep 24 2016 19:40 UTC @utkarshmttl yeah thats weird why its not working, this is why i hate grids that use floats and clearfix hacks. I use flexbox for layout which makes life easier. Maybe check if its a clearfix problem. Sorry i cant help on this as i dont have knowledge on floats and clearfix issues. Utkarsh Mittal @utkarshmttl Sep 24 2016 19:41 UTC ok thanks anyways @vinaypuppal CamperBot @camperbot Sep 24 2016 19:41 UTC utkarshmttl sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles: :cookie: 570 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal Salomon @zarruk Sep 24 2016 19:43 UTC So what I want is to trigger a function when the enter key is pressed after having entered text in the search bar. I don't know if I am using the appropriate method keyup() Gavrila Alexandru @cyborgalex Sep 24 2016 19:45 UTC Hey, I have some trouble getting the navbar to toggle when it is collapsed. If anyone could help me:) https://codepen.io/cyborgalex/pen/RGpLpK?editors=1100 Michael Davis @mhdavis Sep 24 2016 19:53 UTC I'm actually having the same exact problem, so any help with that would be awesome vínαч puppαl @vinaypuppal Sep 24 2016 19:53 UTC @cyborgalex add first jquery.js and then bootstrap.js in js panel -> settings gear icon -> quick add then the toggle will work @mhdavis see above :point_up_2: Amit Patel @AmitP88 Sep 24 2016 19:57 UTC hey guys, I'm wondering if there's a way to use media queries for each viewport range while following the DRY rule Michael Davis @mhdavis Sep 24 2016 19:57 UTC @vinaypuppal is there a way to do it without js? I only ask because it seems that the bootstrap site for fixed navbar doesn't seem to use it (I could be wrong tho) oh nvm you are saying the js is built into bootstrap @vinaypuppal tried it and still nothing :( Igor Amidzic @igoramidzic Sep 24 2016 20:06 UTC @jdtdesigns Lmao I spent like 3 hours creating a div within a div with an input box just so I can get the microphone icon inside the search box. And then you simply add an <fa> tag that I've never heard before and do it in 3 seconds. So troll CamperBot @camperbot Sep 24 2016 20:06 UTC :trollface: troll problems? notify admins here vínαч puppαl @vinaypuppal Sep 24 2016 20:06 UTC @mhdavis may be check do you have navbar exactly as mentioned in docs http://getbootstrap.com/components/#navbar or provide link to your pen anyone might help you Michael Davis @mhdavis Sep 24 2016 20:07 UTC vínαч puppαl @vinaypuppal Sep 24 2016 20:10 UTC @mhdavis change this(i think line 10) line as below it will work <button class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> Michael Davis @mhdavis Sep 24 2016 20:12 UTC yup that fixed it @vinaypuppal thanks! can you explain why the data-target has to be #navbar? CamperBot @camperbot Sep 24 2016 20:12 UTC mhdavis sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles: :cookie: 571 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal Michael Davis @mhdavis Sep 24 2016 20:12 UTC is it addressing that specific id? vínαч puppαl @vinaypuppal Sep 24 2016 20:13 UTC @mhdavis since you have this with id navbar <div id="navbar" class="navbar-collapse collapse navbar-responsive-collapse"> Michael Davis @mhdavis Sep 24 2016 20:14 UTC yea that makes sense that's what I get for looking at two different tutorials on navbar setup lol vínαч puppαl @vinaypuppal Sep 24 2016 20:14 UTC :smile: : @mhdavis Michael Davis @mhdavis Sep 24 2016 20:15 UTC there also seems to be some visual problem, when I minimize it to get the drop down menu, after i click it to drop down and then come back up the white border lines on the navbar get stuck is that something that's up with the css/html or is it just a visual bug? vínαч puppαl @vinaypuppal Sep 24 2016 20:17 UTC @mhdavis thats becoz you have this in bootstrap CSS .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #e7e7e7; } @mhdavis it is added by bootstrap you can override it in your css and make border-color transparent .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: transparent; } Michael Davis @mhdavis Sep 24 2016 20:39 UTC @vinaypuppal right on thank! CamperBot @camperbot Sep 24 2016 20:39 UTC mhdavis sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles: :warning: mhdavis already gave vinaypuppal points colince @thewindcolince Sep 24 2016 20:42 UTC please how to insert image to copen to CodePen Aleksander Gębicki @Takumar Sep 24 2016 20:47 UTC @thewindcolince I'm afraid you have to put image to external server and put link to the image in your CodePen project something like e.g. imageshack vínαч puppαl @vinaypuppal Sep 24 2016 20:48 UTC @thewindcolince upload image to dropbox or flickr or you can even use cloud image hosting service like http://cloudinary.com and use URL genereated by those services in your pen. colince @thewindcolince Sep 24 2016 20:55 UTC i afraid to not understand Michael Davis @mhdavis Sep 24 2016 21:14 UTC @thewindcolince in order to insert an image that is not on the internet, you need to deposit it somewhere on the internet (like the sites vinay mentioned) @thewindcolince do you want to take the image from a website (google images, etc.) or do you have a particular image on your computer you wish to insert? :) @vinaypuppal the problem still persists when i minimize the dropdown Michael Davis @mhdavis Sep 24 2016 21:19 UTC I added the transparent line to the navbar section in css Aleksander Gębicki @Takumar Sep 24 2016 21:21 UTC @thewindcolince when you create webpage locally, you can put images in a folder, and give path to your image inside image HTML tag. Right? <a href="images/my_image.jpg"> When you find image by searching it on internet you have path to the internet source. But when you don't have existing link, you have to create link to your image - put image to some hosting page e.g. dropbox and link to this image vínαч puppαl @vinaypuppal Sep 24 2016 21:28 UTC @vinaypuppal the problem still persists when i minimize the dropdown @mhdavis other problem or same problem ?? Michael Davis @mhdavis Sep 24 2016 21:28 UTC the same one if you minimize it in order to pop up the dropdown button vínαч puppαl @vinaypuppal Sep 24 2016 21:29 UTC @mhdavis i don't see any border now ?? Michael Davis @mhdavis Sep 24 2016 21:30 UTC then click on it twice (once to send it down and then to bring it back up) there is a white line that remains on the page where the drop down menu used to be ) hm it could just be a visual bug yea it works now i think it was just a visual bug vínαч puppαl @vinaypuppal Sep 24 2016 21:31 UTC @mhdavis oh okay :smile: Michael Davis @mhdavis Sep 24 2016 21:32 UTC the other problem i seem to have is when i click on the button it stays pressed down It turns grey and stays that way unless i click on something else the same problem occurs with the "home" button and my navbar-brand vínαч puppαl @vinaypuppal Sep 24 2016 21:34 UTC @mhdavis i think its default bootstrap behaviour as i see same here also https://getbootstrap.com/examples/navbar/ but you can override it with your css Michael Davis @mhdavis Sep 24 2016 21:34 UTC @vinaypuppal i see what you mean vínαч puppαl @vinaypuppal Sep 24 2016 21:34 UTC @mhdavis resize browser to get mobile nav button Michael Davis @mhdavis Sep 24 2016 21:35 UTC @vinaypuppal how do i override it in the css? same goes for the home button and the navbar-brand both the navbar-brand and "home" button have an href="#" which is why they stay down, so i guess my question is how do i get them to take you back to the top of the page vínαч puppαl @vinaypuppal Sep 24 2016 21:37 UTC @mhdavis for navbar-brand bootstrap has this so override these on :focus which is causing that problem .navbar-default .navbar-brand:focus{ color: #5e5e5e; background-color: transparent; } @mhdavis and for toggle button this so override to what ever colors or make transparent if you don't want any colors on focus .navbar-default .navbar-toggle:focus { background-color: #ddd; } Michael Davis @mhdavis Sep 24 2016 21:40 UTC okay the toggle focus worked but when i added the first bit to the css it made a white line appear at the top of the navbar when it was dropped down the first line of css you sent me i tried, and when i clicked the navbar-brand and home, it turned them white (which is what I wanted) but then when i hovered over them they didn't change color afterwards vínαч puppαl @vinaypuppal Sep 24 2016 21:43 UTC @mhdavis did you remove this becoz i dont see in your css .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: transparent; } If so add it back to remove border that your are noticing Michael Davis @mhdavis Sep 24 2016 21:44 UTC that fixed it sorry i thought i still had that in there vínαч puppαl @vinaypuppal Sep 24 2016 21:45 UTC @mhdavis and for Home / navbar link override this css to whatever colors you want on :focus .navbar-default .navbar-nav>li>a:focus{ color: #333; background-color: transparent; } Michael Davis @mhdavis Sep 24 2016 21:47 UTC so with both of the :focus commands it still does the thing where once clicked, it stays white and doesn't change back vínαч puppαl @vinaypuppal Sep 24 2016 21:51 UTC @mhdavis still what problems you have ?? I see only • no color change on :hover navbar-brand • and Home link :focus problem (this can be fixed with this above message) no color change on :hover navbar-brand for this use .navbar-default .navbar-brand:hover{ color: #f382ad; } @mhdavis Michael Davis @mhdavis Sep 24 2016 21:53 UTC so change it to navbar-default instead of navbar vínαч puppαl @vinaypuppal Sep 24 2016 21:54 UTC @mhdavis yeah that seems working Michael Davis @mhdavis Sep 24 2016 21:54 UTC @vinaypuppal how do you link code in the chat? also i tried .navbar-default .navbar-brand:hover{ color: #f382ad; } and the problem still persists (p.s. thanks for your patiences on this) *patience vínαч puppαl @vinaypuppal Sep 24 2016 21:56 UTC @mhdavis hover mouse over time of message then right click and you can copy link address Michael Davis @mhdavis Sep 24 2016 21:57 UTC hmm that didn't seem to work when you say hover over time, do you mean hover over the time stamp in the previous message? vínαч puppαl @vinaypuppal Sep 24 2016 22:00 UTC how do you link code in the chat? yes Michael Davis @mhdavis Sep 24 2016 22:01 UTC .navbar .navbar-brand { color: white; border-color: transparent; } .navbar .navbar-brand:hover { color: #f382ad; } .navbar-default .navbar-nav>li>a { color: #fff; } .navbar-default .navbar-nav>li>a:hover { color: #f382ad; } .navbar-default .navbar-nav>li>a:focus{ color: #333; background-color: transparent; } .navbar { background-color: black; } i figured it out (there was a video on youtube from fcc lol) vínαч puppαl @vinaypuppal Sep 24 2016 22:03 UTC @mhdavis i think you can override colors on :focus but still you need to click outside of link to change its state from :focus to normal then only :hover state gets triggered Michael Davis @mhdavis Sep 24 2016 22:04 UTC @vinaypuppal yea you are right Sarah Majors @sfmajors373 Sep 24 2016 22:05 UTC Hi everyone! I'm working on my weather app and I really thought I was doing better at not making so many mistakes this time - I spent a lot of time checking it before I even put it into codepen, but I am still having problems, and I have been checking it and fixing it after it went into codepen. If anyone has a minute to look at it and let me know why it isn't doing anything, I would super appreciate it! https://codepen.io/sfmajors/pen/amBrOL?editors=1010 Michael Davis @mhdavis Sep 24 2016 22:06 UTC @vinaypuppal i think it I fixed it vínαч puppαl @vinaypuppal Sep 24 2016 22:07 UTC @sfmajors373 you have a typo getJSON(.. its \$.getJSON(...
@sfmajors373 you can see errors in console [Hit ctrl+shift+j to open it if your on chrome] and correct them
Sarah Majors
@sfmajors373
Sep 24 2016 22:09 UTC
:O I had no idea that was there!!
@vinaypuppal Thank you very much
CamperBot
@camperbot
Sep 24 2016 22:09 UTC
sfmajors373 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
vínαч puppαl
@vinaypuppal
Sep 24 2016 22:10 UTC
@mhdavis :+1:
Michael Davis
@mhdavis
Sep 24 2016 22:11 UTC
@vinaypuppal thanks again, your a lifesaver lol
CamperBot
@camperbot
Sep 24 2016 22:11 UTC
mhdavis sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
vínαч puppαl
@vinaypuppal
Sep 24 2016 22:12 UTC
@mhdavis :smile:
@sfmajors373 if you still have problems look at this message
grantknaver
@grantknaver
Sep 24 2016 22:22 UTC
Quick question for you guys
How do I center my navbar-brand effectively through CSS or hell better yet bootstrap? Yes, I can change the margin, but that is subjective and I can't tell how accurately it is centered. *P.S. text-align: center does not work.
any ideas guys?
vínαч puppαl
@vinaypuppal
Sep 24 2016 22:31 UTC
@grantknaver You could try this
.navbar-nav {
width: calc(100% - 160px);
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
@grantknaver but with above styles one caveat your mobile nav will be broken
grantknaver
@grantknaver
Sep 24 2016 22:34 UTC
@vinaypuppal never used calc before Im learning about it right now. Thanks for the idea I will try it right now.
CamperBot
@camperbot
Sep 24 2016 22:34 UTC
grantknaver sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
vínαч puppαl
@vinaypuppal
Sep 24 2016 22:35 UTC
@grantknaver and to fix mobile nav use this media query
@media(max-width: 760px){
.navbar-nav{
width: 100%;
}
.navbar-nav > li {
display: block;
}
}
grantknaver
@grantknaver
Sep 24 2016 22:37 UTC
bootstrap uses a default mobile setting correct do I need a media query stating such. I was under the impression I did not.
vínαч puppαl
@vinaypuppal
Sep 24 2016 22:39 UTC
as we are overriding default bootstrap navbar css as i mentioned here so it will break mobile nav so in order to fix it we need this css also
@grantknaver
grantknaver
@grantknaver
Sep 24 2016 22:40 UTC
thanks
thank you
grantknaver
@grantknaver
Sep 24 2016 22:47 UTC
@vinaypuppal, if I understand calc() correctly when you suggested width: calc(100% - 160px). That would set a 80px margin on the right and left, correct?
vínαч puppαl
@vinaypuppal
Sep 24 2016 22:49 UTC
@grantknaver no since you have navbar-brand element of width 160px so in order to give rest of space to navbar links i used calc(100% - 160px) that way navbar links will be centered
@grantknaver if you are wondering how i got width 160px of navbar-brand i saw it in chrome dev tools, the rendered element has width approx 160px :smile:
grantknaver
@grantknaver
Sep 24 2016 22:52 UTC
I never use Chrome, but instead mozilla how do you open the tools again
f12?
vínαч puppαl
@vinaypuppal
Sep 24 2016 22:54 UTC
@grantknaver easy way to go to that element is right click on navrbar-brand element and select inspect element option
Darnetta
@NettyBetty
Sep 24 2016 22:54 UTC
Hello! I have quick question about Git Bash, if anyone is familiar.
grantknaver
@grantknaver
Sep 24 2016 22:54 UTC
Lets pretend I did not ask that lol
vínαч puppαl
@vinaypuppal
Sep 24 2016 22:55 UTC
@grantknaver :smile:
grantknaver
@grantknaver
Sep 24 2016 22:56 UTC
@vinaypuppal thanks
CamperBot
@camperbot
Sep 24 2016 22:56 UTC
grantknaver sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: grantknaver already gave vinaypuppal points
grantknaver
@grantknaver
Sep 24 2016 23:03 UTC
@vinaypuppal im not seeing the 160px
Im looking but to no avail
vínαч puppαl
@vinaypuppal
Sep 24 2016 23:05 UTC
@grantknaver let me show you
grantknaver
@grantknaver
Sep 24 2016 23:05 UTC
I can see the font size and everything else but the the approx width is missing
vínαч puppαl
@vinaypuppal
Sep 24 2016 23:05 UTC
grantknaver
@grantknaver
Sep 24 2016 23:05 UTC
gotcha
vínαч puppαl
@vinaypuppal
Sep 24 2016 23:06 UTC
@grantknaver its around 138px exactly as you see in Box Model tab
grantknaver
@grantknaver
Sep 24 2016 23:06 UTC
but 168 with margin and everything included
vínαч puppαl
@vinaypuppal
Sep 24 2016 23:07 UTC
@grantknaver yes exactly so you can use 168px instead of 160px
grantknaver
@grantknaver
Sep 24 2016 23:07 UTC
gotcha
grantknaver
@grantknaver
Sep 24 2016 23:24 UTC
@vinaypuppal OK I am starting to understand the centering aspect, but the brand refuses to center the suggestion you had centered the rest of the nav, but not the brand.
vínαч puppαl
@vinaypuppal
Sep 24 2016 23:25 UTC
Oh you want to center brand also
grantknaver
@grantknaver
Sep 24 2016 23:25 UTC
ya lol
hahaha.
I was like... what am I missing lol
The real goal was to center the brand and the nav at monitor size, and the brand at mobile size
vínαч puppαl
@vinaypuppal
Sep 24 2016 23:31 UTC
@grantknaver oh okay i just thought you only want to centre nav links
This would be easy i think, let me check css
grantknaver
@grantknaver
Sep 24 2016 23:32 UTC
Thx
vínαч puppαl
@vinaypuppal
Sep 24 2016 23:42 UTC

@grantknaver remove previous CSS i suggested and add this

 .navbar .container-fluid{
width: calc(100% - 520px);
margin: 0 auto;
}

but you need to tweak width as screen size decreases

grantknaver
@grantknaver
Sep 24 2016 23:44 UTC
k thanks
@vinaypuppal thank you. You are AWESOME!
CamperBot
@camperbot
Sep 24 2016 23:45 UTC
grantknaver sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
vínαч puppαl
@vinaypuppal
Sep 24 2016 23:46 UTC
@grantknaver i think these media queries may be useful if you need to tweak width
@media(max-width: 1020px){
.navbar .container-fluid{
width: 60%;
margin: 0 auto;
}
}

@media(max-width: 800px){
.navbar .container-fluid{
width: 80%;
margin: 0 auto;
}
}
grantknaver
@grantknaver
Sep 24 2016 23:49 UTC
what are you subtracts when you sub 520px/
?
Rami
@RNwebdk
Sep 24 2016 23:50 UTC
Can someone tell me why i dont need any parenthesis in the last couple of lines here?
var player1 = {Name: "Freddy", Level: 22, Score: 159753 }
var player2 = {Name: "Philip", Level: 43, Score: 994658 }

function playerDetails(){
//return player details
console.log("Player " + this.Name + " is in level " + this.Level + " and have a score of " + this.Score + ". Keep up the good work");
}

// Why can't i use parenthesis on the playerDetails()
player1.playerLog = playerDetails;
player2.playerLog = playerDetails;
player1.playerLog();
player2.playerLog();

I'm talking about the area right here:

player1.playerLog = playerDetails;
player2.playerLog = playerDetails;

why can't i do like this

player1.playerLog = playerDetails();
player2.playerLog = playerDetails();
vínαч puppαl
@vinaypuppal
Sep 24 2016 23:53 UTC
@grantknaver some random value which centered in my browser screen size that's why i told you tweak width for diff screen sizes. You can also try just width: 50%` if you feels its good on large screen and increase width as screen size decreases as i did here
grantknaver
@grantknaver
Sep 24 2016 23:55 UTC
OK that should work