These are chat archives for FreeCodeCamp/HelpFrontEnd

21st
Jan 2017
cms202
@cms202
Jan 21 2017 00:28
@TylerMoeller That worked perfect!! I used the center-block class. Yay! thank you! :clap:
CamperBot
@camperbot
Jan 21 2017 00:28
cms202 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1352 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 21 2017 01:13
@mikecerang The links don't work for me in codepen's edit mode. To fix it, add target="_blank" to your links: http://www.w3schools.com/tags/att_a_target.asp
@joshuapsteele They wrap the contents of the website in a <main> tag and apply a max width of 1024px to it. <main> and <section> tags are useful for the portfolio project: http://www.w3schools.com/html/html5_semantic_elements.asp
Rennie Bevineau
@Renniesb
Jan 21 2017 02:51
Hi
I have a question
Anyone here who uses plunker know how to name your plunker templates? Mine just get saved as Untitled
cjljohnson
@cjljohnson
Jan 21 2017 03:16
Can anyone help me with why hiding my + and - buttons makes the timer div move down a few pixels? http://codepen.io/cjljohnson/pen/MJpbrX
Erol Aliyev
@erolaliyev
Jan 21 2017 03:23
Hey guys.Can anybody explain what framework is? And is it useful?
JD Tadlock
@jdtdesigns
Jan 21 2017 03:36
@erolaliyev Frameworks are usually made of code that does a lot of things for you so you don't have to.
Erol Aliyev
@erolaliyev
Jan 21 2017 03:37
@jdtdesigns is it good for learning?
JD Tadlock
@jdtdesigns
Jan 21 2017 03:42
Frameworks will be something you'll have to learn to progress as a web dev. Bootstrap is an example of a framework that's used by a huge amount of companies.
I don't use it anymore personally, but i still know it because i work on projects that are built on it.
Erol Aliyev
@erolaliyev
Jan 21 2017 03:43
thanks @jdtdesigns
CamperBot
@camperbot
Jan 21 2017 03:43
erolaliyev sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 872 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jan 21 2017 03:44
Angular JS, React JS are also frameworks that are widely used.
hi guys can som1 help me find why my text won't align to the center
nvm found it
mikecerang
@mikecerang
Jan 21 2017 04:33
@TylerMoeller Thank you! It worked!
CamperBot
@camperbot
Jan 21 2017 04:33
mikecerang sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1353 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Ken Haduch
@khaduch
Jan 21 2017 05:10
@swong194 - yeah, I was just looking before I read the rest of your post - looks like it's centered... :)
Anjali Rathod
@anjali1206
Jan 21 2017 05:52
Hello everyone. I just built a simple Random Quote Machine. Please share your reviews and feedback on it. http://codepen.io/anjali1206/pen/MJbQgX
Coy Sanders
@coymeetsworld
Jan 21 2017 05:59
Looks good @anjali1206, one issue is with the twitter button, only shows the hashtag #starwars no quote
Anjali Rathod
@anjali1206
Jan 21 2017 06:01
@coymeetsworld Thank you for your reviews. I didn't know how to add that functionality to add whole quote directly on tweet box :worried: so, I just added where it will take you to tweet box with #StarWars
CamperBot
@camperbot
Jan 21 2017 06:01
anjali1206 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1888 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Jan 21 2017 06:02
ok @anjali1206, yeah it was tricky for me and I think there were better ways too
Anjali Rathod
@anjali1206
Jan 21 2017 06:06
@coymeetsworld yeah. I mean I tried to search the ways to add it but couldn't work on it. Any suggestions you have on how can to do that will be really appreciated.
Coy Sanders
@coymeetsworld
Jan 21 2017 06:08
I wasn't able to target the tweet button because it was embedded in an iframe in my implementation @anjali1206
what I ended up doing was just removing the button and adding it back whenever a new quote was chosen
theres probably a better way than that but at the time which was earlier last year that was the best i could figure out
Anjali Rathod
@anjali1206
Jan 21 2017 06:11
@coymeetsworld Yea. There are different ways to add it. Just need to figure it out. Can you plz share the link to your Random quote machine code? I just wanna look at the code and see if I can work it out.
Anjali Rathod
@anjali1206
Jan 21 2017 06:15
@coymeetsworld Woww ur Quote machine looks great :+1: Thank you for sharing the link.
CamperBot
@camperbot
Jan 21 2017 06:15
anjali1206 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: anjali1206 already gave coymeetsworld points
Coy Sanders
@coymeetsworld
Jan 21 2017 06:16
thx @anjali1206, yeah it wasn't that good first time around, but i made some improvements before submitting for FrontEnd
CamperBot
@camperbot
Jan 21 2017 06:16
coymeetsworld sends brownie points to @anjali1206 :sparkles: :thumbsup: :sparkles:
:cookie: 292 | @anjali1206 |http://www.freecodecamp.com/anjali1206
Coy Sanders
@coymeetsworld
Jan 21 2017 06:16
i don't like how the tweet button has to render i should probably fix that, but got alot of other stuff to do too :)
Anjali Rathod
@anjali1206
Jan 21 2017 06:19
@coymeetsworld yea. U can always change the projects you have made after learning & getting more experience. That tweet button renders differently but its almost not noticeable. I didn't notice it when I first time show that. :smile:
Coy Sanders
@coymeetsworld
Jan 21 2017 06:21
really? On my project its noticable because the quote moves around while the button is rendering and it takes a second lol
Anjali Rathod
@anjali1206
Jan 21 2017 06:22
@coymeetsworld Oh yea. I can see that now. I just refreshed the page and noticed it.
Coy Sanders
@coymeetsworld
Jan 21 2017 06:23
maybe I should've have said nothin :)
Anjali Rathod
@anjali1206
Jan 21 2017 06:26
@coymeetsworld hahaaa..:smile: But overall Quote machine is looking really good. I will definitely look at the code for that twitter thing. Thanks again.
CamperBot
@camperbot
Jan 21 2017 06:26
anjali1206 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: anjali1206 already gave coymeetsworld points
Coy Sanders
@coymeetsworld
Jan 21 2017 06:27
no problem @anjali1206, good luck with it but don't sweat it too much. You can always make a list of things to work on in the future. That's what I did
I have a few bugs found in other projects I want to fix but I just put them on github and have something to work on later
Anjali Rathod
@anjali1206
Jan 21 2017 06:29
@coymeetsworld Thank u. yes. you are absolutely correct. I wanted to do few more things but m just not able to figure it out. I have been trying to built it since 4 days. I think I should move on and learn more things.
CamperBot
@camperbot
Jan 21 2017 06:29
anjali1206 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: anjali1206 already gave coymeetsworld points
Coy Sanders
@coymeetsworld
Jan 21 2017 06:31
no problem @anjali1206
Anjali Rathod
@anjali1206
Jan 21 2017 06:32
@coymeetsworld Thanks for your help. It was nice chatting with you. :+1:
CamperBot
@camperbot
Jan 21 2017 06:32
anjali1206 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: anjali1206 already gave coymeetsworld points
Coy Sanders
@coymeetsworld
Jan 21 2017 06:32
likewise, anytime
Dinesh
@dinesh333
Jan 21 2017 06:32

Hey guys, I have started making a portfolio page.. here is my codepen link http://codepen.io/dinesh333/full/EZmYZp/

I am having trouble centering the navigation bar with the rest of the page.. I could do padding-left, but it will make viewing on mobile atrocious.. What can i do here?

Dinesh
@dinesh333
Jan 21 2017 06:38
I think i fixed it.. changed container-fluid to container, and achieved what I wanted.. thank you all anyways
Solomon B
@ssbothwell
Jan 21 2017 07:17
can anyone help me out with flexbox? i'm having trouble getting my site to display right on mobile. http://codepen.io/solomonB/full/oBBYwg/
i want the the red div ( '.clock') to fill all the available vertical space when on mobile
rene-meda
@rene-meda
Jan 21 2017 07:30
Is codepen able to run jQuery Effects (i.e toggle sliding)?
Daniel Tait
@4xDMG
Jan 21 2017 07:30
@ssbothwell Have you tried using a media query?
Solomon B
@ssbothwell
Jan 21 2017 07:30
i am using one. sorry i have half the css commented out right now
basically i cant figure out how to get a flexbox to fill the entire verticle space
Daniel Tait
@4xDMG
Jan 21 2017 07:35
@ssbothwell I've never used a flexbox so can't help much sorry. Can't you set it to 100vh though?
inside the media query?
Solomon B
@ssbothwell
Jan 21 2017 07:36
ooh good call
thanks @4xDMG
CamperBot
@camperbot
Jan 21 2017 07:36
ssbothwell sends brownie points to @4xdmg :sparkles: :thumbsup: :sparkles:
:cookie: 363 | @4xdmg |http://www.freecodecamp.com/4xdmg
Solomon B
@ssbothwell
Jan 21 2017 07:37
that messes with my div proportions but i can make fix that
Daniel Tait
@4xDMG
Jan 21 2017 07:38
@ssbothwell no problem. let me know how it goes. I should really look into flexboxes. seems like theyre all the rage now
Solomon B
@ssbothwell
Jan 21 2017 07:39
yeah, they are a little confusing
but they seem to be really useful
Daniel Tait
@4xDMG
Jan 21 2017 07:41
@ssbothwell yeah all ive read is theyre great for responsive websites. did you read the free flexbox book freecodecamp sent out in their email?
Solomon B
@ssbothwell
Jan 21 2017 07:41
i havent yet, i really should
Daniel Tait
@4xDMG
Jan 21 2017 07:44
yeah me too lol
Chris Cullen
@123xylem
Jan 21 2017 08:40
<!DOCTYPE html>
<html>
<head>
    <title>Gallery</title>
</head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" ></script>
<style>
    .standard{width: 100%;
        height:200px;}
</style>
<body>


<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Images</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Contact</a></li>


   <li class="navbar-right active"><a href="#">Login </a></li>//I WANT THIS ON THE RIGHT!!!


      </ul> 
</nav>



 <script   src="https://code.jquery.com/jquery-3.1.1.min.js" </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</script>
</body>
</html>
Quick QUESTION:
Im trying to make my navbar have a login part to the right but when i make it its own div or ul it creates a login thats tiny and underlined in blue.. When i do it as an LI it doesnt move it to the right tho.
How do I make my login navbar go to the right of the page???
Srđan Međo
@PerpetualWar
Jan 21 2017 08:59
guys , if I wanna make large pic size of screen as first thing to be seen before scrolling down for other info, how to do it iin bootstrap ? Which class should I make it ?
also should I add image in css or directly in html ?
Kris Lai
@PocketThi3f
Jan 21 2017 09:41
uh you can use image-responsive via bootstrap in the HTML
Srđan Međo
@PerpetualWar
Jan 21 2017 09:46
.mainpic { padding-top: 50px; padding-bottom: 50px; text-align: center; color: #f8f8f8; background: url("http://i226.photobucket.com/albums/dd281/dj_srle/computer-1209641_1920.jpg") no-repeat center center; background-size: cover; }
<div class="mainpic"> </div>
why I dont get pic shown ?
whats wrong with this code ?
vínαч puppαl
@vinaypuppal
Jan 21 2017 09:59
@PerpetualWar nothing wrong, the above code is working for me http://jsbin.com/dizujaxuzu/1/edit?html,css,output
check this pls... I wanna have this pic go from left to right side all the way
but I stil have white border on left side
how to remove it ?
and top as well perhaps
ok top is not problem
but I wanna have cover go from side to side
Srđan Međo
@PerpetualWar
Jan 21 2017 10:13
@vinaypuppal any idea ??
MrPiethon
@MrPiethon
Jan 21 2017 10:14
Hey guys im having trouble aligning my h2 header to the left of my search bar https://codepen.io/masemune/pen/ggWbPd
any ideas?
vínαч puppαl
@vinaypuppal
Jan 21 2017 10:18
@PerpetualWar body has default margin:8px(which is added by browser stylesheet by default)
add this to u r css to remove it
body {
 margin: 0;
}
Srđan Međo
@PerpetualWar
Jan 21 2017 10:19
That's it! Thanks @vinaypuppal
CamperBot
@camperbot
Jan 21 2017 10:19
perpetualwar sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 654 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Srđan Međo
@PerpetualWar
Jan 21 2017 10:20
where can I see browsers stylesheet ?
is it the same for all browsers ?
vínαч puppαl
@vinaypuppal
Jan 21 2017 10:21
cmd+alt+i or ctrl+shift+iand select body tag in Elements inspector @PerpetualWar

is it the same for all browsers ?

may be same in latest browsers @PerpetualWar

Srđan Međo
@PerpetualWar
Jan 21 2017 10:23
ok thanks @vinaypuppal
CamperBot
@camperbot
Jan 21 2017 10:23
perpetualwar sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: perpetualwar already gave vinaypuppal points
console.log(on api not working)
seddy
@seddyclevo
Jan 21 2017 11:01
hi coder
abhijith shenoy
@shenoyabhijith
Jan 21 2017 11:04
any 1 who can help?
MaxLAB
@Max-LAB
Jan 21 2017 11:23
@shenoyabhijith what is the problem
abhijith shenoy
@shenoyabhijith
Jan 21 2017 11:23
i found the solution
the problem was i coudnt make getJSON request to wiki api
MaxLAB
@Max-LAB
Jan 21 2017 11:24
@shenoyabhijith a ok, nice job then :+1:
Ghulam Shabir
@ghulamshabir
Jan 21 2017 12:06
@shenoyabhijith I think Random url is not an api to be called via ajax, it's just a url to be used in a new window or a link
Sorin Ruse
@sorinr
Jan 21 2017 12:08
@shenoyabhijith for the random article i would just use <a class="yourclassname" href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Random Article</a>
Oliver Strik
@Kranex
Jan 21 2017 12:24
hey, hyperlinks ain't working for me on CodePen. Tried using target="_blank" like so:<a href="http://..." target="blank">...</a>, but it isn't helping...
almaaganovic
@almaaganovic
Jan 21 2017 12:24
hello. I am a first time here :). I hope I am not doing something inappropriate. I have a question about bootstrap column management. I need offset on the left and right side too. how do I set right side offset?
coffeebeanzz
@coffeebeanzz
Jan 21 2017 12:27
@Kranex did u include the _
Oliver Strik
@Kranex
Jan 21 2017 12:28
@coffeebeanzz yep. The only time The link has been clickable is if href="#"
@almaaganovic Right side offset isn't really required to my knowledge, you don't need to use all the columns, just make sure there isn't more than 12, and use left side offset as required. Is there a particular reason you need it?
Sorin Ruse
@sorinr
Jan 21 2017 12:31
@Kranex its target="_blank" not "blank"
almaaganovic
@almaaganovic
Jan 21 2017 12:32
@Kranex aha, now I got the logic behind it. I am doing my first bootstrap project. I need to center to column and leave some space on the both sides
Oliver Strik
@Kranex
Jan 21 2017 12:33
@sorinr yeah, made a typo in my question.
coffeebeanzz
@coffeebeanzz
Jan 21 2017 12:33
@Kranex might not like the http. Is there an https version of the link
Kenneth Nwaeze
@kengin2013
Jan 21 2017 12:33
How do I get "freecodecamp icon" to this html: <button class="btn"><i class="fa fa-free-code-camp" aria-hidden="true"></i>
</button> https://codepen.io/kengin2013/pen/yVmXwM?editors=1000
Oliver Strik
@Kranex
Jan 21 2017 12:34
@almaaganovic you might find this useful: https://v4-alpha.getbootstrap.com/layout/grid/#offsetting-columns
Sorin Ruse
@sorinr
Jan 21 2017 12:34
@Kranex ok. ans stll not working? do you have any addblocker?
Ghost
@ghost~586bde55d73408ce4f40f049
Jan 21 2017 12:36
Good evening Guys ..
Hope all of you are doin nice !!!
Oliver Strik
@Kranex
Jan 21 2017 12:37
@coffeebeanzz found one, but it still doesn't work. @sorinr still not working, and I don't have an addblocker, the links on this work intriguingly...
Ghost
@ghost~586bde55d73408ce4f40f049
Jan 21 2017 12:37
Help me out .... i stucked in a problem
CamperBot
@camperbot
Jan 21 2017 12:37
no wiki entry for: me out i stucked in a problem
Ghost
@ghost~586bde55d73408ce4f40f049
Jan 21 2017 12:38
i have been facing a problem
since last two days
Sorin Ruse
@sorinr
Jan 21 2017 12:38
@Kranex can u share ur pen link?
almaaganovic
@almaaganovic
Jan 21 2017 12:38
@Kranex yes I had read that prevoiusly but since I am totally new to everything, I had a problem understanding the mechanism.
Oliver Strik
@Kranex
Jan 21 2017 12:39
@almaaganovic ahh fair, I'm sure you'll get the hang of it :)
almaaganovic
@almaaganovic
Jan 21 2017 12:39
How do I make some padding between elements/rows of the unordered list
Oliver Strik
@Kranex
Jan 21 2017 12:40
@sorinr sure, I'll just undo my crazy tests.
Ghulam Shabir
@ghulamshabir
Jan 21 2017 12:40
@arefinsaad lol you posted like 6 times but did not post the problem :smile:
Sorin Ruse
@sorinr
Jan 21 2017 12:42
@kengin2013 in settings css change the fontawesome to point to version 4.7.0 instead of 4.6.x this icon was inserted in 4.7.0
Oliver Strik
@Kranex
Jan 21 2017 12:42
@sorinr https://codepen.io/Kranex/full/ZLejEV/ there you go, interestingly, they work outside of all my <div> blocks.
Ghost
@ghost~586bde55d73408ce4f40f049
Jan 21 2017 12:42
The problem is .... when i minimize my window ..one button appears and that button shows me some button ..and when i click any button from there ,it takes me to one specific div ..... it is working very fine in my desktop and laptop
but when i try to see that page in my mobile and touch any one from that menu ...it doesn't work -_-
__mifflin__
@cdrainxv
Jan 21 2017 12:42
@kengin2013: fcc icon was just included in newest font-awesome version of 4.7.0 I believe. You are currently using version 4.6.3.
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
Replace the 4.6.3 version in codepen with the 4.7.0 version.
Ghost
@ghost~586bde55d73408ce4f40f049
Jan 21 2017 12:44
how can i fix that !!!
irakli12345
@irakli12345
Jan 21 2017 12:48
Guys, can this - http://codepen.io/irakli12345/full/oBWXwV/ , be considered as personal portfolio page? i mean, it meets all the "user story" requirements, but it's still ugly
Sorin Ruse
@sorinr
Jan 21 2017 12:49
@Krane just try in css a{z-index: 100;}
@Kranex nope but commenting out #content z-index:-1 will make them work
Oliver Strik
@Kranex
Jan 21 2017 12:53
ahh. that actually makes sense.
Sorin Ruse
@sorinr
Jan 21 2017 12:54
@Kranex coz you can see them but are on non reachable layer
Kenneth Nwaeze
@kengin2013
Jan 21 2017 12:54
@cdrainxv done & thanks
CamperBot
@camperbot
Jan 21 2017 12:54
kengin2013 sends brownie points to @cdrainxv :sparkles: :thumbsup: :sparkles:
:star2: 2158 | @cdrainxv |http://www.freecodecamp.com/cdrainxv
Marcin_L
@lotosiauke
Jan 21 2017 12:55

http://codepen.io/Latosiauke/pen/pRemXK

I wanted my JS script to replace two first boxes with one. If I replace html elements manually it works like i want. But JS doesn't run and i don't see why. Can't go on progress with my project cause i don't know if it works. Any ideas friends why?

Oliver Strik
@Kranex
Jan 21 2017 12:55
@sorinr Thanks! I put that layer back where it was and brought the header bar foward a layer, works perfectly now :)
CamperBot
@camperbot
Jan 21 2017 12:55
kranex sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1122 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 21 2017 12:56
@Kranex :+1:
Ghost
@ghost~586bde55d73408ce4f40f049
Jan 21 2017 13:01
@ghulamshabir i told my prb ...please help me solving the prob
Ghulam Shabir
@ghulamshabir
Jan 21 2017 13:03
@arefinsaad I don't know how I can solve your problem, may be your mobile's browser has issues with javascript but I am not sure sorry
coffeebeanzz
@coffeebeanzz
Jan 21 2017 13:05
@arefinsaad or could be you need media queries for small screens
Sorin Ruse
@sorinr
Jan 21 2017 13:05
@lotosiauke this is what you want?
$(function(){
  $("#box1_1").replaceWith("<div class='quote-box'></div>");
  $('#box1_2').remove();
});
Marcin_L
@lotosiauke
Jan 21 2017 13:06

@sorinr Wow. It worked (not as i wanted. It replace all 4 boxes not 2). Why i couldn't point nested boxes in #row1?

In future i want to randomly swap two boxes with one in one of the first two rows and input there a quote.

btw thanks :D you proved me that js in codepen works :D

CamperBot
@camperbot
Jan 21 2017 13:06
lotosiauke sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1123 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 21 2017 13:07
@lotosiauke for the initial suggestion i haven't seen you have more box ids below :)
Marcin_L
@lotosiauke
Jan 21 2017 13:07
@sorinr Exactly! thanks :) Tried something like that earlier and didn't worked. Nothing happened no matter I scripted (just to watch if any js script works)
CamperBot
@camperbot
Jan 21 2017 13:07
lotosiauke sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: lotosiauke already gave sorinr points
Marcin_L
@lotosiauke
Jan 21 2017 13:09
Thanks again! Trying to figure out now how to do it on click with random boxes! Later :D
Oh! one thing more! Is it possible in jquery to make variables with these elements and operate on them like on any other var in js?
Kenneth Nwaeze
@kengin2013
Jan 21 2017 13:11
how do I get write html for this "___ </>__"? where, the straight lines are at a level midway to the </> symbol height?
Wrong link @kengin2013 its on this one http://www.html.am/reference/html-special-characters.cfm
Ghost
@ghost~586bde55d73408ce4f40f049
Jan 21 2017 13:16
@coffeebeanzz .... can i show you my pen ??
if u can ... i mean have a look and find me out where's the problem !!!
coffeebeanzz
@coffeebeanzz
Jan 21 2017 13:16
@arefinsaad you can post it for everyone. I'm still a noob
Ghost
@ghost~586bde55d73408ce4f40f049
Jan 21 2017 13:17
lol :D
Sorin Ruse
@sorinr
Jan 21 2017 13:17
@lotosiauke yes just make var box1 = $("#box1_1"); to cache the dom
Ghost
@ghost~586bde55d73408ce4f40f049
Jan 21 2017 13:17
Marcin_L
@lotosiauke
Jan 21 2017 13:31
@sorinr Thanks :)
CamperBot
@camperbot
Jan 21 2017 13:31
:warning: lotosiauke already gave sorinr points
lotosiauke sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
almaaganovic
@almaaganovic
Jan 21 2017 13:37
Can anyone tell me how to fit the photo in the thumbnail, I have a lot of empty space like padding?
Sorin Ruse
@sorinr
Jan 21 2017 13:37
@lotosiauke welcome. if you need to get the element witch was clicked you can do it like:
$(function(){
  $("div[id^='box']").on("click", function(e){
    alert(e.target.id);
  });
});
almaaganovic
@almaaganovic
Jan 21 2017 13:46
I have a <div class="thumbnail"> but I want it to look like the class .img-thumbnail is applied to the img tag
mikecerang
@mikecerang
Jan 21 2017 13:47
What do you think of my Bernie-inspired Tribute page? http://codepen.io/mikecerang/pen/zNZrJp
Sorin Ruse
@sorinr
Jan 21 2017 13:48
@almaaganovic can u share the pen link?
almaaganovic
@almaaganovic
Jan 21 2017 13:48
mikecerang
@mikecerang
Jan 21 2017 13:53
If I think Building a Personal Portfolio Webpage might be too tough for my coding level, should I redo all the lessons again?
Sorin Ruse
@sorinr
Jan 21 2017 13:53
@almaaganovic whats wrong with that picture?
almaaganovic
@almaaganovic
Jan 21 2017 13:54
@sorinr I want it to be streched right and left so it fills the empty space between thumbnail border and picture
@sorinr hey it is streched if I click this link, but when I preview from code pen there is a lot of empty space left and right
Sorin Ruse
@sorinr
Jan 21 2017 13:55
@almaaganovic you need the body styling to be margin-top not just top if you want the content to start a certain distance from top of page
@almaaganovic the thumbnail class just setts margin-left margin-right to auto. if you want no margin do not use that class
almaaganovic
@almaaganovic
Jan 21 2017 13:58
@sorinr OK :) It was a predefined value I didn't even know what that meant :)
@sorinr I have no ide why it shows without margins in chrome and with margins in FF
Sorin Ruse
@sorinr
Jan 21 2017 14:01
@almaaganovic maybe what you see its padding not margin. try .thumbnail { padding: 0; } in css
Adel
@AdelMahjoub
Jan 21 2017 14:01
@almaaganovic "though this was never proved against Arabs before Islam", it is proved, and not only in Arabian peninsula
almaaganovic
@almaaganovic
Jan 21 2017 14:02
@sorinr I thought we should not use custom css. I mentioned earlier that it is padding, since it is inside the thumbnail. I will try that
Mostafa Masri
@thefakeweed
Jan 21 2017 14:04
hey guys can somebody help me ?
Adel
@AdelMahjoub
Jan 21 2017 14:05
and the dates in the tribute page are not in hijri, @almaaganovic
Mostafa Masri
@thefakeweed
Jan 21 2017 14:05
http://codepen.io/mml3b/pen/KaamPX , how can i make each hyperlink button a color ?? is it possible ?
Sorin Ruse
@sorinr
Jan 21 2017 14:05
@almaaganovic you can use whatever custom css to make the pen look like you wanted it. here my tribute page : tribute
Nitin Chandran Nair
@NitinNair89
Jan 21 2017 14:05
@mml3b It's psossbile, set the background color of your hyperlink buttons in CSS
Mostafa Masri
@thefakeweed
Jan 21 2017 14:06
how ????/
Adel
@AdelMahjoub
Jan 21 2017 14:06
day one , first year of the hijri calander should be 622 AC, the dates in that page are gregorian
Nitin Chandran Nair
@NitinNair89
Jan 21 2017 14:07
@mml3b You want to change background for your social media icons?
almaaganovic
@almaaganovic
Jan 21 2017 14:07
@AdelMahjoub yes you are right. i used some other years at first but than changed and forgot :worried:
Mostafa Masri
@thefakeweed
Jan 21 2017 14:08
i wanto to set a different color to each icon
Nitin Chandran Nair
@NitinNair89
Jan 21 2017 14:09
@mml3b oh. then give each <a> an id attribute like this - <a id="twitter" ... > and then in CSS you can use #twitter { color: blue; }
Adel
@AdelMahjoub
Jan 21 2017 14:12
@almaaganovic > 624 - The start of three major battles with the Meccans.
should be the start of the three major battles against Quraish tribue
Mostafa Masri
@thefakeweed
Jan 21 2017 14:13
i did something wrong and for some reason my twitter icon turned into purple
@NitinNair89
almaaganovic
@almaaganovic
Jan 21 2017 14:14
@AdelMahjoub it is just a random text from google. what about differences in chrome and firefox considering padding around the image of a thumbnail class
Adel
@AdelMahjoub
Jan 21 2017 14:14
@almaaganovic it seems your source is not accurate
@almaaganovic what do you want to change
almaaganovic
@almaaganovic
Jan 21 2017 14:15
@AdelMahjoub can you open it in a firefox and chrome so you can see differences
Nitin Chandran Nair
@NitinNair89
Jan 21 2017 14:15
@mml3b Checking..bear with my slow connection.
Mostafa Masri
@thefakeweed
Jan 21 2017 14:16
haha its alright
Nitin Chandran Nair
@NitinNair89
Jan 21 2017 14:16
@mml3b your css needs correction:
a {font-size: 77px;  }
  #twitter {color: blue;}
Adel
@AdelMahjoub
Jan 21 2017 14:17
@almaaganovic it is the same
blob
almaaganovic
@almaaganovic
Jan 21 2017 14:17
@AdelMahjoub hmmm I see. I appreciate your effort. so I could submit it now? after I change the timeline mistakes :P
Adel
@AdelMahjoub
Jan 21 2017 14:18
@almaaganovic that's up to you :smile:
almaaganovic
@almaaganovic
Jan 21 2017 14:19
@AdelMahjoub ok thanks for help
CamperBot
@camperbot
Jan 21 2017 14:19
almaaganovic sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 403 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
Mostafa Masri
@thefakeweed
Jan 21 2017 14:19
http://codepen.io/mml3b/pen/KaamPX Thx dude it worked like a charm @NitinNair89
CamperBot
@camperbot
Jan 21 2017 14:19
mml3b sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 381 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Jan 21 2017 14:20
@mml3b Happy to help! :)
r2d2
@UsamaHameed
Jan 21 2017 14:29
CSS positioning is killing me. Can anyone explain why we have to give the container a position: absolute || relative style???
Example here
Nitin Chandran Nair
@NitinNair89
Jan 21 2017 14:32
@UsamaHameed relative positioning means it will move the content away "from" where it would have been displayed without any position, i.e. it's original position
absolute positioning means content will move "to" wherever / whichever directions you ask it via CSS
r2d2
@UsamaHameed
Jan 21 2017 14:34

@NitinNair89 I know what they do but...

.container {
    position: relative;
}

.topleft {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 18px;
}

but why do we have to give the container a position style??? We are only positioning the div with the class topleft

Sorin Ruse
@sorinr
Jan 21 2017 14:37
@UsamaHameed yes but you probably have that div.topleft inside the .container so you position absolute it based on the container position
Nitin Chandran Nair
@NitinNair89
Jan 21 2017 14:38
in that example, they just assigned it relative.you can also use absolute for containers but then it won't work
because all the elements placed inside the containers also have absolute positioning.. then those elements will move as per the browser not the container.. @sorinr Correct me if i am wrong
r2d2
@UsamaHameed
Jan 21 2017 14:40
Let me rephrase. I tried using relative and absolute on the container. Nothing changes. But if I remove position style from the container, the styles in div.topleft don't work. Why is that?
@NitinNair89 @sorinr
.container {
   // position: relative; <----- Removed this line and styles in div.topleft don't work
}

.\topleft {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 18px;
}
Sorin Ruse
@sorinr
Jan 21 2017 14:41
@UsamaHameed An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
r2d2
@UsamaHameed
Jan 21 2017 14:42
So, the container needs to be "positioned"?
NEHA MITTOOR CHANGAPPA
@nehamchangappa
Jan 21 2017 14:44

Hello I am struck in twitch api. Can you please help me find why this javascript is not working to show TWITCH Stream list .... TIA
//RUN OUR JQUERY
var following = [
"ESL_SC2",
"ESL_CSGO",
"OgamingSC2",
"cretetion",
"freecodecamp",
"storbeck",
"habathcx",
"RobotCaleb",
"noobs2ninjas",
"pink_sparkles",
"comster404",
"brunofin",
"medrybw",
"monstercat",
"aces_tv",
"loserfruit",
"behkuhtv",
"fakename",
"food"
];
$(document).ready(function(){

//FREE CODE CAMP STREAM INFO AND STATUS API CALL
var url= 'https://wind-bow.gomix.me/twitch-api/streams/freecodecamp?callback=?&client_id=j15r3tcqv1ies1opd4ve46kq74106un';
$.getJSON(url,function(data1){
if(data1.stream===null){
$("#fccStatus").html("Free Code Camp is Currently OFFLINE!");
}
else{
$("#fccStatus").html("Free Code Camp is Currently ONLINE!");
}
});
for(var i=0;i<following.length;i++){
var url2= 'https://wind-bow.gomix.me/twitch-api/streams/' + following[i]+'?callback=?&client_id=j15r3tcqv1ies1opd4ve46kq74106un';

  $.getJSON(url2).done(function(data3){
    var logo;
    var status;
    var name;

    if(data3.error){
      logo= 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeF9yiuuOJBNO8VpXsVp2VQIpBSTPdLKW6uB3AI-jmSX9G74bX1g';
      name = data3.message;
      status= data3.error;
         $("#followerInfo").prepend("<div class ='row'>"+"<div class='col-md-4'>" +"<img src='" + logo + "'>" +"</div>" + "<div class='col-md-4'>" + name + "</div>" + "<div class='col-md-4'>" +status + "</div></div>");     
    }
    if(data3.stream===null){
      $.getJSON(data3._links.channel,function(data5){
       status = "OFFLINE";
        logo= data5.logo;
        name= data5.display_name;
        if(logo===null){
          logo = 'http://web.vmc3.com/projects/bufs/branch/marines/logos/NoLogo.jpg';
        }
                      $("#followerInfo").prepend("<div class ='row'>" + "<div class='col-md-4'>" +"<img src='" + logo + "'>"+"</div>" + "<div class='col-md-4'>" + name + "</div>" + "<div class='col-md-4'>" + status + "</div></div>");

      });

    }

  });   
  }

for(var i=0;i<following.length;i++){
var onlineURL="https://wind-bow.gomix.me/twitch-api/streams/" + following[i]+'?callback=?&client_id=j15r3tcqv1ies1opd4ve46kq74106un' ;
$.getJSON(onlineURL, function(data4){
var logo= data4.stream.channel.logo;
if(logo===null){
logo = 'http://web.vmc3.com/projects/bufs/branch/marines/logos/NoLogo.jpg';
}
var status= data4.stream.channel.status;

    var name = data4.stream.channel.display_name;
           $("#followerInfo").prepend("<div class ='row'>" + "<div class='col-md-4'>" +"<img src='" + logo + "'>"+ "</div>" + "<div class='col-md-4'>" + name + "</div>" + "<div class='col-md-4'>" +status + "</div></div>");           
      });

}
});

Sorin Ruse
@sorinr
Jan 21 2017 14:45
@UsamaHameed the implicit position of an element on page is static. a relative position for an element is that you can move it away from its normal static position
Nitin Chandran Nair
@NitinNair89
Jan 21 2017 14:45
positioning works only when you use the "position" property.. Just giving top, left or other directions will not work @UsamaHameed
Mostafa Masri
@thefakeweed
Jan 21 2017 14:46
hey guys does somebody know why my image is not showing ? http://codepen.io/mml3b/pen/KaamPX
Nitin Chandran Nair
@NitinNair89
Jan 21 2017 14:47
@nehamchangappa any errors in javascript? post your codepen link
NEHA MITTOOR CHANGAPPA
@nehamchangappa
Jan 21 2017 14:48
@NitinNair89 Here it is -> http://codepen.io/nehamchangappa/pen/mRrZwz
r2d2
@UsamaHameed
Jan 21 2017 14:48

Guys @NitinNair89 @sorinr try to understand :P
Following is the code. We do not need to position the container any where. It is fine as it is.

.container {
    position: relative;
}

.topleft {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 18px;
}

But if I remove the position on the container, the position in div.topleft does not work. Why is that?

Nitin Chandran Nair
@NitinNair89
Jan 21 2017 14:49
@UsamaHameed That is what @sorinr said just now. Can you position a bag of sugar in a container without knowing where the container is positioned?
@mml3b Your image url is incorrect.
Kenneth Nwaeze
@kengin2013
Jan 21 2017 14:50
@coffeebeanzz done & thanks
CamperBot
@camperbot
Jan 21 2017 14:50
:star2: 1685 | @coffeebeanzz |http://www.freecodecamp.com/coffeebeanzz
kengin2013 sends brownie points to @coffeebeanzz :sparkles: :thumbsup: :sparkles:
Mostafa Masri
@thefakeweed
Jan 21 2017 14:51
it seems to be working on my browser http://imgur.com/f5iESCf
Nitin Chandran Nair
@NitinNair89
Jan 21 2017 14:51
@mml3b Image should have an extension like .jpg or .png or any other formats.
Mostafa Masri
@thefakeweed
Jan 21 2017 14:51
oh
NEHA MITTOOR CHANGAPPA
@nehamchangappa
Jan 21 2017 14:51
@mml3b you have used the wrong img src ... use -> http://i.imgur.com/f5iESCf.jpg in the src ...hopefully it should work
Mostafa Masri
@thefakeweed
Jan 21 2017 14:52
Thx @nehamchangappa @NitinNair89
CamperBot
@camperbot
Jan 21 2017 14:52
mml3b sends brownie points to @nehamchangappa and @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @nehamchangappa |http://www.freecodecamp.com/nehamchangappa
:warning: mml3b already gave nitinnair89 points
Nitin Chandran Nair
@NitinNair89
Jan 21 2017 14:53
@nehamchangappa what's the "logo" about?
NEHA MITTOOR CHANGAPPA
@nehamchangappa
Jan 21 2017 14:53
@NitinNair89 its for the channels logo
Nitin Chandran Nair
@NitinNair89
Jan 21 2017 14:56
if it is an image, then the url is incorrect.. @nehamchangappa
NEHA MITTOOR CHANGAPPA
@nehamchangappa
Jan 21 2017 14:57
@NitinNair89 but atleast the list should pop up right ?
Nitin Chandran Nair
@NitinNair89
Jan 21 2017 14:57
?
what list
NEHA MITTOOR CHANGAPPA
@nehamchangappa
Jan 21 2017 14:57
@NitinNair89 the list of channels streaming is also not showing up .. !
Sander Berntsen
@sbxn14
Jan 21 2017 14:59
http://codepen.io/sbxn14/pen/apmJJQ im getting in error in the javascript, it says the ; is an unexpected token at the end? why is that? idk how to fix it
Nitin Chandran Nair
@NitinNair89
Jan 21 2017 15:00
@nehamchangappa check PM
@nehamchangappa you there?
NEHA MITTOOR CHANGAPPA
@nehamchangappa
Jan 21 2017 15:05
@sbxn14 you have to add ) after } and before ; ... you have forgotten to add ' ) ' in line 19..
@NitinNair89 yes checking
Sander Berntsen
@sbxn14
Jan 21 2017 15:08
@nehamchangappa ah gotcha. thanks! cant believe I missed that :D
CamperBot
@camperbot
Jan 21 2017 15:08
sbxn14 sends brownie points to @nehamchangappa :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @nehamchangappa |http://www.freecodecamp.com/nehamchangappa
JD Tadlock
@jdtdesigns
Jan 21 2017 15:41
@mml3b Imgur is blocked by codepen. You'll need to find another host like postimage.io
Marcin_L
@lotosiauke
Jan 21 2017 15:54

http://codepen.io/Latosiauke/pen/QdvybR

My newquote button works as I intended but only once. Next click operates on already modified elements. How can i "refresh" these elements to default without reloading page?

Mostafa Masri
@thefakeweed
Jan 21 2017 16:00
hey guys do you know how can i put some space between my social media icons ? http://codepen.io/mml3b/pen/KaamPX
Dylan C. Israel
@PizzaPokerGuy
Jan 21 2017 16:00
padding-left and padding-right
css
Mostafa Masri
@thefakeweed
Jan 21 2017 16:02
example pls
Dylan C. Israel
@PizzaPokerGuy
Jan 21 2017 16:03
.socialMediaIconsClass{pading-left:25px; padding-right:25px;}
Mostafa Masri
@thefakeweed
Jan 21 2017 16:04
thats css right?
Dylan C. Israel
@PizzaPokerGuy
Jan 21 2017 16:04
Yes
assign it as a class
in your html
for each icon
JD Tadlock
@jdtdesigns
Jan 21 2017 16:10
@mml3b Looks neat but i'm not really sure what you're trying to achieve
Rennie Bevineau
@Renniesb
Jan 21 2017 16:11
Hi everyone, I have created a banner image for my website and would like my text to have a color background behind it, however if I try to put a background behind it the entire width of the page has the background not just the text. My text is perfectly centered to the image I just need a color background behind the text to make it stand out. Here is a link to a plunkr with my current code in it- https://plnkr.co/edit/4MDdmMq7utDOftkLeDay?p=preview
Mostafa Masri
@thefakeweed
Jan 21 2017 16:12
@jdtdesigns i want some space between each social media icon
i dont know how to do it , theyr so close from each other
JD Tadlock
@jdtdesigns
Jan 21 2017 16:13
@lotosiauke What are you trying to achieve?
Dylan C. Israel
@PizzaPokerGuy
Jan 21 2017 16:13
i just told you how to do it
assign padding to your icons
i{
i{padding-left}
JD Tadlock
@jdtdesigns
Jan 21 2017 16:15
@Renniesb Did you add the background color to the h1?
Dylan C. Israel
@PizzaPokerGuy
Jan 21 2017 16:15
set padding to whatever you need it to be px wise
Rennie Bevineau
@Renniesb
Jan 21 2017 16:15
Never mind I figured it out. Lol
But I could of just as well spent another hour on it
So I posed the question just in case.
Thank you all
Dylan C. Israel
@PizzaPokerGuy
Jan 21 2017 16:16
@Renniesb sound like one of my subs who watch the project videos
lol
Rennie Bevineau
@Renniesb
Jan 21 2017 16:16
Here is the solution
JD Tadlock
@jdtdesigns
Jan 21 2017 16:22
@Renniesb Here's another solution. You shouldn't use display: table for the h1. http://jsbin.com/sogojun/edit?html,css,output
Dylan C. Israel
@PizzaPokerGuy
Jan 21 2017 16:23
Anyone here familiar with d3 v4 specifically having to do with bar charts
Tyler Moeller
@TylerMoeller
Jan 21 2017 16:35
@mml3b Your image isn't showing because it is hosted on imgur, which doesn't allow codepen to use its images. Try using https://postimage.org for your image hosting instead.
Mostafa Masri
@thefakeweed
Jan 21 2017 16:35
i fixed it long time ago
Tyler Moeller
@TylerMoeller
Jan 21 2017 16:38
@nehamchangappa Check for data.error first, then data.stream. If data.stream doesn't exist, your check for data.stream === null will error out
Kenneth Nwaeze
@kengin2013
Jan 21 2017 16:38
how can I increase my profile web size to about 2 pages https://codepen.io/kengin2013/pen/yVmXwM?editors=1100
Tyler Moeller
@TylerMoeller
Jan 21 2017 16:39
@mml3b No, your image still doesn't show up. It is cached for you maybe, but for me, the image doesn't display.
@kengin2013 Wrap each of your sections in a div, assign it a class like 'section', and then give that class a min-height in your CSS.
Mostafa Masri
@thefakeweed
Jan 21 2017 16:42
check again it;s 100% working for me
do you know how can i add some bootstarp aimations to my social media icons ?
Tyler Moeller
@TylerMoeller
Jan 21 2017 16:42
blob
@mml3b
Mostafa Masri
@thefakeweed
Jan 21 2017 16:42
like bouncing and stuff
Tyler Moeller
@TylerMoeller
Jan 21 2017 16:42
^^ That's what I see - it's impossible for it to work because imgur doesn't allow requests from codepen.
You are seeing a cached version of the image - try it in incognito mode and you will see
JD Tadlock
@jdtdesigns
Jan 21 2017 16:43
Mostafa Masri
@thefakeweed
Jan 21 2017 16:43
ok ill se
JD Tadlock
@jdtdesigns
Jan 21 2017 16:43
same thing
you need to use another host like i mentioned earlier
Mostafa Masri
@thefakeweed
Jan 21 2017 16:44
huh you;re right
lol
Tyler Moeller
@TylerMoeller
Jan 21 2017 16:48
@mml3b :+1:
Mostafa Masri
@thefakeweed
Jan 21 2017 16:49
great now help me i want to put some space between each social media icon and add some bootstrap animation
Tyler Moeller
@TylerMoeller
Jan 21 2017 16:49
@mml3b Use margins to add space between icons. Lots of ways to animate them - maybe check out animate.css
Marcin_L
@lotosiauke
Jan 21 2017 17:09

http://codepen.io/Latosiauke/pen/QdvybR

I wanted onclick event to load initial div elements before manipulating them again. Why doesn't it work? How can i reload initial DOM element?

I expect that on every click on new quote i'll get random brown boxes. Now it works fine but just once.
I try to figure it out for hours.

Moisés Man
@moigithub
Jan 21 2017 17:09
@mml3b reading documentation and learn to use search engines (like google) is a MUST if u wanna be a coder
(i see u keep asking same question .. others already responded u but u still keep asking the same)
Abdenour1993
@Abdenour1993
Jan 21 2017 17:12
hello i want to know if there is a sepcial Api to use for the random quote machine
Tyler Moeller
@TylerMoeller
Jan 21 2017 17:14
@Abdenour1993 No need to use any API in particular. Search for one you like, or you can use your own array of quotes.
Moisés Man
@moigithub
Jan 21 2017 17:15
http://forismatic.com/en/api/
http://quotesondesign.com/api-v4-0/
i remember some1 used simpson api, others something about star wars
u can pick whatever u like @Abdenour1993
Abdenour1993
@Abdenour1993
Jan 21 2017 17:16
Thank you very much guys
sudhir meena
@sudhir512kj
Jan 21 2017 17:25
hiii
i need a little help
Taylor
@treddson
Jan 21 2017 17:25
Recently started my tribute page. How can I get the background to not take up the whole page? On the example tribute page, his grey background doesn't take up the entire page. Any help is greatly appreciated!
sudhir meena
@sudhir512kj
Jan 21 2017 17:26
i have to submit project ...can i use another ide in my pc to develop project
Dinesh
@dinesh333
Jan 21 2017 17:28

Hey guys, this is the sample portfolio project in FCC https://codepen.io/freeCodeCamp/full/YqLyXB

How would I get the scrolling effect (when you click on portfolio, the page SCROLLS to portfolio.. doesn't just jump to portfolio) that exists in this project?

@treddson change the bootstrap class from container-fluid to container? That would be my guess.
Tyler Moeller
@TylerMoeller
Jan 21 2017 17:30
@treddson The grey background is from bootstrap's jumbotron class: https://getbootstrap.com/components/#jumbotron
@sudhir512kj You can use any IDE you want, but when you submit your project, it has to be hosted somewhere it can be reviewed. Github, codepen, etc. work great for that
sudhir meena
@sudhir512kj
Jan 21 2017 17:31
oh okk sir thank you
Tyler Moeller
@TylerMoeller
Jan 21 2017 17:31
@dinesh333 It's called smooth scroll - lots of people go through all the javascript challenges and then come back to their portfolio before implementing that feature
sudhir meena
@sudhir512kj
Jan 21 2017 17:32
@TylerMoeller thank you sir
vatsal
@vatsal2
Jan 21 2017 17:32
hey , check out my tribute page :
CamperBot
@camperbot
Jan 21 2017 17:32
:star2: 1354 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 21 2017 17:32
Portfolio is kind of a work in progress, since you need to go back and add your completed projects to it
CamperBot
@camperbot
Jan 21 2017 17:32
sudhir512kj sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
sudhir meena
@sudhir512kj
Jan 21 2017 17:33
@TylerMoeller but sir then after completing my project...how i will submit that
Dinesh
@dinesh333
Jan 21 2017 17:33

@TylerMoeller Thank you.

I will look up smooth scroll and see what comes up!

CamperBot
@camperbot
Jan 21 2017 17:33
dinesh333 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1355 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
sudhir meena
@sudhir512kj
Jan 21 2017 17:34
@camperbot i m new here ...i dont know how to send brownies
Tyler Moeller
@TylerMoeller
Jan 21 2017 17:35
@sudhir512kj You will need to have your code online to submit it. They require a URL so they can review your code
Taylor
@treddson
Jan 21 2017 17:36
@TylerMoeller I'll try that. Thanks!
CamperBot
@camperbot
Jan 21 2017 17:36
treddson sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Rodrigo I. Ávila D.
@Undigon
Jan 21 2017 17:36
@sudhir512kj All you have to do is mention someone and write "thanks".
CamperBot
@camperbot
Jan 21 2017 17:36
:star2: 1356 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
sudhir meena
@sudhir512kj
Jan 21 2017 17:37
@Undigon thanks
CamperBot
@camperbot
Jan 21 2017 17:37
sudhir512kj sends brownie points to @undigon :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @undigon |http://www.freecodecamp.com/undigon
sudhir meena
@sudhir512kj
Jan 21 2017 17:37
@TylerMoeller thanks
CamperBot
@camperbot
Jan 21 2017 17:37
sudhir512kj sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: sudhir512kj already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Jan 21 2017 17:38
Good luck :+1:
vatsal
@vatsal2
Jan 21 2017 17:39
please give feedback of my tribute page, and let me know if there is anything that is to be corrected.
Dinesh
@dinesh333
Jan 21 2017 17:42
@vatsal2 I love it! Good work!
vatsal
@vatsal2
Jan 21 2017 17:42
thanks
Tyler Moeller
@TylerMoeller
Jan 21 2017 17:43
@vatsal2 Nice job - are you sure that image isn't Ashton Kutcher? :) It would be nice to center the image if possible.
I also see you are using <center> tags, which are deprecated now. And instead of doing this:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;, you should use margins in your CSS
The <br> tag is also deprecated
vatsal
@vatsal2
Jan 21 2017 17:44
i've made it container fluid , so open in whole window so that it can be seen properly
then what instead of <br> tag
margin & padding??
Tyler Moeller
@TylerMoeller
Jan 21 2017 17:46
@vatsal2 Use <div> to start elements on a new line and use margin-top in your CSS to create space
Sorin Ruse
@sorinr
Jan 21 2017 17:47
@vatsal2 <font> tag no longer supported in html5. change it to <p> and style it in css as you need. avoid using <br> better margin or padding in css
vatsal
@vatsal2
Jan 21 2017 17:49
thanks so much for tips @TylerMoeller @sorinr @dinesh333
CamperBot
@camperbot
Jan 21 2017 17:49
vatsal2 sends brownie points to @tylermoeller and @sorinr and @dinesh333 :sparkles: :thumbsup: :sparkles:
:star2: 1124 | @sorinr |http://www.freecodecamp.com/sorinr
:star2: 1357 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
:cookie: 130 | @dinesh333 |http://www.freecodecamp.com/dinesh333
Tyler Moeller
@TylerMoeller
Jan 21 2017 17:50
@vatsal2 Codepen will help show you other errors as you make updates. Click the down arrow in the top, right-hand corner of the HTML panel and select "Analyze HTML"
blob
vatsal
@vatsal2
Jan 21 2017 17:51
ok :+1:
Sorin Ruse
@sorinr
Jan 21 2017 17:52
@vatsal2 also all that nbsp can be replaced with text-indent css property
vatsal
@vatsal2
Jan 21 2017 17:54
@sorinr i.e left, right, center, etc. ??
Sorin Ruse
@sorinr
Jan 21 2017 17:57
@vatsal2 nope. text-indent: 20px or 3%. just google for it .
vatsal
@vatsal2
Jan 21 2017 17:59
@sorinr ya i'll check
mouadtmd
@mouadtmd
Jan 21 2017 17:59
Hello can someone help me with my "Build a tribute page" task. I'm trying to make a <em>reversed</em> ordered list and I could'nt find a way to make the numbers in caps.
what do you think about interface gentlemen?
it's a simon game project
mouadtmd
@mouadtmd
Jan 21 2017 18:01
the numbers bold *
Sorin Ruse
@sorinr
Jan 21 2017 18:02
@mouadtmd what to you mean by numbers in caps? numbers do not have lowercase or uppercase :)
vatsal
@vatsal2
Jan 21 2017 18:03
@l10yd interface is nice , I liked it
mouadtmd
@mouadtmd
Jan 21 2017 18:03
@sorinr I wanted to say bold lol
@sorinr I've found a solution in StackOverflow but with a regular list not a reversed one
vatsal
@vatsal2
Jan 21 2017 18:05
@mouadtmd I think u should visit http://www.w3schools.com/ for this .
Sander Berntsen
@sbxn14
Jan 21 2017 18:07
http://codepen.io/sbxn14/pen/apmJJQ?editors=1111 why is the link not working in js?
Sorin Ruse
@sorinr
Jan 21 2017 18:10
@mouadtmd you can use li::marker {} for styling
Kirill
@l10yd
Jan 21 2017 18:10
@vatsal2 thx for the feedback :smile:
CamperBot
@camperbot
Jan 21 2017 18:10
l10yd sends brownie points to @vatsal2 :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @vatsal2 |http://www.freecodecamp.com/vatsal2
Tyler Moeller
@TylerMoeller
Jan 21 2017 18:12
@sbxn14 Use your browser's dev console to debug these kinds of errors. (Ctrl+Shift+J on windows, Option+Shift+J on mac).
mouadtmd
@mouadtmd
Jan 21 2017 18:15
@sorinr Thanks ! Gonna look into that
CamperBot
@camperbot
Jan 21 2017 18:15
mouadtmd sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1125 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 21 2017 18:19
@mouadtmd its no longer supported
mouadtmd
@mouadtmd
Jan 21 2017 18:21
@sorinr ok thanks anyway!
CamperBot
@camperbot
Jan 21 2017 18:21
mouadtmd sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: mouadtmd already gave sorinr points
Tyler Moeller
@TylerMoeller
Jan 21 2017 18:25
@mouadtmd Something like this could work:
<ol reversed>
  <li><span class="list-text">three</span></li>
  <li><span class="list-text">two</span></li>
  <li><span class="list-text">one</span></li>
</ol>
li {
  font-weight: bold;
}

.list-text {
  font-weight: normal;
}
Chiu Yong
@chiuyong
Jan 21 2017 18:28
@TylerMoeller can u help me?
Tyler Moeller
@TylerMoeller
Jan 21 2017 18:28
@chiuyong I can try :)
Chiu Yong
@chiuyong
Jan 21 2017 18:31
well, I'd like to keep two divs (1 img and other text) that are side by side the same height ...
@TylerMoeller I started building but I'm stucked https://codepen.io/chiuyc/pen/NddaJM
but without transition
mouadtmd
@mouadtmd
Jan 21 2017 18:35
@TylerMoeller that worked thanks!
CamperBot
@camperbot
Jan 21 2017 18:35
mouadtmd sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1358 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 21 2017 18:35
@chiuyong There are lots of ways to go about it - have you tried any of these: http://stackoverflow.com/a/19695851
Chiu Yong
@chiuyong
Jan 21 2017 18:37
@TylerMoeller I tried to use flex, but no success
Tyler Moeller
@TylerMoeller
Jan 21 2017 18:39
@chiuyong One of the problems here is that your image will need to get wider as it gets taller, but its width will be restricted by the size of the bootstrap column.
The flexbox approach works, just maybe not the way you expect
Chiu Yong
@chiuyong
Jan 21 2017 18:41
@TylerMoeller even if I restrict the description text with scroll to not influence the size of the image as the text getting bigger?
Tyler Moeller
@TylerMoeller
Jan 21 2017 18:43
@chiuyong You could definitely do that if you want. Lots of options
A nicer approach might be to make the image a background image for the left div and then use JavaScript to calculate its height based on the height of the div with the text in it
Chiu Yong
@chiuyong
Jan 21 2017 18:46
@TylerMoeller can you make an outline of your example, please?
Martín Comito
@aguantincho
Jan 21 2017 18:48
Hey! I need some help
Tyler Moeller
@TylerMoeller
Jan 21 2017 18:49
@chiuyong As a start, it would be something like:
$(window).on('resize', function() {
  var $text = $('#text-div')
  var height = $text.height();
  $('#about-magazine-img').css('height', height)
});
I don't think this is a great solution though - you're limited by bootstrap here
Martín Comito
@aguantincho
Jan 21 2017 18:51

I´m trying to make a personal portfolio page, and divide it into 3 sections. When I make click in a nav button it goes to the initial part o the text, but no to the section
Sorry for my english, if someone could help me I really apreciate it

https://codepen.io/aguantincho/pen/ZLKpOb?editors=1100

Tyler Moeller
@TylerMoeller
Jan 21 2017 18:51
@chiuyong There are a few other options on that link I sent you earlier - none of them are perfect because of how bootstrap is setting the width of your columns.
What we typically do is vertical align the text and image, like this: http://s.codepen.io/TylerMoeller/pen/jyPXEJ
@aguantincho You need to give each section a minimum height
Martín Comito
@aguantincho
Jan 21 2017 18:54
@TylerMoeller How can I make it?
Chiu Yong
@chiuyong
Jan 21 2017 18:55
okay @TylerMoeller thank you :D
CamperBot
@camperbot
Jan 21 2017 18:55
chiuyong sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1359 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 21 2017 18:55

@aguantincho

#seccion1,
#seccion2 {
  min-height: 50vh;
}

(por ejemplo)

hay que altear cada sección
Martín Comito
@aguantincho
Jan 21 2017 18:56
I´ll try it, thanks @TylerMoeller !!!
CamperBot
@camperbot
Jan 21 2017 18:56
aguantincho sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1360 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Martín Comito
@aguantincho
Jan 21 2017 19:17
@TylerMoeller It doesn´t works, the link brings me to the beginning of the text, not to the beginning of the background image. That´s my intention
Tyler Moeller
@TylerMoeller
Jan 21 2017 19:28

@aguantincho Sorry, didn't understand your question. If I understand now, you need to adjust the height of this CSS:

*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -10px;

  height: 75px; 
  visibility: hidden; 
}

Maybe try height: 175px ?? Not sure if that answers your question.

@aguantincho Also, see this for linking to sections in a page: http://s.codepen.io/TylerMoeller/pen/xRagVr
Martín Comito
@aguantincho
Jan 21 2017 19:34

@aguantincho Also, see this for linking to sections in a page: http://s.codepen.io/TylerMoeller/pen/xRagVr

That was exactly what I want! I´ll read the code and try to fix mines

Martín Comito
@aguantincho
Jan 21 2017 19:45
mine*
Ghost
@ghost~586bde55d73408ce4f40f049
Jan 21 2017 19:46
hlw everyone
just done with my portfoilo page
give me your feedback
Martín Comito
@aguantincho
Jan 21 2017 19:58
@arefinsaad Hey, it´s great!
@arefinsaad I´m trying to make the navbar link works
Ghost
@ghost~586bde55d73408ce4f40f049
Jan 21 2017 20:09
thanks buddy @aguantincho
CamperBot
@camperbot
Jan 21 2017 20:09
arefinsaad sends brownie points to @aguantincho :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @aguantincho |http://www.freecodecamp.com/aguantincho
Mark
@MarkRivera
Jan 21 2017 20:53
Hello everyone, I'm having a little trouble understanding something. I've made a simple enough page for my portfolio, however when I try to create another 3 column row the third col is offset instead of being inline. I'd hate to give up on this but I don't know what the issue is. I've tried looking over the code and tried different approaches to solving this but nothing is giving. Any help?
http://codepen.io/MarkRivera/pen/YNNrYw?editors=1000
Tariyel Hamidov
@tariellaelius
Jan 21 2017 20:56
@MarkRivera Your third column is out of the div with 'row' class
That's why it doesn't go into the same row
Mark
@MarkRivera
Jan 21 2017 21:00
thank you!
Tariyel Hamidov
@tariellaelius
Jan 21 2017 21:03
@MarkRivera You're welcome. btw, it's helpful to use the browser's built-in 'Developer tools' by pressing F12 on Chrome or Firefox to check the actual composition of your page!
Dinesh
@dinesh333
Jan 21 2017 21:08
Guys just finished my portfolio page.. any feedback?
http://codepen.io/dinesh333/full/EZmYZp/
Marcin_L
@lotosiauke
Jan 21 2017 21:19

My head explodes... How can I reverse methods executed on clicking newquote box?
I mean, everything works as i intended for the first click. On next clicks it's f*ed up. I assume I should restore default all-grey-boxes before calling methods again. But how? caching "div.chess-box" in a var and replacing it before doesn't work at all. Looking for some useful tools in jQuery API and cant find anything.

http://codepen.io/Latosiauke/pen/QdvybR

Marcin_L
@lotosiauke
Jan 21 2017 21:26
Nobody? :(
VladislavMoroshan
@VladislavMoroshan
Jan 21 2017 21:46
Hello, everyone. I would love to hear what do you think about this Pomodoro clock. It should be responsive. I haven't found where to get an external link for audio effects. If you know, please write in comments.
http://codepen.io/Moroshan/full/xgEqQo/
Dinesh
@dinesh333
Jan 21 2017 21:49
@VladislavMoroshan I love it. Good work!
Abdijabar Yussuf Mohamed
@aymohamed
Jan 21 2017 21:53
How can I take a screenshot of my Tribute page and post here to ask questions??
I have used unordered lists in writing the tribute and the list items are not in line
Marcin_L
@lotosiauke
Jan 21 2017 21:54
@aymohamed just paste codepen.io link to your pen. We will see
Abdijabar Yussuf Mohamed
@aymohamed
Jan 21 2017 21:56
Do you see how my ordered lists are just not in line.
I have a lot of other changes to make but that is what I want to fix.
Marcin_L
@lotosiauke
Jan 21 2017 21:57
you mean you want year dates in one line?
Martín Comito
@aguantincho
Jan 21 2017 22:00
Hi! I have a doubt about this pen (which it´s not mine): How can I add content to each section separately?
http://codepen.io/TylerMoeller/pen/xRagVr
Abdijabar Yussuf Mohamed
@aymohamed
Jan 21 2017 22:01
@lotosiauke , yes
Marcin_L
@lotosiauke
Jan 21 2017 22:02
@aymohamed try adding this to CSS
```
li { text-align:left; margin: 3px 10%; }
or you want just the dates in line and other text centered?
Abdijabar Yussuf Mohamed
@aymohamed
Jan 21 2017 22:05
@lotosiauke , thanks. it works
CamperBot
@camperbot
Jan 21 2017 22:05
aymohamed sends brownie points to @lotosiauke :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @lotosiauke |http://www.freecodecamp.com/lotosiauke
Tyler Moeller
@TylerMoeller
Jan 21 2017 22:05
@lotosiauke An easier approach for your project would be to add and remove classes to format the cells the way you want and then revert back to how they were before.
I've looked through your code and don't have an easier approach to offer with your existing code, but maybe someone else can offer another solution
Abdijabar Yussuf Mohamed
@aymohamed
Jan 21 2017 22:06
@arefinsaad , I love it !
Guys, is there a forum that's exclusively for projects.
Marcin_L
@lotosiauke
Jan 21 2017 22:08
@TylerMoeller And if i want to "merge" two cells? Now i just remove one cell to keep all in the same shape. Can i "hide" a cell and make html ignoring it? Like it doesn't exist even if it exists?
Tyler Moeller
@TylerMoeller
Jan 21 2017 22:08

@aguantincho The HTML created in that pen would be:

<div class="container-fluid">
  <section id="section0">
    <h2>Section 0</h2>
  </section>
  <hr>
  <section id="section1">
    <h2>Section 1</h2>
  </section>
  <hr>
  <section id="section2">
    <h2>Section 2</h2>
  </section>
  <hr>
  <section id="section3">
    <h2>Section 3</h2>
  </section>
  <hr>
  ....etc

So, you add content between each <section> tag

Martín Comito
@aguantincho
Jan 21 2017 22:09
Thanks a lot! @TylerMoeller
CamperBot
@camperbot
Jan 21 2017 22:09
aguantincho sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1361 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 21 2017 22:09
@lotosiauke display:none will hide an element as if it doesn't exist
So, you could hide #box1_2 and make #box1_1 wider with different classes
Marcin_L
@lotosiauke
Jan 21 2017 22:10
@TylerMoeller Oh! Thanks! :) I'll try that way!
CamperBot
@camperbot
Jan 21 2017 22:10
lotosiauke sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1362 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 21 2017 22:10
It should turn out cool if yo get it working - definitely a bit complicated :)
Marcin_L
@lotosiauke
Jan 21 2017 22:13
@TylerMoeller The point of self-improvement is to set an ambitious goal. I would learn more than if I just make simple box with text, some button and insert random quote :D
Tyler Moeller
@TylerMoeller
Jan 21 2017 22:14
Very true :) Looking forward to seeing the final result!
Marcin_L
@lotosiauke
Jan 21 2017 22:18
Promise to send you private message with link :) might take couple of days :D
Abdijabar Yussuf Mohamed
@aymohamed
Jan 21 2017 22:25
Hello friends. I am trying to add a background image of Nelson Mandela to my tribute page. I want the image not to hide the timeline (i.e his life timeline). Any suggestion. my codepen link is https://codepen.io/aymohamed/pen/egWgmQ
Pavel
@PaWell8
Jan 21 2017 22:25
Hi friends!
@aymohamed Hi! Tell me please, how can you limit the text width?
Marcin_L
@lotosiauke
Jan 21 2017 22:31
@PaWell8 Look to his html and css. Using margin property in CSS is useful
@aymohamed I added to CSS this body styling
body {
  background-image: url(https://media1.britannica.com/eb-media/67/75567-004-6585DB51.jpg);
  background-size: cover;                      
  background-repeat: no-repeat;

}
Mane problems like that you can solve with CSS. Its great!
*Many
Pavel
@PaWell8
Jan 21 2017 22:34
but in description to the task using of CSS is not allowed...
Marcin_L
@lotosiauke
Jan 21 2017 22:44
@PaWell8 What task is it?
MrPiethon
@MrPiethon
Jan 21 2017 23:40
Hows it going. I was wondering why my red and black columns are sticking out? http://codepen.io/masemune/pen/BpRpjd
Marcin_L
@lotosiauke
Jan 21 2017 23:43

http://codepen.io/Latosiauke/pen/QdvybR

any ideas why these brownish cells are changing color to white sometimes despite they supposed to have .box style removed?

Gururaj Birajdar
@grajsb
Jan 21 2017 23:48
Hello .. i need some help with my random quote machine
tweet button is also auto-populating html <p> tags along with a codepen url
can some one please help me removing that
Sunny Wong
@swong194
Jan 21 2017 23:59
hi every1 im attemptign the portfolio assignment
i got the desired effect for the top part