These are chat archives for FreeCodeCamp/HelpFrontEnd

18th
Sep 2016
Michael Bomholt
@bomholtm
Sep 18 2016 00:00
@samcampc whats the Problem
samson
@samcampc
Sep 18 2016 00:02
its my first time on this page should i watch the tribute page dirst
Istvan Kokuti
@zaturek
Sep 18 2016 00:04
@samcampc You have to build one...
Michael Bomholt
@bomholtm
Sep 18 2016 00:07
@samcampc i dont unterstand. If you dont know how to build a basic HTML page you should start on top of the map instead starting directly with the projects
samson
@samcampc
Sep 18 2016 00:07

this
Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/NNvBQW/.

Rule #1: Don't look at the example project's code. Figure it out for yourself.

Rule #2: Fulfill the below user stories. Use whichever libraries you need. Give it your own personal style.

User Story: I can view a tribute page with an image and text.

User Story: I can click on a link that will take me to an external website with further information on the topic.

Remember to use Read-Search-Ask if you get stuck.

When you are finished, click the "I've completed this challenge" button and include a link to your CodePen.

You can get feedback on your project by sharing it with your friends on Facebook.

Michael Bomholt
@bomholtm
Sep 18 2016 00:08
?
@samcampc thats the assignment .. But whats your question?
Getting more and more confused
mjcreate
@mjcreate
Sep 18 2016 00:21
Hi everyone. I have a quick question. My placeholder is not showing up. Here's my line of code
    <form >
      <div class="form-group">
        <div class="col-sm-10">
          <input type=“text” class="form-control contactform" id="inputName” placeholder=“Name”>
 <label for=" inputName " class="title-font">Name</label>
</div>
</div>
</form>
lines of code
Kantra
@removed~kantrakantra
Sep 18 2016 00:22

Can anybody help me figure out this column spacing with bootstrap? It works in medium screen width when the columns stack vertically but it gets all funky in larger screen width when the images are aligned horizontally.

http://codepen.io/kantrakantra/pen/GjqZoR

mjcreate
@mjcreate
Sep 18 2016 00:22
and no idea why it showed up as green - do I have a typo?
Andrew Seravkin
@ndrsrv
Sep 18 2016 00:23
@mjcreate what quotes you use? not ” , use placeholder="Name"
mjcreate
@mjcreate
Sep 18 2016 00:24
@ndrsrv I will retype everything - I copied and pasted part of that...
Gang Zhao
@crumpx
Sep 18 2016 00:25
looks like different fonts or charsets
mjcreate
@mjcreate
Sep 18 2016 00:27
that was it! Thanks @ndrsrv & @crumpx
CamperBot
@camperbot
Sep 18 2016 00:27
mjcreate sends brownie points to @ndrsrv and @crumpx :sparkles: :thumbsup: :sparkles:
:cookie: 372 | @crumpx |http://www.freecodecamp.com/crumpx
:cookie: 309 | @ndrsrv |http://www.freecodecamp.com/ndrsrv
Andrew Seravkin
@ndrsrv
Sep 18 2016 00:29
@kantrakantra i delete <div class="bordier"></div> in HTML part. Use .column {margin-top: 10px; margin-bottom:10px} in CSS part
This message was deleted
Kantra
@removed~kantrakantra
Sep 18 2016 00:35
@ndrsrv Ah thanks. That solves the problem for vertical stacking but there's no space between the columns still in horizontal view
CamperBot
@camperbot
Sep 18 2016 00:35
kantrakantra sends brownie points to @ndrsrv :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @ndrsrv |http://www.freecodecamp.com/ndrsrv
Andrew Seravkin
@ndrsrv
Sep 18 2016 00:39
@kantrakantra for horizontal margin-right: 10px; margin-left: 10px; or for all sides margin: 10px; or margin: 10%;. Experimenting!
Kantra
@removed~kantrakantra
Sep 18 2016 00:48
@ndrsrv ok thank you! One more question. Now that I've added the spacing it appears the container width is too narrow or something (yet it isn't defined in the css) and the right-most image is forced onto the next line below the first two
CamperBot
@camperbot
Sep 18 2016 00:48
:warning: kantrakantra already gave ndrsrv points
kantrakantra sends brownie points to @ndrsrv :sparkles: :thumbsup: :sparkles:
Zeb Burke-Conte
@zmbc
Sep 18 2016 00:53
Hi all!
I was just about to start my Twitch viewer, and noticed that the example doesn't seem to work.
Walid Ashri
@walidashri
Sep 18 2016 00:56
@zmbc Twitch change the api policy u have to regester and add app id to the request
Zeb Burke-Conte
@zmbc
Sep 18 2016 00:56
Okay, is that an okay thing to expose on Codepen?
Or is that why nobody has fixed the example?
Andrew Seravkin
@ndrsrv
Sep 18 2016 00:57
@kantrakantra cuz margin - it is outer margin and with bootstrap you set col-md-4 4+4+4=12. it turns out that the width of the page for a margin not, and padding: 10px also not work, cuz you have background (padding need for inner elements, not background). Use .column{border: 10px solid white;} or border-top:10px solid white;, experiment
Walid Ashri
@walidashri
Sep 18 2016 00:58
@zmbc I've done mine not sure about the example
Zeb Burke-Conte
@zmbc
Sep 18 2016 01:03
Just in case anyone is wondering the same thing I was, it looks like Twitch only requires your client_id (which is like a username) for the APIs needed. There is also a client_secret (which is like a password) but that's only for applications that integrate more deeply.
Nicholas Vorraso
@nickeyvee
Sep 18 2016 01:07
i have a pretty good question for anyone that will listen
Nam Nguyen
@denominatortron
Sep 18 2016 01:22
what's up @nickeyvee
@denominatortron when users visit the project from "insecure origins", i want to replace the protocol with "https:" when the page loads. When i try to do so the page reloads indefinitely.
when someone visit the page i want to force the protocol to https:
Jesseniah
@Jesseniah
Sep 18 2016 01:25
Do you need a replit account?
Nam Nguyen
@denominatortron
Sep 18 2016 01:26
@nickeyvee I think your ready function is causing an infinite reload when you tell it to reload in https. you need to check if it's already in https, and do nothing if so
otherwise, the document.ready() function is continually being called when https is being set
U-ways
@U-ways
Sep 18 2016 01:27
@nickeyvee There is an HTML meta method that allows you to redirect people to different pages, maybe use that to redirect your users to an https connection?
mjcreate
@mjcreate
Sep 18 2016 01:27
I thought I asked this question but maybe I didn't hit send. Why would a form at the bottom of the page fall off the background color of a div it's in?
Nam Nguyen
@denominatortron
Sep 18 2016 01:29
@mjcreate when is this happening?
@mjcreate is this happening on submit?
Nicholas Vorraso
@nickeyvee
Sep 18 2016 01:31
@denominatortron i see
mjcreate
@mjcreate
Sep 18 2016 01:31
No just on full page view https://codepen.io/mjcreate/full/kkbKoR/
Nicholas Vorraso
@nickeyvee
Sep 18 2016 01:31
@denominatortron thanks for the pointer
CamperBot
@camperbot
Sep 18 2016 01:31
nickeyvee sends brownie points to @denominatortron :sparkles: :thumbsup: :sparkles:
:cookie: 11 | @denominatortron |http://www.freecodecamp.com/denominatortron
Dean Lai
@Deansidious
Sep 18 2016 01:33

Hi guys, i would like to ask how can I ID a specific text to make them "yellow color" out of many other words?

For example, the word is 1st, i want to make it stand out so that ppl would know 1st is the top placing.

If i put <ol id="1st"> on html and #1st {
color: yellow;
}

Is it the right way to do it? but i know its not the right way, is there another way to do it? Sorry im a complete beginner

Nam Nguyen
@denominatortron
Sep 18 2016 01:35
@Deansidious best practice would be to use a class. you wouldn't be able specfically target the word 'first' but you could target any text you want like a highlighter
Jesseniah
@Jesseniah
Sep 18 2016 01:36
What in the world is a generic html element?
Nam Nguyen
@denominatortron
Sep 18 2016 01:45
@Jesseniah maybe just a tag?
Dean Lai
@Deansidious
Sep 18 2016 01:50
@denominatortron Hello, thanks for the reply! When you say highlight a text, what would the code be?
CamperBot
@camperbot
Sep 18 2016 01:50
deansidious sends brownie points to @denominatortron :sparkles: :thumbsup: :sparkles:
:cookie: 12 | @denominatortron |http://www.freecodecamp.com/denominatortron
mjcreate
@mjcreate
Sep 18 2016 02:00
never mind, I found a typo
jrandallhansen
@jrandallhansen
Sep 18 2016 02:03
anyone think they can help me debug my case for users who dont exist on this twitch assignment? https://codepen.io/jrandall/pen/pEjqQN?editors=1112
Toni Shortsleeve
@KoniKodes
Sep 18 2016 02:04
@jrandallhansen you need to check the ready status and then match the error. It's not showing up because it is not an account or the account is closed.
Girzima
@Girzima
Sep 18 2016 02:05
Does anyone know how to make a drop down nav menu disappear when clicking a page jump link?
jrandallhansen
@jrandallhansen
Sep 18 2016 02:05
@KoniKodes doesnt my if (data.error) statement match the error?
i was trying to use that to check for the existence of an error attribute on the returned object.
since if you follow the URL to a nonexisting user you get an object with an error attribute
do i need to change to an AJAX call and put this case in the error: attribute of the call?
Toni Shortsleeve
@KoniKodes
Sep 18 2016 02:08
@jrandallhansen I pm'd you.
@jrandallhansen Here' s how I started mine... if (stats.error === "Unprocessable Entity"){
jrandallhansen
@jrandallhansen
Sep 18 2016 02:13
@KoniKodes i replied thanks. im trying it now but the error message has changed too. i though just checking it exists would do the same.
CamperBot
@camperbot
Sep 18 2016 02:13
jrandallhansen sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 370 | @konikodes |http://www.freecodecamp.com/konikodes
jrandallhansen
@jrandallhansen
Sep 18 2016 02:13
@KoniKodes ya i am still getting the same problem. i will have to take a look later. have to run now thank you
CamperBot
@camperbot
Sep 18 2016 02:13
jrandallhansen sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:warning: jrandallhansen already gave konikodes points
Hayden Oster
@Hayden94
Sep 18 2016 02:18
Hello. I accidentally submitted my tribute page pen to my personal portfolio webpage pen. Is there a way to remove the submission from my personal portfolio webpage?
I haven't even started working on my personal portfolio webpage
Just finished my tribute page
Jesseniah
@Jesseniah
Sep 18 2016 02:25
@denominatortron thank you!
CamperBot
@camperbot
Sep 18 2016 02:25
:cookie: 13 | @denominatortron |http://www.freecodecamp.com/denominatortron
jesseniah sends brownie points to @denominatortron :sparkles: :thumbsup: :sparkles:
jgoldverg
@jgoldverg
Sep 18 2016 02:31
@jgoldverg
hey guys i need some help right now I am the project where i have to show local weather. I have no clue how to get information from the api
can anyone explain what I am supposed to do to get it. completely lost like a bunny in a desert
Erick Delfin
@Nifled
Sep 18 2016 02:33
Hi can anyone help me out? I;m having a problem on my portfolio page, I want a certain div to be fixed into one position when scrolling, but I position :fixed it and it disappears. positoin absolute doesn't work either
mjcreate
@mjcreate
Sep 18 2016 02:35
@Nifled where is it?
basically, I want to have the contact form stay put when I scroll down or up, not move along with the scroll
Not sure if i'm explaining myself correctly
mjcreate
@mjcreate
Sep 18 2016 02:43
@Nifled I'm a newbie too but when I used position:fixed I had to put top:0 left:0 because I wanted it fixed at the top. I think you have to figure out where exactly on the screen you want it to be and put that in top & left (or bottom & right) so it knows where to fix it.
Erick Delfin
@Nifled
Sep 18 2016 02:49
I'll try doing that, thanks for your help. @mjcreate
CamperBot
@camperbot
Sep 18 2016 02:49
nifled sends brownie points to @mjcreate :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @mjcreate |http://www.freecodecamp.com/mjcreate
mjcreate
@mjcreate
Sep 18 2016 02:51
good luck
Chris Cullen
@123xylem
Sep 18 2016 02:51
http://codepen.io/123xylem/pen/jrAKPN?editors=1100
Hi... How can I get my white line Panels to fit to the inside of the circle going around it?
I have tried putting them in a wrap but dont really understand how to make it work?
Any vids or links?\
Harley Kruse
@HamishAus
Sep 18 2016 02:53
hey people, I've previously finished my tribute page, but the portfolio page seems to be a lot more complicated than anything I've worked on yet. Does anybody have any advice? :)
vínαч puppαl
@vinaypuppal
Sep 18 2016 02:54
@123xylem since you used transform: translate(20em) on .panel they are going out of #wrap you can hide them by
#wrap{
 overflow: hidden;
}
Chris Cullen
@123xylem
Sep 18 2016 02:57
@vinaypuppal Hmm it doesnt seem to change anything
vínαч puppαl
@vinaypuppal
Sep 18 2016 02:59
@123xylem i can see in your pen now the white lines are inside circle as you asked??
Chris Cullen
@123xylem
Sep 18 2016 02:59
Yea I want them to wrap to the side
going all around the inside
vínαч puppαl
@vinaypuppal
Sep 18 2016 03:03
@123xylem oh okay like simon game board??
@123xylem For that design you may look at this tutorial
mjcreate
@mjcreate
Sep 18 2016 03:06
@HamishAus just start on one thing at a time that's what I'm doing
Chris Cullen
@123xylem
Sep 18 2016 03:08
@vinaypuppal thanks
CamperBot
@camperbot
Sep 18 2016 03:08
123xylem sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 543 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
mjcreate
@mjcreate
Sep 18 2016 03:12
By the way, speaking of the portfolio page, I have a question about the requirements (user stories) - they don't mention a contact form so is that optional? and even if I have a contact form, there's no way for me to actually make it submit anything right? (so I can just have a dummy submit button)
vínαч puppαl
@vinaypuppal
Sep 18 2016 03:14
@mjcreate yes its optional. You may just provide links to your social pages (like linkedIn)instead of contact form
mjcreate
@mjcreate
Sep 18 2016 03:19
thanks @vinaypuppal
CamperBot
@camperbot
Sep 18 2016 03:19
mjcreate sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 544 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
mjcreate
@mjcreate
Sep 18 2016 03:20
Hey does anyone else keep getting randomly logged out of codepen? It's so annoying. I've learned to do a copy & paste of everything into a text editor when that happens before I log in again otherwise my changes are gone
vínαч puppαl
@vinaypuppal
Sep 18 2016 03:20
@mjcreate and you can also use <a href="mailto:me@gmai.com?subject=From site">EmailMe</a> this when user clicks this link it will open their e-mail client and prefill subject for example From site
mjcreate
@mjcreate
Sep 18 2016 03:23
ok I will try that
tbc13315
@tbc13315
Sep 18 2016 03:29
Hi everybody,
I'm working on the Twitch.TV app and have encountered some difficulties which I can't seem to overcome.
Justin Kishbaugh
@jkishbaugh
Sep 18 2016 03:32
I can't get my wikipedia api request to function. Hoping someone can take a look and find where I am going wrong. Thanks. https://codepen.io/kishju/pen/amvVgp
tbc13315
@tbc13315
Sep 18 2016 03:34
hey @jkishbaugh I noticed you didn't make the query a variable.
vínαч puppαl
@vinaypuppal
Sep 18 2016 03:34
@tbc13315 You may have missed Twitch tv client-id in request read this post you will understand https://blog.twitch.tv/client-id-required-for-kraken-api-calls-afbb8e95f843#.fy1yyynr4
tbc13315
@tbc13315
Sep 18 2016 03:34
Just looking at it briefly
Thanks @vinaypuppal, but I think my problem might be even more basic than that.
CamperBot
@camperbot
Sep 18 2016 03:36
tbc13315 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 545 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
vínαч puppαl
@vinaypuppal
Sep 18 2016 03:37
@tbc13315 what that ??
tbc13315
@tbc13315
Sep 18 2016 03:38
It's really bare bones because I'm trying to test and find out what I'm doing wrong. http://codepen.io/tbc13315/pen/VjQQaw
Thanks in advance!
vínαч puppαl
@vinaypuppal
Sep 18 2016 03:38
@jkishbaugh where did you call your search function and its $.getJSON not getJson check this typo as well
@tbc13315 You as well its $.getJSON not $.getJSONP
tbc13315
@tbc13315
Sep 18 2016 03:40
The twitch site said to use JSONP instead of JSON
Justin Kishbaugh
@jkishbaugh
Sep 18 2016 03:41
@vinaypuppal I called it in the form id using onsubmit
vínαч puppαl
@vinaypuppal
Sep 18 2016 03:42
@tbc13315 yes ?callback=? this part in your request URL makes AJAX request JSONP request and there is no $.getJSONP function in Jquery as you can see in chrome console $.getJSONP is not a function
Justin Kishbaugh
@jkishbaugh
Sep 18 2016 03:42
That is how it should be done right?
vínαч puppαl
@vinaypuppal
Sep 18 2016 03:44

@jkishbaugh You just wrote this in submit handler

$(".search-form").submit(function(event) {
    event.preventDefault();
  });

but you need to call it like this

$(".search-form").submit(function(event) {
    event.preventDefault();
search();
  });

and correct this $.getJSON not $.getJson inside search function you wrote

yes ?callback=? this part in your request URL makes AJAX request JSONP request and there is no $.getJSONP function in Jquery as you can see in chrome console $.getJSONP is not a function

@tbc13315 i forgot to tag you

tbc13315
@tbc13315
Sep 18 2016 03:47
Thanks @vinaypupal I changed the call function to just JSON, but it still isn't working.
CamperBot
@camperbot
Sep 18 2016 03:47
tbc13315 sends brownie points to @vinaypupal :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for vinaypupal
vínαч puppαl
@vinaypuppal
Sep 18 2016 03:47
@tbc13315 did you get client-id??
Justin Kishbaugh
@jkishbaugh
Sep 18 2016 03:47
@vinaypuppal I corrected both of those but I am still not getting any results.
vínαч puppαl
@vinaypuppal
Sep 18 2016 03:48
@jkishbaugh i still see old code only, did you save pen?? and can you post link to your pen again.
Justin Kishbaugh
@jkishbaugh
Sep 18 2016 03:49
vínαч puppαl
@vinaypuppal
Sep 18 2016 03:53
@jkishbaugh remove this onsubmit="return search()" from your html form tag and your code will work but your API request URL is not returning correct response. so check that once
@jkishbaugh you can place console.log(r) inside callback of getJSON to view response in chrome console and check what response your getting back. Hit Ctrl+shift+j to get chrome console.
tbc13315
@tbc13315
Sep 18 2016 04:05
@vinaypuppal Thanks for taking a look at my code and for the link to the twitch client id doc. It still doesn't seem to be working but I will have to figure it out later. Goodnight! (unless you on the other side of the world, in which case, good afternoon! ;))
CamperBot
@camperbot
Sep 18 2016 04:05
tbc13315 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: tbc13315 already gave vinaypuppal points
Justin Kishbaugh
@jkishbaugh
Sep 18 2016 04:07
@vinaypuppal Thanks for your help.
CamperBot
@camperbot
Sep 18 2016 04:07
jkishbaugh sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 546 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Aldea Florentin
@FL0ryc3L
Sep 18 2016 04:09
Morning! Can somebody, please, tell me why this isn't working? The CSS & JS, I mean
https://codepen.io/FL0ryc3L/pen/KgrYAL
Chris Cullen
@123xylem
Sep 18 2016 04:15
http://codepen.io/123xylem/pen/jrAKPN?editors=1100
can someone help me with my simon game.. Im completely baffled on the Css positioning.. If you have a link to a video or something I would also appreciate it!
Stephen Suratos
@stephenfs
Sep 18 2016 04:30
This message was deleted
Sorin Ruse
@sorinr
Sep 18 2016 05:08
@FL0ryc3L here some changes: tribute page
Stephen Suratos
@stephenfs
Sep 18 2016 05:10
my timeline link isnt jumping to the right section of the page...
https://codepen.io/ssuratosjr/full/RGRvzm/
its suppose to scroll down to the bulleted timeline section when "timeline" is clicked.
Sorin Ruse
@sorinr
Sep 18 2016 05:20
@SteveAmaki it does on chrome and edge
Stephen Suratos
@stephenfs
Sep 18 2016 05:22
@sorinr Im in Chrome and its only scrolling down halfway the first section. hmmm...
Sorin Ruse
@sorinr
Sep 18 2016 05:25
@SteveAmaki its because of the jumbotron class that adds a padding-top
Stephen Suratos
@stephenfs
Sep 18 2016 05:27
oh ok. Thanks @sorinr
CamperBot
@camperbot
Sep 18 2016 05:27
steveamaki sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 712 | @sorinr |http://www.freecodecamp.com/sorinr
Chris Cullen
@123xylem
Sep 18 2016 05:29
var tlSound="beep-3.wav";

$("#TL").on("click",function(){
 tlSound.play();
})
Is this a correct way of using my beep.wav file stored on my computer on click??
I dont know where to find the right filename
Sorin Ruse
@sorinr
Sep 18 2016 05:33
@SteveAmaki welcome. try to not use that blind a links just as target. better give to that <div class="jumbotron"> the ids like: <div class="jumbotron" id="timeline"> ecc
Stephen Suratos
@stephenfs
Sep 18 2016 05:34
@sorinr not sure how to anchor it to a class or id..
Also, I dont like how my buttons are going pass the first section on smaller screens. ugh!
Sorin Ruse
@sorinr
Sep 18 2016 05:35
@123xylem you cannot link pc files on codepen. have to upload them externally
@SteveAmaki as i said: <div class="jumbotron" id="timeline"> or <div class="jumbotron" id="crazyOnes"> will do the trick. and ofc remove that <a> tags
Stephen Suratos
@stephenfs
Sep 18 2016 05:37
@sorinr and the link would be...
<a href="timeline"> link </a>
?
Cyril Alvarez Adriaansen
@caa1982
Sep 18 2016 05:39
hi guys
function clk(){
if ($.turn === AI){
$(".block").unbind();
}
else{
$(".block").bind();
}
}
can't seems to make it work
it unbind but doesn't bind it back
I have also tried on and off same prob
what m@I missing
Sorin Ruse
@sorinr
Sep 18 2016 05:41
@SteveAmaki the button links are like <a href"#timeline" class="btn btn....">
Stephen Suratos
@stephenfs
Sep 18 2016 05:43
Thanks @sorinr
CamperBot
@camperbot
Sep 18 2016 05:43
steveamaki sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: steveamaki already gave sorinr points
Chris Cullen
@123xylem
Sep 18 2016 05:58

15:58
Can someone advise how/WHERE I can get tones for my SIMON game/?
I have tried to use files downloaded but they wont load...

var tlSound="beep-3.wav";
$("#TL").on("click",function(){
tlSound.play();
})

like that

Tony Rivera
@tonyrivera
Sep 18 2016 06:12
This message was deleted
This message was deleted
Stephen Suratos
@stephenfs
Sep 18 2016 06:16

One more question!

my page seem to have a little bit of hoorizontal scrolling going on.. there's a white padding showing on the right when scrolled right..

https://codepen.io/ssuratosjr/full/RGRvzm/

Chris Cullen
@123xylem
Sep 18 2016 06:33
var tlSound=new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3");


$("#TL").on("click",function(){

 console.log("h");
  this.toggleClass("animate");
 tlSound.play()});
what am i missing from this?
It wont play
vínαч puppαl
@vinaypuppal
Sep 18 2016 06:39
@123xylem this is what the mistake is $(this).toggleClass("animate"); you should wrap this inside $() to access JQuery methods.
Chris Cullen
@123xylem
Sep 18 2016 06:44
@vinaypuppal ah thankyou
CamperBot
@camperbot
Sep 18 2016 06:44
123xylem sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 547 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
vínαч puppαl
@vinaypuppal
Sep 18 2016 06:50

@SteveAmaki inorder to avoid horizontal overflow you have just change the .container div before .row div
You have

<div class="row">
    <div class="container">

change To

<div class="container">
  <div class="row">

I think you have like above in three places . So change in three places then that horizontal overflow will be gone :smile:

grantknaver
@grantknaver
Sep 18 2016 06:52
Ok Im trying increase my font-size when I hover over some font and not push elements below further down the page. I thought reducing padding-bottom for the involved text would allow for the size increase without displacing my other content, but unfortunately it does not. Any ideas?
vínαч puppαl
@vinaypuppal
Sep 18 2016 06:58
@grantknaver may just set hard stetted height on li and see if it works as you expected
li{
height: 36px;
}
grantknaver
@grantknaver
Sep 18 2016 06:58
Thanks man.
The padding fix should work right?
vínαч puppαl
@vinaypuppal
Sep 18 2016 07:00
don't know, i removed padding you gave on :hover and tried with height on li but i don't what i see is what you want so just check if that works.
grantknaver
@grantknaver
Sep 18 2016 07:01
it does work man thanks. Huge help
vínαч puppαl
@vinaypuppal
Sep 18 2016 07:01
:smile: @grantknaver
Chris Cullen
@123xylem
Sep 18 2016 07:05
$("#BR").on("click",function(){
   brSound.play();
  $("#BR").toggleClass("animate"); console.log("br");
});

When I click BR .. i toggle the class animate on... Which does this:

.animate{
    animation: flash-animation linear 1s 1;
 @keyframes flash-animation {  
    0% { opacity: 1; }
    50%   { opacity: 0.5;}
    100%{ opacity: 1; }
}

bUT NOTHING happens... Any idea why?

grantknaver
@grantknaver
Sep 18 2016 07:09
Just finished my tribute project you guys have any suggestions to make it better...
vínαч puppαl
@vinaypuppal
Sep 18 2016 07:10
@123xylem I see you did not close .animate class there should be } before @keyframes start. Did you close it in your actual code??
Sorin Ruse
@sorinr
Sep 18 2016 07:17
@grantknaver just add target="_blank" to your <a> tags
grantknaver
@grantknaver
Sep 18 2016 07:18
Darn I thought I had.
thanks.
Aleksandra Barecka
@OlkaB
Sep 18 2016 07:21
Hi all! I'm working on my first tribute project (it's based on bootstrap) and I have a problem with changing css value for img position that is contained in one of the div's . I would like to have the position: fixed, when the grid is col-sm- or higer, and static when it's changing to col-xs-. How can I access and adjust those 2 different "states" of the div, but only with css (no js)? Here is my code: http://codepen.io/OlkaB/pen/ALXaJW It would be fantastic if you could help me!
Sorin Ruse
@sorinr
Sep 18 2016 07:27
@OlkaB you can use @media queries. here some info: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Aleksandra Barecka
@OlkaB
Sep 18 2016 07:31
@sorinr Haha, I hoped it would be some magical one leeter-code for dummies;-P Just joking:) Thank you very much @sorinr - i'll check this one :smile:
CamperBot
@camperbot
Sep 18 2016 07:31
olkab sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 714 | @sorinr |http://www.freecodecamp.com/sorinr
Chris Cullen
@123xylem
Sep 18 2016 08:30
@vinaypuppal your a god
:)
Cyril Alvarez Adriaansen
@caa1982
Sep 18 2016 08:36
:)
Erick Delfin
@Nifled
Sep 18 2016 08:38
Would anyone be willing to help me out through PM? I'm having trouble with CSS and i feel it'd be better off that way.
Chris Cullen
@123xylem
Sep 18 2016 08:53
var tlSound=new Audio();
tlSound.src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3";

//I HAVE THE ABOVE 4 SOund files Linked to 4 different buttons... How can I make them get summoned on 1 callback button?
My callback so far isnt working


$(".panel").on("click",function(){
  var panelId=$(this).attr("id");
 panelId.toLowerCase()+Sound.play();   // HERE I SAY tlSound (using panelID to lowercase) But it doesnt seem to work like that
 $("#"+panelId).toggleClass("animate");
How do i make my cb work for all sound files?\
Akhilesh Chobey
@Akhilesh28
Sep 18 2016 09:03
greg
@wearenotgroot
Sep 18 2016 09:12
@123xylem how about using an object to hold your audio and just use lookup
var audioF = {
  'tl' : new Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"),
  'tr' : new Audio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"),
  'bl' : new Audio("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"),
  'br' : new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"),
 }

$(".panel").on("click",function(){
  var panelId=$(this).attr("id");
  audioF[panelId.toLowerCase()].play();
  $("#"+panelId).toggleClass("animate");   
  console.log(panelId);

});
grantknaver
@grantknaver
Sep 18 2016 09:16
I cant add padding to the top of my second blockquote
Richard Smith
@r1chard5mith
Sep 18 2016 09:23
@grantknaver that looks great
grantknaver
@grantknaver
Sep 18 2016 09:25
thanks man
Richard Smith
@r1chard5mith
Sep 18 2016 09:25
it does work, i think
i changed it to 1000 and got a big gap
Rimi.
@Codevotee
Sep 18 2016 09:26
@grantknaver you miss spelt Tribute! XD
Richard Smith
@r1chard5mith
Sep 18 2016 09:26
i also moved it to the bottom of the css
maybe that was it
Rimi.
@Codevotee
Sep 18 2016 09:27
@grantknaver but it looks really good :D
grantknaver
@grantknaver
Sep 18 2016 09:27
shut up @APRim05 lol
Rimi.
@Codevotee
Sep 18 2016 09:27
@grantknaver haha
Richard Smith
@r1chard5mith
Sep 18 2016 09:27
@APRim05 you're supposed to lead with the compliment ;)
grantknaver
@grantknaver
Sep 18 2016 09:27
oh i didnt move it down the css I can try that
I tried moving the id hook for my second blockquote and added padding-top, but it didn't move
Richard Smith
@r1chard5mith
Sep 18 2016 09:30
@grantknaver did it work?
grantknaver
@grantknaver
Sep 18 2016 09:30
nope
it's working there right?
grantknaver
@grantknaver
Sep 18 2016 09:32
hmmm
weird when I change it, it doesn't work, but when you do it does...
Richard Smith
@r1chard5mith
Sep 18 2016 09:35
@grantknaver you are clicking 'run' each time, right?
grantknaver
@grantknaver
Sep 18 2016 09:36
yep. multiple times. I just took your version. shrug. weird
Richard Smith
@r1chard5mith
Sep 18 2016 09:36
I just opened your pen again, added a 0 and pressed run and it worked
you may be experiencing a bug of some kind
grantknaver
@grantknaver
Sep 18 2016 09:36
I think so
Richard Smith
@r1chard5mith
Sep 18 2016 09:36
my advice would be to "turn everything off and turn it back on again:
"
grantknaver
@grantknaver
Sep 18 2016 09:38
lol. Just did. sure enough a bug
Rich maybe you can tell me if this other issue is a bug
grantknaver
@grantknaver
Sep 18 2016 09:46
@r1chard5mith I set the background for xs as red and the rest as blue but the media queries just dont seem to work
is this a bug, or am I just doing something wrong?
Bogdan
@aliencharm
Sep 18 2016 10:00
Hello , this is my tribute page
grantknaver
@grantknaver
Sep 18 2016 10:00
love the black and white man
with the picture it pops
grantknaver
@grantknaver
Sep 18 2016 10:17
any ideas
anyone?
teamamerica9
@teamamerica9
Sep 18 2016 10:32

@grantknaver i looked at your pen and i see 2 things

.container {
  background-color:red;
  margin-top: 20px;
  margin-bottom: 10px;
  border-radius: 10px;
}
``` and

@media (min-width: @screen-sm-min) {
.container {
background-color:#DAE7ED;
margin-top: 20px;
margin-bottom: 10px;
border-radius: 10px;
}
```

the media query accessse \@screen-sm-min
but that looks like a less variable...i dont think css supports that natively...if you put the value of that (768px) it should work
grantknaver
@grantknaver
Sep 18 2016 10:47
thx man. I knew that approach was trying to find a bootstrap way of doing it
teamamerica9
@teamamerica9
Sep 18 2016 10:47
well if you use less variable youd need to pass it through a precompiler
grantknaver
@grantknaver
Sep 18 2016 10:48
hmm ok
thx. that explains why this was not working
teamamerica9
@teamamerica9
Sep 18 2016 10:51
ya np - if you were looking at http://getbootstrap.com/css/ you can note
We use the following media queries in our Less files to create the key breakpoints in our grid system.
which explains why their example snippets use it (they are showing their less files)
Amit Patel
@AmitP88
Sep 18 2016 10:52
hey guys, I'm trying to add scrolling animation when you click on the links in the hamburger menu: https://amitp88.github.io/New-Portfolio/
but it doesn't seem to be working
I get an error like '$(animate) is not a function' or something like that
Ioanna
@io86
Sep 18 2016 10:53
Hey guys!!
I try to connect form with an email without php. Is there any easier way to make this?
teamamerica9
@teamamerica9
Sep 18 2016 10:54
@io86 you want to be able to receive msgs? some people use "mailto" links that will prompt user to send an email through their mail client
vínαч puppαl
@vinaypuppal
Sep 18 2016 10:59
@io86 you may try this https://formspree.io/ but only disadvantage is Your email address will remain visible to spam-bots and human visitors.
Finn_Reo
@Finn199587
Sep 18 2016 11:03
`
app.factory('WeatherApi', function($http) {
  var obj = {};
  obj.getIP  = function() {
    return $http.jsonp("http://ipinfo.io/json?callback=JSON_CALLBACK");
  }
 obj.getCurrent = function(ip){
  var api = "http://v.juhe.cn/weather/ip?format=2";
  var key = "&key=78414e71eec3066a22810ed4fef5fa80&ip=";
  var cb = "&callback=JSON_CALLBACK";
  return $http.jsonp(api + key + ip + cb);
 };
 return obj
});
i can't get this :worried:
app.factory('WeatherApi', function($http) {
teamamerica9
@teamamerica9
Sep 18 2016 11:05
@AmitP88 you have a lot of code on your site but i dont see any attempt to implement the smooth scroll on view-source:https://amitp88.github.io/New-Portfolio/#p4
vínαч puppαl
@vinaypuppal
Sep 18 2016 11:06
@Finn199587 is it an Angular.js code?? I mean why are you using it instead of JQuery??
Finn_Reo
@Finn199587
Sep 18 2016 11:07
@vinaypuppal yes
Amit Patel
@AmitP88
Sep 18 2016 11:08
@teamamerica9 oh my bad, lemme update my github real quick
Finn_Reo
@Finn199587
Sep 18 2016 11:08
it seems need API to get data
vínαч puppαl
@vinaypuppal
Sep 18 2016 11:09
@Finn199587 oh okay, sorry i cant help you with Angular.js . Someone else might help you.
teamamerica9
@teamamerica9
Sep 18 2016 11:09
@Finn199587 can you pate a codepen if your data? can try and help with angular but witout knowing what you are even attempting to do, hard to know
Amit Patel
@AmitP88
Sep 18 2016 11:09
@teamamerica9 ok, it's updated
I tried to implement the scrolling animation code at the bottom of my html file with <script> tags
teamamerica9
@teamamerica9
Sep 18 2016 11:10
okay let me see if i can figure it out
Amit Patel
@AmitP88
Sep 18 2016 11:11
thanks :)
Ioanna
@io86
Sep 18 2016 11:12
@teamamerica9 exactly, i want to receive emails in my email. i have made with this way, "mailto", but when i try to fill the form and to send a message, i dont receive any email.
vínαч puppαl
@vinaypuppal
Sep 18 2016 11:12
@AmitP88 why did you add .stop() $('html, body').stop().animate({ did you try just this $('html, body').animate({
Finn_Reo
@Finn199587
Sep 18 2016 11:12
@teamamerica9 i don't know what is app.factory(),and when i use it
Stephen Suratos
@stephenfs
Sep 18 2016 11:14
Thanks @vinaypuppal !
CamperBot
@camperbot
Sep 18 2016 11:14
steveamaki sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 548 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Amit Patel
@AmitP88
Sep 18 2016 11:15
@vinaypuppal yeah, but then I get the .animate is not a function
teamamerica9
@teamamerica9
Sep 18 2016 11:16
@AmitP88 you are using jquery slim
jquery slim doesnt include animate
with full version and removing stop, things seem to work in my local testing
@Finn199587 app.factory is from angular, the idea is dependency injection...if you are on an angular project and have no angular knowledge....good luck
Amit Patel
@AmitP88
Sep 18 2016 11:17
oh I see
hmmm I was afraid of that
so I would just have to use the latest version of plain jquery?
Finn_Reo
@Finn199587
Sep 18 2016 11:18
ok, where to learn more ? @teamamerica9
teamamerica9
@teamamerica9
Sep 18 2016 11:19
ya i mean you can try doing custom builds that only include what you need but idk worth it
@Finn199587 https://angularjs.org/ would be place to start...would be helpful if you could figure out if its angular 1 or 2; im nt really familiar enough with angular to know based on that snippet
Finn_Reo
@Finn199587
Sep 18 2016 11:20
@teamamerica9 thanks a ton
CamperBot
@camperbot
Sep 18 2016 11:20
finn199587 sends brownie points to @teamamerica9 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for teamamerica9
teamamerica9
@teamamerica9
Sep 18 2016 11:20
sure, good luck @Finn199587
Amit Patel
@AmitP88
Sep 18 2016 11:20
@teamamerica9 that seemed to do the trick. Thank you! :D
CamperBot
@camperbot
Sep 18 2016 11:20
:warning: could not find receiver for teamamerica9
amitp88 sends brownie points to @teamamerica9 :sparkles: :thumbsup: :sparkles:
vínαч puppαl
@vinaypuppal
Sep 18 2016 11:21
Finn_Reo
@Finn199587
Sep 18 2016 11:22
@vinaypuppal that's great !thanks
Mikail Bayram
@mikail1998
Sep 18 2016 11:32
I came to the build a tic-tac-toe game assignement
but do not have any idea
how and where to start
Amit Patel
@AmitP88
Sep 18 2016 11:34
@mikail1998 I would say get your grid to appear on the screen first
then see if you can get a circle or X to appear on click with one of the squares in the grid
Mikail Bayram
@mikail1998
Sep 18 2016 11:35
@AmitP88 Yeah, i agree it would be the best start
vínαч puppαl
@vinaypuppal
Sep 18 2016 11:36
@mikail1998 Regarding Functionality
  • You could first try to implement a Multiplayer game as it would be easy with bunch of if``else condition checks
  • Next try with AI
  • Read about min-max algorithm and here is the excellent article which explains very well http://neverstopbuilding.com/minimax
Amit Patel
@AmitP88
Sep 18 2016 11:36
@mikail1998 it's tricky, I know. A while back I had to create a small arcade game and I was where you were at (confused as how to even start), but the first goal should be to get your map/grid on the screen
even try to append an individual tile on screen
Mikail Bayram
@mikail1998
Sep 18 2016 11:43
@vinaypuppal Yeah i was afraid i needed a bunch of if else statements..
@AmitP88 one step at a time and it should all fall into place
i believe
Amit Patel
@AmitP88
Sep 18 2016 11:44
@mikail1998 exactly. try to start with getting the simplest element to appear on the screen (such as a single square tile) and then go from there
Mikail Bayram
@mikail1998
Sep 18 2016 11:45
@AmitP88 @vinaypuppal thank you for your attention :D
CamperBot
@camperbot
Sep 18 2016 11:45
mikail1998 sends brownie points to @amitp88 and @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for amitp88
:cookie: 549 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Amit Patel
@AmitP88
Sep 18 2016 11:48
@mikail1998 not a problem :)
vínαч puppαl
@vinaypuppal
Sep 18 2016 11:49
@mikail1998 if you are creating Multiplayer game then you need to check rowsor columns or diagonals for a match so for these u may need some conditional check that's why i told you can do with bunch of if else statements.. And if you try Multiplayer game first you may understand the AI logic in better way(because it helped me in this way). For AI you don't need bunch of if else statements you can use Min-Max algorithm to calculate AI moves.
Mikail Bayram
@mikail1998
Sep 18 2016 11:52
@vinaypuppal thats the sort of thing I was looking for actually, i mean the algorithm i need to use. Other stuff is technical and can be sorted out in one way or another
vínαч puppαl
@vinaypuppal
Sep 18 2016 11:54
@mikail1998 oh okay then you can use Min-max algo and take a look at the article i shared it will explain all about it.
William Maes
@maeswilliam
Sep 18 2016 12:01
hey are there any full time or freelancer web devs here?
Rimi.
@Codevotee
Sep 18 2016 12:57
This message was deleted
DavidR
@davidrinconv
Sep 18 2016 13:30
Hey guys I just built a page to find non ASCII characters in a text file. I created this for reading through log files at work that contain characters not valid in an Oracle database.... Take it for a spin and let me know what you think http://codepen.io/davidrv/full/amkWdw/
U-ways
@U-ways
Sep 18 2016 13:37
@APRim05 Hello Rimi, did you ask me something (Sorry was a bit busy) If you have any questions let me know (You can PM me if you want) Goodluck!
@davidrinconv Awesome! It looks professional as well :D
William Maes
@maeswilliam
Sep 18 2016 13:40
Can anyone give feedback for this: http://williammaes.tk/Headers/Header-1/index.html thank you
U-ways
@U-ways
Sep 18 2016 13:56
@maeswilliam Looks awesome, but what is this app about haha? :D
William Maes
@maeswilliam
Sep 18 2016 13:56
@U-ways You can use your imagination, it's just my version of lorem ipsum ^^
U-ways
@U-ways
Sep 18 2016 13:57
@maeswilliam Oh haha :P
bipmtul
@bmtul
Sep 18 2016 13:59

<div class="row col-xs-4">

<button class="btn btn-block btn-primary">Like</button>
<button class="btn btn-block btn-info">Info</button>
<button class="btn btn-block btn-danger">Delete</button>

</div>
this code should make the Bootstrap Grid to Put Elements Side By Side

i am stuck in the above code
hadyheib
@hadyheib
Sep 18 2016 14:16
hello guys
i have studying at udacity for front end dev nanaodgree for two-weeks , but is it worth studying to get a job at google or facebook ????
Santiago Fernandez
@sf-jd
Sep 18 2016 14:40
that's for you to decide @hadyheib
Ricky11
@ricky11
Sep 18 2016 14:40
hi all question about nav bars do i put the class in <ul class="navbar navbar-default'> or do i put the class in <nav class="
vínαч puppαl
@vinaypuppal
Sep 18 2016 14:51
@ricky11 check bootstrap docs http://getbootstrap.com/components/#navbar
Ricky11
@ricky11
Sep 18 2016 14:52
@vinaypuppal yes im reading them, they often mix and match putting the class in divs or navs or withing uls. so little confusing where exactly to put the classes.
@vinaypuppal good tutorial on BS here : https://www.youtube.com/watch?v=gqOEoUR5RHg but it also does make it confusing as to where to put the classes corretly when building navigation
Ricky11
@ricky11
Sep 18 2016 15:01
what is the different between boostrap list-inline and navbar, cant find list-inline on boostrap docs.
Amit Patel
@AmitP88
Sep 18 2016 15:02
hey guys, what do you think of my site so far? https://amitp88.github.io/New-Portfolio/
I haven't worked on the responsiveness yet, but I just wanted to see if it was easy to use, if the colors went well together, and overall layout, etc
Igor Amidzic
@igoramidzic
Sep 18 2016 15:06
Can someone help me with my html positioning?
Igor Amidzic
@igoramidzic
Sep 18 2016 15:16
pls
Bill Hefty
@bhefty
Sep 18 2016 15:18
@amidzicigor I might be able to help, whats up?
Igor Amidzic
@igoramidzic
Sep 18 2016 15:19
Hi, here is my site www.utilitan.com
I want the blue header div to remain at the top (I know you have to use absolute for this), but when I use it, my pink and blue divs move up under the header
I'll add p tags so you can see what I mean, refresh in a few seconds
Bill Hefty
@bhefty
Sep 18 2016 15:20
ok
Igor Amidzic
@igoramidzic
Sep 18 2016 15:21
There are 2 "hellos" under the header div, how do I make it so the two large divs start after the top one, but fill 100% height of page
Bill Hefty
@bhefty
Sep 18 2016 15:23
Let me try to replicate this in a codepen real quick
Bill Hefty
@bhefty
Sep 18 2016 15:29
So are you wanting this to be a "one page" kind of thing, without scrolling? Or have the contents of signUpDiv scroll within their own div container?
Oh wait I think I see what you're talking about. The beginning of the div is starting underneath the header
Igor Amidzic
@igoramidzic
Sep 18 2016 15:30
@bhefty check the site now
@bhefty You see how when I scroll down, the header goes away. I want it to stay at the top no matter if I scroll.
The problem is if I do header {position: absolute} it moves my divs up to the top of the page, instead of under the header
Also, see how the pink and blue divs run out of color, but text continues? How can I make it the length of the text?
Bill Hefty
@bhefty
Sep 18 2016 15:32
You can use position: fixed to keep it at the top
And if you change the height from 100% to 100vw it should expand with the entire content
Igor Amidzic
@igoramidzic
Sep 18 2016 15:34
@bhefty That doesn't work because right now I have text in my div that says "Hello", but it is covered by the header
@bhefty oh wait.. never mind
Bill Hefty
@bhefty
Sep 18 2016 15:36
I made the header transparent to better see the div underneath http://codepen.io/bhefty/pen/zKKYVX?editors=1100
Igor Amidzic
@igoramidzic
Sep 18 2016 15:37
@bhefty Yes that works now, Thank you very much :) but when you scroll down, the div's color stops, but text continues
CamperBot
@camperbot
Sep 18 2016 15:37
amidzicigor sends brownie points to @bhefty :sparkles: :thumbsup: :sparkles:
:cookie: 300 | @bhefty |http://www.freecodecamp.com/bhefty
Igor Amidzic
@igoramidzic
Sep 18 2016 15:38
@amidzicigor What does "100vw" do, btw?
view window?
Bill Hefty
@bhefty
Sep 18 2016 15:39
I'm not a pro at CSS, but from my understand yes. It seems to scale well for your window sizes
kirbyedy
@kirbyedy
Sep 18 2016 15:56
@amidzicigor vw =viewport width
vh = viewport height
jrandallhansen
@jrandallhansen
Sep 18 2016 16:06
anyone interested in trying to debug my function for me? i am stuck. i am having a problem with the case of users who don't exist for the twitch.tv assignment https://codepen.io/jrandall/pen/pEjqQN?editors=1112
Kieran Harding
@kieranharding
Sep 18 2016 16:55
@jrandallhansen What kind of problem are you having?
grantknaver
@grantknaver
Sep 18 2016 17:10
Anyone out there have any ideas how to add a :hover effect to an element that increases size of an element without having that element push the rest of the elements down? The height attribute wont work (breaks how responsive the element is in a responsive design). I have played with padding but to no affect.
Vladislav Lasmann
@VladislavLasmann
Sep 18 2016 17:29
Do somebody know, wether FontAwesome isn working on codepen.io?
Hassen Rmili
@hassenrmili
Sep 18 2016 17:35
@dracul3a it works
grantknaver
@grantknaver
Sep 18 2016 17:41
@dracul3a you have any idea
Igor Amidzic
@igoramidzic
Sep 18 2016 17:48

Can someone help me with some html/css positioning?
Here is my site: www.utilitan.com

Right now, when you make the window really small, it doesn't give me a scroll bar at the bottom to move horizontally. Anyone know why?
Or when you zoom in to like 400%, it should have a bar at the bottom to see the rest of the page.

Marc-André Denault
@marcandre311
Sep 18 2016 18:05
@amidzicigor Add content like text and the bar at the bottom should appear
Igor Amidzic
@igoramidzic
Sep 18 2016 18:06
@marcandre311 There is text. The word "Utilitan" at the top is text, its just in link form.
Marc-André Denault
@marcandre311
Sep 18 2016 18:07
@amidzicigor try to make the margin auto in css
Igor Amidzic
@igoramidzic
Sep 18 2016 18:08
@marcandre311 in which element?
Capture.PNG
Marc-André Denault
@marcandre311
Sep 18 2016 18:14

logo {

color: white;
position: auto;
font-family: 'Quicksand', sans-serif;
font-size: 50px;
margin-top: 13px;
margin-left: auto;
margin-right: auto;
text-align: center;
text-decoration: underline overline;
}
@amidzicigor
the id logo
grantknaver
@grantknaver
Sep 18 2016 18:16
Anyone out there have any ideas how to add a :hover effect to an element that increases size of an element without having that element push the rest of the elements down? The height attribute wont work (breaks how responsive the element is in a responsive design). I have played with padding but to no affect.
Igor Amidzic
@igoramidzic
Sep 18 2016 18:17
@marcandre311 That doesn't work because then it moves my logo to the edge of the screen
kennyq94
@kennyq94
Sep 18 2016 18:23
hey guys do you guys think you guys can show me how to get the city im currently at in my App https://codepen.io/kennyqsoftware/pen/gwwbNK
Chaitra S
@chaitinfin
Sep 18 2016 18:47
hey guys,i'm currently working on use the twich.tv JSON api, is the example project working or only in chrome browser it is showing that all channels are closed??Please all answers are appreciated
Toni Shortsleeve
@KoniKodes
Sep 18 2016 19:01
@chaitinfin It seems we need to get a client id from twitch, and call with that. They've recently made that change. Here's the info https://discuss.dev.twitch.tv/t/client-id-will-be-required-in-august/6032/14
Salomon
@zarruk
Sep 18 2016 19:40
hello. does anybody know why when I press the button it doesnt change the text of the message class?
is this any good?
Chaitra S
@chaitinfin
Sep 18 2016 20:15
@KoniKodes Thank you for the update
CamperBot
@camperbot
Sep 18 2016 20:15
:cookie: 371 | @konikodes |http://www.freecodecamp.com/konikodes
chaitinfin sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
Chaitra S
@chaitinfin
Sep 18 2016 20:21
@zarruk that is because you have not given the list of quotes from which you can choose the random quotes
Salomon
@zarruk
Sep 18 2016 20:22
@chaitinfin actually it was because i hadn't added JS, but now i did and it works. thank you anyways!
CamperBot
@camperbot
Sep 18 2016 20:22
zarruk sends brownie points to @chaitinfin :sparkles: :thumbsup: :sparkles:
:cookie: 230 | @chaitinfin |http://www.freecodecamp.com/chaitinfin
Justin Kishbaugh
@jkishbaugh
Sep 18 2016 20:29
Anybody help me figure out why my wikipedia viewer is not returning titles correctly?http://codepen.io/kishju/pen/amvVgp/
underOneFlag
@underOneFlag
Sep 18 2016 20:38
@jkishbaugh looks like you were setting the title to t.title instead of description.title
jrandallhansen
@jrandallhansen
Sep 18 2016 20:51
@kieranharding if you look at the console printouts you can see that i am having a problem on the case when users dont exist
Jaco Oversluizen
@oversluizen
Sep 18 2016 20:51
Can I reverse engineer the example codepen with google developer tools?
Or is that not allowed
another question how can you make a grid of ul li images working?
underOneFlag
@underOneFlag
Sep 18 2016 20:53
@oversluizen i think using the dev tools on the code pen would pretty much be looking at the code
whether that matters is up to you
Jaco Oversluizen
@oversluizen
Sep 18 2016 20:55
I'm trying to reverse engineer and not looking at the css file itself...
probably anyone can help me with the image grid in the codepen above
underOneFlag
@underOneFlag
Sep 18 2016 20:56
what do you mean by grid?
i just see the pictures on top of each other
Jaco Oversluizen
@oversluizen
Sep 18 2016 20:59
in fullscreen view you see 2 images beside each other
I don't understand how he floats those images
how did he made that grid that's the question
Justin Kishbaugh
@jkishbaugh
Sep 18 2016 21:01
@underOneFlag Thanks that fixed it. Appreciate the help.
CamperBot
@camperbot
Sep 18 2016 21:01
jkishbaugh sends brownie points to @underoneflag :sparkles: :thumbsup: :sparkles:
:cookie: 369 | @underoneflag |http://www.freecodecamp.com/underoneflag
jrandallhansen
@jrandallhansen
Sep 18 2016 21:02
@oversluizen without reviewing the code, if the images are within <li> tags then you need to change the <li> to display: inline-block; in the CSS to position the items horizontally
Jaco Oversluizen
@oversluizen
Sep 18 2016 21:04
thanks @jrandallhansen that works
CamperBot
@camperbot
Sep 18 2016 21:04
oversluizen sends brownie points to @jrandallhansen :sparkles: :thumbsup: :sparkles:
:cookie: 328 | @jrandallhansen |http://www.freecodecamp.com/jrandallhansen
jrandallhansen
@jrandallhansen
Sep 18 2016 21:05
@oversluizen make sure you understand why it works!
Jaco Oversluizen
@oversluizen
Sep 18 2016 21:16
i'm just reading ;)
Jaco Oversluizen
@oversluizen
Sep 18 2016 22:13
the next thing I can't get working is the scrollspy
I thought I have everything done but it doesn't work
kamaldinov
@kamaldinov
Sep 18 2016 22:42
blob
Can someone tell me what's wrong please?
Salomon
@zarruk
Sep 18 2016 22:45
Hello! I want that when I press the tweet button, there's a pre-written tweet with the quote obtained. I've been trying to assign the quote to a variable, an then assign the variable to the data-text of the anchor that contains the Twitter button but I don't know how to do that. Could anybody help please? :grinning:
http://codepen.io/zarruk/pen/jrrbAB?editors=1010
Cameron Burkholder
@Cameron-Burkholder
Sep 18 2016 23:01

I've been working on the JS Calculator, and sometimes it works, but other times it does not. I'm not sure why.

http://codepen.io/CameronBurkholder/pen/LRRpxq

BTW, I just saw that the plugin version of my pen in this chat is terrible format-wise
Chris Cullen
@123xylem
Sep 18 2016 23:05
@wearenotgroot thanks!
CamperBot
@camperbot
Sep 18 2016 23:05
123xylem sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1733 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
greg
@wearenotgroot
Sep 18 2016 23:05
@123xylem :+1:
Igor Amidzic
@igoramidzic
Sep 18 2016 23:08

Help!
I made a website www.utilitan.com
Which language do I use to make the back-end? SQL? JS?

All I want to do is store the form data into an array, and then console.log the array.

mjcreate
@mjcreate
Sep 18 2016 23:24
hey guys, can someone give my portfolio page a quick look and tell me if it's good enough to submit? I would appreciate it. http://codepen.io/mjcreate/full/kkbKoR/
Jaco Oversluizen
@oversluizen
Sep 18 2016 23:30
@mjcreate I think you could do some work on the images
@mjcreate ok i see you used placeholder images. What is not working is this: you used the wrong column classes I think
now you have not a responsive design
See for yourself
instead of col-xs you can use col-md for example
Jaco Oversluizen
@oversluizen
Sep 18 2016 23:36
And there is some problem with your menu text
Ken Haduch
@khaduch
Sep 18 2016 23:36
@mjcreate - I just checked on the mobile phone. The navbar does not look good on a mobile screen.
mjcreate
@mjcreate
Sep 18 2016 23:36
thanks @oversluizen & @khaduch - I will check to see how to fix it
CamperBot
@camperbot
Sep 18 2016 23:36
mjcreate sends brownie points to @oversluizen and @khaduch :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @oversluizen |http://www.freecodecamp.com/oversluizen
:star2: 1692 | @khaduch |http://www.freecodecamp.com/khaduch
Jaco Oversluizen
@oversluizen
Sep 18 2016 23:37
indeed @khaduch
Jaco Oversluizen
@oversluizen
Sep 18 2016 23:44
@mjcreate success
Kantra
@removed~kantrakantra
Sep 18 2016 23:46

Hey guys I'm attempting to use bootstrap and I'm having issues positioning some elements in the navbar. I want the social media icons to rest on the right side of the nav bar similar to the way the header in the navbar rests on the right side and moves relative to the rest of the container

http://codepen.io/kantrakantra/pen/GjqZoR?editors=1100

miriam-z
@miriam-z
Sep 18 2016 23:49
Any ideas why my toggle icon is not appearing at xs screen size? Currently it is showing up as a question mark. Any help would be appreciated.
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12" id="nav-style">
            <nav class="navbar">
                <a class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse"
                   data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false"
                   aria-label="Toggle navigation">&#9776;</a>
                <a class="navbar-brand" href="#">Food LLC</a>
                <i class="fa fa-genderless"></i>
                <div class="collapse hidden-sm-up" id="exCollapsingNavbar">
                <div class="nav navbar-nav">
                <a class="nav-link" href="#chicken">Chicken</a>
                <hr>
                <a class="nav-link" href="#beef">Beef</a>
                <hr>
                <a class="nav-link" href="#sushi">Sushi</a>
            </div>
                </div>
            </nav>
        </div>
    </div>
</div>
miriam-z
@miriam-z
Sep 18 2016 23:59
also does anyone know how to navigate to the next challenge for this challenge: https://www.freecodecamp.com/challenges/manage-packages-with-npm