Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
  • 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
:star2: 3621 | @khaduch |http://www.freecodecamp.org/khaduch
Hello, can anyone advise me on how to do a screen grab? I want to be able to screen grab inside my project before posting to social media so that I capture a portion of the page in an image.
Nick Karnik
which OS are you on
@imemoje that's a nice little poem there
@imemoje It works because setting overflow to any value other than visible (the default value) creates a new block formatting context. A block formatting context contains everything inside of the element creating it (including floats).
If you don't like using floats try with flexbox instead.
@imemoje The icons are not collapsed without 'overflow: auto'. It's just (I'm guessing) they are white icons against a white background. Try setting a background-color on the .icon-bar a elements to confirm this. You can see the first one only because it has a background set on the .active class. Without changing the overflow property on the parent it has no height, so you don't get the background color you expected.
I need some help with a jest test case
Bigyan Karki
hi everyone. can anyone help me change the color tab pills in bootstrap 4
default is blue. but i want to be same as background color.
Ken Haduch
@toianw - good articles :point_up: December 23, 2017 11:41 PM
@bigyankarki - sure - do you have a URL for your project?
Bigyan Karki
umm just hold on. i will copy the whole html code
<!DOCTYPE html>
<html lang="en">
  <title>Bigyan Karki</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <div class="container">
    <a class="navbar-brand" href="#">BIGYAN KARKI</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav nav nav-pills ml-auto">
        <li class="nav-item">
          <a class="nav-link"  data-toggle="pill" href="#home">ABOUT</a>
        <li class="nav-item">
          <a class="nav-link" data-toggle="pill" href="#menu1">CV</a>
        <li class="nav-item">
          <a class="nav-link" data-toggle="pill" href="#menu2">PROJECTS</a>
        <li class="nav-item">
          <a class="nav-link" data-toggle="pill" href="#">CONTACT</a>

  <div class="tab-content">
    <div id="home" class="container tab-pane fade show active"><br>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>

Ken Haduch
if you just do a .nav-pills { background-color: red; } what happens? (As an example.)
Bigyan Karki
whole nav ul section turns red
Shubham Sharma
Hey guys I need help on the random quotes quotesdesign api
Ken Haduch
@bigyankarki - so do you just want the active one to be a different color?
Bigyan Karki
umm @khaduch yes
currently active links are shown blue by default.
Shubham Sharma
when I use http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1 , no cross domain issues occur but when i Use http://quotesondesign.com/wp-json/posts?filter[orderby]=rand cross domain issues occur. Whats the difference between the two
Ken Haduch
@bigyankarki - try .nav-link.active { background-color: red; }
nah, that didn't work...
Bigyan Karki
haha yup it didnt :D
Ken Haduch
@bigyankarki - I think this is it:
.nav-pills .nav-link.active {
  background-color: red;
Bigyan Karki
@khaduch thank you so much :)
bigyankarki sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3622 | @khaduch |http://www.freecodecamp.org/khaduch
Ken Haduch
@bigyankarki - I just misread the devtools panel... :) good that it worked!
Bigyan Karki
haha. I just cant understand CSS sometimes.
Ken Haduch
@bigyankarki - it's a struggle. The way that I try to figure these out is to put the page up in the browser, hover over the element of interest and right click and "Inspect Element" (or whatever gets you into the devtools.) then look at the CSS styles that are being applied. You can usually just copy the selector and make the changes that you want.
Bigyan Karki
oh wow never knew that
thanks @khaduch :)
bigyankarki sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
api offline
Ken Haduch

@shubham1604 - I got both of them to work, apparently without problem. Using CodePen, you have to use https:// for the URL transport. This worked:

$.ajax( {
      // url: 'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
      url: 'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
      success: function(data) {
        var post = data.shift(); // The data is an array of posts. Grab the first one.

        // If the Source is available, use it. Otherwise hide it.
        if (typeof post.custom_meta !== 'undefined' && typeof post.custom_meta.Source !== 'undefined') {
          $('#quote-source').html('Source:' + post.custom_meta.Source);
        } else {
      cache: false

You have to use your own ID values for HTML elements to post the information. I copied part of the example from https://quotesondesign.com/api-v4-0/

Shubham Sharma
I am using localhost. I changed it to https and it worked. But it gives ne the same quote on every click. I want a different one each time.
Can anyone help me?
Ken Haduch

The HTML for this previous example, with no styling looks like this:

<button id="get-another-quote-button">get quote</button>
<div id="quote-content"></div>
<div id="quote-source"></div>

Do you see the cache: false property set on that $.ajax request? @shubham1604 - try that, turn off caching.

@shubham1604 - see the comment ^^^
@shubham1604 - I think that if you're using $.getJSON, before you make that call, you can try $.ajaxSetup({cache: false}); to disable caching...
khaduch @khaduch - signing off for the night... happy coding!
Shubham Sharma
@khaduch You are a genius
That solved my problem
Francisco Franco
Good night people! :D
I'm back to the coding life