@TylerMoeller That worked perfect!! I used the center-block class. Yay! thank you! :clap:
cms202 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1352 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@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
Hi
I have a question
Anyone here who uses plunker know how to name your plunker templates? Mine just get saved as Untitled
I have a question
Anyone here who uses plunker know how to name your plunker templates? Mine just get saved as Untitled
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
Hey guys.Can anybody explain what framework is? And is it useful?
@erolaliyev Frameworks are usually made of code that does a lot of things for you so you don't have to.
@jdtdesigns is it good for learning?
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.
thanks @jdtdesigns
erolaliyev sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 872 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
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
@TylerMoeller Thank you! It worked!
mikecerang sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1353 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@swong194 - yeah, I was just looking before I read the rest of your post - looks like it's centered... :)
Hello everyone. I just built a simple Random Quote Machine. Please share your reviews and feedback on it. http://codepen.io/anjali1206/pen/MJbQgX
Looks good @anjali1206, one issue is with the twitter button, only shows the hashtag
#starwars no quote
@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
anjali1206 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1888 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
ok @anjali1206, yeah it was tricky for me and I think there were better ways too
@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.
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
@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.
@coymeetsworld Woww ur Quote machine looks great :+1: Thank you for sharing the link.
anjali1206 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: anjali1206 already gave coymeetsworld points
thx @anjali1206, yeah it wasn't that good first time around, but i made some improvements before submitting for FrontEnd
coymeetsworld sends brownie points to @anjali1206 :sparkles: :thumbsup: :sparkles:
:cookie: 292 | @anjali1206 |http://www.freecodecamp.com/anjali1206
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 :)
@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:
really? On my project its noticable because the quote moves around while the button is rendering and it takes a second lol
@coymeetsworld Oh yea. I can see that now. I just refreshed the page and noticed it.
maybe I should've have said nothin :)
@coymeetsworld hahaaa..:smile: But overall Quote machine is looking really good. I will definitely look at the code for that twitter thing. Thanks again.
anjali1206 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: anjali1206 already gave coymeetsworld points
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
@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.
anjali1206 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: anjali1206 already gave coymeetsworld points
no problem @anjali1206
@coymeetsworld Thanks for your help. It was nice chatting with you. :+1:
anjali1206 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: anjali1206 already gave coymeetsworld points
likewise, anytime
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?
I think i fixed it.. changed container-fluid to container, and achieved what I wanted.. thank you all anyways
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
Is codepen able to run jQuery Effects (i.e toggle sliding)?
@ssbothwell Have you tried using a media query?
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
@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?
ooh good call
thanks @4xDMG
ssbothwell sends brownie points to @4xdmg :sparkles: :thumbsup: :sparkles:
:cookie: 363 | @4xdmg |http://www.freecodecamp.com/4xdmg
that messes with my div proportions but i can make fix that
@ssbothwell no problem. let me know how it goes. I should really look into flexboxes. seems like theyre all the rage now
yeah, they are a little confusing
but they seem to be really useful
@ssbothwell yeah all ive read is theyre great for responsive websites. did you read the free flexbox book freecodecamp sent out in their email?
i havent yet, i really should
yeah me too lol
<!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>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???
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 ?
uh you can use image-responsive via bootstrap in the HTML
.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 ?
@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
@vinaypuppal any idea ??
Hey guys im having trouble aligning my h2 header to the left of my search bar https://codepen.io/masemune/pen/ggWbPd
any ideas?
@PerpetualWar
add this to u r css to remove it
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;
}
That's it! Thanks @vinaypuppal
perpetualwar sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 654 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
where can I see browsers stylesheet ?
is it the same for all browsers ?
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
ok thanks @vinaypuppal
perpetualwar sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: perpetualwar already gave vinaypuppal points
console.log(on api not working)
hi coder
any 1 who can help?
@shenoyabhijith what is the problem
i found the solution
the problem was i coudnt make getJSON request to wiki api
@shenoyabhijith a ok, nice job then :+1:
@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
@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>
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...
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?
@Kranex did u include the _
@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?
@Kranex its target="_blank" not "blank"
@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
@sorinr yeah, made a typo in my question.
@Kranex might not like the http. Is there an https version of the link
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
</button> https://codepen.io/kengin2013/pen/yVmXwM?editors=1000
@almaaganovic you might find this useful: https://v4-alpha.getbootstrap.com/layout/grid/#offsetting-columns
@Kranex ok. ans stll not working? do you have any addblocker?
Good evening Guys ..
Hope all of you are doin nice !!!
@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...
Help me out .... i stucked in a problem
no wiki entry for:
me out i stucked in a problem
i have been facing a problem
since last two days
@Kranex can u share ur pen link?
@Kranex yes I had read that prevoiusly but since I am totally new to everything, I had a problem understanding the mechanism.
@almaaganovic ahh fair, I'm sure you'll get the hang of it :)
How do I make some padding between elements/rows of the unordered list
@sorinr sure, I'll just undo my crazy tests.
@arefinsaad lol you posted like 6 times but did not post the problem :smile:
@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
@sorinr https://codepen.io/Kranex/full/ZLejEV/ there you go, interestingly, they work outside of all my
<div> blocks.
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 -_-
but when i try to see that page in my mobile and touch any one from that menu ...it doesn't work -_-
@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.
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.
how can i fix that !!!
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
@Krane just try in css a{z-index: 100;}
@Kranex nope but commenting out #content z-index:-1 will make them work
ahh. that actually makes sense.
@Kranex coz you can see them but are on non reachable layer
@cdrainxv done & thanks
kengin2013 sends brownie points to @cdrainxv :sparkles: :thumbsup: :sparkles:
:star2: 2158 | @cdrainxv |http://www.freecodecamp.com/cdrainxv
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?
@sorinr Thanks! I put that layer back where it was and brought the header bar foward a layer, works perfectly now :)
kranex sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1122 | @sorinr |http://www.freecodecamp.com/sorinr
@Kranex :+1:
@ghulamshabir i told my prb ...please help me solving the prob
@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
@arefinsaad or could be you need media queries for small screens
@lotosiauke this is what you want?
$(function(){
$("#box1_1").replaceWith("<div class='quote-box'></div>");
$('#box1_2').remove();
});@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
lotosiauke sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1123 | @sorinr |http://www.freecodecamp.com/sorinr
@lotosiauke for the initial suggestion i haven't seen you have more box ids below :)
@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)
lotosiauke sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: lotosiauke already gave sorinr points
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?
how do I get write html for this "___ </>__"? where, the straight lines are at a level midway to the </> symbol height?
@kengin2013 maybe this http://www.html.am/html-codes/character-codes/html-em-dash-code.cfm
Wrong link @kengin2013 its on this one http://www.html.am/reference/html-special-characters.cfm
@coffeebeanzz .... can i show you my pen ??
if u can ... i mean have a look and find me out where's the problem !!!
@arefinsaad you can post it for everyone. I'm still a noob
lol :D
@lotosiauke yes just make var box1 = $("#box1_1"); to cache the dom
@sorinr Thanks :)
:warning: lotosiauke already gave sorinr points
lotosiauke sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Can anyone tell me how to fit the photo in the thumbnail, I have a lot of empty space like padding?
@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);
});
});
I have a <div class="thumbnail"> but I want it to look like the class .img-thumbnail is applied to the img tag
What do you think of my Bernie-inspired Tribute page? http://codepen.io/mikecerang/pen/zNZrJp
@almaaganovic can u share the pen link?
If I think Building a Personal Portfolio Webpage might be too tough for my coding level, should I redo all the lessons again?
@almaaganovic whats wrong with that picture?
@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
@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
@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
@almaaganovic maybe what you see its padding not margin. try
.thumbnail {
padding: 0;
} in css
@almaaganovic "though this was never proved against Arabs before Islam", it is proved, and not only in Arabian peninsula
@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
hey guys can somebody help me ?
and the dates in the tribute page are not in hijri, @almaaganovic
http://codepen.io/mml3b/pen/KaamPX , how can i make each hyperlink button a color ?? is it possible ?
@almaaganovic you can use whatever custom css to make the pen look like you wanted it. here my tribute page : tribute
@mml3b It's psossbile, set the background color of your hyperlink buttons in CSS
how ????/
day one , first year of the hijri calander should be 622 AC, the dates in that page are gregorian
@mml3b You want to change background for your social media icons?
@AdelMahjoub yes you are right. i used some other years at first but than changed and forgot :worried:
i wanto to set a different color to each icon
@mml3b oh. then give each <a> an id attribute like this -
<a id="twitter" ... > and then in CSS you can use #twitter { color: blue; }
@almaaganovic > 624 - The start of three major battles with the Meccans.
should be the start of the three major battles against Quraish tribue
i did something wrong and for some reason my twitter icon turned into purple
@NitinNair89
@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
@almaaganovic it seems your source is not accurate
@almaaganovic what do you want to change
@AdelMahjoub can you open it in a firefox and chrome so you can see differences
@mml3b Checking..bear with my slow connection.
haha its alright
@mml3b your css needs correction:
a {font-size: 77px; }
#twitter {color: blue;}
@almaaganovic it is the same
@AdelMahjoub hmmm I see. I appreciate your effort. so I could submit it now? after I change the timeline mistakes :P
@almaaganovic that's up to you :smile:
@AdelMahjoub ok thanks for help
almaaganovic sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 403 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
http://codepen.io/mml3b/pen/KaamPX Thx dude it worked like a charm @NitinNair89
mml3b sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 381 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
@mml3b Happy to help! :)
CSS positioning is killing me. Can anyone explain why we have to give the container a
Example here
position: absolute || relative style???Example here
@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
@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
@UsamaHameed yes but you probably have that div.topleft inside the .container so you position absolute it based on the container position
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
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;
}
@UsamaHameed An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
So, the container needs to be "positioned"?
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>");
}); }
});
@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
positioning works only when you use the "position" property.. Just giving top, left or other directions will not work @UsamaHameed
hey guys does somebody know why my image is not showing ? http://codepen.io/mml3b/pen/KaamPX
@nehamchangappa any errors in javascript? post your codepen link
@NitinNair89 Here it is -> http://codepen.io/nehamchangappa/pen/mRrZwz
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?
@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.
@coffeebeanzz done & thanks
:star2: 1685 | @coffeebeanzz |http://www.freecodecamp.com/coffeebeanzz
kengin2013 sends brownie points to @coffeebeanzz :sparkles: :thumbsup: :sparkles:
it seems to be working on my browser http://imgur.com/f5iESCf
@mml3b Image should have an extension like .jpg or .png or any other formats.
oh
@mml3b you have used the wrong img src ... use -> http://i.imgur.com/f5iESCf.jpg in the src ...hopefully it should work
Thx @nehamchangappa @NitinNair89
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
@nehamchangappa what's the "logo" about?
@NitinNair89 its for the channels logo
if it is an image, then the url is incorrect.. @nehamchangappa
@NitinNair89 but atleast the list should pop up right ?
?
what list
@NitinNair89 the list of channels streaming is also not showing up .. !
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
@nehamchangappa check PM
@nehamchangappa you there?
@sbxn14 you have to add ) after } and before ; ... you have forgotten to add ' ) ' in line 19..
@NitinNair89 yes checking
@nehamchangappa ah gotcha. thanks! cant believe I missed that :D
sbxn14 sends brownie points to @nehamchangappa :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @nehamchangappa |http://www.freecodecamp.com/nehamchangappa
@mml3b Imgur is blocked by codepen. You'll need to find another host like postimage.io
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?
hey guys do you know how can i put some space between my social media icons ? http://codepen.io/mml3b/pen/KaamPX
padding-left and padding-right
css
example pls
.socialMediaIconsClass{pading-left:25px; padding-right:25px;}
thats css right?
Yes
assign it as a class
in your html
for each icon
@mml3b Looks neat but i'm not really sure what you're trying to achieve
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
@jdtdesigns i want some space between each social media icon
i dont know how to do it , theyr so close from each other
@lotosiauke What are you trying to achieve?
i just told you how to do it
assign padding to your icons
i{
i{padding-left}
@Renniesb Did you add the background color to the h1?
set padding to whatever you need it to be px wise
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
@Renniesb sound like one of my subs who watch the project videos
lol
Here is the solution
@Renniesb Here's another solution. You shouldn't use display: table for the h1. http://jsbin.com/sogojun/edit?html,css,output
Anyone here familiar with d3 v4 specifically having to do with bar charts
@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.
i fixed it long time ago
@nehamchangappa Check for data.error first, then data.stream. If data.stream doesn't exist, your check for data.stream === null will error out
how can I increase my profile web size to about 2 pages https://codepen.io/kengin2013/pen/yVmXwM?editors=1100
@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.
check again it;s 100% working for me
do you know how can i add some bootstarp aimations to my social media icons ?
@mml3b
like bouncing and stuff
^^ 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
@mml3b http://prntscr.com/dyip9u
ok ill se
same thing
you need to use another host like i mentioned earlier
huh you;re right
lol
http://codepen.io/mml3b/pen/KaamPX what about now ?
@mml3b :+1:
great now help me i want to put some space between each social media icon and add some bootstrap animation
@mml3b Use margins to add space between icons. Lots of ways to animate them - maybe check out animate.css
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.
@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)
(i see u keep asking same question .. others already responded u but u still keep asking the same)
hello i want to know if there is a sepcial Api to use for the random quote machine
@Abdenour1993 No need to use any API in particular. Search for one you like, or you can use your own array of quotes.
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
http://quotesondesign.com/api-v4-0/
i remember some1 used simpson api, others something about star wars
u can pick whatever u like @Abdenour1993
Thank you very much guys
hiii
i need a little help
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!
i have to submit project ...can i use another ide in my pc to develop project
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.
@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
oh okk sir thank you
@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
@TylerMoeller thank you sir
hey , check out my tribute page :
:star2: 1354 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Portfolio is kind of a work in progress, since you need to go back and add your completed projects to it
sudhir512kj sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
@TylerMoeller but sir then after completing my project...how i will submit that
@TylerMoeller Thank you.
I will look up smooth scroll and see what comes up!
dinesh333 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1355 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@camperbot i m new here ...i dont know how to send brownies
@sudhir512kj You will need to have your code online to submit it. They require a URL so they can review your code
@TylerMoeller I'll try that. Thanks!
treddson sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
@sudhir512kj All you have to do is mention someone and write "thanks".
:star2: 1356 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@Undigon thanks
sudhir512kj sends brownie points to @undigon :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @undigon |http://www.freecodecamp.com/undigon
@TylerMoeller thanks
sudhir512kj sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: sudhir512kj already gave tylermoeller points
Good luck :+1:
please give feedback of my tribute page, and let me know if there is anything that is to be corrected.
@vatsal2 I love it! Good work!
thanks
@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: , you should use margins in your CSS
The
<br> tag is also deprecated
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??
@vatsal2 Use <div> to start elements on a new line and use margin-top in your CSS to create space
More info here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
@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
thanks so much for tips @TylerMoeller @sorinr @dinesh333
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
@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"
ok :+1:
@vatsal2 also all that nbsp can be replaced with text-indent css property
@sorinr i.e left, right, center, etc. ??
@vatsal2 nope. text-indent: 20px or 3%. just google for it .
@sorinr ya i'll check
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
the numbers bold *
@mouadtmd what to you mean by numbers in caps? numbers do not have lowercase or uppercase :)
@l10yd interface is nice , I liked it
@sorinr I wanted to say bold lol
@sorinr I've found a solution in StackOverflow but with a regular list not a reversed one
@mouadtmd I think u should visit http://www.w3schools.com/ for this .
http://codepen.io/sbxn14/pen/apmJJQ?editors=1111 why is the link not working in js?
@mouadtmd you can use li::marker {} for styling
@vatsal2 thx for the feedback :smile:
l10yd sends brownie points to @vatsal2 :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @vatsal2 |http://www.freecodecamp.com/vatsal2
@sbxn14 Use your browser's dev console to debug these kinds of errors. (Ctrl+Shift+J on windows, Option+Shift+J on mac).
@sorinr Thanks ! Gonna look into that
mouadtmd sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1125 | @sorinr |http://www.freecodecamp.com/sorinr
@mouadtmd its no longer supported
@sorinr ok thanks anyway!
mouadtmd sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: mouadtmd already gave sorinr points
@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;
}
@TylerMoeller can u help me?
@chiuyong I can try :)
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
@TylerMoeller that worked thanks!
mouadtmd sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1358 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@chiuyong There are lots of ways to go about it - have you tried any of these: http://stackoverflow.com/a/19695851
@TylerMoeller I tried to use flex, but no success
@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
@TylerMoeller even if I restrict the description text with scroll to not influence the size of the image as the text getting bigger?
@TylerMoeller like this example http://bootstrapbay.com/preview/crafto-one-page-responsive-template-B2A698E
@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
@TylerMoeller can you make an outline of your example, please?
Hey! I need some help
@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
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
@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
@TylerMoeller How can I make it?
okay @TylerMoeller thank you :D
chiuyong sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1359 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@aguantincho
#seccion1,
#seccion2 {
min-height: 50vh;
}(por ejemplo)
hay que altear cada sección
I´ll try it, thanks @TylerMoeller !!!
aguantincho sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1360 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@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
@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
@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
mine*
hlw everyone
just done with my portfoilo page
give me your feedback
@arefinsaad Hey, it´s great!
@arefinsaad I´m trying to make the navbar link works
thanks buddy @aguantincho
arefinsaad sends brownie points to @aguantincho :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @aguantincho |http://www.freecodecamp.com/aguantincho
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
http://codepen.io/MarkRivera/pen/YNNrYw?editors=1000
@MarkRivera Your third column is out of the div with 'row' class
That's why it doesn't go into the same row
thank you!
@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!
Guys just finished my portfolio page.. any feedback?
http://codepen.io/dinesh333/full/EZmYZp/
http://codepen.io/dinesh333/full/EZmYZp/
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.
Nobody? :(
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/
http://codepen.io/Moroshan/full/xgEqQo/
@VladislavMoroshan I love it. Good work!
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
@aymohamed just paste codepen.io link to your pen. We will see
@lotosiauke , here it is : http://codepen.io/aymohamed/pen/egWgmQ?editors=1000#0
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.
you mean you want year dates in one line?
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
http://codepen.io/TylerMoeller/pen/xRagVr
@lotosiauke , yes
@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?
@lotosiauke , thanks. it works
aymohamed sends brownie points to @lotosiauke :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @lotosiauke |http://www.freecodecamp.com/lotosiauke
@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
@arefinsaad , I love it !
Guys, is there a forum that's exclusively for projects.
@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?
@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>
....etcSo, you add content between each <section> tag
Thanks a lot! @TylerMoeller
aguantincho sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1361 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@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
@TylerMoeller Oh! Thanks! :) I'll try that way!
lotosiauke sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1362 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
It should turn out cool if yo get it working - definitely a bit complicated :)
@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
Very true :) Looking forward to seeing the final result!
Promise to send you private message with link :) might take couple of days :D
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
Hi friends!
@aymohamed Hi! Tell me please, how can you limit the text width?
@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
but in description to the task using of CSS is not allowed...
@PaWell8 What task is it?
Hows it going. I was wondering why my red and black columns are sticking out? http://codepen.io/masemune/pen/BpRpjd
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?
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
hi every1 im attemptign the portfolio assignment
i got the desired effect for the top part