These are chat archives for FreeCodeCamp/HelpFrontEnd

27th
Jul 2016
Kevin Murphy
@kaym0
Jul 27 2016 00:01
Hey, I am now writing pages for myself outside of CodePen, unfortunately learning on CodePen has crippled me and I don't know how to actually include javascript/jquery so that it all connects to my html file
I have this in my .HTML fiole
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jCalc.js"></script>
.jCalc.js is actually in the same folder, so shouldn't that work?
I'm running the site straight from the folder, but the Javacsript isn't working. Though it works on CodePen (with the above HTML removed and jquery turned on in the settings)
If somebody could explain this to me, or just tell me that the javascript doesnt load when it's not actually online or something that would be great
Otherwise I just need to be told how to include the files in the html so it loads correctly
Patrick
@patrick3allen
Jul 27 2016 00:04
@AlexanderNelson I am feeling like an idiot on the same issue, I have spent hours on just trying to get my navbar to line up correctly... I needed to add: .nav li a {display: inline-block;} to the CSS portion of the page... uhg
Kevin Murphy
@kaym0
Jul 27 2016 00:05
I think that FREECODECAMP should actually teach people about how to use an actual website cPanel, how to upload files and include the proper code to load the files together too. When I transitioned off of CodePen, I felt literally retarded knowing all this code and not knowing how to use that stuff or how to include your .js file in the HTML
AlexanderNelson
@AlexanderNelson
Jul 27 2016 00:06
@patrick3allen ahhh its a navbar! i havent even figured out how to get a banner with buttons that has a drop shadow. thanks for the navbar.
CamperBot
@camperbot
Jul 27 2016 00:06
alexandernelson sends brownie points to @patrick3allen :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @patrick3allen |http://www.freecodecamp.com/patrick3allen
Patrick
@patrick3allen
Jul 27 2016 00:07
@AlexanderNelson lol, don't thank me yet... :smile:
CamperBot
@camperbot
Jul 27 2016 00:07
patrick3allen sends brownie points to @alexandernelson :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @alexandernelson |http://www.freecodecamp.com/alexandernelson
Kevin Murphy
@kaym0
Jul 27 2016 00:08
Me question is pretty simple. How do I include jQuery and my .js file in my HTML so that it will work when I'm viewing it, even offline?
AlexanderNelson
@AlexanderNelson
Jul 27 2016 00:09
@kaym0 id like to know as well. i had problems running the pen project in cloud9 or through the browser. half the code stops working
readytocode123
@readytocode123
Jul 27 2016 00:09
@kaym0: you basically save the jquery and js file in your local directory and then link to those local files instead of any external link when you call in the <script> tags.
nirurin
@nirurin
Jul 27 2016 00:09
I've used this example here (http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy_affix&stacked=h) in order to make a navbar that starts below the banner, but then scrolls to the top of the page and sticks there. I'm almost sure I've added everything I need from the example, and the navbar does start and end in the right places... but it doesnt scroll smoothly, it just jumps from the start position to the top. Anyone know what I'm missing?
Kevin Murphy
@kaym0
Jul 27 2016 00:10
Yes, but what's the exact code. I don't know the code?
We don't learn it here.
Outside of Codepen, you don't throw your code into different boxes that automatically connect.
You actually have to connect them using html, but I don't know what the html is :P
Patrick
@patrick3allen
Jul 27 2016 00:11
@kaym0 and @AlexanderNelson I have been looking at w3school for learning examples. when I click on the try it now button to look at the code it shows the scripts in the head of the file... http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy&stacked=h
Kevin Murphy
@kaym0
Jul 27 2016 00:11
And since my jQuery link is linked to a webpage, will it load even though im running the page from a folder? I still have internet. I was wondering if that may cause an issue

Ok so here is what I have typed in my HTML file

<head>
<link href='http://fonts.googleapis.com/css?family=Quicksand:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://codepen.io/kaymo/pen/bZKwPX.css">
<script type="text/javascript" href="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" href="jCalc.js"></script>
</head>

It does load the .CSS file
Though the javascript doesn't work, I made a calculator and it doesn't work. Though I'm using the same code and it DOES work on CodePen
AlexanderNelson
@AlexanderNelson
Jul 27 2016 00:17
@patrick3allen i use w3 alot as well. im not exactly clear what to call what i need to google.
Kevin Murphy
@kaym0
Jul 27 2016 00:18
Man I'm like super surprised nobody knows how to load a javascript file in a web design chatroom
readytocode123
@readytocode123
Jul 27 2016 00:18
@kaym0 : most likely no...
here's your issue
instead you want to download that file... and put it in the folder where your html is...
Kevin Murphy
@kaym0
Jul 27 2016 00:18
Yes, the same link that CodePen.io gave me
readytocode123
@readytocode123
Jul 27 2016 00:18
and then just do this:
Kevin Murphy
@kaym0
Jul 27 2016 00:19
How do I download it? When I go tot he link it shows me text
Is there a way to do that?
readytocode123
@readytocode123
Jul 27 2016 00:19
<script type="text/javascript" href="jquery-2.2.4.min.js"></script>
that's when volia! it works on its own
yeah dude it's easy, um lemme find a link for you to download it..should just be on the site somewhere or just like a download as right click :)
haha dont worry we know how to link JS files.. the rest of peeps on here are probably tired of answering these basic simple questions so often ;)
Kevin Murphy
@kaym0
Jul 27 2016 00:21
I'm done everything in Front End Certifcation besides a few projects.
It's crazy that you don't learn this most basic thing in the training lol
AlexanderNelson
@AlexanderNelson
Jul 27 2016 00:21
Screenshot 2016-07-26 at 20.19.56.png
Kevin Murphy
@kaym0
Jul 27 2016 00:21
It would be okay if I forever used CodePen
readytocode123
@readytocode123
Jul 27 2016 00:22
@kaym0 http://jquery.com/download/ just go here.. download whatever version you want...
save in your folder... link accordingly to whatever you name it.
and should work.
you should learn how to do it regardless
and then yeah you can lean on codepen thereafter
but it would be messy if you couldn't build your own site and link files when you need to...
Alex Frara
@alexfrara
Jul 27 2016 00:23
im stuck
Kevin Murphy
@kaym0
Jul 27 2016 00:24
It still opens as text
readytocode123
@readytocode123
Jul 27 2016 00:25
@kaym0 what file did you save it as? what's your header script file look like? show me. let's fix this now haha.
Kevin Murphy
@kaym0
Jul 27 2016 00:27
Ok so, I have this in HTML now

<link rel="stylesheet" type="text/css" href="jCalc.css">

<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jCalc.js"></script>

The file is saved as jquery-3.1.0.min.js
readytocode123
@readytocode123
Jul 27 2016 00:28
is that in the same folder or directory as your html?
Kevin Murphy
@kaym0
Jul 27 2016 00:28
Yeah
As well as the css, js too
readytocode123
@readytocode123
Jul 27 2016 00:28
and you want the bootstrap to load too... so have to download that and do the same.
you don't see any differences?
Kevin Murphy
@kaym0
Jul 27 2016 00:28
The bootstrap is irrelevent right now
So let's pretend it's not there, because it's not part of the problem lol
readytocode123
@readytocode123
Jul 27 2016 00:29
lol tru
hm shud work. have you uploaded it on github?
or whats codepen link i can look at it. thats strange
try saving file and refreshing browser page too
Kevin Murphy
@kaym0
Jul 27 2016 00:30
Yeah Ill link one moment
It's the exact same code,
原田 美幸
@mykhrd
Jul 27 2016 00:32

<!DOCTYPE html>

<html lang="en">

<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>

Beth Qiang
@bethqiang
Jul 27 2016 00:33
why does the navbar work on a lot of codepens on desktop, but not on mobile? (asking both for my site, which i've seem to have broken [it worked earlier today :(], but it's a common theme i've seen)
readytocode123
@readytocode123
Jul 27 2016 00:33
@kaym0, i think i know where you're going wrong. do you have a separate js file? are you linking it similar to how you linked jquery? thats what you gotta do for it to look the same as in codepen
Kevin Murphy
@kaym0
Jul 27 2016 00:34
There is a seperate JS file
One called jCalc.js
That's in the folder
readytocode123
@readytocode123
Jul 27 2016 00:34
okay but your head doesn't have it referenced im guessing
readytocode123
@readytocode123
Jul 27 2016 00:34
hahaha
yup
wait lemme copy and paste
Kevin Murphy
@kaym0
Jul 27 2016 00:35
It is referenced,

<link rel="stylesheet" type="text/css" href="jCalc.css">

<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="jCalc.js"></script>

The third line there
readytocode123
@readytocode123
Jul 27 2016 00:35
brb downloading local copy
Kevin Murphy
@kaym0
Jul 27 2016 00:36
If you take the .js file I linked you above, just change it to .html and you will see that it's listed
readytocode123
@readytocode123
Jul 27 2016 00:36
and you have a jCalc.js and jCalc.css listed right?
Kevin Murphy
@kaym0
Jul 27 2016 00:37
What do you mean by listed?
readytocode123
@readytocode123
Jul 27 2016 00:38
1 min
Kevin Murphy
@kaym0
Jul 27 2016 00:38
Please view the HTML here.
It's in the first few lines that it's referenced, as per usual
This is the HTML that I am using offline as well.
Well, from my folder, I should say.
As you can tell, jCalc.css and jCalc.js are both referenced. Though only jCalc.css is working
It is blowing my mind bc it works on codepen
Does javascript just not work when you're running pages from your computer?
I even changed the links to mimic the exact links online that the CodePen uses.
That didnt work either
readytocode123
@readytocode123
Jul 27 2016 00:43
well...i got it working using your files lol.
let me screenshot what i have on my computer
basically if its not loading
you probably named the files wrong on your computer
so instead of jCalc with a capital C you may have just typed jcalc
or some other small errors like that
Kevin Murphy
@kaym0
Jul 27 2016 00:45
Do I need a jaVASCRIPT compiler on my computer?
Cause I can assure you everything is labeled and named correctly
readytocode123
@readytocode123
Jul 27 2016 00:45
NO! javascript works automatically dude.
you're on a pc right?
do this simple test...
change file names to
1.css
and 1.js
and change your html to link to 1 for both css and JS
and then save
and refresh
readytocode123
@readytocode123
Jul 27 2016 00:46
volia.
does the calculator load when you open html?
does it process? can u add and subtract and all
if not just run my solution and tell me results
Kevin Murphy
@kaym0
Jul 27 2016 00:48
Everything works but hte javascript dude
readytocode123
@readytocode123
Jul 27 2016 00:49
open your JS file... there must not be the JS in it then. lol.
or switch browsers. that's really weird.
Kevin Murphy
@kaym0
Jul 27 2016 00:50
There's JS in the file
readytocode123
@readytocode123
Jul 27 2016 00:51
http://imgur.com/a/k1Tys this what you see when u load yours?
@kaym0 or seeing something else?
Greg Duncan
@GregatGit
Jul 27 2016 01:18
@kaym0 You have html at the end of you code pen link that you pasted- just remove that
Kevin Murphy
@kaym0
Jul 27 2016 01:19
Without the 36 yes
Greg Duncan
@GregatGit
Jul 27 2016 01:19
@kaym0 You should try to avoid getting values from the html - but rather let the javascript populate the html.
Kevin Murphy
@kaym0
Jul 27 2016 01:20
That's exactly what is happening
The issue is javascript not loading outside of codepen.io
It doesn't work on my desktop or on my actual site
But the kavacript runs fine on codepen.io
Can you explain that
Lmfao it's the filename jcalc
I used jcalc and changed it to site instead and it magically works
While jcalc still doesn't
Greg Duncan
@GregatGit
Jul 27 2016 01:24
@kaym0 so are you setting up a local host to run your calculator?
Kevin Murphy
@kaym0
Jul 27 2016 01:25
Yes
The entire issue wad that naming files jCalc fucked it up. No idea why. I have both uploaded and the files are the exact same
Greg Duncan
@GregatGit
Jul 27 2016 01:25
@kaym0 you should set up a folder called js and save jQuery in that folder
Kevin Murphy
@kaym0
Jul 27 2016 01:26
Yet jCalc doesn't work while site does
Site.html,site.css,site.js VS jCalc.html,jCalc.css,jCalc.js
Explain that. It doesn't make sense.
CamperBot
@camperbot
Jul 27 2016 01:27
no wiki entry for: that it doesnt make sense
Greg Duncan
@GregatGit
Jul 27 2016 01:28
@kaym0 have you made a small local page before?
Kevin Murphy
@kaym0
Jul 27 2016 01:28
Yes
Greg Duncan
@GregatGit
Jul 27 2016 01:28
Use that as your template
Kevin Murphy
@kaym0
Jul 27 2016 01:29
Thanks to the guy who helped me troubleshoot
I wish I changed the HTML filename sooner, this wouldn't have even been a problem
TIME TO WORK ON CSS
Greg Duncan
@GregatGit
Jul 27 2016 01:33
@kaym0 If you haven't felt like throwing your keyboard through the screen you haven't lived. I spent ages trying to get gulp and sass working yesterday -it almost killed me. Turned outed I just missed a couple of key steps. Good luck
Kevin Murphy
@kaym0
Jul 27 2016 01:33
Yes I have done this many use typically with other languages
Ironically the issue was about the file name and not about my code at all.
Though a lesson to never name a file jCalc ever again is a lesson nonetheless
AlexanderNelson
@AlexanderNelson
Jul 27 2016 01:59
All that was frightening. I almost understand how a navbar works. 5 hours later. I may go back in a couple months and find out why the first project only works in codepen
Michael Karpinski
@karpimpski
Jul 27 2016 02:08
@karpimpski
hey guys, I have a bit of an issue with my new Tic-Tac-Toe game (I've already completed FCC's front-end course, I'm just revisiting this while I learn back-end). when I fade in a letter it takes away the border while it fades as well. I know exactly WHY this happens, I knew that would happen when I wrote it with plans to fix it later. I'm just not sure how to fix it
http://codepen.io/karpimpski/pen/vKjrPV?editors=0010
kelly
@kwhms
Jul 27 2016 02:26
Hi - I'm working on the SimonSays project and am trying to code it as an object. I am having a problem with the scope of this and that in a method with the mouse event handler, initPadHandler. The first time I click on the green pad, it works as expected but then subsequent clicks 'that' is undefined. So I'm confused how to make an event handler access the object. Can anyone advise? http://codepen.io/kwhms/pen/NArWYL?editors=0110
Mark
@cityproject
Jul 27 2016 02:41
hello. im trying to create a single page app using API, and i want to know ways to have the content of the each pots links rendered inside a specfic div upon each click, without refreshing the whole page. can anyone help me out? this is the live site : http://192.241.153.25:8000/ (try clicking on the individual posts) Mostly, it's just appending each different content into a div upon click on each article that need help with :p
Michael Karpinski
@karpimpski
Jul 27 2016 02:50
http://codepen.io/karpimpski/pen/vKjrPV?editors=1000
I know I just recently posted this, but I made some improvements and somebody made some comments on my JavaScript (which I greatly improved). the main noticeable thing I added was better animations. please check it out and let me know what you think!
Greg Duncan
@GregatGit
Jul 27 2016 02:55
@kwhms your game is off and going when you open up the page. You have named your variables and functions in a cryptic manner. that = emelment? what element? what is 'that' meant to mean? It if very hard to follow your code
Greg Duncan
@GregatGit
Jul 27 2016 03:00
@kwhms I recomend writiing independent functions that are easy to follow and clearly name and never write that = this
nirurin
@nirurin
Jul 27 2016 03:02
Hi again everyone, once again I'm having a really annoying bug that I can't pin down lol. When you scroll down my page, the navbar scrolls up to the top and then sticks there (this part is correct). But just as the navbar touches the top, the page just below it (page 1 of the site basically) jumps up a notch. If I use chrome inspect, I can see that at that moment the navbar goes from being on top of the page, to floating over the page, and so the page jumps to the top of the screen... this isnt intended, and it doesnt seem to work this way on the example I used. Any ideas? http://codepen.io/nirurin/pen/kXJzOg
Greg Duncan
@GregatGit
Jul 27 2016 03:15
@nirurin if you change the background to an image you might be able see what is happing. Is the the whole div jumping up or just the <h2> element
nirurin
@nirurin
Jul 27 2016 03:17
the whole div, it seems
I can change it to a picture if it helps
Greg Duncan
@GregatGit
Jul 27 2016 03:18
the dark blue div
nirurin
@nirurin
Jul 27 2016 03:19
yeh
Greg Duncan
@GregatGit
Jul 27 2016 03:25
do you think there might be some padding or magin causing the problem
Chris Cuevo
@ccuevo
Jul 27 2016 03:25
Hello all, got a quick question. For the random quote challenge, where do you actually get and pull up quotes?
nirurin
@nirurin
Jul 27 2016 03:28
@GregatGit ok I put a picture as the background. took a while cos my pictures wouldn't link to codepen -.-
well it seems as if the navbar is changing from being above the page (as in like... in front of it in the queue) to then hovering over the page. And as soon as it starts to hover, the pages have to jump up to fill the space it's leaving behind
but the example I worked from didn't do this. but I can't see any extra margins or anything it's using. Unless it's something in jquery that it doesnt mention...
Greg Duncan
@GregatGit
Jul 27 2016 03:35
@nirurin do you have the link the example
im inspecting the code for it now to see if i can find out what it does
nirurin
@nirurin
Jul 27 2016 03:41
ok so... it seems that they fix it by using this - .affix ~ .container-fluid {
position: relative;
top: 50px;
}
which adds a gap at the top... but I have this on my version too and it doesnt seem to work
Greg Duncan
@GregatGit
Jul 27 2016 03:46
@nirurin you may need to start again using their template and just keep testing it as you replace their html with yours - it's probably something quite simple that you've missed
tommy
@tommygebru
Jul 27 2016 03:47
This message was deleted
nirurin
@nirurin
Jul 27 2016 03:56
the issue seems to be that theres a css that isnt working
.affix + .container-fluid {top: 50px}; - I assume this is meant to add the top to all container-fluid containers when the affix property is added
nirurin
@nirurin
Jul 27 2016 04:04
ok so I found a fix... I add a nav-wrapper div around the whole navbar code, and make it have a minimum height of 50px. Solution I found by googling other people who had the issue. No clue why the css code isnt working
JD Tadlock
@jdtdesigns
Jul 27 2016 04:13
@nirurin what's the problem you're having?
Brooks Van Buren
@woofiewilly
Jul 27 2016 04:21
Anyone know how I can make the .container scale it's height to fit what is inside? If I take off the explicit height, it will decrease to nothing
JD Tadlock
@jdtdesigns
Jul 27 2016 04:23
@woofiewilly What are you trying to achieve? Do you have an image example of your goal. You're definitely approaching it in a way that will make it difficult to style.
Brooks Van Buren
@woofiewilly
Jul 27 2016 04:36
blob
@jdtdesigns I want it to only be as tall as it needs to be
@woofiewilly
Brooks Van Buren
@woofiewilly
Jul 27 2016 04:51
@jdtdesigns I have the classes structured in a way that allows the card to flip around. The .card child needs position absolute in order to put the faces on the backs of each other, and the .card needs position relative. Because of this the size of container doesn't care about whats inside
JD Tadlock
@jdtdesigns
Jul 27 2016 05:26
@woofiewilly Sorry for the late reply. You can use jquery to get the height of the .front or .back and set the card height to those heights. I'll let you figure out the setting based on which face is currently viewable. ;)
Rohan Mohammad
@reolander
Jul 27 2016 06:45
Hi the sample portfolio page of FCC is not loading properly right?
^This one
kirbyedy
@kirbyedy
Jul 27 2016 06:46
looks like it...
I dont see the pictures
Rohan Mohammad
@reolander
Jul 27 2016 06:47
^Yeah, exactly!
Sorin Ruse
@sorinr
Jul 27 2016 06:50
@rohan222 yep. no imgs. the links are broken 404 not found
r2d2
@UsamaHameed
Jul 27 2016 07:11
Hi, does anyone know about a function which converts javascript strings to strings that can passed as GET vars? Like every space would be converted to %20 character and same for every non word character.
Sorin Ruse
@sorinr
Jul 27 2016 07:13
@UsamaHameed .split by " " .join by "%20"
Sorin Ruse
@sorinr
Jul 27 2016 07:18
@UsamaHameed like: var str = "Keep calm an enjoy coding"; then: var newstr = str.split(" ").join("%20");
r2d2
@UsamaHameed
Jul 27 2016 07:19
@sorinr I found a decent function: encodeURI check it out, thanks anyways
CamperBot
@camperbot
Jul 27 2016 07:19
usamahameed sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 558 | @sorinr |http://www.freecodecamp.com/sorinr
Lee
@leebut
Jul 27 2016 07:24
Hello Folks. I'm on the Random Quote Machine challenge. When I click the Twitter link, the tweet box is empty, and when I inspect the element in my browser it returns this:
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=" do="" more="" than="" dream:="" work.="">Tweet</a>. So it looks like the quote has become keys with no value. Do I need to create an array of the quote and then put that into the link?
Here's the code:
$(document).ready(function()
        {
            $("#showQuote").on("click", function()
                    {
                    $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&key=457659&format=jsonp&lang=en&jsonp=?", function(json)
                            {
                        $(".quote").html("<h2><sup><i class='fa fa-quote-left fa-6x'></i></sup>" + json.quoteText + "<sup><i class='fa fa-quote-right fa 6x'></i></sup></h2>");
                        $(".author").html("<small>"+json.quoteAuthor);
                        $(".twitter").html("<a class='twitter-share-button' href='https://twitter.com/intent/tweet?text='" + json.quoteText + ">Tweet</a>")
                            });
                    });
        });
kirbyedy
@kirbyedy
Jul 27 2016 07:25
@leebut I think it is easier to just load the quote that is already populated in your html with jquery
Sorin Ruse
@sorinr
Jul 27 2016 07:25
@leebut can u post the pen link
Lee
@leebut
Jul 27 2016 07:26
@sorinr It's not on Code Pen. I'm testing locally.
@kirbyedy I thought that is what I was doing with json.quoteText.
I thought concatenating the URL to the json.quoteText would have worked.
Sorin Ruse
@sorinr
Jul 27 2016 07:29
@leebut i've seen :) i think you missed something here: href='https://twitter.com/intent/tweet?text='" + json.quoteText + "> it should be : href='https://twitter.com/intent/tweet?text='" + json.quoteText + "'>
@leebut its about alternating " with 'when you concatenate
kirbyedy
@kirbyedy
Jul 27 2016 07:32
$("#tweet").on("click", function() {
    window.open("http://twitter.com/home/?status=" + $("#quote").text());
  });
@leebut I was thinking about something like this
that last part loads your already shown quote from html
of course you have to adjust it for your case, this is just an example
Lee
@leebut
Jul 27 2016 07:33
@sorinr That's working now, thank you. I also had to remove ' from tweet?text='" as well.
CamperBot
@camperbot
Jul 27 2016 07:33
leebut sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 559 | @sorinr |http://www.freecodecamp.com/sorinr
Lee
@leebut
Jul 27 2016 07:34
So what I'd done is closed the link before it was complete.
@kirbyedy I see. I've not seen window.open before, so I assume that would open a new browser tab. You have a different URL as well.
I searched the Twitter documentation and found the Twitter button page. Thank you for your alternative.
CamperBot
@camperbot
Jul 27 2016 07:35
leebut sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1292 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Sorin Ruse
@sorinr
Jul 27 2016 07:37
@leebut yep. when you start a string by " you should finish it by " and if you have to concatenate things like href= or src= you should use '"+myvarhere+"'
@leebut and viceversa if you start with ' you alternate with "
James Bond
@Dman89
Jul 27 2016 07:43
im bored who needs help?
Lee
@leebut
Jul 27 2016 07:52
Thank you for the help.
Sorin Ruse
@sorinr
Jul 27 2016 07:53
@leebut welcome
Lee
@leebut
Jul 27 2016 07:54
It seems that Twitter has some kind of security policy problem.
Sorin Ruse
@sorinr
Jul 27 2016 07:55
are you trying to really submit to twitt?
Lee
@leebut
Jul 27 2016 07:55
Console return this on the Twitter page:
Content Security Policy: Directive 'frame-src' has been deprecated. Please use directive 'child-src' instead. (unknown)
Content Security Policy: The page's settings blocked the loading of a resource at self ("script-src https://connect.facebook.net https://cm.g.doubleclick.net https://ssl.google-analytics.com https://graph.facebook.com https://twitter.com 'unsafe-eval' https://*.twimg.com https://api.twitter.com https://analytics.twitter.com 'nonce-o8As0WRpXXCQuoXj8zdxZg==' https://publish.twitter.com https://ton.twitter.com https://syndication.twitter.com https://www.google.com https://t.tellapart.com https://platform.twitter.com https://www.google-analytics.com https://twitter.com").
It says in the challenge that the user should be able to click a button to tweet the quote.
Sorin Ruse
@sorinr
Jul 27 2016 08:01
just show the "intent" to send the quote. to really send it you need to authenticate with the twitter api
and thats not a request from fcc
Lee
@leebut
Jul 27 2016 08:02
Maybe it's because I'm not logged in to Twitter.
I've read about Oauth or something like that, but online docs suggest not using JavaScript with it.
Sorin Ruse
@sorinr
Jul 27 2016 08:03
Lee
@leebut
Jul 27 2016 08:09
The other thing is, I think I need a twitter library because class="twitter-share-button" does not display a button like as shown here: https://dev.twitter.com/web/tweet-button
I have widgets.js in my head <script async src='//platform.twitter.com/widgets.js' charset='utf-8'></script>.
Beth Qiang
@bethqiang
Jul 27 2016 08:10
does anyone here have experience putting a portfolio on github and can help me troubleshoot? (basically, i think everything's there except bootstrap doesn't seem to have loaded properly)
Lee
@leebut
Jul 27 2016 08:11
@GregatGit Thank you for that. I'll have to examine it to see how it works.
CamperBot
@camperbot
Jul 27 2016 08:11
leebut sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 711 | @gregatgit |http://www.freecodecamp.com/gregatgit
Tim Handy
@TimHandy
Jul 27 2016 08:26
Hi all, anyone got 5 min to give me some advice on my random quote generator please? Having a few issues I can't figure out... my 'tweet' text does not display the twitter button, and not sure how to escape the apostrophe's when I insert the tweet into the link... think I might be approaching it in a bad way. http://codepen.io/timhandy/pen/akGGwJ
Sorin Ruse
@sorinr
Jul 27 2016 08:34
@TimHandy here is a link shared by @GregatGit that i find useful : http://gpiot.com/blog/elegant-twitter-share-button-and-dialog-with-jquery/
Tim Handy
@TimHandy
Jul 27 2016 08:38
@sorinr Thanks, I'll have a read.
CamperBot
@camperbot
Jul 27 2016 08:38
:cookie: 560 | @sorinr |http://www.freecodecamp.com/sorinr
timhandy sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Jul 27 2016 08:39
@GregatGit thank you for sharing the link for jq twitt
CamperBot
@camperbot
Jul 27 2016 08:39
sorinr sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 712 | @gregatgit |http://www.freecodecamp.com/gregatgit
donbale
@donbale
Jul 27 2016 08:46
Hi guys I hope all is, I'm sure this is very simple and I'm probably trying to google answer the wrong thing, but can someone point me in the direction of some info on converting JSON to html. The example shown in the course uses forEach, but I am pulling a singular json object from an api and forEach doesnt appear to work correctly and fives me the error forEach is not a function
Ben Line
@Benwebdev
Jul 27 2016 08:48
@donbale Does this help http://jsfiddle.net/T7eQg/1/
@donbale Or is it a single JSON value?.
donbale
@donbale
Jul 27 2016 08:53
@Benwebdev Hi Ben cheers for answering, it is a single JSON array I am pulling for the random quote generator. In he fiddle example the code actually states the array, I have tried this code like this: var jsonObj = $.parseJSON(json);
But that doesn't work
Ben Line
@Benwebdev
Jul 27 2016 08:58
@donbale I found this codepen online http://codepen.io/thelittleblacksmith/pen/qbOgwG maybe this will help you.
Jackson Bates
@JacksonBates
Jul 27 2016 08:59
@bethqiang do you still need help with the portfolio on gh-pages?
Martialis39
@Martialis39
Jul 27 2016 09:04
hey guys quick question
im trying to get thumbnail images from codepen for my portfolio page
Ben Line
@Benwebdev
Jul 27 2016 09:04
@Martialis39 Ya :)
Martialis39
@Martialis39
Jul 27 2016 09:04
can it be done? Or do I have to take screenshots and do it manually?
I inspected the thumbnails in the grid but the src link I got gives me an error
Ben Line
@Benwebdev
Jul 27 2016 09:05
What src link ?.
link me to the codepen ?.
donbale
@donbale
Jul 27 2016 09:05
@Benwebdev Hmm ok thank you, that codepen is using its own set of quotes rather than drawing from an API but thankyou
CamperBot
@camperbot
Jul 27 2016 09:05
donbale sends brownie points to @benwebdev :sparkles: :thumbsup: :sparkles:
:cookie: 295 | @benwebdev |http://www.freecodecamp.com/benwebdev
Martialis39
@Martialis39
Jul 27 2016 09:05
ok so this is my actual codepen
Lee
@leebut
Jul 27 2016 09:05
@Martialis39 The only way I know is to link to online images.
Martialis39
@Martialis39
Jul 27 2016 09:05
i right click on portoflio site for example, click inspect
Ben Line
@Benwebdev
Jul 27 2016 09:06
@donbale Ohh so it is, sorry about that.
Martialis39
@Martialis39
Jul 27 2016 09:06
find the image itself, see it has a "src=''"
CamperBot
@camperbot
Jul 27 2016 09:06
find the image itself see it has a src
nothing found
Martialis39
@Martialis39
Jul 27 2016 09:06
@leebut OK, so I need to make the images myself, got it, thanks : )
CamperBot
@camperbot
Jul 27 2016 09:06
martialis39 sends brownie points to @leebut :sparkles: :thumbsup: :sparkles:
:cookie: 294 | @leebut |http://www.freecodecamp.com/leebut
Ben Line
@Benwebdev
Jul 27 2016 09:07
@Martialis39 Ya @leebut is spot on :).
Martialis39
@Martialis39
Jul 27 2016 09:07
Could I use <iframe>?
Ok it looks like yes I can
Zeeshan Haider
@zeeshan72
Jul 27 2016 09:08
@Martialis39 add img-thumbnail class to your image tag
Martialis39
@Martialis39
Jul 27 2016 09:10
@zeeshan72 The issue is I have no image :)
Zeeshan Haider
@zeeshan72
Jul 27 2016 09:18
@Martialis39 you can use this site http://placehold.it/
you can capture thumbnails from here. check it. it is pretty cool.
@Martialis39 if you like kittens there is http://placekitten.com/
Martialis39
@Martialis39
Jul 27 2016 09:23
I doo like kittens ...
One thing do, trying to use iframe
as that seems to be the simplest way
the 3rd one has some width and height applied to it as well. Is this an acceptable way to do it_
?
Zeeshan Haider
@zeeshan72
Jul 27 2016 09:30
@Martialis39 i think it may be accetable.
good approach any way
Martialis39
@Martialis39
Jul 27 2016 09:32
@zeeshan72 thank you sir! I\ll see what I can do about hiding the scroll bars
CamperBot
@camperbot
Jul 27 2016 09:32
martialis39 sends brownie points to @zeeshan72 :sparkles: :thumbsup: :sparkles:
:cookie: 224 | @zeeshan72 |http://www.freecodecamp.com/zeeshan72
Zeeshan Haider
@zeeshan72
Jul 27 2016 09:36
please cheack my tribute page and
sorry check my page and comment https://codepen.io/zeeshan72/pen/NArRNm
are the margins, paddings, fonts ok
Martialis39
@Martialis39
Jul 27 2016 09:38
looks good, IMO the font is a bit inconsistent and it might look better if the footer part in particular had something more consistent
Zeeshan Haider
@zeeshan72
Jul 27 2016 09:39
you mean the font I used for angel of mercy should be normal??
Thanks, I changed it to normal..
Martialis39
@Martialis39
Jul 27 2016 09:46
Just my opinion though and turns out I don\t really have a knack for design : D
Haib Zhang
@nperhb
Jul 27 2016 10:11

$(document).ready(function() {
$("button").hover(function() {
$(this).css("opacity", "0.9");
}, function() {
$(this).css("opacity", "0.5");
});

$(".button-twitter").hover(function() {
$(this).css("color", "#4099ff");
}, function() {
$(this).css("color", "#000000");
});

$(".button-new").hover(function() {
$(this).css("color", "#00ff7f");
}, function() {
$(this).css("color", "#000000");
});

$(".button-new").click(function(){

      $(".quote-board").css("transform", "rotateY(0deg)");
      $(".quote-board").removeClass("quote-rotate");
alert();
    $(".quote-board").addClass("quote-rotate");

});

}); when I delete the code "alert()" between removeClass() and addClass(), then it doesn't work. who can tell me why? thanks!

Ken Haduch
@khaduch
Jul 27 2016 10:38
@nperhb - I would make a semi-educated guess that it happens so quickly that you don't see it, since you are removing and adding the same class? Maybe more of a wild guess?
@nperhb - try adding a different class and see. Maybe it's optimizing it out somehow? (Although I doubt that.)
Haib Zhang
@nperhb
Jul 27 2016 10:49
@khaduch thank you ! It has solved. I set a setTimeout to the addClass()method, it's a javascript single-threaded problemhttp://javascript.info/tutorial/events-and-timing-depth
CamperBot
@camperbot
Jul 27 2016 10:49
nperhb sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1486 | @khaduch |http://www.freecodecamp.com/khaduch
Stephen James
@sjames1958gm
Jul 27 2016 10:50
@khaduch I believe it isn't seen because the DOM is not rendered until this code returns control back to the browser, so by the time the browser 'sees' it, it hasn't actually changed.
Ken Haduch
@khaduch
Jul 27 2016 10:55
@sjames1958gm - hmmm. So I guess, in a way, the browser is "optimizing" it out. That seems like a reasonable answer - thanks!
CamperBot
@camperbot
Jul 27 2016 10:55
khaduch sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2178 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Ken Haduch
@khaduch
Jul 27 2016 10:55
@nperhb - great that you got it working - thanks for the link to that article. Good luck!
CamperBot
@camperbot
Jul 27 2016 10:55
khaduch sends brownie points to @nperhb :sparkles: :thumbsup: :sparkles:
:cookie: 298 | @nperhb |http://www.freecodecamp.com/nperhb
Muhammad Hasham
@MohammadHasham
Jul 27 2016 11:07
why are the last two name not being shown on the screen by the way there accounts are closed and as a requirement of this project i want them to show up
http://codepen.io/Mohammad_Hasham/pen/QEAVWY?editors=0010
Rudolph
@Dolf666
Jul 27 2016 11:20
hi everyone
I am now working on my portfolio
I wanted to know how should I post the links to my freeCodeCamp portfolio?
Zeeshan72. you have very nice tribute page, well done!
Ridoy Farhad
@ridoyf
Jul 27 2016 11:33
@MohammadHasham Thats because the account is closed. So json isn't returning any name or logo. The simple solution is just to print the name of that user from your html array. eg if(accountclosed) return html[(index of user)];
Joakim Bajoul Kakaei
@Todai88
Jul 27 2016 11:55
I'm looking for advice on how to display the text more nicely on the back-side of the items in the carousel in my codepen:
https://codepen.io/Todai/pen/RRPGwZ
Daniel Jakobian
@KingLouisXVII
Jul 27 2016 12:09
hey peeps, I can not seem to be able to pass the value of "i", generated in a for loop, into a getJSON request inside that for loop. I'm sure I am doing something fundamentally wrong, any help or hint would be appreciated. thanks!
kirbyedy
@kirbyedy
Jul 27 2016 12:11
your monitor is a bit far from here, we cant see you code, so...
how about copy/paste that code here :)
Daniel Jakobian
@KingLouisXVII
Jul 27 2016 12:12
sorry of course, here you go: http://codepen.io/KingLouisXVII/pen/XKYRRz
kirbyedy
@kirbyedy
Jul 27 2016 12:17
@KingLouisXVII so if you console log data you do get a response right ?
I mean I can see object logged into console, so I think its working
what is the exact problem again ?
Daniel Jakobian
@KingLouisXVII
Jul 27 2016 12:22
I want to loop through all the streamers, add their name as a link to the page and request their online status and add that as well. The online status does not get added to the page because i, which I use to construct the class that should be changed, has a value of 8, instead of looping through 0-7.
Sorin Ruse
@sorinr
Jul 27 2016 12:33
@KingLouisXVII what do you wanted to achive by this: var status = ".status" + i; ?
@KingLouisXVII that behaviour its because of the looping goes faster then you get responses from the api
@KingLouisXVII i would use $.ajax call with async = false to make the loop wait until the api responded
spalqui
@spalqui
Jul 27 2016 12:37
Hello guys could someone help me to start the Wikipedia viewer
Daniel Jakobian
@KingLouisXVII
Jul 27 2016 12:38
I only did that once I noticed that I could not change the status inside the braces. thanks I will try that out. Until it works!
Joakim Bajoul Kakaei
@Todai88
Jul 27 2016 12:39
Any clue why this textfield's placeholder doesn't move (I want it to be higher, but the line-height does nothing)?
html:

<input type="text" id="name" placeholder="Name" class="lead"/>

<----------------->


CSS:

input[type=text]{
  width: 70%;
  background: #eee;
  border: none;
  border-bottom: 2px solid #aaa; 
}

input[type=text]::-webkit-input-placeholder{
  line-height: 200%;
}

input[type=text]:focus{ 
  outline: none;
}
Joakim Bajoul Kakaei
@Todai88
Jul 27 2016 12:44
@sorinr Wait, is it depricated?
Sorin Ruse
@sorinr
Jul 27 2016 12:44
@Todai88 i suppose you are trying to achieve some kind of a floating label. right?
Joakim Bajoul Kakaei
@Todai88
Jul 27 2016 12:45
@sorinr Yeah, I suppose. I basically want the placeholder (name) to be slightly more above the bottom-border.
@sorinr But for some reason the line-height doesn't do anything.
I can set the color of the placeholder in the webkit, but even though I read that line-height would work, it seems like it doesnt
Sorin Ruse
@sorinr
Jul 27 2016 12:46
@Todai88 take a look: http://materializecss.com/forms.html
Janine vN
@janine9vn
Jul 27 2016 12:50
For the first Front End Development Project - The Tribute Page (and really for any of these challenges), should I try and match the way the information is presented or can it look fairly different as long as it meets the requirements?
Daniel Jakobian
@KingLouisXVII
Jul 27 2016 12:51
@sorinr thank you, doing the ajax call worked!
CamperBot
@camperbot
Jul 27 2016 12:51
kinglouisxvii sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 562 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jul 27 2016 12:54
@KingLouisXVII welcome
Joakim Bajoul Kakaei
@Todai88
Jul 27 2016 12:56

@sorinr Though I love the fact that it's a Swedish website (I'm Swedish), it doesn't really solve the problem...
Their form does look more in line with what I want (the placeholder being further above the line than mine, but it doesn't have any CSS that I can refer to.

I'm not sure if I'm explaining it correctly, but I don't need a label on top of my textfield. What want is to have my placeholder ("name") higher above the border-bottom.

Sorin Ruse
@sorinr
Jul 27 2016 13:00
@Todai88 download their source code and take a look at their sass files and js. thats why i gived you the link. just for some inspiration :)
Lee
@leebut
Jul 27 2016 13:04
@Todai88 I read recently that placeholders are generally not a good thing, and to put information directly above the input field. I think it was on FCC's Media page.
Dylan
@dhcodes
Jul 27 2016 13:10
@leebut probably an accessibility issue
Joakim Bajoul Kakaei
@Todai88
Jul 27 2016 13:18
@leebut Hmmm... did that have any reasoning behind it but the all-common idea of 'treating users like idiots'? :P
Meaning that if a user is faced with a textfield without a label telling them what the field is, then he/she would forget what was to be inputted there due to the lack of explicit marking?
Joel Santos
@St3ps
Jul 27 2016 13:19
Is there a best approach to define a font size on a element, in css? Or should i just experiment with px?
(i'm not asking how to do it, i'm asking wether i should use px, em, rem, standard values, some hint :p)
Dylan
@dhcodes
Jul 27 2016 13:19
@St3ps i'm not sure there's a best. vw is fairly flexible
Joakim Bajoul Kakaei
@Todai88
Jul 27 2016 13:19
If so, then I do agree and I have an idea of fixing that (adding a label above the field when the text has been changed).
Dylan
@dhcodes
Jul 27 2016 13:20
@St3ps I'd either use vw or write diff. media-queries and use px
Joakim Bajoul Kakaei
@Todai88
Jul 27 2016 13:20
had no clue about vw.
Lee
@leebut
Jul 27 2016 13:20
@dhcodes Usability was mentioned.
Joel Santos
@St3ps
Jul 27 2016 13:21
@dhcodes i'm sorry what's vw?
Dylan
@dhcodes
Jul 27 2016 13:22
@St3ps viewport width, it's a flexible (dynamic) size unit based on the width of the device
screen
Joel Santos
@St3ps
Jul 27 2016 13:22
So, it doesn't consider the width of the browser, but the width of the device itself, is that correct?
Dylan
@dhcodes
Jul 27 2016 13:22
works really well but there is the concern of super wide screens
@St3ps well, the width of the browser is the width of the screen for a comp
that's responsive design
you can shrink the browser window and the site will change before your eyes
media queries are probably the failsafe option though
Lee
@leebut
Jul 27 2016 13:23
@Todai88 Here's another one. https://www.nngroup.com/articles/form-design-placeholders/
I think placeholders can be harmful towards users who quickly use TAB to move through forms.
Darrin
@ddschmitz
Jul 27 2016 13:24
Hey guys I can't seem to get the bootstrap navbar to work http://getbootstrap.com/components/#navbar.
I'm trying in both codepen and jsfiddle but it won't do the dropdown part
Dylan
@dhcodes
Jul 27 2016 13:24
@Todai88 @leebut i'm not sure how it fits in, but if you're on a computer, the form at the bottom of this page is pretty nice regarding placeholders: http://studio.zeldman.com/
@ddschmitz have you enabled jquery in the settings of codepen?
@ddschmitz also jquery needs to be loaded before bootstrap in the order
settings --> JS
quickadd
on codepend
Darrin
@ddschmitz
Jul 27 2016 13:25
Oh... Didn't know that.
Thanks @dhcodes
CamperBot
@camperbot
Jul 27 2016 13:25
ddschmitz sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1259 | @dhcodes |http://www.freecodecamp.com/dhcodes
Joakim Bajoul Kakaei
@Todai88
Jul 27 2016 13:26
@leebut Yeah, saw that nngroup one. I do agree with them. But maybe I'm just a bit too engineering-focused because when you said harmful I thought you meant from a purely security perspective. XD
I do agree and realize there are usability issues when having placeholders, but if you know about them and do take steps to ensure there is an alternative labeling on hand for users when the placeholder has been digested, then I don't see any issues with using placeholders. :)
Joel Santos
@St3ps
Jul 27 2016 13:26
@dhcodes I know i'm being, "petulant"(is that the word?) but a screen is a constant value, the browser viewport is variable, considering however you resize it...
Sorin Ruse
@sorinr
Jul 27 2016 13:26
@St3ps here is a nice article about em and rem :https://j.eremy.net/confused-about-rem-and-em/
Dylan
@dhcodes
Jul 27 2016 13:27
@St3ps right, sorry. vw is short for viewport-width so it's the width of the viewport which is the browser on a comp. and (usually) the screen size on a mobile device
like i said, media queries may be the best option
and yes, petulant is the word :) but I don't think asking good questions is petulant
Lee
@leebut
Jul 27 2016 13:30
@Todai88 True. Just avoid putting crucial information in a place holder. Once it's gone, it's gone.
I was signing up to something a couple of days ago, entered a user name and password and got an error message. "It didn't tell me that on the form", I kind of muttered.
Dylan
@dhcodes
Jul 27 2016 13:31
@leebut did you mutter "this place needs a UI designer"
lol
Sorin Ruse
@sorinr
Jul 27 2016 13:31
@leebut a placeholder its never gone. if you clear the input the placeholder will show again. don't confuse with the value of the input
Joakim Bajoul Kakaei
@Todai88
Jul 27 2016 13:32
@leebut Well, what I'll do is that I'll have a placeholder in the textfield. Once the placeholder has been digested there will be a label popping up above the textfield to give ample information about the field.
If the field is cleared, the label will transform away and the placeholder will show up again
Lee
@leebut
Jul 27 2016 13:32
@dhcodes I might do when I'm better at this stuff.
Sorin Ruse
@sorinr
Jul 27 2016 13:32
@leebut you can say that a placeholder its just like a tip on what you should fill that input with
Lee
@leebut
Jul 27 2016 13:33
@sorinr Maybe it was a value, then. Whatever it was, it didn't come back when it lost focus.
Is a placeholder an object? Maybe I was confusing it with a pre-filled value.
Sorin Ruse
@sorinr
Jul 27 2016 13:34
@leebut if you have something writen into the input the placeholder is hidden even if you lost focus of that input
Lee
@leebut
Jul 27 2016 13:35
@sorinr What if the user deletes what was input?
Does it come back?
Joel Santos
@St3ps
Jul 27 2016 13:36
@dhcodes
@sorinr :smile: thanks guys, but uh, alright now i'm uncertain wether i should go with vw, em, or rem :worried:
CamperBot
@camperbot
Jul 27 2016 13:36
st3ps sends brownie points to @dhcodes and @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1260 | @dhcodes |http://www.freecodecamp.com/dhcodes
:cookie: 564 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jul 27 2016 13:36
yep
Dylan
@dhcodes
Jul 27 2016 13:38
@St3ps media queries unless you hate them
r2d2
@UsamaHameed
Jul 27 2016 13:39
Can anyone take a look? The location var returns undefined while pos var has values in it
$(document).ready(function() {
  var location = getLocation();
  console.log(location);
});

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {};
      pos.lat = position.coords.latitude;
      pos.lng = position.coords.longitude;
      console.log(pos);
      return pos;
    });

  } else {
    console.log("Geolocation is not supported by this browser.");
  }
}
Joel Santos
@St3ps
Jul 27 2016 13:41
@dhcodes hah, no i don't, but media queries, if memory serves right, are a set of rules that'll addapt to whatever browser's(or device, i think you can specify either?) viewport size but
i still need to say hey "font-size: 18px, or 1.5ems, or something"
for each difefrent media query, so the question stands, i still need to define what unit to use for a font size...
Dylan
@dhcodes
Jul 27 2016 13:41
@UsamaHameed are you on chrome?
@St3ps right, you need to set a diff font size for each query, but you can do media queries with a min or max width. ex. max-width: 400px (for mobile)
@UsamaHameed can you paste your codepen
r2d2
@UsamaHameed
Jul 27 2016 13:43
Yes. Someone in the js help room pointed out that my pos var is returned to the callback not the getLocation function. So I am going to define a global var now
Or a shared var
@dhcodes
Dylan
@dhcodes
Jul 27 2016 13:44
@UsamaHameed does your console say "geolocation is not supported"? because chrome only support html5 location over https:
Joel Santos
@St3ps
Jul 27 2016 13:44
@dhcodes this raises an interesting question, is there like...a percentage value minimum of "size" respective to the viewport? "Like, hey this device is mobile, so this font to be at least readable, has to be at least 8px" I
r2d2
@UsamaHameed
Jul 27 2016 13:44
I changed the code pen link and wrote https:// in the start. Worked like a charm :P @dhcodes
Dylan
@dhcodes
Jul 27 2016 13:45
@UsamaHameed yes, but you might have trouble when it comes to the openweather api because it only supports http through codepen
@UsamaHameed so if you go the https route, you might want to consider using forecast io's api, but it won't get you the city :(
r2d2
@UsamaHameed
Jul 27 2016 13:45
Should I host on github then?
Dylan
@dhcodes
Jul 27 2016 13:46
@UsamaHameed maybe. Idk what works anymore lol. I just know that if you use https for the url and the openweather api (which is http) it throws mixed content warnings on codepen
might work on github
Babs Craig
@babzcraig
Jul 27 2016 13:47
@UsamaHameed Try firebase hosting. It's free and they have https
firebase.io
r2d2
@UsamaHameed
Jul 27 2016 13:47
Alright. I don't know why that happens. Ran into a similar problem while working on the random quote machine. Some sort of different origin error.
firebase.io + forecast.io then?
Dylan
@dhcodes
Jul 27 2016 13:51
@UsamaHameed you can use codepen if you use forecast io
no need for firebase
r2d2
@UsamaHameed
Jul 27 2016 13:51
Alright thanks @dhcodes @babzcraig
CamperBot
@camperbot
Jul 27 2016 13:51
usamahameed sends brownie points to @dhcodes and @babzcraig :sparkles: :thumbsup: :sparkles:
:star2: 1261 | @dhcodes |http://www.freecodecamp.com/dhcodes
:cookie: 381 | @babzcraig |http://www.freecodecamp.com/babzcraig
Dylan
@dhcodes
Jul 27 2016 13:51
but forecast io doesn't give you the city so if you want to display the city (not required) you would need to use the google maps api
and this is all just to get it to work on chrome lol
r2d2
@UsamaHameed
Jul 27 2016 13:52
I am using google maps api to get the city. I will then get the weather using that city
Dylan
@dhcodes
Jul 27 2016 13:52
@UsamaHameed alternatively, you can use ip location which still works with openweather
the world is your oyster as they say
if you use ip location, then remove the s from https in your codepen url
r2d2
@UsamaHameed
Jul 27 2016 13:53
It is not that accurate the IP location method right?
Muhammad Hasham
@MohammadHasham
Jul 27 2016 13:53
i want to show only online users,so why is this code not working
  $("#online").on("click",function(de){


        $('#channel').show('<div id="  astream ">'+ "<br>" + '<img style="height: 50px; width:70px" src ="' + url + '"/>' + "<a href=" + site + "               target='_blank'>" + user + "</a>" +  "  Offline" + "</div>");
         $('#channel').hide('<div id="  astream ">' +"<br>" + '<img style="height: 50px; width:70px" src ="' + url + '"/>' + "<a href=" + site + " target='_blank'>" + user + "</a>" + "  Online "  + c.stream.channel.status + " </div>");

          });
r2d2
@UsamaHameed
Jul 27 2016 13:53
Right @dhcodes
Dylan
@dhcodes
Jul 27 2016 13:53
it's okay... it's wherever your nearest internet provider node is @UsamaHameed
i used it
AlexanderNelson
@AlexanderNelson
Jul 27 2016 13:54

I spent the entire night and until 4am this morning learning about nav bars to get this portfolio project going. I havent been able to get this dropdown menu to drop down. Any Ideas? <!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body {margin: 0;}

ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #ff9100;
position: fixed;
top: 0;
width: 100%;
}

ul.topnav li {float: left;
border-right:1px solid #bbb;
}

li:last-child {
border-right: none;
}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #ff6d00;}

ul.topnav li a.active {background-color: #ff6d00;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>

<body>

<ul class="topnav">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>

<div style="padding:20px;margin-top:30px;background-color:#fafafa;height:1500px;">

Dylan
@dhcodes
Jul 27 2016 13:54
because i wanted to get the city without google maps api @UsamaHameed
@AlexanderNelson have you enabled jquery in your codepen settings?
r2d2
@UsamaHameed
Jul 27 2016 13:54
For me, it is far away. About 150 miles away :P
Dylan
@dhcodes
Jul 27 2016 13:54
ah @UsamaHameed yeah
r2d2
@UsamaHameed
Jul 27 2016 13:54
Do you not like google? :P @dhcodes
Dylan
@dhcodes
Jul 27 2016 13:54
no i'm fine with it, it just seemed like extra work
and i was fine with ip
Muhammad Hasham
@MohammadHasham
Jul 27 2016 13:55
i want to show only online users,so why is this code not working
  $("#online").on("click",function(de){


        $('#channel').show('<div id="  astream ">'+ "<br>" + '<img style="height: 50px; width:70px" src ="' + url + '"/>' + "<a href=" + site + "               target='_blank'>" + user + "</a>" +  "  Offline" + "</div>");
         $('#channel').hide('<div id="  astream ">' +"<br>" + '<img style="height: 50px; width:70px" src ="' + url + '"/>' + "<a href=" + site + " target='_blank'>" + user + "</a>" + "  Online "  + c.stream.channel.status + " </div>");

          });
r2d2
@UsamaHameed
Jul 27 2016 13:55
Hahaha right :P
Dylan
@dhcodes
Jul 27 2016 13:56
@MohammadHasham your code shows teh offline user and hides the online
@MohammadHasham also why is de in the function parameter? i don't see it referenced in your function
can anyone tell me why only one username is printing to the document
Dylan
@dhcodes
Jul 27 2016 13:59
@mpettaw2 need to spend more time with it but it looks like it's because you are nesting j within your i loop
instead of letting i do the loop
let me tinker
Muhammad Hasham
@MohammadHasham
Jul 27 2016 13:59
@dhcodes do i need to add class to them?
Mrwan Ashraf
@mrwanashraf
Jul 27 2016 14:00
hi it's my first time to be here and I'm kinda stuck at a project, can someone help me please?
AlexanderNelson
@AlexanderNelson
Jul 27 2016 14:00
@UsamaHameed If you mean the quickadd, I just did that. before there were only three options there. Why are there so many now? It still is not dropping down though.
Dylan
@dhcodes
Jul 27 2016 14:01
@AlexanderNelson you need to do the quickadd in the settings --> js
make sure you do it as jquery, then bootstrap
in that order
then save and refresh
melisa pettaway
@mpettaw2
Jul 27 2016 14:01
ok. i tried to initialize a global variable for the j loop and add each element of the streams array to it but it didn't work. i am thinking because the elements were objects and when i added it to the empty string the objects became strings
Dylan
@dhcodes
Jul 27 2016 14:02
@MohammadHasham do you have a codepen i can look at?
@mpettaw2 you may be right. I am just playing around to see if i can get it to work
r2d2
@UsamaHameed
Jul 27 2016 14:02
Eh? @AlexanderNelson
Dylan
@dhcodes
Jul 27 2016 14:02
@UsamaHameed he meant to ref me
melisa pettaway
@mpettaw2
Jul 27 2016 14:02
@dhcodes thank you
CamperBot
@camperbot
Jul 27 2016 14:02
mpettaw2 sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1262 | @dhcodes |http://www.freecodecamp.com/dhcodes
r2d2
@UsamaHameed
Jul 27 2016 14:02
oh :P
AlexanderNelson
@AlexanderNelson
Jul 27 2016 14:03
@UsamaHameed @dhcodes sorry about that, the names were close together
Lyba M
@lybamahenti
Jul 27 2016 14:03
i need help with converting Celsius to Fahrenheit challenge
Dylan
@dhcodes
Jul 27 2016 14:04
@AlexanderNelson did you get it to work?
@lybamahenti what's your question?
r2d2
@UsamaHameed
Jul 27 2016 14:04
Hey, why does this not work?
https://codepen.io/UsamaHameed/pen/zBazwb
AlexanderNelson
@AlexanderNelson
Jul 27 2016 14:04
Screenshot 2016-07-27 at 10.02.14.png
Dylan
@dhcodes
Jul 27 2016 14:04
@AlexanderNelson looks good
is it not working?
AlexanderNelson
@AlexanderNelson
Jul 27 2016 14:04
@dhcodes not working
Dylan
@dhcodes
Jul 27 2016 14:05
oh, @AlexanderNelson my bad I reread your q. Can you paste your codepen?
i thought you meant the mobile dropdown
@MohammadHasham if you inspect one of your rows, you'll see that each is getting both offline and online classes
AlexanderNelson
@AlexanderNelson
Jul 27 2016 14:07

@dhcodes

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}

ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #ff9100;
position: fixed;
top: 0;
width: 100%;
}

ul.topnav li {float: left;
border-right:1px solid #bbb;
}

li:last-child {
border-right: none;
}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #ff6d00;}

ul.topnav li a.active {background-color: #ff6d00;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>

<ul class="topnav">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>


</body>
</html>

Dylan
@dhcodes
Jul 27 2016 14:07
otherwise your code would work,
@MohammadHasham
Muhammad Hasham
@MohammadHasham
Jul 27 2016 14:08
@dhcodes What can i do for that?
Dylan
@dhcodes
Jul 27 2016 14:08
@MohammadHasham troubleshoot the part of the code that adds those classes
it should only add one class
not both
@AlexanderNelson no codepen?
Muhammad Hasham
@MohammadHasham
Jul 27 2016 14:09
@dhcodes but i am adding online and offline class with each of them is'nt that okay
really worried
AlexanderNelson
@AlexanderNelson
Jul 27 2016 14:10
@dhcodes that was copied from codepen, is there another way?
@dhcodes sorry i may not have the parlance yet
Dylan
@dhcodes
Jul 27 2016 14:12
@MohammadHasham it's okay to do that but what i'm saying is there must be a mistake with the if statement that does that
@AlexanderNelson paste the url to your codepen
@mpettaw2 I'm getting some data into the console now for each user
Muhammad Hasham
@MohammadHasham
Jul 27 2016 14:13
@dhcodes okay i'll check that again!
AlexanderNelson
@AlexanderNelson
Jul 27 2016 14:13
Dylan
@dhcodes
Jul 27 2016 14:14
@mpettaw2 I removed the j loop and moved the json call into the i loop, then I changed names in the url to userNames[i]
@mpettaw2 start there
if you want me to fork the project and link you I can
Muhammad Hasham
@MohammadHasham
Jul 27 2016 14:16
@dhcodes Really sorry! but can't figure that out
melisa pettaway
@mpettaw2
Jul 27 2016 14:17
@dhcodes yes please
sorry my username and last post was highlighted in pink
you might also confirm the URL as i can't seem to get the logo from this url
I had to do two separate JSON calls to get all the data I needed for that project
two diff. urls
@MohammadHasham give me a second and i'll check it out
Muhammad Hasham
@MohammadHasham
Jul 27 2016 14:20
@dhcodes Yes thankyouv very much
melisa pettaway
@mpettaw2
Jul 27 2016 14:22
ok
Crebra
@Crebra
Jul 27 2016 14:27
how do i add scrolling nav similar to this one http://blackrockdigital.github.io/startbootstrap-scrolling-nav/
Muhammad Hasham
@MohammadHasham
Jul 27 2016 14:29
@dhcodes any ideea?
Dylan
@dhcodes
Jul 27 2016 14:29
@MohammadHasham still helping @AlexanderNelson
@AlexanderNelson here you go: http://codepen.io/dhcodes/pen/VjdAaw
d1sr3
@d1sr3
Jul 27 2016 14:29
Hello whenever I make browser window smaller my layout gets messed up, even when I set position to fixed https://s.codepen.io/d1sr3/debug/akqKoQ
Dylan
@dhcodes
Jul 27 2016 14:29
@AlexanderNelson when all else fails, go back to the source: https://getbootstrap.com/components/#navbar
@AlexanderNelson I think the main thing was that you had overflow:hidden on your navbar which was preventing your dropdown box from showing. Also, you still need to style the links
@Crebra Usage Instructions: Make sure to include the scrolling-nav.js, jquery.easing.min.js, and scrolling-nav.css files. To make a link smooth scroll to another section on the page, give the link the .page-scroll class and set the link target to a corresponding ID on the page.
okay @MohammadHasham going to look now
Crebra
@Crebra
Jul 27 2016 14:36
@dhcodes I give it ago
Dylan
@dhcodes
Jul 27 2016 14:38
@MohammadHasham i got it finally
you still around?
AlexanderNelson
@AlexanderNelson
Jul 27 2016 14:40
@dhcodes hmm i pulled the overflow out before and the bar shrank. I must have missed the step where I took care of that. I was learning from w3 and it works on their example with the overflow: hidden http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar I removed that line and Its working now though so on to the next problem.
Dylan
@dhcodes
Jul 27 2016 14:40
@AlexanderNelson yeah when working with BS I always start with their examples, esp. for the navbar
AlexanderNelson
@AlexanderNelson
Jul 27 2016 14:41
@dhcodes thanks!
CamperBot
@camperbot
Jul 27 2016 14:41
alexandernelson sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1263 | @dhcodes |http://www.freecodecamp.com/dhcodes
Muhammad Hasham
@MohammadHasham
Jul 27 2016 14:42
@dhcodes i am really frustrated now! can you tell me what should i do?
Sorin Ruse
@sorinr
Jul 27 2016 14:44
@dhcodes change color in ul.topnav li a from white to orange in that pen above coz when you open the dropdown the text its not visible
Muhammad Hasham
@MohammadHasham
Jul 27 2016 14:44
@dhcodes please would you tell me?
where i am wrong?
Simon Cordova
@gbsimon87
Jul 27 2016 14:45
@MohammadHasham what is the problem you're facing?
Dylan
@dhcodes
Jul 27 2016 14:45
This message was deleted
Stephen James
@sjames1958gm
Jul 27 2016 14:45
@MohammadHasham You can put ( class="offline") inside your div in your append, if addClass is not working
Dylan
@dhcodes
Jul 27 2016 14:46
@MohammadHasham yeah, what @sjames1958gm said
Stephen James
@sjames1958gm
Jul 27 2016 14:46
$('#channel').append('<div id=" astream " class="offline">' + "<br>" + '<img style="height: 50px; width:70px" src ="' + url + '"/>' + "<a href=" + site + " target='_blank'>" + user + "</a>" + " Offline" + "</div>")
Dylan
@dhcodes
Jul 27 2016 14:46
pretty much what I did was move your class from being applied to $('#channel') to being added when you construct the div
@sjames1958gm bingo
@MohammadHasham
sorry for the delay
Stephen James
@sjames1958gm
Jul 27 2016 14:46
@dhcodes :+1:
Dylan
@dhcodes
Jul 27 2016 14:47
@sjames1958gm that's not my pen and yeah, I know but I wanted to let the pen's author sort out that one. :spaghetti:
:sheep:
@sjames1958gm you found it a lot faster than me sadly
back to learning node I go. See you all later
Simon Cordova
@gbsimon87
Jul 27 2016 14:49
@sjames1958gm how's it going man. A number of people have tried helping me to no avail.
Perhaps I can use your expertise?
Dylan
@dhcodes
Jul 27 2016 14:50
I heard @sjames1958gm is the Matt Damon of the coding world
Simon Cordova
@gbsimon87
Jul 27 2016 14:50
I"m trying to keep this image inside the div with id="bannerLeftSide", but nothing seems to be working...
http://codepen.io/gbsimon87/pen/QExqQK?editors=1100
Dylan
@dhcodes
Jul 27 2016 14:51
@gbsimon87 you mean because it goes out on mobile?
@gbsimon87 either you need to make the div a flexible unit or make your image responsive, not both can be fixed
d1sr3
@d1sr3
Jul 27 2016 14:52
Hello whenever I make browser window smaller my layout gets messed up, even when I set position to fixed https://s.codepen.io/d1sr3/debug/akqKoQ
Stephen James
@sjames1958gm
Jul 27 2016 14:52
@gbsimon87 Design and CSS is my weakness
@gbsimon87 When you resize?
Paul F. Aponte
@DrAponte
Jul 27 2016 14:54
am i nesting this right? <form action="/submit-cat-photo"></form>
Simon Cordova
@gbsimon87
Jul 27 2016 14:54
Pretty much yeah...I have found a small solution for now, any better suggestions?
http://codepen.io/gbsimon87/pen/QExqQK?editors=1100
I've set the image to a fixed height and the parent div's height to auto...
there's got to be a better approach though @dhcodes @sjames1958gm
Sorin Ruse
@sorinr
Jul 27 2016 14:55
@gbsimon87 give a margin: 10px; to ur #bannerRightSide img
Muhammad Hasham
@MohammadHasham
Jul 27 2016 14:56
why offline is not working??
Simon Cordova
@gbsimon87
Jul 27 2016 14:56
@sorinr cheers for that suggestion
Paul F. Aponte
@DrAponte
Jul 27 2016 14:57
Am i nesting this text input element in the form element correctly? <form action="/submit-cat-photo"></form>
greg
@wearenotgroot
Jul 27 2016 14:57
@DrAponte what are you nesting?
@DrAponte nesting mean to put element inside(between opening and closing tag) another
Sorin Ruse
@sorinr
Jul 27 2016 14:57
@gbsimon87 welcome
Paul F. Aponte
@DrAponte
Jul 27 2016 14:58

@wearenotgroot <input type="text" placeholder="cat photo URL">

<form action="/submit-cat-photo"></form>

greg
@wearenotgroot
Jul 27 2016 14:58
@DrAponte
<form> //<-------opening tag
   <input />
</form> //<---------closoing tag
Paul F. Aponte
@DrAponte
Jul 27 2016 14:59
@wearenotgroot OH! duh thnx
CamperBot
@camperbot
Jul 27 2016 14:59
draponte sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1250 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
greg
@wearenotgroot
Jul 27 2016 14:59
@DrAponte :+1:
Dylan
@dhcodes
Jul 27 2016 15:02
@d1sr3 it seems to be a fluke because on the mobile views in the dev tools it works fine
idk what's causing it
Stephen James
@sjames1958gm
Jul 27 2016 15:03
@MohammadHasham Your offline ones are not added because you reference c.stream.channel.status
Dylan
@dhcodes
Jul 27 2016 15:03
@MohammadHasham the better question is why aren't the offline users showing anymore
ah, @sjames1958gm again

pro

Simon Cordova
@gbsimon87
Jul 27 2016 15:04
Heyo! If you guys want to take a look at the full website I'm building and give some some tips or suggestions I'd appreciate it
http://codepen.io/gbsimon87/pen/XKYNwB
Dylan
@dhcodes
Jul 27 2016 15:04
@gbsimon87 verify your email with codepen so I can look at it in full view ;)
Muhammad Hasham
@MohammadHasham
Jul 27 2016 15:05
@dhcodes Sorry would choose a better one next time actually anxiety is killi'n me now!
Simon Cordova
@gbsimon87
Jul 27 2016 15:05
@dhcodes will look into that right now
Dylan
@dhcodes
Jul 27 2016 15:06
@gbsimon87 details view was good enough. I like it a lot, espcially all the subtle niceties like the shadow that snakes around everything and that map
@gbsimon87 i would make the shadow a diff color, but your call, maybe either the same gold as the banner or a forest green
Paul F. Aponte
@DrAponte
Jul 27 2016 15:07
@wearenotgroot hey, i tried it. no luck :worried:
Crebra
@Crebra
Jul 27 2016 15:07
Can someone help me with scroll nav I already have scrolling-nav.js, jquery.easing.min.js, and scrolling-nav.css files and I linked it but it's not working
Simon Cordova
@gbsimon87
Jul 27 2016 15:08
@dhcodes it's verified now
Dylan
@dhcodes
Jul 27 2016 15:09
it's cool i gave feedback above
it's wonderful
spalqui
@spalqui
Jul 27 2016 15:09
Hello guys
Simon Cordova
@gbsimon87
Jul 27 2016 15:09
Ha! I went to high school with Aubrey! @Crebra
spalqui
@spalqui
Jul 27 2016 15:09
this is what i have so far for my Wikipedia viewer https://codepen.io/Spalqui/pen/wWXAAa
I am unsure on how to start the JS
Crebra
@Crebra
Jul 27 2016 15:10
@dhcodes i have done what you told me but it's not working
@spalqui that is cool
Simon Cordova
@gbsimon87
Jul 27 2016 15:10
@dhcodes cheers man, I'll try the color changing for the shadows as per your suggestion
Sorin Ruse
@sorinr
Jul 27 2016 15:10
@gbsimon87 just text-align center the last row from services
Dylan
@dhcodes
Jul 27 2016 15:11
@Crebra you're using a third-party, it might not work in codepen unless you either copy/paste their whole css files into your css box or find a CDN
Simon Cordova
@gbsimon87
Jul 27 2016 15:11
@sorinr what do you mean exactly?
Dylan
@dhcodes
Jul 27 2016 15:11
or pay for codepen pro so you can upload assets @Crebra
Joel Santos
@St3ps
Jul 27 2016 15:11
Whenever i click in a 'clickable' element, (in this case, i have <a> elements), there seems to be a selection-dotted line around the element. Is there a way to remove this? I don't want to see the element 'selection'
Dylan
@dhcodes
Jul 27 2016 15:12
@spalqui did you do the weather project?
Stephen James
@sjames1958gm
Jul 27 2016 15:12
@MohammadHasham Remove your addclass as #channel has online which hides all when you switch to offline
Dylan
@dhcodes
Jul 27 2016 15:12
this is similar except you take the users input and pass it to a json call to wikimedia's api @spalqui
i gotta go
peace
Stephen James
@sjames1958gm
Jul 27 2016 15:12
@dhcodes l8ter
Crebra
@Crebra
Jul 27 2016 15:13
@dhcodes oh ok thanks
CamperBot
@camperbot
Jul 27 2016 15:13
crebra sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1264 | @dhcodes |http://www.freecodecamp.com/dhcodes
Sorin Ruse
@sorinr
Jul 27 2016 15:15
@gbsimon87 your second row in the services section its by default left align. you have applied a text-center only to your div #servicesLogos . instead of of id i would make a class of it and apply it to both rows
Simon Cordova
@gbsimon87
Jul 27 2016 15:21
@sorinr great tips, thanks buds!
CamperBot
@camperbot
Jul 27 2016 15:21
gbsimon87 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 565 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jul 27 2016 15:22
@gbsimon87 welcome
Joel Santos
@St3ps
Jul 27 2016 15:23
is abusing of the !important "thing" (statement? command? what do you call it?) a bad thing? I have properties on my buttons which I KNOW none of the children should have. I don't want text decoration for example. Ever.
But if i ever wanted any text decoration, i could not have it unless !important was removed on the 'main' parent. is this correct?
Crebra
@Crebra
Jul 27 2016 15:23
Muhammad Hasham
@MohammadHasham
Jul 27 2016 15:24
what if condition shall i use for the closed accounts in twitch tv? because it gives an error as if seen by dev tools
@sjames1958gm @dhcodes
melisa pettaway
@mpettaw2
Jul 27 2016 15:33
@dhcodes AAAAHHHH if you are still here. you are the best thank you
CamperBot
@camperbot
Jul 27 2016 15:33
mpettaw2 sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1265 | @dhcodes |http://www.freecodecamp.com/dhcodes
Sorin Ruse
@sorinr
Jul 27 2016 15:41
@St3ps you should try to read more about cascading and inheritance of css to understand how to avoid more and more !important
Lyba M
@lybamahenti
Jul 27 2016 15:58
i need help with Escape Sequences in Strings
d1sr3
@d1sr3
Jul 27 2016 16:02
Hello whenever I make browser window smaller my layout gets messed up, even when I set position to fixed https://s.codepen.io/d1sr3/debug/akqKoQ
Marc Vesper
@marcvesper
Jul 27 2016 16:06
Can someone tell me where i went wrong in this basic input/ submit search? it should call a custom js function to simply output the search text to the console, as I understood it http://codepen.io/marcvesper/pen/rLKpGN?editors=1011
Olga C
@Octopinky
Jul 27 2016 16:08
@d1sr3 are you using bootstrap?
d1sr3
@d1sr3
Jul 27 2016 16:12
@Octopinky Not on the place where it gets messed up I'm using <div> <form-inline> and <form-group> there
Omar Adzagic
@1ucid
Jul 27 2016 16:14
why this navigation tabs doesn't run?
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#Info" data-toggle="tab"><span class="glyphicon glyphicon-info-sign"></span> Info</a></li>
        <li><a href="#Projects" data-toggle="tab"><span class="glyphicon glyphicon-file"></span> Projects</a></li>
        <li><a href="#Contact" data-toggle="tab"><span class="glyphicon glyphicon-envelope"></span> Contact</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="Info">
            <p>cao</p>
        </div>
        <div class="tab-pane" id="Projects">
            <p>cao svima</p>
        </div>
        <div class="tab-pane" id="Contact">
            <p>cao svima koliko vas ima</p>
        </div>
    </div>
these*
Brooks Van Buren
@woofiewilly
Jul 27 2016 16:22
@jdtdesigns Thanks! that should work. :)
CamperBot
@camperbot
Jul 27 2016 16:22
woofiewilly sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 593 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Sorin Ruse
@sorinr
Jul 27 2016 16:24
@marcvesper your onformsubmit does not trigger the var streamerSearch. just try to comment that out and add this outside of docready: function streamerSearch(){ alert('form submitting'); }
Olga C
@Octopinky
Jul 27 2016 16:24
@d1sr3 yeah, I can see how it gets messed up.
@d1sr3 the only solution I can think of is putting the 2 last rows into a "row" div, and then placing 3 buttons into 1 column, and 1 button into another column. Then it should be responsive.
Marc Vesper
@marcvesper
Jul 27 2016 16:27
@sorinr ah, so it's because it's within the document.ready event. Thank you!
CamperBot
@camperbot
Jul 27 2016 16:27
marcvesper sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 566 | @sorinr |http://www.freecodecamp.com/sorinr
Olga C
@Octopinky
Jul 27 2016 16:28
@1ucid did you load up thee bootstrap css?
Beth Qiang
@bethqiang
Jul 27 2016 16:49
does anyone think my smooth scroll is too slow? i kinda think it is but i'm not sure if i've done it a million times or what - https://bethqiang.github.io/
*if it's because i've done it a million times
Rada
@Radascript
Jul 27 2016 16:50
it's a little choppy for me
Omar Adzagic
@1ucid
Jul 27 2016 16:54
@Octopinky yes i did
Beth Qiang
@bethqiang
Jul 27 2016 16:55
@Radascript - choppy as in, speeding it up would help or ...? also, are the <hr> lines centered? they were on chrome but i just tested on ie and they're not...so that's awkward.
readytocode123
@readytocode123
Jul 27 2016 16:59
how does one add email sending functionality on your own website? do you have to have a separate php or such file?
Alsoooo what's the best way to learn in making wordpress sites?
labanch
@labanch
Jul 27 2016 17:01
@bethqiang looks good on my end. I'm working on my weather app. Yours looks great!
Muhammad Hasham
@MohammadHasham
Jul 27 2016 17:02
why the closed accounts are not being displayed??
http://codepen.io/Mohammad_Hasham/pen/QEAVWY?editors=0010
@labanch @sorinr @readytocode123
Sorin Ruse
@sorinr
Jul 27 2016 17:05
@MohammadHasham because the api call returns a 422 error that you can trigger using an $.ajax call
Beth Qiang
@bethqiang
Jul 27 2016 17:05
@labanch thanks! :) that was the one i by far put the most time into, haha. i wanted a weather app i could actually use--there's still some stuff i'd like to add but i got tired of working on it after a point in time. good luck and let me know if you need help!
CamperBot
@camperbot
Jul 27 2016 17:05
bethqiang sends brownie points to @labanch :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @labanch |http://www.freecodecamp.com/labanch
labanch
@labanch
Jul 27 2016 17:07
@bethqiang I definitely will. Your portfolio is very nice. Cute color combo :) after seeing your weather app now I wanna make mines nicer lol
Muhammad Hasham
@MohammadHasham
Jul 27 2016 17:07
@sorinr how can i use an $.ajax call
Sorin Ruse
@sorinr
Jul 27 2016 17:08
@MohammadHasham i've showed u in my pen forked from your initial one. just search google for jquery ajax calls
Muhammad Hasham
@MohammadHasham
Jul 27 2016 17:11
any solution with getJSON @sorinr
Beth Qiang
@bethqiang
Jul 27 2016 17:16
@labanch - thanks! :) let me know when you've completed it (or get so tired of it that it's "complete for now" - i'd love to take a look at it!)
CamperBot
@camperbot
Jul 27 2016 17:16
bethqiang sends brownie points to @labanch :sparkles: :thumbsup: :sparkles:
:warning: bethqiang already gave labanch points
Sorin Ruse
@sorinr
Jul 27 2016 17:19
@MohammadHasham i don't now how to handle the errors with getJSON. maybe you can try something like: $.getJSON(url).done(function(success){here your logic for succes response}).fail(function(error){here you trat the errors});
labanch
@labanch
Jul 27 2016 17:19
@bethqiang lol! I will :)
Muhammad Hasham
@MohammadHasham
Jul 27 2016 17:20
@sorinr Thanks for giving time i;ll see that
CamperBot
@camperbot
Jul 27 2016 17:20
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 567 | @sorinr |http://www.freecodecamp.com/sorinr
spalqui
@spalqui
Jul 27 2016 17:22
@dhcodes Indeed
I have done the local weather
does anyone know how to use the wikipedia api
Sorin Ruse
@sorinr
Jul 27 2016 17:27
@bethqiang nope. ur smooth scroll its just fine in my opinion
Reggie
@Reggie01
Jul 27 2016 17:27
@readytocode123 Read send using SMTP, it covers differences in sending email in node vs php. You can search "sendmail" to look up more npm packages for sending email. w3schools has an example of sending email in php. Looks like this youtube video, explains wordpress theme basics. I have no sample code using email I can show you. So I hope these resources can get you started using email in your apps.
Beth Qiang
@bethqiang
Jul 27 2016 17:38
@sorinr - thanks! :)
CamperBot
@camperbot
Jul 27 2016 17:38
bethqiang sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 568 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jul 27 2016 17:41
@bethqiang welcome
Muhammad Hasham
@MohammadHasham
Jul 27 2016 17:49
@sorinr
please check am i doing that right
var t = $.getJSON(stream,function(c){
       .fail(function()
        {
         $("#all").on("click",function(de)

       {
          $('.offline').show();
          $('.online').show();
          $('.closed').show();
       });

       });
     });
 var t = $.getJSON(stream,function(c){

           .fail(function()
            {
             $("#all").on("click",function(de)

           {
              $('.offline').show();
              $('.online').show();
              $('.closed').show();
           });

           });
         });
Stephen James
@sjames1958gm
Jul 27 2016 17:58
@MohammadHasham If you do your streams json request first adding + "?callback=?"; to the end of your URL you will get the 422 error response
the image URL will not give you any response. Process c.status === 422 in the streams json callback
Sorin Ruse
@sorinr
Jul 27 2016 18:03
@MohammadHasham you are doing it completely wrong. first what is the reason for var t = $.getJSON(bla bla) if you are neve going to use that t var?
Muhammad Hasham
@MohammadHasham
Jul 27 2016 18:05
@sjames1958gm Thanks a ton
@sorinr You also have helped me a alot.
@sorinr Thanks
Sorin Ruse
@sorinr
Jul 27 2016 18:06
@MohammadHasham but you don't want to listen
Muhammad Hasham
@MohammadHasham
Jul 27 2016 18:06
@sjames1958gm Thanks
CamperBot
@camperbot
Jul 27 2016 18:06
mohammadhasham sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave sorinr points
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 2187 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Muhammad Hasham
@MohammadHasham
Jul 27 2016 18:08
@sorinr actually i try my level best to uderstand javascript but failing a number of times and i have disturbed you alot i know sorry for that i try to comprehend what you are instructing me but due to lack of expertness sometimes fail!
sorry!
you have been there always
Ademola Adegbuyi
@ooade
Jul 27 2016 18:12
@MohammadHasham Never stop trying
Muhammad Hasham
@MohammadHasham
Jul 27 2016 18:13
@marhyorh Thanks for motivation
CamperBot
@camperbot
Jul 27 2016 18:13
mohammadhasham sends brownie points to @marhyorh :sparkles: :thumbsup: :sparkles:
:cookie: 683 | @marhyorh |http://www.freecodecamp.com/marhyorh
Joakim Bajoul Kakaei
@Todai88
Jul 27 2016 18:14

Hi,
Quick question:
I want to center two buttons beneath an object with a responsive design.

I'm currently doing this:

<container>
<row>
<object>
</row>
<row>
<col-xs-4 col-offset-xs-1>
<button1/>
</col>
<col-xs-4>
<button2/>
</col>
</row>
</container>

This doesn't really seem to work.
I want the buttons to be centered on the screen as well as just next to eachother. Right now they are both dragging to the left with a lot of spacing between them.

Sorin Ruse
@sorinr
Jul 27 2016 18:17
@MohammadHasham you are not disturbing me. if i can help I help. but just try to put in practice what i recommend. just for the sake of trial and error. so, again: if you still want to use $.getJSON instead of $.ajax try to make your call like: $getJSON(url).done(function(success){your logic for success here}).fail(function(error){your logic for errors here});
Ademola Adegbuyi
@ooade
Jul 27 2016 18:17
@Todai88 <container>, <row> and so.. ain't valid html tags
Joakim Bajoul Kakaei
@Todai88
Jul 27 2016 18:18
@marhyorh Sorry, it's pseudocode.
Have a look at the codepen
https://codepen.io/Todai/pen/grKvjO
Muhammad Hasham
@MohammadHasham
Jul 27 2016 18:18
@sorinr Thanks buddy and after completing this project i will learn ajax then move on :smile:
CamperBot
@camperbot
Jul 27 2016 18:18
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave sorinr points
Muhammad Hasham
@MohammadHasham
Jul 27 2016 18:19
i'll check that
Ademola Adegbuyi
@ooade
Jul 27 2016 18:19
@Todai88 Okay.. u scared me there :smile:
Sorin Ruse
@sorinr
Jul 27 2016 18:23
@Todai88 see you have changed the "carousel" . there is one problem with the slides containing media. for that ones you should disable the hover back info reveal otherwise its hard to push the play button to see the embeded media
@Todai88 you should also think how will behave on mobile
Ademola Adegbuyi
@ooade
Jul 27 2016 18:28
It's well scattered on mobile
The carousel issh, you should be making use of bootstrap's helper class for images img-responsive
Segun
@Akindairo
Jul 27 2016 18:43
@MohammadHasham
Arin
@arinarjani
Jul 27 2016 18:52
hello, can anyone help me with my CSS? I am not sure why the buttons are out of the container ( yellow background ). here is my code: http://jsbin.com/judewarali/edit?html,css,output
KnoX
@knox97
Jul 27 2016 18:53
guys I need a help its not for FCC but its a passion of mine, forum for funny stuff
Look at this pictures now
Workspace 1_014.png
This is when I dont use iframe I just add markup to the page
Mark
@markgtl
Jul 27 2016 18:53
Hi guys I need help
<h1><div class="border-text text-primary responsive">Tribute to Max Verstappen</div></h1>
how can I make this element responsive
so that it scales on different devices
KnoX
@knox97
Jul 27 2016 18:54
Workspace 1_015.png
This is when I use iframe to add the same code
Workspace 1_016.png
thats the src page of the iframe
can anyone HELP ?
mingmingrr
@mingmingrr
Jul 27 2016 19:01
@knox97 what does it look like when you make the source page smaller?
KnoX
@knox97
Jul 27 2016 19:01
what do you mean?
mingmingrr
@mingmingrr
Jul 27 2016 19:02
shrink the width of the src page of the iframe down to the size of the iframe
Arin
@arinarjani
Jul 27 2016 19:06
from playing around with my code, it seems that the "float:left" and "float: right" under &.twtr_btn, &.fb_btn are causing the issue, but I am not sure why.
Sorin Ruse
@sorinr
Jul 27 2016 19:24
@arinarjani why don't you try to make in: .quote_area .buttons display: flex; flex-direction: row; then style the buttons positions ?
Arin
@arinarjani
Jul 27 2016 19:26
@sorinr hmm, that seemed to do it. thank you!
@sorinr thank you
CamperBot
@camperbot
Jul 27 2016 19:26
arinarjani sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 569 | @sorinr |http://www.freecodecamp.com/sorinr
Arin
@arinarjani
Jul 27 2016 19:26
@sorinr what does display: flex; do? now I need to figure out how to float the "new quote" button to the right. Do you know why it did not do it automatically?
Arin
@arinarjani
Jul 27 2016 19:34
@sorinr will do
Enrico Mattiazzi
@emattiazzi
Jul 27 2016 19:57
Hi to everyone, I am trying to create a responsive-grid with some thumbnails. These thumbnails should always be squared and I want them as <img> tags. I found a solution doing this:
https://jsfiddle.net/06db657j/
But I don't like this solution, do you have any suggestion? I also would like to center the image
Suzanne Atkinson
@AdventureBear
Jul 27 2016 19:59
good afternoon everyone
Stanley Young
@fatWalrus
Jul 27 2016 20:02
hello i'm on one of the jQuery problems and can't seem to get past it the part where i need to target the second child inside of my wells
Capture.JPG
any help would be appreciated :)
Dylan
@dhcodes
Jul 27 2016 20:04
lol @mpettaw2 thanks :D
CamperBot
@camperbot
Jul 27 2016 20:04
dhcodes sends brownie points to @mpettaw2 :sparkles: :thumbsup: :sparkles:
:cookie: 275 | @mpettaw2 |http://www.freecodecamp.com/mpettaw2
Dylan
@dhcodes
Jul 27 2016 20:05
@MohammadHasham if you didn't get the answer, you need to check against the return of an error number to work with the closed accounts
@Crebra i meant a CDN for the specific scrolling files you needed from that plugin
Joakim Bajoul Kakaei
@Todai88
Jul 27 2016 20:05

Hi guys,
Asked earlier, but didn't really get a response.
I need to center my buttons (next to eachother) beneath the carousel. Does anyone know how to do this by following responsive design-patterns?

https://codepen.io/Todai/pen/grKvjO

Suzanne Atkinson
@AdventureBear
Jul 27 2016 20:05
@fatWalrus it looks like you are targeting the wells themselves and not the elements in the well
try using .target instead of .well
labanch
@labanch
Jul 27 2016 20:06
can anyone help me with my weather app? How do I get the icons to change with the weather?
Olga C
@Octopinky
Jul 27 2016 20:07
@fatWalrus does your code make the 3rd elements in each well bounce?
Dylan
@dhcodes
Jul 27 2016 20:09
@labanch are you using the openweather api?
labanch
@labanch
Jul 27 2016 20:09
@dhcodes yes I am
Dylan
@dhcodes
Jul 27 2016 20:11
@labanch the filename of the icon is in the json at weather.icon, then you use that filename to change the url explained here: http://openweathermap.org/weather-conditions
pretty much read that site and you'll probably get it
labanch
@labanch
Jul 27 2016 20:12
@dhcodes ok. What if I wanted to use different icons? Like this one: http://erikflowers.github.io/weather-icons/
Dylan
@dhcodes
Jul 27 2016 20:13
@labanch i did that. the way i did was writing a switch with the different numbers in the conditions list under Weather conditions code
labanch
@labanch
Jul 27 2016 20:13
you did it for all the codes? @dhcodes
Dylan
@dhcodes
Jul 27 2016 20:14
well, I did the categories
so >200 and <300 would be thunderstorm picture/icon
<300
it wasn't that bad, you can do it!
labanch
@labanch
Jul 27 2016 20:17
ok so what did you put as the switch expression? data.weather.description?
Dylan
@dhcodes
Jul 27 2016 20:18
@labanch i think it'd be data.cod
labanch
@labanch
Jul 27 2016 20:19
ohh ok because it would be based on the conditions code. Ok I'll try that. And how can I do the categories like you did? Can I place that as a case?
@dhcodes
Muhammad Hasham
@MohammadHasham
Jul 27 2016 20:19
why my codepen has stopped suddenly
Dylan
@dhcodes
Jul 27 2016 20:19
@labanch the categories are at that link: http://openweathermap.org/weather-conditions
you just need to query the numbers
labanch
@labanch
Jul 27 2016 20:21
@dhcodes ok I'll give it a shot
Dylan
@dhcodes
Jul 27 2016 20:22
good luck
Zinia
@zinCodes
Jul 27 2016 20:28
help Build a Tribute Page
CamperBot
@camperbot
Jul 27 2016 20:28
no wiki entry for: build a tribute page
Darshan
@Dave1089
Jul 27 2016 20:40
@MohammadHasham open your console, u will see bunch of errors, resolve them
Screen Shot 2016-07-27 at 2.39.36 PM.png
melisa pettaway
@mpettaw2
Jul 27 2016 20:55
have i been blocked?
backspaceit
@backspaceit
Jul 27 2016 21:04
Hi, hoping for a pointer, Stand In Line on the basic java script map:
Write a function nextInLine which takes an array (arr) and a number (item) as arguments. Add the number to the end of the array, then remove the first element of array. The nextInLine function should then return the element that was removed.

function nextInLine(arr, item) {
// Your code here
arr.push(item);
var firstItem = arr(0);
arr.shift();
return firstItem; // Change this line
}

// Test Setup
var testArr = [1,2,3,4,5];
nextInLine(testArr, 10);
// Display Code
console.log("Before: " + JSON.stringify(testArr));
console.log(nextInLine(testArr, 10)); // Modify this line to test
console.log("After: " + JSON.stringify(testArr));

That's what I have so far, probably completely wrong
Mark
@markgtl
Jul 27 2016 21:09
hi coders I have a simple question for building a tribute site I actually used CSS styles, should I only use boodstrap? Or is this perfectly fine?
Tyler Moeller
@TylerMoeller
Jul 27 2016 21:13
@markgtl That's fine - no need to use bootstrap.
@backspaceit What you're trying to do will work if you change arr(0) to arr[0]. You could also just do return arr.shift() instead of setting a variable, as every time you run arr.shift() it will return the element that was removed.
function nextInLine(arr, item) {
  arr.push(item);
  return arr.shift();
}
backspaceit
@backspaceit
Jul 27 2016 21:18
Great thanks @TylerMoeller I've been stuck on this for ages
CamperBot
@camperbot
Jul 27 2016 21:18
backspaceit sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 697 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
spalqui
@spalqui
Jul 27 2016 21:20
hello guys wanna give me some feedback on my wikipedia viewer https://codepen.io/Spalqui/full/wWXAAa/
Mark
@markgtl
Jul 27 2016 21:24
@TylerMoeller thnx
CamperBot
@camperbot
Jul 27 2016 21:24
markgtl sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 698 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Muhammad Hasham
@MohammadHasham
Jul 27 2016 21:25
why is my codepen not working there are no errors it was working fine suddenly something has happened
http://codepen.io/Mohammad_Hasham/pen/QEAVWY?editors=0010
Tyler Moeller
@TylerMoeller
Jul 27 2016 21:30
@MohammadHasham You don't have an element with id="channel", but your JS needs one to populate the data from the API. For example: $("#channel").empty();
Muhammad Hasham
@MohammadHasham
Jul 27 2016 21:31
@TylerMoeller Thanks
CamperBot
@camperbot
Jul 27 2016 21:31
mohammadhasham sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 699 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Daniel Parvin
@danielparvin
Jul 27 2016 21:33
Hi,
Do you use Myer's CSS Reset or Necolas' Normalize? When do you choose to use one or the other, and why?
alpox
@alpox
Jul 27 2016 21:33
@MohammadHasham If the ajax requests throws an error, it doesn't call the callback you provided so your if (c.status === 422) { never gets entered. $getJSON returns a promise which you can use for handling the failing response like:
$getJSON(url, successCallback).fail(failCallback)
Muhammad Hasham
@MohammadHasham
Jul 27 2016 21:35
@alpox Thanks that has been solved !
CamperBot
@camperbot
Jul 27 2016 21:35
mohammadhasham sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
Jack Lyons
@JackEdwardLyons
Jul 27 2016 21:35
hi guys, im making some circular navigations with segments.... and im trying to place text inside them, but it skews terribly (because im rotating and skewing the list) I'm trying to UNskew the text, but finding it very hard.... Here's my pen, could anyone help?
http://codepen.io/JackEdwardLyons/pen/oLyzOq?editors=1000
CamperBot
@camperbot
Jul 27 2016 21:35
:cookie: 669 | @alpox |http://www.freecodecamp.com/alpox
Jack Lyons
@JackEdwardLyons
Jul 27 2016 21:35
its the far right cog, you can see the red text in the purple circle
Joakim Bajoul Kakaei
@Todai88
Jul 27 2016 21:36
Hey guys,
Hoping to get some help with my pen:
I need the two buttons that are controlling the navigation of my carousel to be centered in the section, they should be next to eachother and beneath the carousel).
Could anyone help with that?
https://codepen.io/Todai/pen/grKvjO
clevrmonkey
@clevrmonkey
Jul 27 2016 22:15
can anyone help on the wikipedia search challenge?
confused about the header origin property required by the API
Matt K
@mkrump
Jul 27 2016 22:30
@clevrmonkey i just recently finished wiki. i could take a look. do you have a code pen or an example of the api call that you are making?
clevrmonkey
@clevrmonkey
Jul 27 2016 22:31
thank you @mkrump !!
CamperBot
@camperbot
Jul 27 2016 22:31
clevrmonkey sends brownie points to @mkrump :sparkles: :thumbsup: :sparkles:
:cookie: 207 | @mkrump |http://www.freecodecamp.com/mkrump
Im having trouble with the API request format. When I inspect the page after running, I keep getting an error "Refused to execute script from '' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled."
Xavier Velez
@JonSnow08
Jul 27 2016 22:42
@clevrmonkey why jsonp instead of json?
clevrmonkey
@clevrmonkey
Jul 27 2016 22:47
@JonSnow08 after getting the error i mentioned i googled around and many sources said that for cross domain requests using jsonp will help prevent access issues so i tried it but still had no luck
Nestor Figliuolo
@Makaan
Jul 27 2016 22:50
Hi guys, i'm stuck in the weather proyect, i have the icon code from the API but i can't get it from the page, can someone help me? or someone have the same problem?
clevrmonkey
@clevrmonkey
Jul 27 2016 22:52
@Makaan use the code and attach it to the end of link to the image file
Nestor Figliuolo
@Makaan
Jul 27 2016 22:53
yes, i have done it, if i open it in a new tab with that same URL i can view the image
clevrmonkey
@clevrmonkey
Jul 27 2016 22:53
the easiest way would be to save the icon code into a variable, then change the source of your icon image to "http://openweathermap.org/img/w/" + code_var + ".png"
James Rezendes
@JamieRez
Jul 27 2016 22:54

@Makaan

<img "src=https://cors-anywhere.herokuapp.com/http://openweathermap.org/img/w/01n.png"

Try just http://openweathermap.org/img/w/01n.png

Matt K
@mkrump
Jul 27 2016 22:54
@clevrmonkey in codepen i had to use crossoriginme b/c wasn't working for https version of my pen. I couldn't see where your api call was being made, since the ajax call was inside .ready instead of associated with an event.
Nestor Figliuolo
@Makaan
Jul 27 2016 22:55
@JamieRez i already tried that
Matt K
@mkrump
Jul 27 2016 22:55
$(document).ready(function (data) {
        $.getJSON("https://crossorigin.me/http://en.wikipedia.org/w/api.php?callback=?",
        {
            srsearch: 'football',
            action: "query",
            list: "search",
            srnamespace: '0',
            format: "json"
        },function(result){console.log(result)});
});
but something like that should work.
clevrmonkey
@clevrmonkey
Jul 27 2016 22:56
@Makaan change this line $("#imagen").html('<img "src=https://cors-anywhere.herokuapp.com/http://openweathermap.org/img/w/01n.png" alt="weather icon">');
Nestor Figliuolo
@Makaan
Jul 27 2016 22:57
@clevrmonkey with that?
nothing, only the alt text
clevrmonkey
@clevrmonkey
Jul 27 2016 22:58
@Makaan could you save it so that i can see how youve changed the code
Nestor Figliuolo
@Makaan
Jul 27 2016 22:58
ready
clevrmonkey
@clevrmonkey
Jul 27 2016 22:58
repost the link
@mkrump ill try that way and let you know!
Matt K
@mkrump
Jul 27 2016 23:00
@clevrmonkey you need to associate it with a click event, but that was just an example of how you could do api call.
clevrmonkey
@clevrmonkey
Jul 27 2016 23:00
@mkrump, will do. i was using the ready just so that i wouldnt have to click each time i ran and changed it, but can i only call an API via events?
Matt K
@mkrump
Jul 27 2016 23:03
@clevrmonkey no that's fine for testing. should work.
Nestor Figliuolo
@Makaan
Jul 27 2016 23:04
when i open the link directly "https://cors-anywhere.herokuapp.com/http://openweathermap.org/img/w/01n.png" it's says the image have errors
clevrmonkey
@clevrmonkey
Jul 27 2016 23:05
function update(obj) {
    json=obj;
    temp=json.main.temp;
    min=json.main.temp_min;
    max=json.main.temp_max;

    var html="<p>Weather report for the city of "+obj.name+'</p>';
    $("#city").html(html);
    $("#imagen").html('<img src="https://cors-anywhere.herokuapp.com/http://openweathermap.org/img/w/01n.png" alt="weather icon">');
you need to change this function. create a new var code under max. code = json.weather[0].icon
Nestor Figliuolo
@Makaan
Jul 27 2016 23:05
i'll try
fernando
@zaynsantiago
Jul 27 2016 23:06
does anyone know how to make a back to top button but when u stays on the page well scrolling
Stephen James
@sjames1958gm
Jul 27 2016 23:07
@Makaan I don't think cors-anywhere can support src= urls
clevrmonkey
@clevrmonkey
Jul 27 2016 23:07
@Makaan then change this line to $(#imagen").html("<img src='http://openweathermap.org/img/w/" + code + ".png'");
$("#imagen").html('<img src="https://cors-anywhere.herokuapp.com/http://openweathermap.org/img/w/01n.png" alt="weather icon">');
@zaynsantiago im not sure if theres an official button type that does this bu t if you create a fixed button that directs to the top, this would do the same thing
Nestor Figliuolo
@Makaan
Jul 27 2016 23:08
done it, still nothing
Matt K
@mkrump
Jul 27 2016 23:09
i was going to say if don't have to use cors-anywhere @Makaan does this work?
$("#imagen").html('<img src="https://crossorigin.me/http://openweathermap.org/img/w/01n.png" alt="weather icon">');
James Rezendes
@JamieRez
Jul 27 2016 23:10

I'm working on a personal project, and I'm having trouble with having a click function work on a clone.
My code for cloning is

$('#tagSearchClone').clone(true).text($('#tagSearchInput').val()).removeAttr('id').addClass('tagSearch').appendTo('.tagSearchList');

I want to remove the clone by clicking on it. Here's the code for that

$('.tagSearch').click(function(){
      $(this).remove();
    });

Here is an example of it on codepen. Type in a #tag in the input and press enter. When you click on the tag it should be removed. What's wrong here?

Nestor Figliuolo
@Makaan
Jul 27 2016 23:12
@mkrump no, it doesn't
Matt K
@mkrump
Jul 27 2016 23:12
really?! when i tried i see icon.
Nestor Figliuolo
@Makaan
Jul 27 2016 23:13
if i open it in a new tab it says "The image https://cors-anywhere.herokuapp.com/http://openweathermap.org/img/w/01n.png can't been displayed, it have errors" translated from spanish
damn, i can see it there
clevrmonkey
@clevrmonkey
Jul 27 2016 23:14
@Makaan are you calling the update function ever?
the city is not being displayed
Nestor Figliuolo
@Makaan
Jul 27 2016 23:14
wait a second
clevrmonkey
@clevrmonkey
Jul 27 2016 23:14
i think it is functional but is not being called
@Makaan when the city displays the icon does also
Nestor Figliuolo
@Makaan
Jul 27 2016 23:16
now works, i was using herokuapp not crossorigin
thanks for the help!
clevrmonkey
@clevrmonkey
Jul 27 2016 23:17
glad it works!
Nestor Figliuolo
@Makaan
Jul 27 2016 23:17
i will use only crossorigin in the future then :P
fernando
@zaynsantiago
Jul 27 2016 23:19
@clevrmonkey i seen it on acouple websites im just trying to figure out how they did it
nirurin
@nirurin
Jul 27 2016 23:22
HI guys, could someone take a look at an odd little bit of formatting for me? When a scroll down on my page, and the navbar affixes to the top of the page, the length of it extends beyond its container... which Im not sure it's meant to be able to do haha
Reggie
@Reggie01
Jul 27 2016 23:27

@Todai88 one possible solution to your problem is remove the surroundings div of prev and next button. Add carousel-buttons class to div.
html

<div class="row carousel-buttons">
    <div class="prev">Prev</div>
    <div class="next">Next</div>
</div>

css

.carousel-buttons{
            text-align: center; // add
        }

        .prev{}

        .next{}

        .next, .prev {
            color: #444;
            position: absolute; // remove
            top: 100px; // remove
            padding: 1em 2em;
            cursor: pointer;
            background: #CCC;
            border-radius: 5px;
            border-top: 1px solid #FFF;
            box-shadow: 0 5px 0 #999;
            transition: box-shadow 0.1s, top 0.1s;
            display: inline-block;  // add
            margin: 10px; // add
        }

Resource to read about css properties is w3c. Stack overflow that covers your issue. Lastly, you can right-click on your elements you have issue with and inspect or hit F12 and scroll to your problem elements. This is fastest way to see what your css properties are and to experiment with different values.

clevrmonkey
@clevrmonkey
Jul 27 2016 23:29
@mkrump your suggestion helped a lot, thank you. how do i get the info from the console? or should i just save it elsewhere from the get go
CamperBot
@camperbot
Jul 27 2016 23:29
clevrmonkey sends brownie points to @mkrump :sparkles: :thumbsup: :sparkles:
:warning: clevrmonkey already gave mkrump points
Reggie
@Reggie01
Jul 27 2016 23:34
@zaynsantiago I googled back to top css and found this article. Article demo page.
Allen Pittard
@donaldpittard
Jul 27 2016 23:44
Does anyone have any good links for the No Repeats Please problem?
Michal Kozlowski
@McBiggos
Jul 27 2016 23:44

Hey guys,
I have a button that changes background-color of body and button and I want this transition to ease. However, my code doesn't work and I don't know why:
html:

<body class = "change-background">
  <div>
    <button class = "change-background">New quote</button>
  </div>
</body>

css:

.change-background {
  transition: background-color 2.0s ease;
};

js:

$(".change-background").on("click", function() {
  var a = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  var c = Math.floor(Math.random() * 256);
  var theRGB = "rgb(" + a + "," + b + "," + c + ")";
  $(".change-background").css("background-color", theRGB);
});
Elbert Cortez
@trip16661
Jul 27 2016 23:47
wikipedia don't need crossorigin lol with a simple call back is enough
fernando
@zaynsantiago
Jul 27 2016 23:47
@Reggie01 thanks made acouple changes but loved it
CamperBot
@camperbot
Jul 27 2016 23:47
zaynsantiago sends brownie points to @reggie01 :sparkles: :thumbsup: :sparkles:
:cookie: 355 | @reggie01 |http://www.freecodecamp.com/reggie01
Xavier Velez
@JonSnow08
Jul 27 2016 23:48
@trip16661 yeah I did it with a simple json callback
Elbert Cortez
@trip16661
Jul 27 2016 23:50
@McBiggos you are asugbubg the same class to the body and to the button aswell
mzedlach
@mzedlach
Jul 27 2016 23:51
Gooooooood evening everyone!
Elbert Cortez
@trip16661
Jul 27 2016 23:51
also if what you want is to asign a color to that you might aswell do this
$(this).css(bla bla bla..
Michal Kozlowski
@McBiggos
Jul 27 2016 23:54
@trip16661 I don't get the first part - why can't I asign the same class to both of them?
Elbert Cortez
@trip16661
Jul 27 2016 23:54
You can, I'm not saying you cant the thing is if you do it that way you are going to put your button the same color as the body
mzedlach
@mzedlach
Jul 27 2016 23:54
I have a question in terms of approach. I'm on the first challenge of building a tribute page. I was thinking of making a main picture that is cushioned by 3 pictures on either side of it. The center pictures is taller than it is wide, so the pictures on the side are more to fill out the width and I was thinking of making them squares. So, three pictures on the left that stack on top of eachother to be as tall as the main centre picture. I hope this makes sense. How would I approach this? Columns?
Matt K
@mkrump
Jul 27 2016 23:55
@clevrmonkey I was just printing to console for testing. I would write a function to loop over the elements in returned request and append to some element in your html.
Michal Kozlowski
@McBiggos
Jul 27 2016 23:56
@trip16661 Yeah - that's what I want to do and it works as I want - button and body color changes each time I click button and it is the same for button and body. But I also want it to ease beetween those changes of colors. I added transition: to my class in css, but it doesn't work
Elbert Cortez
@trip16661
Jul 27 2016 23:57
@mzedlach "I was thinking of making a main picture that is cushioned by 3 pictures"
then its not an image its just tree images
anyway what you are looking for is probably flex property check it a bit
@McBiggos what doesnt work transition or the whole changing color
can i see the pen?
Michal Kozlowski
@McBiggos
Jul 27 2016 23:59
@trip16661 whole changing color thing works but transition doesnt