We Keep Coding

Adjust height dynamically

I have the following snippets in my code that help me achieve a fixed-top-navigation-on-scroll.
HTML:
<nav>
<button class="navbar-toggler navbar-static-top hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header">
☰
</button>
<div class="collapse navbar-toggleable-xs" id="navbar-header">
<img class="navbar-brand" src="pics/logonavigation.png"/>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link smoothScroll" href="#navigation">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link smoothScroll" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link smoothScroll" href="#services">OUR SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link smoothScroll" href="#contact">CONTACT US</a>
</li>
</ul>
</div>
</nav>
JAVASCRIPT:
<script>
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - $('nav').height();
if ($(window).scrollTop() > navHeight) {
$('nav').addClass('fixed');
}
else {
$('nav').removeClass('fixed');
}
});
$('.navbar-toggler').click(function() {
var newHeight = $('nav').height();
$(".fixed").height(newHeight);
});
});
</script>
CSS:
.fixed {
position: fixed;
background-color: rgba(0, 0, 0, 0.8);
top: 0;
z-index: 1;
height: 50px;
}
The entire file pastebin can be found HERE
I am using bootstrap v4
Viewing the site in mobile view the following is observed:
The collapsible portion of the navigation is left "bare" without the black background. What I would like is to get the effect below:
I cannot use the class "navbar" at because somehow it interferes with the fixed-top-navigation-on-scroll. How can I get the background of the collpasible portion of the navigation in mobile view to appear black? I tried adjusting the height of .fixed dynamically using jquery but it doesn't work.

It's better to put your code into something more universally used like JSfiddle or CodePen.
Since I don't have a Pastebin account and can't easily run the code, I'll take a guess. Based on what I can see here, because your nav is gaining the .fixed class with a fixed height: 50px;, you're not going to get the black background behind the menu because it's only 50px tall.
Try changing it to height: auto;, assuming height is 50px before it gains .fixed. I'd also add a transition: height Xs; on it because when height is set to auto, it will "grow" to cover the menu.
EDIT
One big issue here is that you've declared a top AND bottom value on .nav. This was causing the full height for the .fixed nav. So remove that.
Then change the second half of your jQuery to this:
$(function() {
$('.navbar-toggler').click(function() {
$('nav').css('height', 'auto');
});
})
So when .navbar-toggler is clicked, we add height: auto; to the nav.
This worked for me upon testing, as far as getting the navbar to expand to include the menu items without going full browser height.
I recognize that pulling bottom: 0 out from nav will cause placement issues relative to #screen1, but I don't understand why you put the nav inside that section anyway. I would put it between #section1 and #section2.
You could change the height for #section1 to be calc(100vh - 50px) so that the navbar fits perfectly at the bottom of the screen.

Get closest div inside clicked <li>

I'm trying to get the closest DIV inside a li item, to apply a new class:
<ul id="menu">
<li class="here">
<img src="image">
<div class="border selected"></div>
</li>
<li class="here">
<img src="image">
<div class="border"></div>
</li>
.....
I wanted to be able to click inside the li tag and apply the class 'selected' to the div that already has class border.
I was trying to use .closest and .find but I couldn't get the good result.
Is there any recommendation? Thanks!
EDIT: https://jsfiddle.net/a8pm1aj7/

Please look at this jsfiddle.
The relevant code is:
$("#menu li").on("click", function(){
$("#menu li div.border").removeClass("selected");
$(this).find("div.border").addClass("selected");
});
This code removes the .selected class from all previously selected elements.
If I understand your question correctly, this should work for you.

.children() seems to work fine.... You may have more of an issue with CSS hierarchy. Make certain the selected class is defined after the border class in the CSS.
$(document).ready(function() {
$( '.here' ).on('click', function() {
var theDiv = $(this).children('.border');
$('.border').not(theDiv).removeClass('selected');
$( theDiv ).toggleClass('selected');
});
});
li { display: block; margin: 10px; width: 80%; }
.border { height: 20px; background: #eee; }
.selected { background: #fee; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li class="here">
Text/image
<div class="border"></div>
</li>
<li class="here">
Text/image
<div class="border"></div>
</li>
</ul>
Updated your fiddle and fixed issues with it.
- You had the div positioned absolute and set at 100% width and 100% height. S0 basically, it was the size of the window. Actually linked the jQuery library to the fiddle.

JQuery Hamburger Menu Functions

Below is the script I am trying to write to control two functions when the website's menu button is clicked; it is a hamburger menu that toggles the menu links. The first function shows/hides the menu links and the second fades an element on the page, both activated when the menu button is clicked.
In the first function, I am having trouble creating a delay/fadeIn for the menu links. I need '.navbar-item' to fade in and out when the menu is clicked. In the second function, I need to revert the opacity to 1.0 when the menu is clicked a second time. I can not get any of the effects to occur after the first effect has completed, i.e Menu is clicked to fade in menu links and dim '.values', menu is clicked to fade out menu links and revert '.values' to 100% opacity.
<div class="container">
<section class="header">
<h2 class="title">Title
<li class="client-item"><a class="client-link" href="#"><i class="fa fa-bars"></i></a></li></h2>
</section>
<nav class="navbar" style="display: none;">
<ul class="navbar-list">
<li class="navbar-item"><a class="navbar-link" href="#" target="_top">Contact</a></li>
<li class="navbar-item navbar-link">Store</li>
</ul>
</nav>
<div class="section values">
<div class="container">
<div class="row">
<div class="one-full column">
</div>
</div>
</div>
</div>
// Main Script For Site
$(document).ready(function() {
$('.client-link').click(function() {
$('.navbar').slideToggle("fast");
$('.values').animate({opacity:'0.6'});
});
});

This answer gives how to get simultaneous animations. jQuery's own docs describe slideToggle, including the bits you'd need to set similarly to how animate would need to be set.
I might also point out that there's no reason to separate the animate calls like you have. Since they're triggered by the same thing, they should be called from the same place.
Something like this, I think:
$(document).ready(function() {
$('.client-link').click(function() {
var $this = $(this);
var opening = !$this.data('isOpen');
$this.data('isOpen',opening);
if(opening) {
// opening animations
$('.navbar').slideDown({duration:'fast',queue:false});
$('.values').animate({opacity:1},{queue:false});
} else {
// closing animations
$('.navbar').slideUp({duration:'fast',queue:false});
$('.values').animate({opacity:0},{queue:false});
}
});
});
Though you may be better off moving your animations to CSS and just toggling a class.

You were very close, you have just made some simple mistakes. Here is a JSFiddle gives you a solution to your problem: https://jsfiddle.net/nv1gytrs/1/
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="client-link"></div>
<div class="navbar"></div>
<div class="values"></div>
CSS:
.client-link {
height: 100px;
width: 100px;
border: 2px solid green;
}
.navbar {
height: 100px;
width: 100px;
border: 2px solid red;
}
.values {
height: 100px;
width: 100px;
border: 2px solid blue;
transition: all 1s;
}
.fade {
opacity: 0.2;
}
JS:
// Main Script For Site
$(document).ready(function() {
$('.client-link').on("click", function() {
$('.navbar').slideToggle("fast");
$('.values').toggleClass("fade");
});
});
Of course, all of your HTML and CSS would be unique to what you are trying to accomplish, this is just an example.

Expand content on hover

I have an html menu. The markdown must remain as shown. Need to expand content on ""-link hover
<div class="container">
<div class="first-div-in row-menu" data-menu-block="first-div-in">Title</div>
..some other buttons..
</div>
<div id="first-div-in" class="menu-in">
<div class="container" style="display:none;">
<div class="col-xs-10">
... here is content ...
</div>
</div>
</div>
The problem is in realization. The idea is that when the user hovers on "div"-link, it expands the container with content. When the user changes the mouse position to this container, the container must be still visible.
The JS:
var hover_menu = function() {
var parent = $(this);
var menu_block = $( parent ).data('menu-block');
$('#' + menu_block).slideToggle('slow');
}
$('.row-menu').on( 'hover', hover_menu );
My JS code must expand container on "div"-link hover. The container must be visible on changing the cursor position to expanded container. How can I realize this kind of behavior?

Try something like this. On mouseover, if the current item is already visible then do nothing. Otherwise, hide any other open sections and show the new one.
var hover_menu = function(){
var $parent = $(this);
var $menu_block = $('#' + $parent.data('menu-block'));
if ($menu_block.not(':visible')) {
$('.menu-in:visible').not($menu_block).slideOut('slow');
$menu_block.slideIn('slow');
}
}
$('.row-menu').on( 'mouseover', hover_menu );

Actually, you could do this menu with simple css, using max-height and overflow(hidden).
<div class="menu-container">
<div class="visible-content">
My menu
</div>
<div class="invisible-content">
<div class="content-of-invisible-div">
<ul>
<li>My first item</li>
<li>My second item</li>
<li>My third item</li>
</ul>
</div>
</div>
.menu-container:hover .invisible-content {
max-height: 100px
}
.invisible-content{
max-height: 0px;
overflow: hidden;
}
.visible-content{
background-color: red;
padding: 10px;
}
.content-of-invisible-div {
background-color: blue;
}
Here's the fiddle
ttps://jsfiddle.net/7w1rts24/

Show/Hide divs that occupy the same space with separate links

I'm having an issue with trying to get divs to occupy the same space, and to also have a show/hide ability on them when clicking their respective links.
Can anybody please let me know the proper jQuery to put in to make this happen? Below is the code without jQuery.
The idea is that when I click on Print 1, then the piece #1 will show up, and when I click Print 2, #1 will disappear and #2 will take it's place.
Current HTML looks something vaguely like this:
<div id="content">
<div id="SideNav">
<ul>
<li>
<a>Print 1</a>
</li>
<li>
<a>Print 2</a>
</li>
</ul>
</div>
<div id="pieces">
<div id="1">
</div>
<div id="2">
</div>
</div>
</div>
CSS is basically this:
#content {
width:848px;
position:relative;
}
#SideNav {
width:169px;
float:left;
}
#pieces {
width:678px;
top:0px;
float:right;
position:relative;
}
#1 {
position:absolute;
top: 0px;
right: 0px;
z-index:1;
}
#2 {
position:absolute;
top: 0px;
right: 0px;
z-index:2;
}

JSFIDDLE
a Basic example of what you want to achieve :
JS :
$('a').on("click",function(){
alert($(this).text());
if($(this).text() == "Print 1"){
$('#1').show();
$('#2').hide();
}else{
$('#2').show();
$('#1').hide();
}
});
putting an event on click of your anchors and then checking the value of the clicked anchor.

Assuming the first link toggles the visibility of the first div and the second link toggles the second div
$('a').click(function() {
var index = $(this).closest('li').index();
$('#pieces div').eq(index).toggle();
}
And set display:none on the the second div

The trick is to make your markup structure a little more meaningful, and your CSS styling a little more generalized. This allows you to leverage common indexes between the links and the tabs below, as well as to define the style using a single CSS class. Then you can easily scale the solution for any number of links and panels:
jsFiddle
HTML
<div id="content">
<div id="SideNav">
<ul>
<li> Print 1
</li>
<li> Print 2
</li>
</ul>
</div>
<div id="pieces">
<div id="panel1" class="panel">First Div</div>
<div id="panel2" class="panel">Second Div</div>
</div>
</div>
CSS
/*
#content, #SideNav, #pieces
Same As Before
*/
.panel {
display: none;
position:absolute;
top: 0px;
right: 0px;
}
JS
$(function () {
$("a[id^='link']").click(function (e) {
e.preventDefault();
var index = this.id.replace("link", "");
$(".panel").hide();
$("#panel" + index).show();
});
});

You setup the click function for each of the anchors within the #sideNav container, prevent the default anchor tag function(preventDefault(), in case an href attribute is provided) and then execute what you want to do.
$('#sideNav a').click(function(e){
// prevent default link event
e.preventDefault();
// use show()/hide() or toggle()
});