We Keep Coding

JQuery issue with a back to top function

I've created a Back to Top function with jQuery.
The scroll back to top works but I can't seem to figure out how to hide it and only appear when say scrollTop() > 300. I created a function to take care of that but unfortunately no luck.
Here's a link to a jsfiddle https://jsfiddle.net/pvan_ren1/st3mdp6a/10/
//This is the function that's supposed to take care of the hide and reveal of toTop button.
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});

You should edit your CSS to hide your "Back to Top" button by default, and then show it when the show class is added.
#toTop {
display: none;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
margin: 30px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s;
z-index: 1000;
}
#toTop.show {
display: inline-block;
}
jQuery(document).ready(function() {
var btn = $('#toTop');
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: 0
}, 700);
});
});
.sectionA {
width: 100%;
height: 600px;
background-color: pink;
}
.sectionB {
width: 100%;
height: 600px;
background-color: green;
}
.sectionC {
width: 100%;
height: 600px;
background-color: purple;
}
.sectionD {
width: 100%;
height: 600px;
background-color: orange;
}
#toTop {
display: none;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
margin: 30px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s;
z-index: 1000;
}
#toTop.show {
display: inline-block;
}
#toTop:hover {
cursor: pointer;
background-color: #333;
}
#toTop:active {
background-color: #555;
}
#toTop::after {
content: "\f077";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<p style="position:fixed">Scroll Down and use the toTop button</p>
<br>
<p style="position:fixed">
At the top, the "Back to Top" button does not show.
<b>It works!</b>
</p>
<section class="sectionA">
</section>
<section class="sectionB">
</section>
<section class="sectionC">
</section>
<section class="sectionD">
</section>
</body>
<a id="toTop"></a>

Before anything, set the style of the button to display: none then the code below should do it for you:
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
$('#toTop').css('display','inline-block');
} else {
$('#toTop').css('display','none');
}
});

Transparent Navbar not becoming transparent after onscroll function

So, I am preparing for a Web Designing Competition and I was testing out a transparent navbar that will become White if pageYOffset is greater than 100, but now, when i scroll back in the 100px range, the navbar remains white.
Here's my code
window.onscroll = function() {
var navbar = document.getElementsByClassName('navbar')[0];
if (window.pageYOffset > 100) {
navbar.style.background = "#fff";
} else {
navbar.style.background = "transparent";
}
}
.navbar {
height: 50px;
width: 100%;
font-family: Arial;
position: fixed;
background: transparent;
color: #fff;
top: 0;
left: 0;
}
.navbar h3 {
float: left;
margin-left: 30px;
margin-top: 20px;
}
.navbar a {
float: right;
padding: 18px;
margin-right: 30px;
text-decoration: none;
color: #333;
}
/** FOR TESTING IN SNIPPET */
body {
height: 1000px;
background: red;
}
<div class="navbar">
<h3>OmniFoods</h3>
Home
About
Contact
</div>

How to make this progress bar start animating when scroll down to it?

I have this animated progress bar. I'd like to ask if it possible the progress bar to start animating when I scroll down to it?
I know I should use javascript to make it work on scroll but didn't know how. I will appreciate any help with that.
.progress {
height: 20px;
border-radius: 5px;
margin-bottom: 20px;
position: relative;
}
.progress .progress-bar {
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
line-height: 20px;
animation: animate-positive 6s;
}
.progress .progress-value {
font-size: 11px;
color: #fff;
padding: 0 15px;
float: right;
}
.progress .progressbar-title {
font-size: 11px;
color: #fff;
padding: 0 15px;
float: left;
}
#-webkit-keyframes animate-positive {
0% {
width: 0%;
}
}
#keyframes animate-positive {
0% {
width: 0%;
}
}
<div class="progress" style="background:#7f7e7d;">
<div class="progress-bar" style="width:80%; background: #000000;">
<div class="progress-value">80%</div>
<div class="progressbar-title">Progress</div>
</div>
</div>

This can be done by checking if the progress bar is in viewport. Once it is in the view port you can use jQuery animate to start the animation.
In folloing code I have replace all your CSS animation and used jQuery animate.
function isInViewport($elem) {
let elementTop = $elem.offset().top;
let elementBottom = elementTop + $elem.outerHeight();
let viewportTop = $(window).scrollTop();
let viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
}
let $progress = $(".progress");
let $progressBar = $progress.children(".progress-bar");
let maxVal = parseInt($(".progress-value").text());
$(window).scroll(function() {
if (isInViewport($progress)) {
$progressBar.animate(
{
width: maxVal + "%"
},
1000
);
}
});
.progress {
height: 20px;
border-radius: 5px;
margin-bottom: 20px;
position: relative;
}
.progress .progress-bar {
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
line-height: 20px;
}
.progress-bar {
background: #000;
}
.progress .progress-value {
font-size: 11px;
color: #fff;
padding: 0 15px;
float: right;
}
.progress .progressbar-title {
font-size: 11px;
color: #fff;
padding: 0 15px;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:500px; background: red; color:#fff;">
This div pushes slider below viewPort. Scroll down to see slider
</div>
<div class="progress" style="background:#7f7e7d;">
<div class="progress-bar">
<div class="progress-value">100%</div>
<div class="progressbar-title">Progress</div>
</div>
</div>

You can do something like this:
$(window).on("scroll", function(){
if($("body").scrollTop() === 500){
$(window).off("scroll");
// Execute your animation here
}
}
This line:
$(window).off("scroll");
removes the scroll event handler, as I am assuming you only want this to fire once.
I hope this will give you something to go on.

I use this library when I need to add animation when scroll down. I think you can add some class or id to div when this block is visible.

Do not hide modal while clicking Left/Right in overlay

I need this modal to not hide when you click in the overlay area (right or left button).
Example: when your click right button in overlay area, hide the modal.
The modal do not hide when your clicked in overlay, something clicked in "closed button".
Thank you!
jQuery(document).ready(function(){
jQuery('#popup-container a.close').click(function(){
jQuery('#popup-container').fadeOut();
jQuery('#active-popup').fadeOut();
});
var visits = jQuery.cookie('visits') || 0;
visits++;
jQuery.cookie('visits', visits, { expires: 1, path: '/' });
console.debug(jQuery.cookie('visits'));
if ( jQuery.cookie('visits') > 1 ) {
jQuery('#active-popup').hide();
jQuery('#popup-container').hide();
} else {
var pageHeight = jQuery(document).height();
jQuery('<div id="active-popup"></div>').insertBefore('body');
jQuery('#active-popup').css("height", pageHeight);
jQuery('#popup-container').show();
}
if (jQuery.cookie('noShowWelcome')) { jQuery('#popup-container').hide(); jQuery('#active-popup').hide(); }
});
jQuery(document).mouseup(function(e){
var container = jQuery('#popup-container');
if( !container.is(e.target)&& container.has(e.target).length === 0)
{
container.fadeOut();
jQuery('#active-popup').fadeOut();
}
});
/* Fullscreen overlay for modal background */
#active-popup {
background-color: rgba(52,73,94, 0.7);
position: absolute;
width: 100%;
heighT: 100% !important;
top: 0;
left: 0;
z-index: 999;
}
/* Modal container */
#popup-container {
width: 45%;
height: 65%;
margin: 0 auto;
margin-top: 5%;
position: fixed;
left: 28%;
z-index: 999;
top: 0;
display: none;
background: #E74C3C;
}
.modal-content {
position: relative;
text-align: center;
}
#popup-window { position: relative; }
.modal-content h1,
.modal-content p { color: #fff; }
.modal-content p { padding: 20% 5% 0 5%; }
/* Close button */
#popup-container a.close {
position: relative;
float: right;
top: -15px;
right: -7px;
z-index: 99;
font-weight: bold;
font-size: 16px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding: 2px 5px 2px 6px;
line-height: 1em;
text-align: center;
background: #E74C3C;
border: 4px solid #fff;
cursor: pointer;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<div id="popup-container">
<a class="close">x</a>
<div id="popup-window">
<div class="splash-bg">
<h1>Modal Popup Window</h1>
<p>...</p>
</div>
</div>
</div>

By the look of it your overlay should hide, if this piece of code is fixed to be:
jQuery(document).mouseup(function(e){
var container = jQuery('#popup-container');
var activePopup = jQuery('#active-popup');
if(container.is(e.target) && !activePopup.container.is(e.target) && activePopup.has(e.target).length === 0) {
container.fadeOut();
activePopup.fadeOut();
}
});
So if you don't want the container to close model, remove above code.

jQuery toggle fade: Can't get div to fade out/in on toggle

When I click on the black button, the red div fades out and the blue div fades in. However, when I click the black button a second time to switch it back, there is no fade out/in. How can I make it so that the blue div fades out and the red div fades back in?
Fiddle: http://jsfiddle.net/ddac5391/1/
HTML
<a id="contact-button" href="#">Get in touch</a>
<div id="primary"></div>
<div id="contact-keebs"></div>
CSS
#contact-button {
background: #000;
background-size: 24px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
padding: 10px 20px;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
#primary {
background: red;
height: 200px;
position: absolute;
width: 200px;
}
#contact-keebs {
background: blue;
display: none;
height: 200px;
position: absolute;
width: 200px;
}
JS
var c = 0;
$('#contact-button').click(function (e) {
e.preventDefault();
if (c++ % 2 == 0) {
$(this).addClass('work-button').text('Work');
$('body').addClass('contact-content');
$('#contact-keebs').stop().fadeIn(500).show();
} else {
$(this).removeClass('work-button').text('Get in touch');
$('body').removeClass('contact-content');
$('#contact-keebs').stop().fadeOut(500).hide();
}
});

Remove the .show() and .hide(); and to let the fadeIn/fadeOut animation complete(before stopping the animation) use .finish() before .stop().
If you don't use .finish(), the divs will sometimes stuck at a point where their opacity is not 1. Demo(try clicking rapidly) demonstrating this.
$('#contact-keebs').finish().stop().fadeIn(500);
and
$('#contact-keebs').finish().stop().fadeOut(500);
Updated Fiddle
Complete Demo:
var c = 0;
$('#contact-button').click(function(e) {
e.preventDefault();
if (c++ % 2 == 0) {
$(this).addClass('work-button').text('Work');
$('body').addClass('contact-content');
$('#contact-keebs').finish().stop().fadeIn(500);
} else {
$(this).removeClass('work-button').text('Get in touch');
$('body').removeClass('contact-content');
$('#contact-keebs').finish().stop().fadeOut(500);
}
});
#contact-button {
background: #000;
background-size: 24px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
padding: 10px 20px;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
#primary {
background: red;
height: 200px;
position: absolute;
width: 200px;
}
#contact-keebs {
background: blue;
display: none;
height: 200px;
position: absolute;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="contact-button" href="#">Get in touch</a>
<div id="primary"></div>
<div id="contact-keebs"></div>

I fix it. You don't need to add show and hide after the fadeOut, fadeIn : http://jsfiddle.net/ddac5391/6/
if (c++ % 2 == 0) {
$(this).addClass('work-button').text('Work');
$('body').addClass('contact-content');
$('#contact-keebs').stop().fadeIn(500);
} else {
$(this).removeClass('work-button').text('Get in touch');
$('body').removeClass('contact-content');
$('#contact-keebs').stop().fadeOut(500);
}

It should be $('#contact-keebs').stop().fadeOut(500).show();