These are chat archives for FreeCodeCamp/HelpFrontEnd

30th
Sep 2018
Stephen James
@sjames1958gm
Sep 30 2018 01:17
@jsjoe82 The only way I know of to adjust the content like that is with flex box
glitz20
@glitz20
Sep 30 2018 02:45
anybody who knows how to implement javascript in html?
Dhaval Vira
@dhavalveera
Sep 30 2018 03:07
Yes, i know how to Implement JavaScript to HTML @sabin20
glitz20
@glitz20
Sep 30 2018 03:16
So I did this to include js in html
<body>
        <script src="bgcolor.js"></script>
@dhavalveera
and this is my bgcolor.js
$(window).scroll(function() {

  // selectors
  var $window = $(window),
      $body = $('body'),
      $panel = $('.panel');

  // Change 33% earlier than scroll position so colour is there when you arrive.
  var scroll = $window.scrollTop() + ($window.height() / 3);

  $panel.each(function () {
    var $this = $(this);

    // if position is within range of this panel.
    // So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
    // Remember we set the scroll to 33% earlier in scroll var.
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {

      // Remove all classes on body with color-
      $body.removeClass(function (index, css) {
        return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
      });

      // Add class of currently active div
      $body.addClass('color-' + $(this).data('color'));
    }
  });    

}).scroll();
this is supposed to change the bg color on scroll, but it is not working
but it is working here
Dhaval Vira
@dhavalveera
Sep 30 2018 03:19
@sabin20 add JavaScript either in <head></head> either end of the <body> tag like near </body></html>
worldwidewev
@worldwidewev
Sep 30 2018 04:07
anyone have a sec to look over some code?
Dhaval Vira
@dhavalveera
Sep 30 2018 04:11
on which Code ?
worldwidewev
@worldwidewev
Sep 30 2018 04:16
javascript
i'm getting a reference error and cant figure out how to properly define a variable
will probably be a very simple solution, i'm new to all this :)
Dhaval Vira
@dhavalveera
Sep 30 2018 04:17
post this question in JavaScript group
worldwidewev
@worldwidewev
Sep 30 2018 04:18
i posted in HelpJavaScript as well
Dhaval Vira
@dhavalveera
Sep 30 2018 04:18
ok
Mohammed Boudad
@matrixersp
Sep 30 2018 10:53
Which version of Bootstrap is used in FCC challenges?
Jesse
@ki4jgt
Sep 30 2018 14:44
Anyone familiar with epub.js? I'm using this code and haven't got a clue why I can't click the area and have the page turn.
<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body {padding: 0px;
                        margin: 0px;}
        </style>
    </head>
    <body>
        <div id = "area"></div>
    </body>
    <footer>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/epubjs/dist/epub.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
        <script>
            var book = ePub("pg57939-images.epub");
            var rendition = book.renderTo("area", { method: "default", width: "100%", height: "100%" });
            var displayed = rendition.display();

            function Next() {
                rendition.next();
            }
            function Prev() {
                rendition.prev();
            }

            $(document).click(function(e){
                Next();
            });
        </script>
    </footer>
</html>
newmoon
@newmoon
Sep 30 2018 17:23
@ki4jgt Where is pg57939-images.epub located? Seems you need to use a URL that points to the resource unless it's next to the default index.html for your page. Also, <script> tags should go before the closing </body> tag and your footer should be in the body.
Do you get any errors in your browser's debug console?
yozhikvtumane
@yozhikvtumane
Sep 30 2018 17:36
Can I ask for feedback here?
ehutchllew
@ehutchllew
Sep 30 2018 18:28
@yozhikvtumane Yes
jsjoe82
@jsjoe82
Sep 30 2018 22:39
So in the FCC product landing page challenge, the codepen they say to fork and make functionally similar to for the challenge, their css does stuff like this...
footer {
  margin-top: 30px;
  background-color: #ddd;
  padding: 20px;

  ul {
    display: flex;
    justify-content: flex-end;

    li {
      padding: 0 10px;
    }
  }

  span {
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
    font-size: 0.9em;
    color: #444;
  }
}
How is that nested css working?
Nicolas Ramirez
@kamatheuska
Sep 30 2018 22:42
@jsjoe82 that looks like Sass, a preprocessor for CSS
jsjoe82
@jsjoe82
Sep 30 2018 22:42
Oh boo lol
Nicolas Ramirez
@kamatheuska
Sep 30 2018 22:42
jsjoe82
@jsjoe82
Sep 30 2018 22:46
Alright, thanks, @kamatheuska
Nicolas Ramirez
@kamatheuska
Sep 30 2018 22:46
sure!
Aaron Benjamin
@abenjamin765
Sep 30 2018 22:51
Hi all!
Any Jekyll ninjas here? Need help targeting data in a json file
Nicolas Ramirez
@kamatheuska
Sep 30 2018 23:09
maybe a concrete question? @abenjamin765
Aaron Benjamin
@abenjamin765
Sep 30 2018 23:10
Sure. I'm looking to list out businesses and the names of their employees by iterating through a json file.
{% for company in site.data.companies %}
            <li class="company">
                <img src="/assets/images/directory/logo-att.png" alt="" class="avatar">
                <div class="info">
                    <p class="company--name">{{ company.name }}</p>
                    <p class="company--address">{{ company.address }}</p>
                    <ul class="company--designers">
                        {% for designer in site.data.companies.designers %}
                        <li><img src="/assets/images/directory/avatar-aaron-benjamin.png" alt="" class="avatar" title="Aaron Benjamin" alt="Aaron Benjamin">{{designer.name}}</li>
                        {% endfor %}
                    </ul>
                </div>
            </li>
        {% endfor %}
[
    {
        "name": "The Home Depot", 
        "address": "123 Hello Ln. Atlanta, GA 30062",
        "designers": [
            {
                "name": "Aaron Benjamin",
                "twitter": "@abenjamin765"
            }
        ]
    },
    {
        "name": "AT&T",
        "address": "123 Hello Ln. Atlanta, GA 30062",
        "designers": [
            {
                "name": "John Smith",
                "twitter": "@jSmith123"
            }
        ]
    }
]
site.data.companies.designers doesn't seem to be correctly targeting the designers key.
Nicolas Ramirez
@kamatheuska
Sep 30 2018 23:12
are you trying to iterate the designers array or the companies array?
Aaron Benjamin
@abenjamin765
Sep 30 2018 23:13
Both... I want to list out each company, and list the designers under each
Nicolas Ramirez
@kamatheuska
Sep 30 2018 23:13
it seems to me that you should do a for loop iterating company in companies array, and then output the companies.designers.name
since you have one designer per company, that should work
Aaron Benjamin
@abenjamin765
Sep 30 2018 23:15
should look like
```
Company
Address
  • Designer 1 Name
  • Designer 2 Name
  • Designer 3 Name
There will be several designers per company
Nicolas Ramirez
@kamatheuska
Sep 30 2018 23:16
then you have to do two loops, carefully, I would say
Aaron Benjamin
@abenjamin765
Sep 30 2018 23:16
that's what I've got.... the second loop isn't working, but the first is.
Nicolas Ramirez
@kamatheuska
Sep 30 2018 23:17
OH! i miss that one sorry
Aaron Benjamin
@abenjamin765
Sep 30 2018 23:17
I'm not sure I'm accessing the designers correctly
can't seem to figure out the right way to get at them
Nicolas Ramirez
@kamatheuska
Sep 30 2018 23:18
maybe try to acces company.designers ?
Aaron Benjamin
@abenjamin765
Sep 30 2018 23:18
...now I feel silly
lol
Thanks @kamatheuska !
Nicolas Ramirez
@kamatheuska
Sep 30 2018 23:19
Still, you would have to inject the source, title, etc on your last loop
on the <img> element
sure buddy!
Aaron Benjamin
@abenjamin765
Sep 30 2018 23:23
yeah
jsjoe82
@jsjoe82
Sep 30 2018 23:44
Hey everyone. I finally got my image and nav li elements to play nice together in my <nav>, but now when I shrink the page down, stuff goes to the center, but just right of center. Anyone happen to know why or can point me on how to fix that?