We Keep Coding

how to fade in and out with javascript

I am trying to make a message appear if the user doesn't scroll for specific amount of time and then make the text fade out as soon as the user scroll. What I have tried so far is not working.
I am looking for vanilla javascript solutions only.
thank you for your help.
// make scroll button appear ---------------
var scrollText = document.getElementById("scrollMsg");
function showMsg() {
scrollText.className = "show";
}
setTimeout(showMsg, 2000);
// make scroll button fadout ---------------
function scrollHide() {
var scrollText2 = document.querySelector("#scrollMsg.show");
var scrllTPosition = scrollText2.getBoundingClientRect().top;
var screenPosition = window.innerHeight / 0.5;
if (scrllTPosition < screenPosition) {
scrollText2.classList.add("scrollHide");
}
}
window.addEventListener("scroll", scrollHide);
#scrollMsg {
height: auto;
position: sticky;
bottom: 175px;
z-index: 1;
opacity: 0;
-webkit-transition: opacity 0.7s;
-moz-transition: opacity 0.7s;
transition: opacity 0.7s;
}
#scrollMsg.show {
opacity: 1;
-webkit-transition: opacity 0.7s ease-in-out;
-moz-transition: opacity 0.7s ease-in-out;
transition: opacity 0.7s ease-in-out;
}
#scrollhide {
opacity: 0;
-webkit-transition: opacity 0.7s ease-in-out;
-moz-transition: opacity 0.7s ease-in-out;
transition: opacity 0.7s ease-in-out;
}
<p id="scrollMsg">scroll</p>

I've added some large divs to allow us to scroll through the document.
// make scroll button appear ---------------
var scrollText = document.getElementById("scrollMsg");
window.addEventListener('scroll', (e) => {
console.log('user scrolled!')
scrollText.style.opacity = 0
});
#scrollMsg {
opacity: 1;
transition: opacity 1s;
}
<div style="height:100px"></div>
<p id="scrollMsg">scroll</p>
<div style="height:4000px"></div>

ngAnimate max-height not working on certain element

I've implemented ngAnimate into a project to help with animations, but I'm getting really odd behaviour with a certain element.
To add some background, we have a shop with categories and products inside the categories. I'm doing an ng-repeat with: data-ng-repeat="product in currentProductCategory.Products" and I have data-ng-class="{ 'open': product.ShowDetails == true }" on my root element.
My root element also has an id of product-{{product.Id}}-{{currentProductCategory.Id}} and I have a child element with id product-options-{{product.Id}}-{{currentProductCategory.Id}} which products expected results.
When clicking a button, I call a function that sets the max-height on the parent element to a desired height, and the animation is handled in the CSS. Here's the function code:
var reg = /\d+/g;
var productParentElement = $('#product-' + product.Id + '-' + $scope.currentProductCategory.Id);
var optionsElement = $('#product-options-' + product.Id + '-' + $scope.currentProductCategory.Id);
var productParentPaddingTop = parseInt(productParentElement.css("padding-top").match(reg));
var productParentPaddingBottom = parseInt(productParentElement.css("padding-bottom").match(reg));
var productParentTotalHeight = productParentPaddingTop + productParentPaddingBottom + productParentElement.height() + optionsElement.height();
var optionsElementPaddingTop = parseInt(optionsElement.css("padding-top").match(reg));
var optionsElementPaddingBottom = parseInt(optionsElement.css("padding-bottom").match(reg));
var optionsElementTotalHeight = optionsElementPaddingTop + optionsElementPaddingBottom + optionsElement.height();
var totalHeight = productParentTotalHeight + optionsElementTotalHeight;
if (product.ShowDetails) {
product.ShowDetails = true;
productParentElement.css("max-height", totalHeight);
} else {
product.ShowDetails = false;
productParentElement.removeAttr('style');
}
And my CSS for the closed and open classes:
Closed:
.products-list .product {
margin-bottom: 20px;
max-height: 200px;
overflow: hidden;
-moz-transition: max-height 2s ease;
-o-transition: max-height 2s ease;
-webkit-transition: max-height 2s ease;
transition: max-height 2s ease;
}
Open:
.products-list .product.open {
-moz-transition: max-height 2s ease;
-o-transition: max-height 2s ease;
-webkit-transition: max-height 2s ease;
transition: max-height 2s ease;
max-height: 200px;
}
The issue is that out of the many products over 4 categories, the same one which is the same product in each category is not animating open. It animates the close/shrink, but when opening, it just instantly appears open.
This has been gating on us for a long time now and it's becoming a real issue, any help is greatly appreciated.
UPDATE: Now none of the "products" will animate open, but they do animate closed. Could this be because I'm setting the max-height on the style rather than a class?

Sorry but this might sound like I am pointing out the obvious and I can't see the rest of your code but in your CSS, you have;
.products-list .product {
margin-bottom: 20px;
max-height: 200px;
overflow: hidden;
-moz-transition: max-height 2s ease;
-o-transition: max-height 2s ease;
-webkit-transition: max-height 2s ease;
transition: max-height 2s ease;
}
for your closed list which has a 'max-height: 200px' but is also the same in your open list;
.products-list .product.open {
-moz-transition: max-height 2s ease;
-o-transition: max-height 2s ease;
-webkit-transition: max-height 2s ease;
transition: max-height 2s ease;
max-height: 200px;
}
Which also has a max-height of 200px. So in this case you're asking it to transition from 200px to 200px. try changing the height of open classes to be bigger or smaller. Then it will transition.

jQuery Rotate with slideToggle

I have a div that when you click on it opens up the the content within, at the top of the bar I have an arrow image that if the content is closed (default position) the arrow is pointing to the right and when the content is open I want the arrow image to rotate to pointing down.
I am using jQueryRotate to rotate the image and I have all the elements working, but what I can't get it to work when toggling, I can only get the image to rotate once when opening the content, I have where I have got to here
$("#ProductHeaderWrap1").click(function () {
$("#ProductDetailsToggle1").stop().slideToggle("slow");
});
$("#ProductHeaderWrap1").click(function () {
$("#ProductHeaderWrap1").find(".arrow").rotate({
animateTo: 90
}, {
duration: 500
});
});
http://jsfiddle.net/cgF4a/ along with some worked on jQuery attempts, I just need the image to rotate to 0 when clicked to close the div.
Thanks for any help,
J.

It's easier to do this with CSS, take a look:
img.open {
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-transition: -webkit-transform 1s linear;
-moz-transition: -moz-transform 1s linear;
-o-transition: -o-transform 1s linear;
transition: transform 1s linear;
}
img {
-webkit-transition: -webkit-transform 1s linear;
-moz-transition: -moz-transform 1s linear;
-o-transition: -o-transform 1s linear;
transition: transform 1s linear;
}
$(document).ready(function () {
$("#ProductHeaderWrap1").click(function () {
$("#ProductDetailsToggle1").stop().slideToggle("slow");
$(this).find("#Image1").toggleClass("open");
});
});
Updated JSFiddle

getElementsByClassName doesn't select all my Navigation elements

I'm creating a Website with HTML, CSS, and JavaScript (no jQuery).
I have created the following script to change my Navigation Class when my pageoffset is more than 50 and change it back if its less then 50:
window.onscroll = function (event) {
var nav = document.getElementsByClassName('main-navigation');
var navscr = document.getElementsByClassName('main-navigation-scrolled');
if (window.pageYOffset > 50) {
for(var i = 0; i < nav.length; i++) {
nav[i].className = 'main-navigation-scrolled';
}
}
else {
if (window.pageYOffset < 50) {
for(var i = 0; i < navscr.length; i++) {
navscr[i].className = 'main-navigation';
}
}
}
}
For some reason, when I scroll very slowly or reload the page when my offset is more than 50 only half the li-elements change class.
Maybe there is a smarter solution which also has better performance?
This is my first question, go easy on me please :)
€dit: HTML
<div id="nav-menu-container-fix">
<ul>
<li><a class="main-navigation" href="index.html">Home</a></li>
<li><a class="main-navigation" href="about.html">About</a></li>
<li><a class="main-navigation" href="#">Team</a></li>
<li><a class="main-navigation" href="#">24 Weeks</a></li>
<li><a class="main-navigation" href="#">Donate</a></li>
<li><a class="main-navigation" href="#">Downloads</a></li>
<li><a class="main-navigation" href="#">Forum</a></li>
</ul>
</div>
Aaaaand CSS
a.main-navigation {
padding:18px 15px 15px 15px;
background-color:#222222;
color:#bbbbbb;
display:inline-block;
text-decoration:none;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
}
a.main-navigation:hover {
padding:18px 15px 15px 15px;
background-color:#555555;
color:#ffffff;
display:inline-block;
text-decoration:none;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
}
a.main-navigation-scrolled {
padding:7.5px 15px 7.5px 15px;
background-color:#604D9D;
color:#eeeeee;
display:inline-block;
text-decoration:none;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
}
a.main-navigation-scrolled:hover {
padding:7.5px 15px 7.5px 15px;
background-color:#402c6c;
color:#ffffff;
display:inline-block;
text-decoration:none;
-webkit-transition: all 400ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
}

Scroll event will be called hundreds of times while you are scrolling. so you need to perform the actions one and only once when the conditions are matched.
the following will reduce dom accessing
var scrolled = false; // initially page is not scrolled
window.onscroll = function (event) {
if (window.pageYOffset > 50 && !scrolled) { //perform following only if it's not done already
var nav = document.querySelectorAll('main-navigation');
for (var i = 0; i < nav.length; i++) {
nav[i].className = 'main-navigation-scrolled';
scrolled = true; // applied scroll class no need to do this again
}
} else if (window.pageYOffset < 50 && scrolled) { //perform the following only it's not done already
var navscr = document.querySelectorAll('main-navigation-scrolled');
for (var i = 0; i < navscr.length; i++) {
navscr[i].className = 'main-navigation';
scrolled = false; // applied no scroll class, no need to do it again
}
}
}
Update: working fiddle

I don't really know why it didn't work, but I know it works now. I started using jquery and with the following code it works just fine.
$(document).scroll(function () {
if (window.scrollY > 50) {
$(".main-navigation").attr('class', 'main-navigation-scrolled');
} else {
$(".main-navigation-scrolled").attr('class', 'main-navigation');
}
});

Smoothen jQuery animation

On my website built with Rails 4, I use jQuery's animate function. However, it doesn't seem to run very smoothly. In my application.js, my code is under $(window).load:
Here is a sample of the animate block:
$('.background').animate({right: '-2000px'}, 1000, function(){
$($('nav a.active').attr('href')).css("display","none");
$('nav a.active').removeClass('active');
$('.photos').css("display","none");
$(e.currentTarget).addClass('active');
hash = $('nav a.active').prop("hash");
target = document.getElementById(hash.slice(1));
$('.background').animate({right: '0px'}, 1000, function(){
$(target).fadeIn(300);
navFix();
});
});
What can I do to make this smoother? You can view the issue live here by clicking on the navigation links on the left.

The problem is that your CSS is fighting your JS (with jQuery). Specifically your transitions are fighting your animation.
In your CSS, you've added a CSS3 transition to the .background class:
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
So any time you change any of your .background's CSS properties that can be transitioned, it's gonna try to use that transition speed. Unfortunately for you, the CSS property right is a property that can be transitioned. So when you animate your background with a duration of 1000ms, it's fighting your CSS that wants to do it with a duration of 300ms.
So either use the transition or the jQuery animation, but not both simultaneously.
Fix 1. Should fix your problem and give you a duration of 300ms:
$('.background').css({right: '-2000px'}, function(){
$($('nav a.active').attr('href')).css("display","none");
$('nav a.active').removeClass('active');
$('.photos').css("display","none");
$(e.currentTarget).addClass('active');
hash = $('nav a.active').prop("hash");
target = document.getElementById(hash.slice(1));
$('.background').animate({right: '0px'}, 1000, function(){
$(target).fadeIn(300);
navFix();
});
});
Fix 2. Should fix your problem and give you a duration of 1000ms:
/* in your CSS */
.background {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
/* overriding the transition property that was applied to all*/
-webkit-transition: right 1s ease;
-moz-transition: right 1s ease;
-o-transition: right 1s ease;
-ms-transition: right 1s ease;
transition: right 1s ease;
}
// in your JS
$('.background').css({right: '-2000px'}, function(){
$($('nav a.active').attr('href')).css("display","none");
$('nav a.active').removeClass('active');
$('.photos').css("display","none");
$(e.currentTarget).addClass('active');
hash = $('nav a.active').prop("hash");
target = document.getElementById(hash.slice(1));
$('.background').animate({right: '0px'}, 1000, function(){
$(target).fadeIn(300);
navFix();
});
});