@jsjoe82 The only way I know of to adjust the content like that is with flex box
anybody who knows how to implement javascript in html?
Yes, i know how to Implement JavaScript to HTML @sabin20
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
@sabin20 add JavaScript either in <head></head> either end of the <body> tag like near </body></html>
anyone have a sec to look over some code?
on which Code ?
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 :)
post this question in JavaScript group
i posted in HelpJavaScript as well
ok
Which version of Bootstrap is used in FCC challenges?
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>
@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?
Can I ask for feedback here?
@yozhikvtumane Yes
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?
@jsjoe82 that looks like
Sass, a preprocessor for CSS
Oh boo lol
Alright, thanks, @kamatheuska
sure!
Hi all!
Any Jekyll ninjas here? Need help targeting data in a json file
maybe a concrete question? @abenjamin765
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.
are you trying to iterate the
designers array or the companies array?
Both... I want to list out each company, and list the designers under each
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
should look like
```
Company
Address
```
Company
Address
- Designer 1 Name
- Designer 2 Name
- Designer 3 Name
There will be several designers per company
then you have to do two loops, carefully, I would say
that's what I've got.... the second loop isn't working, but the first is.
OH! i miss that one sorry
I'm not sure I'm accessing the
designers correctly
can't seem to figure out the right way to get at them
maybe try to acces
company.designers ?
...now I feel silly
lol
Thanks @kamatheuska !
Still, you would have to inject the source, title, etc on your last loop
on the
<img> element
sure buddy!
yeah
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?