We Keep Coding

How to temporarily disable hover during a .animate command?

I am trying to code a central navigation that allows for 4 tiles to appear from behind an image when the image is clicked. I am having an issue in which the tiles have a CSS styling of hover that can interrupt their toggle animation and wondered how I could temporarily disable the hover while the animation is running.
https://jsfiddle.net/Destinneh/4tgs2L5y/10/
http://sendvid.com/xodtv69a A video of what I'm trying to avoid.
$('#button').click(function(){
if($(this).attr("trigger")==="0"){
$('#navDown').animate({"top":"90%"},600);
$('#navUp').animate({"top":"10%"},600);
$('#navRight').animate({"left":"10%"},600);
$('#navLeft').animate({"left":"90%"},600);
$(this).attr("trigger","1");
}
else{
$('#navUp').animate({"top":"50%"},600);
$('#navDown').animate({"top":"50%"},600);
$('#navLeft').animate({"left":"50%"},600);
$('#navRight').animate({"left":"50%"},600);
$(this).attr("trigger","0");
}
});

You can introduce new class
Use it to play with hover
Remove class when you start animation
Add class back when animation ends
For example, change JS code to code below:
const navIds = ['#navDown', '#navUp', '#navRight', '#navLeft'];
function onAnimateStart() {
for (const id of navIds) {
$(id).removeClass('hoverOn');
}
}
function onAnimateComplete() {
for (const id of navIds) {
$(id).addClass('hoverOn');
}
}
$('#button').click(function() {
onAnimateStart();
if ($(this).attr("trigger")==="0") {
$('#navDown').animate({"top":"90%"}, 600);
$('#navUp').animate({"top":"10%"}, 600);
$('#navRight').animate({"left":"10%"}, 600);
$('#navLeft').animate({"left":"90%"}, 600, function() {
onAnimateComplete()
});
$(this).attr("trigger","1");
} else {
$('#navUp').animate({"top":"50%"}, 600);
$('#navDown').animate({"top":"50%"}, 600);
$('#navLeft').animate({"left":"50%"}, 600);
$('#navRight').animate({"left":"50%"}, 600, function() {
onAnimateComplete();
});
$(this).attr("trigger","0");
}
});
Change CSS part
.centreNav:hover{
transition: 0.25s;
width: 105px;
height: 105px;
border:2px solid white;
}
To:
.hoverOn:hover {
transition: 0.25s;
width: 105px;
height: 105px;
border: 2px solid white;
}
HTML part to (basically add hoverOn to your centreNav elements):
<div id="containerCent">
<a id="button" trigger="0" href="#"><img src="images/Logo.png" alt=" logo"></a>
<div id="spiralNav">
<a href="#">
<div id="navUp" class="centreNav hoverOn">
<h2></h2>
</div>
</a>
<a href="#">
<div id="navLeft" class="centreNav hoverOn">
<h2></h2>
</div>
</a>
<a href="#" target="_blank">
<div id="navRight" class="centreNav hoverOn">
<h2></h2>
</div>
</a>
<a href="#">
<div id="navDown" class="centreNav hoverOn">
<h2></h2>
</div>
</a>
</div>
</div>
JSFiddle with all changes from above:
https://jsfiddle.net/g3p2erfo/

Trying to use jquery to make content fade in when scrolling

I want the contents of the page to fade in when scrolling down and out when scrolling up, I used a websites instructions (https://www.superhi.com/blog/how-to-add-web-design-elements-that-fade-in-and-out-on-scroll) and tried to change it a bit to fit my project but it isn't working. I'm using Dreamweaver.
<script src="jquery-3.4.1.min.js"></script>
<script src="fadein.js"></script>
<script>
$(document).on("scroll", function () {
var pageTop = $(document).scrollTop()
var pageBottom = pageTop + $(window).height()
var tags = $(".fade")
for (var i = 0; i < tags.length; i++) {
var tag = tags[i]
if ($(tag).position().top < pageBottom) {
$(tag).addClass("visible")
} else {
$(tag).removeClass("visible")
}
}
})
</script>
<div id="content" style="margin:-8px;">
<img src="images/n intro.jpg" style="width: 100%; margin-top:110px;" alt="intro image">
<img class="fade" src="images/border.png" style="width:490px; margin:40px; margin-left: 35%" alt="border line">
<div id="mid">
<h1 class="fade">Whether youre in it for...</h1>
<img class="fade" src="images/photos/food&drink2.jpg" alt="picture of artistic coffee being made">
<p class="fade">The food and drink,</p>
<img class="fade" src="images/photos/work2.jpg" alt="picture of laptop at a coffee table">
<p class="fade">Getting some work done,</p>
<img class="fade" src="images/photos/people2.jpg" alt="picture of a couples hands holding coffee">
<p class="fade">The people,</p>
<img class="fade" src="images/photos/book2.jpg" alt="picture of a book and coffee">
<p class="fade">Or a good book,</p>
<h2 class="fade">We got you covered!</h2>
</div>
<img class="fade" src="images/awards.png" style="display: block; margin-left:auto; margin-right: auto; width: 460px;" alt="three award icons">
<ul>
<li class="fade">Sustainable high quality coffee</li>
<li class="fade">Comfortable seating</li>
<li class="fade">A variety of table layouts to suit your needs</li>
<li class="fade">High speed internet </li>
<li class="fade">Charging ports provided</li>
</ul>
</div>
.fade {
opacity: 0;
}
.fade.visible {
opacity: 1;
}
When I use this the page just displays everything normally, nothing fades or is invisible.

There are a few issues with the code:
Your link to jQuery isn't pointing to actual jQuery. I looked at the tutorial, and yes that's what they use, but you need to use the CDN link:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
fade.js is just the name they used for where they put the script that you included. you don't necessarily need that.
You need to add a transition property to the .fade class, other wise, you won't see it fade in or out, it will simply switch from 0 opacity to 1 (or full).
$(document).on("scroll", function () {
var pageTop = $(document).scrollTop()
var pageBottom = pageTop + $(window).height() - 20
var tags = $(".fade")
for (var i = 0; i < tags.length; i++) {
var tag = tags[i]
if ($(tag).position().top < pageBottom) {
$(tag).addClass("visible")
} else {
$(tag).removeClass("visible")
}
}
});
.fade {
opacity: 0;
transition: all .3s ease;
}
.fade.visible {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content" style="margin:-8px;">
<img src="images/n intro.jpg" style="width: 100%; margin-top:110px;" alt="intro image">
<img class="fade" src="images/border.png" style="width:490px; margin:40px; margin-left: 35%" alt="border line">
<div id="mid">
<h1 class="fade">Whether youre in it for...</h1>
<img class="fade" src="images/photos/food&drink2.jpg" alt="picture of artistic coffee being made">
<p class="fade">The food and drink,</p>
<img class="fade" src="images/photos/work2.jpg" alt="picture of laptop at a coffee table">
<p class="fade">Getting some work done,</p>
<img class="fade" src="images/photos/people2.jpg" alt="picture of a couples hands holding coffee">
<p class="fade">The people,</p>
<img class="fade" src="images/photos/book2.jpg" alt="picture of a book and coffee">
<p class="fade">Or a good book,</p>
<h2 class="fade">We got you covered!</h2>
</div>
<img class="fade" src="images/awards.png" style="display: block; margin-left:auto; margin-right: auto; width: 460px;" alt="three award icons">
<ul>
<li class="fade">Sustainable high quality coffee</li>
<li class="fade">Comfortable seating</li>
<li class="fade">A variety of table layouts to suit your needs</li>
<li class="fade">High speed internet </li>
<li class="fade">Charging ports provided</li>
</ul>
</div>
Here's a fiddle to play with:
https://jsfiddle.net/t4Ljnk7v/1/
I updated the pageBottom variable so you can see the bottom elements fade in when you get to the bottom.

Background image div clickable

I have a div with a background image. How can i make the div (the background image) clickable? I want to unhide an other div when clicked on the div (image). Onclick code: onclick="javascript:unhide('kazen')"
var clickit = document.getElementsByClassName("fh5co-grid")[0];
var kazen = document.getElementById("kazen");
clickit.addEventListener("click", function(){
if (kazen.style.display === "none") {
kazen.style.display="block";
} else {
kazen.style.display="none";
}
});
kazen.addEventListener("click", function(){
this.style.display="none";
});
#kazen {
background-color: #cc9;
display: none;
width: 100px;
height: 100px;
position: absolute;
top: 15px;
left: 15px;
}
.fh5co-grid {
}
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/PREVIEW_Shop_02-29.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3>Kaas</h3>
<h4>in ons aanbod hebben we verse en harde kazen - binnenkort meer hierover</h4>
</div>
</a>
</div>
</div>
<div id="kazen" >
<div class="col-md-12">
<div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-16-4.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
</div>
</a>
</div>
</div>
</div>

You can have a look at the fiddle I created if this is what you want.
$(document).ready(function() {
$("div.fh5co-grid").click(function() {
$("div.next").css("display", "block");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(http://placehold.it/350x150);">
<a class="image-popup text-center">
<div class="prod-title ">
<h3>cheese</h3>
<h4>tekst</h4>
</div>
</a>
</div>
</div>
<div style="background-color: #000; display:none" class="next">Next div</div>

From what you're describing, this seems pretty close. The background image isn't clickable, it's the div itself. And this could be done with jQuery, yes, but it's trivial enough that pure javascript is pretty easy here. Clicking in the red-boxed area will display the div with the id kazen, and clicking in either kazen or the red-boxed area again will hide it.
Note, there was a weird glitch to my solution. I changed the display if/else to check if it's currently displayed and hide it, rather than if it's currently hidden to display it. That was causing a strange effect of re-hiding the kazan div on the first click.
Within stackoverflow, you'll need an absolute url to display an image. If you aren't seeing your image here, that may be why.
var clickit = document.getElementsByClassName("fh5co-grid")[0];
var kazen = document.getElementById("kazen");
clickit.addEventListener("click", function(){
if (kazen.style.display === "block") {
kazen.style.display="none";
} else {
kazen.style.display="block";
}
});
kazen.addEventListener("click", function(){
this.style.display="none";
});
#kazen {
background: url("https://static.pexels.com/photos/6832/waterfall-beauty-lets-explore-lets-get-lost.jpg");
background-size: 100%;
display: none;
width: 100px;
height: 100px;
position: absolute;
top: 15px;
left: 15px;
color: #fff;
}
.fh5co-grid {
border: 1px dotted red;
}
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/PREVIEW.jpg);">
<a class="image-popup text-center">
<div class="prod-title ">
<h3>cheese</h3>
<h4>tekst</h4>
</div>
</a>
</div>
</div>
<div id="kazen">
Click me to hide!
</div>

same onclick js function for multiple images

I have a gallery of images. I want to show a loading gif when an image is clicked. I am passing the same onclick function to all the images with their id as below:
<div id="smallimage1" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image1.jpeg"/>
</div>
<div id="smallimage2" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image2.jpeg"/>
</div>
<div id="loading" style="margin-top: -65%; display: none; z-index= 9999; position: relative;">
<img src="img/imagepreloader.gif" alt="loading...">
</div>
This is my js :
function imageClicked(id) {
// alert(id);
document.getElementById("loading").style.display = ""; // to display
//alert(loading);
return true;
}
var FirstLoading = true;
function Restoresmallimage() {
if (FirstLoading) {
FirstLoading = false;
return;
}
}
// To disable restoring submit button, disable or delete next line.
document.onfocus = Restoresmallimage;
For the first image its working fine.
But issue is when I am clicking on second image, gif is running on first image and not on the second one. How to resolve this issue? I had defined loading id in each div image.

I think the problem is you never move imagepreloader.gif. Here is my solution to have only one imagepreloader.gif for all images:
HTML:
<div id="smallimage1" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image1.jpeg"/>
</div>
<div id="smallimage2" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image2.jpeg"/>
</div>
CSS:
div {
display: inline-block;
position: relative;
}
#loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
JavaScript:
function constructImagePreloader() {
'use strict';
var imagePreloader = document.createElement('img');
imagePreloader.setAttribute('src', 'images/imagepreloader.gif');
imagePreloader.setAttribute('alt', 'loading...');
imagePreloader.setAttribute('id', 'loading');
return imagePreloader;
}
function imageClicked(id) {
document.getElementById(id).appendChild(constructImagePreloader());
return true;
}
Tell me if it suits your needs. We could go further with code optimization but I wanted to stay close from your code for now. For instance: we could remove the image preloader from the clicked image if another image is clicked.

Try this if it will work,
<div id="smallimage1" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image1.jpeg"/>
</div>
<div id="smallimage2" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image2.jpeg"/>
</div>
<div id="loading1" style="margin-top: -65%; display: none; z-index:9999; position: relative;">
<img src="img/imagepreloader.gif" alt="loading...">
</div>
<div id="loading2" style="margin-top: -65%; display: none; z-index: 9999; position: relative;">
<img src="img/imagepreloader.gif" alt="loading...">
</div>
And your script will be like this;
function imageClicked(id) {
// alert(id);
var loadingId = $(id).replace('smallimage','loading');
document.getElementById(loadingId).style.display = "block"; // to display
//alert(loading);
return true;
}

Using jQuery to fade in a div

I am firstly trying to fade in a div as soon as the page is loaded, then once its loaded I have 2 other divs on it that are acting like buttons. I would like to be able to click those 2 divs to be able to make other divs appear on top of the first one. Here is the code for the first div that should fade in a soon as the page is finished loading:
<div id="step1" style="visibility: hidden; display:block">
<a id="btn-step2-video" style="position:fixed; top: 45%; left: 25%;"><div class="btn-ad-choice ad-choice">
<br>
<p><b>Create a video ad:</b></p>
<video width="200" height="113" autoplay="autoplay" mute>
<source src="video/exemple.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div></a>
<a id="btn-step2-picture" style="position:fixed; top: 45%; right: 25%;"><div class="btn-ad-choice ad-choice">
<br>
<p><b>Create a picture ad:</b></p>
<img src="images/adexemple.jpg" alt="Exemple of a picutre ad" height="113" width="200">
</div></a>
</div>
and here is the code for the next divs that I would like to fad in if either of the 2 buttons is clicked. So if the button video is clicked the div containing the word video will fade in and the div containing the buttons will fade out, same for the second button with picture:
<div id="step2-video" class="box" style="visibility: hidden; background:#C0C0C0">
video
</div>
<div id="step2-picture" class="box" style="visibility: hidden; background:#C0C0C0">
picture
</div>
Finally here is the Javascript, however it does not work:
<script type="text/javascript">
var step1 = $('#step1'),
step2-video = $('#step2-video'),
step2-picture = $('#step2-picture'),
var boxes = $('.box');
$('#btn-step2-video').click(function(){
fade(step1, step2-video);
});
$('#btn-step2-picture').click(function(){
fade(step1, step2-picutre);
});*/
$(document).ready(function() {
$("#step1").fadeIn("quick");
});
function fade(thisIn, callback){
$(thisIn).fadeOut("slow");
$(callback).fadeIn("slow");
});
</script>
Thank you for your help ;)

Edited your original post, code is below.
Guess this is the functionality you want?
$(function() {
var step1 = $('#step1');
var step2video = $('#step2-video');
var step2picture = $('#step2-picture');
var boxes = $('.box');
step1.fadeIn("slow");
$('#btn-step2-video').click(function() {
fade(step1, step2video);
});
$('#btn-step2-picture').click(function() {
fade(step1, step2picture);
});
var fade = function(thisIn, callback){
$(thisIn).fadeOut("slow");
$(callback).fadeIn("slow");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="step1" style="display:none; background: #ff0000; width: 100px; height: 100px;">
<a href="#" id="btn-step2-video" style="position:fixed; top: 45%; left: 25%;"><div class="btn-ad-choice ad-choice">
<br>
<p><b>Create a video ad:</b></p>
</div></a>
<a href="javascript:void(0);" id="btn-step2-picture" style="position:fixed; top: 45%; right: 25%;"><div class="btn-ad-choice ad-choice">
<br>
<p><b>Create a picture ad:</b></p>
</div></a>
</div>
<div id="step2-video" class="box" style="display: none; background:#C0C0C0; height: 100px; width: 100px;">
video
</div>
<div id="step2-picture" class="box" style="display: none; background:#C0C0C0; height: 100px; width: 100px;">
picture
</div>