cms202 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1352 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
target="_blank"
to your links: http://www.w3schools.com/tags/att_a_target.asp
erolaliyev sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 872 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
mikecerang sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1353 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
#starwars
no quote
anjali1206 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1888 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
anjali1206 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: anjali1206 already gave coymeetsworld points
coymeetsworld sends brownie points to @anjali1206 :sparkles: :thumbsup: :sparkles:
:cookie: 292 | @anjali1206 |http://www.freecodecamp.com/anjali1206
anjali1206 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: anjali1206 already gave coymeetsworld points
anjali1206 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: anjali1206 already gave coymeetsworld points
anjali1206 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: anjali1206 already gave coymeetsworld points
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?
ssbothwell sends brownie points to @4xdmg :sparkles: :thumbsup: :sparkles:
:cookie: 363 | @4xdmg |http://www.freecodecamp.com/4xdmg
<!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:.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>
body
has default margin:8px
(which is added by browser stylesheet by default)body {
margin: 0;
}
perpetualwar sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 654 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
cmd+alt+i
or ctrl+shift+i
and select body
tag in Elements
inspector @PerpetualWar
is it the same for all browsers ?
may be same in latest browsers @PerpetualWar
perpetualwar sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: perpetualwar already gave vinaypuppal points
<a class="yourclassname" href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Random Article</a>
<a href="http://..." target="blank">...</a>
, but it isn't helping...
href="#"
me out i stucked in a problem
<div>
blocks.
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?
kranex sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1122 | @sorinr |http://www.freecodecamp.com/sorinr
$(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 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: lotosiauke already gave sorinr points
:warning: lotosiauke already gave sorinr points
lotosiauke sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
$(function(){
$("div[id^='box']").on("click", function(e){
alert(e.target.id);
});
});
.thumbnail {
padding: 0;
}
in css
<a id="twitter" ... >
and then in CSS you can use #twitter { color: blue; }
a {font-size: 77px; }
#twitter {color: blue;}
almaaganovic sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 403 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
mml3b sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 381 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
position: absolute || relative
style???@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
.container {
// position: relative; <----- Removed this line and styles in div.topleft don't work
}
.\topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
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>");
});
}
});
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?
:star2: 1685 | @coffeebeanzz |http://www.freecodecamp.com/coffeebeanzz
kengin2013 sends brownie points to @coffeebeanzz :sparkles: :thumbsup: :sparkles:
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
sbxn14 sends brownie points to @nehamchangappa :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @nehamchangappa |http://www.freecodecamp.com/nehamchangappa
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?
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.
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?
:star2: 1354 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
sudhir512kj sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
@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
treddson sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1356 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
sudhir512kj sends brownie points to @undigon :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @undigon |http://www.freecodecamp.com/undigon
sudhir512kj sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: sudhir512kj already gave tylermoeller points
<center>
tags, which are deprecated now. And instead of doing this:
, you should use margins in your CSS
<br>
tag is also deprecated
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
l10yd sends brownie points to @vatsal2 :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @vatsal2 |http://www.freecodecamp.com/vatsal2
mouadtmd sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1125 | @sorinr |http://www.freecodecamp.com/sorinr
mouadtmd sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: mouadtmd already gave sorinr points
<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;
}
mouadtmd sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1358 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
$(window).on('resize', function() {
var $text = $('#text-div')
var height = $text.height();
$('#about-magazine-img').css('height', height)
});
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 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1359 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@aguantincho
#seccion1,
#seccion2 {
min-height: 50vh;
}
(por ejemplo)
aguantincho sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1360 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@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
That was exactly what I want! I´ll read the code and try to fix mines
arefinsaad sends brownie points to @aguantincho :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @aguantincho |http://www.freecodecamp.com/aguantincho
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.
li {
text-align:left;
margin: 3px 10%;
}
aymohamed sends brownie points to @lotosiauke :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @lotosiauke |http://www.freecodecamp.com/lotosiauke
@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
aguantincho sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1361 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
display:none
will hide an element as if it doesn't exist
lotosiauke sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1362 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
body {
background-image: url(https://media1.britannica.com/eb-media/67/75567-004-6585DB51.jpg);
background-size: cover;
background-repeat: no-repeat;
}
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?