Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
Henry
@GitHub-Henry
@MelEKn I've run into this as an issue with BS
Melissa Knapp
@MelEKn
@fortMaximus Oh wow, it does work now!
@fortMaximus That's so bizarre, it didn't work before when I'd set it up exactly like this. Weird!
@fortMaximus Thanks :)
CamperBot
@camperbot
melekn sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 703 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Henry
@GitHub-Henry
@MelEKn So what was the issue?
Melissa Knapp
@MelEKn
@GitHub-Henry Absolutely no idea
@GitHub-Henry I even changed the Bootstrap version back to the one CodePen adds when you click the button to see if that was the issue-- nope
Henry
@GitHub-Henry
@MelEKn well i know it worked with the IDs
@MelEKn Does it just work now?
h1tag
@h1tag
@MelEKn maybe the body tags were creating conflict
Melissa Knapp
@MelEKn
@fortMaximus But I only added those after the CSS didn't work :-/
Henry
@GitHub-Henry
@fortMaximus yes, code pen is supposed to be the stuff inside the body tags, don't include body tags
Melissa Knapp
@MelEKn

@fortMaximus OH! Wait, no, I must have added them because I was starting
body{
color: white;
background-color: black;
}

with "body" so thought they must be necessary.

@fortMaximus the body tags were the problem. Mystery solved! thanks :)
CamperBot
@camperbot
melekn sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:warning: melekn already gave fortmaximus points
Jordy
@JordyDew
Hey. how does the numbers with col-xs- (where is the number) work? I don't understand what the numbers mean, or what they call. I can't see the output, because of my blindness, again :-)
Melissa Knapp
@MelEKn

Ok, so, one more question for everyone. I've been trying to make this work for a while so I'm not just asking to be spoon fed. How do I make the CSS work on html that's been generated from the JS section? Like for example,

var temp = 'Temperature: ' + Math.round(weatherData.main.temp) + '<a class="like-link" onclick="convertToC(' + weatherData.main.temp + ')">&#8457;</a>';
  $("#temperature").html(temp);

works fine EXCEPT for the fact that class="like-link" doesn't work. The problem isn't the class, because it worked fine on text that started out in the HTML section.

Henry
@GitHub-Henry
@MelEKn nope, remove body tags from html, and select body tags still works in codepen
Melissa Knapp
@MelEKn
The conversion works, it's just that the text isn't styled.
h1tag
@h1tag
@JordyDew the numbers mean the number of columns
Jordy
@JordyDew
yes, and what's one column?
Henry
@GitHub-Henry
@MelEKn did you try adding a class to the html
h1tag
@h1tag
@JordyDew
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases
Melissa Knapp
@MelEKn

@GitHub-Henry the code I linked didn't do that? I thought that's what the

<a class="like-link" onclick= ...

part did.

(er, code I pasted, not linked)
The onclick part works, but not class="like-link"

(in the CSS section I have

.like-link{
color: blue;
text-decoration: underline;
}

)

Henry
@GitHub-Henry
@MelEKn the onclick part could add a class to the html which could style your text
Melissa Knapp
@MelEKn
@GitHub-Henry How?
@GitHub-Henry The onclick part isn't part of the original HTML section, it's generated from the JS section
h1tag
@h1tag
@JordyDew and the number of columns is a way to specify how much space do you want the element inside it to take on that viewport
Henry
@GitHub-Henry
if the JS generates the html, then that's where the class would be added @MelEKn
Melissa Knapp
@MelEKn
@GitHub-Henry So why doesn't the code I pasted work?
  var temp = 'Temperature: ' + Math.round(weatherData.main.temp) + '<a class = "like-link" onclick="convertToC(' + weatherData.main.temp + ')">&#8457;</a>';
  $("#temperature").html(temp); 
Why isn't it using the style for class = "like-link" ?
h1tag
@h1tag
@JordyDew viewports like: large screen, medium screen, small, xsmall and so on
Henry
@GitHub-Henry
@MelEKn does the link-link class get added to the html?
Melissa Knapp
@MelEKn

@GitHub-Henry I'm not sure what you mean, it's in the CSS section. I added some text to the bottom of the HTML section that says

<p class = "like-link"> Does this look like a link? </p>

and THAT gets the style of blue and underlined.

But not the part that came from the JS section
h1tag
@h1tag
@MelEKn the styling is working
Screenshot.png
Melissa Knapp
@MelEKn
@fortMaximus That part is, yes, as I said, but it's not working for the ℉

@fortMaximus As I said above,

<p class = "like-link"> Does this look like a link? </p>
gets the style of blue and underlined

But not the part that came from the JS section, the
var temp = 'Temperature: ' + Math.round(weatherData.main.temp) + '<a class = "like-link" onclick="convertToC(' + weatherData.main.temp + ')">&#8457;</a>';
$("#temperature").html(temp);

Melissa Knapp
@MelEKn
Ok, finally solved it! The problem was that it should be "<span class= ..." instead of "<a class = " ...
Jordy
@JordyDew

@fortMaximus So

<div class="row">
<div class="col-xs-1" id="left-column"></div>
<div class="col-xs-2" id="right-column"></div>
</div>

means:
there are two columns on the page, the left one is #left-column en the right one is #right-column...
Or is it like this:

<div class="row">
<div class="col-xs-5" id="left-column"></div>
<div class="col-xs-7" id="right-column"></div>
</div>

the left column is #left-column and is maller than the right one, who's named #right-column.
Or do I missunderstand something?

Henry
@GitHub-Henry
@MelEKn congrats on your styling solution