We Keep Coding

If specific div is in viewport fade in audio, if div is out of viewport fade out

I have a one page scrolling website, and what I would like to do is fade in and out ambient sounds per section. I have found a few libs that fade sound in and out on pixels but being that this site scales I cant get them to trigger properly.
Basically it would be for each section:
<div class="section_content" id="1"> /// this is the section that would need to trigger audio file 1
<div class="main_image">
</div>
<div class="main_content">
Text content and information here
</div>
</div>
<div class="section_content" id="2"> /// this is the section that would need to trigger audio file 2
<div class="main_image">
</div>
<div class="main_content">
Text content and information here
</div>
</div>
https://github.com/kamblack/AudioFade/blob/master/README.md
This was the library I tied but since its based off of pixels it wont quite work.

How to set a div (#jumbotron) the be the height of the viewport minus the height of another div (#header) which chnges dynamically

Background/skill: I am starting to test out using bootstrap 4 (first time using bootstrap) for a custom Wordpress theme. I have the basic understanding of HTML and CSS, but with the newer CSS and with any jQuery or javascript, I am fairly clueless and usually just hacking code I find online to try and make it work for me, with little understanding of how/why it works if I succeed.
Missing out a bunch of page header info link links to scripts and stuff which I do understand may eventually affect any suggested method, and just to keep it simple. For now I have the following HTML so far:
<div id="page" class="site">
<div id="header" class="container-fluid">
<div id="masthead" class="site-header row row-eq-height">
<div id="logo" class="col-sm-4 col-md-6 col-lg-3"></div>
<!--logo-->
<div id="fruits" class="align-self-center d-none d-md-block col-md-3 col-lg-6"></div>
<!--fruits-->
<div id="social" class="d-none d-md-block col-md-3 col-lg-3"></div>
<!--social-->
</div>
<!-- #masthead -->
</div>
<!--header-->
<div id="jumbotron" class="row">
<div id="notice" class="align-self-center col-md-3"></div>
</div>
<!--jumbotron-->
<div id="content" class="site-content"></div>
<!-- #content -->
<div id="footer" class="container-fluid">
<footer id="colophon" class="row"></footer>
<!-- #colophon -->
</div>
<!--footer-->
</div>
<!-- #page -->
The jumbotron has a background image and a div (#notice) inside it which will float to the left with some text inside. I want the div to take up all remaining viewport space after the header. I have managed to get the jumbotron div be the height of the viewport minus the header using the following CSS:
height:calc(100vh - 155px);
But this only works if I know the height of the header is 155px. In reality, it changes at different screen widths and depending on content.
Is there a way to set the CSS to use a calculation for the dynamic header?
If not, do I need to use some kind of jquery or javascript? If so, I would be very grateful for some fairly detailed instructions.
Note: I do not want the #jumbotron to be the height of the page and sit behind the header div as a solution because the background image display is important.
Thank you in advance :)

Since you can't know easily the height of the header in every device because it is a percentage of the height... And because it depends on a big bunch of CSS rules form BootStrap and your Wordpress theme... You will just measure it to deduct the remaining space.
<script>
$(document).ready(function(){
function adjustJumbotronHeight(){
var headerHeight = $("#header").outerHeight();
var viewportHeight = $(window).innerHeight();
var remains = viewportHeight - headerHeight;
$("#jumbotron").css({"height":remains});
}
// On page load
adjustJumbotronHeight();
// On resize (or mobile orientation change)
$(window).on("resize",function(){
adjustJumbotronHeight();
});
});
</script>

Extend element on side of screen to bottom of screen?

I'm making an angular web-app with a sidebar view attached to the side of every page. I'm using twitter-bootstrap to handle grid/spacing on the page and ui-router to handle the different views.
My views are laid out like this:
index.html
<div ui-view="sidebar"></div>
<div ui-view="content"></div>
<div ui-view="content-2"></div>
The markup for my sidebar is as follows:
sidebar.html
<div class="col-sm-3 sidebar">
<!-- sidebar view content -->
</div>
and the markup for my content views:
content.html and content-2.html
<div class="col-sm-9 container-fluid">
<!-- content view content -->
</div>
the content views are stacked one on top of the other next to my sidebar.
The problem is that one of my pages includes a dynamically expanding component, which increases the height of the content views. This pushes the lower content view ('content-2') down the page, and when it goes below the bottom of the sidebar view, it slides left, underneath the sidebar, instead of staying on the right below the first content view.
I've tried adding style="padding-bottom:500px" and style="vh:100" to the sidebar div, which works for a bit because it extends that view down, but I'd prefer a solution that doesn't unnecessarily extend the page beyond what is currently necessary. Additionally, once the content-view2 reaches the bottom of the padding, it still slides over just like before.
Update:
I finally got my plunker up, so hopefully this will illustrate the problem and what I'm trying to do: http://plnkr.co/edit/EbGJAqxdjHRCMjjC6waA
The content.html view will dynamically increase/decrease when the user presses the button, illustrating the problem (make sure to scroll down to see what I'm talking about).

The simplest working solution without layout changes. The problem is the float:left of the 2nd content, so let's change it to right when the screen size is large enough - plunker:
<div class="content2 col-md-10 container-fluid">
<div class="container-fluid" style="background:#800000;color:white">
<h2>Content Frame Two</h2>
<p>Centered below Frame One at start, should still be centered after button press.</p>
</div>
</div>
#media (min-width: 992px) {
.content2 {
float: right;
}
}
A simpler working solution + plunker:
Remove this from sidebar - style="padding-bottom:100vh" - as we don't need it anymore.
Change your html markup, so that both content areas would be wrapped in one big float. In this way, the 2nd content, can slide left.
Index:
<div class="container">
<div ui-view="sidebar"></div>
<div class="col-md-10 container-fluid">
<div ui-view="content"></div>
<div ui-view="content-2"></div>
</div>
</div>
Content 1:
<div class="col-md-12 container-fluid" style="padding-bottom:20px">
<!-- the padding on the following container is to simulate the added space
that appears once the div dynamically increases in size -->
<div class="container-fluid" ng-style="vm.contentStyle">
<h2>Content Frame One</h2>
<button ng-click="vm.expand()" type="button" class="btn btn-default">{{ vm.change }} Size</button>
<p ng-show="vm.info">{{ vm.info }}</p>
</div>
</div>
Content 2:
<div class="col-md-12 container-fluid">
<div class="container-fluid" style="background:#800000;color:white">
<h2>Content Frame Two</h2>
<p>Centered below Frame One at start, should still be centered after button press.</p>
</div>
</div>
Previous non-working solution:
It's bit hard to hard to replicate the problem without a working plunker/fiddler, but I think that setting the height of the sidebar to 100vh or the padding to calc(100vh - height of sidebar) will solve your problem.
1vh is 1% of the view port height - ie the available browser display area, so setting it using vh will resize your sidebar or the padding dynamically according to screen height.
Note of caution - vh (and vw) are only supported by modern browsers (see caniuse).

Setting the background of a nav using toDataURL?

So I've been working on a site that uses a JavaScript animation for the background of some of the sections. Right now, the section in question is broken down like this:
<section id="intro">
<div class="info">
<div class="container">
<div class="row">
<div class="col-full"><h1>My Name</h1></div>
</div>
<div class="row"><div class="col-1-4 centered line"></div></div>
<div class="row">
<div class="col-full"><h4>Video<span class="cool">s</span> and stuff</h4></div>
</div>
</div>
</div>
<nav id="nav">
<!-- The content between <span> </span> tags will be hidden on mobile version -->
<ul class="clearfix">
<li>Pro<span>file</span></li>
<li>Ski<span>lls</span></li>
<li>Exp<span>erience</span></li>
<li>Edu<span>cation</span></li>
<li>Por<span>tfolio</span></li>
<li>Con<span>tact</span></li>
</ul>
</nav>
</section>
Originally, I wanted to set the background of the entire section using
dataUrl = canvas.toDataURL();
document.getElementById("intro")[0].style.background='url('+dataUrl+')'
but that didn't work, so I ended up going with
dataUrl = canvas.toDataURL();
document.getElementsByClassName("info")[0].style.background='url('+dataUrl+')'
which did. However, the Nav bar scrolls with the page as you move down, and as soon as the script for scrolling it down kicks in, the background reverts to its default blue color.
My first thought was to simply add
document.getElementById("nav")[0].style.background='url('+dataUrl+')'
but that didn't work. I had some success with
document.getElementByClassName("clearfix")[0].style.background='url('+dataUrl+')'
but only the area immediately surrounding the text used the animated background; the rest was still blue.
So I'm not sure if it's some issue with getElementById, or if you can't use style.background with <section> and <nav>.
Anyone have any thoughts?

I dont think you need the array selector with getElementById so try it on the whole section again and see if that will fix it for you.
So do document.getElementById("intro").style.background='url('+dataUrl+')'

picturefill.js issue with z-index

I'm using picturefill to do responsive images. The issue that I am having is that I am calling picturefill(); method on the success callback of an ajax call. When the dynamically loads, picturefill is called.
This works fine but the issue is that the picturefill'd picture covers up all of the elements that are overlayed on top of it for about 1 second. this causes an uncomfortable effect because the overlayed elements shows up abruptly. so the sequence is that we see the elements, elements dissapear, and then elements reappear from under the picturefill'd picture.
has anyone else run into this problem and does anyone have any suggestions on how I can deal with it? I already tried changing the z-index of the picture fill'd pictures to z-index:1 and everything else to z-index: 200 but still no luck.
Adding some code:
<!-- Begin centerimage Container -->
<!-- Begin rightcaption -->
<div class="rightcaption">
OVERLAID CAPTION
</div>
<!-- End rightcaption -->
<!-- Begin flip-container -->
<div class= "flip-container">
<div class= "flipper">
<div class= "front">
<div class="main-pic-wrap" id="bloop">
<div data-picture data-alt="name" data-class="relative_image">
<div data-src=source> </div>
<div data-src=img2%> data-media="(min-width: 480px)"></div>
<div data-src=img3%> data-media="(min-width: 767px)"></div>
<!--[if (lt IE 9) & (!IEMobile)]>
<div data-src="medium.jpg"></div>
<![endif]-->
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src=img3 alt="Image of Activity">
</noscript>
</div>
</div>
</div>
<div class = "back">
<div id="map"></div>
</div>
</div>
<!-- End flipper -->
</div>
<!-- End flip-container container -->
<div id="moreShowHideGroup">
<div id="mapShowHide" class="icon-globe"></div>
</div>

Alright - finally figured it out. So I believe what is happening is that the container which is holding my picture fill'd picture and my position:absolute floating element is losing it's width property on execution of picturefill since I think picturefill.js removes the picturefill div from the DOM and then replaces it.
While it's removed, the container element which I have set to width:100% has nothing inside to give it an actual width so it collapses for a split-second and my fixed position elements dissapear for a split second.
To prevent this, I put another position:absolute div with 100% width into the container and then dropped my other position:absolute divs into this new container. So the structure looks like this:
<div class="main" style="position:relative">
<div data-picture data-alt="name">div data-src=source> </div></div>
<div class="always-here" style="position:absolute" top:0; left:0;>
<div class="fixed" style="position:absolute; top:2%; left:2%; ">
</div>
</div>
</div>