Develop Reference

eventListener stops working after scrolling down/changing property in javascript

I have a navigation bar. In it, I have some anchors. One of the anchors has the text 'Guides'. I want a div to appear when I hover over the anchor, and I want it to remain on the screen as long as I am hovering over the anchor. I also want the the div to remain on the screen as long as I am hovering over the div itself. All of this is working fine. When I scroll down, I decrease the size of the navigation bar and change the top position of the div. After I do this, the eventListener that I have set up to keep the div on the screen as long as I am hovering over it stops working. Please note that the div still appears when I hover over the anchor, and it remains on the screen as long as I am hovering over it.
Here's the code. The div is the one with id="dropdown-guides":
// Show dropdown on hovering over 'guides' in navigation bar
let guidesAnchor = document.querySelector('#nav-anchor-guides')
let guidesDropdown = document.querySelector('#dropdown-guides')
function showGuidesDropdown() {
guidesDropdown.style.display = 'block'
}
function hideGuidesDropDown() {
guidesDropdown.style.display = 'none'
}
guidesAnchor.addEventListener('mouseenter', showGuidesDropdown)
guidesAnchor.addEventListener('mouseleave', hideGuidesDropDown)
guidesDropdown.addEventListener('mouseenter', showGuidesDropdown)
guidesDropdown.addEventListener('mouseleave', hideGuidesDropDown)
// Show search bar on clicking search icon
let searchIcon = document.querySelector('#search-icon_anchor')
let searchBar = document.querySelector('#search-bar')
searchIcon.addEventListener('click', function() {
if (searchBar.style.display === 'none') {
searchBar.style.display = 'block'
} else {
searchBar.style.display = 'none'
}
})
// Change navigation bar on scrolling down
let navBar = document.querySelector('nav')
let mainIcon = document.querySelector('#nav-main-icon')
let navAnchors = document.querySelectorAll('nav a')
let iconDesignGuideAnchor = document.querySelector('#nav-dropdown-guides-icon-design-guide')
let pixelPerfectIconsAnchor = document.querySelector('#nav-dropdown-guides-crafting-pixel-perfect-icons')
let dribbbleAudienceAnchor = document.querySelector('#nav-dropdown-guides-build-your-dribbble-audience')
window.onscroll = () => {
if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
navBar.style.height = '42px'
navBar.style.paddingTop = '10px'
navBar.style.boxShadow = '0px 0px 7px #0000001A'
mainIcon.style.top = '10px'
mainIcon.style.width = '97px'
mainIcon.style.height = '30px'
navAnchors.forEach(navAnchor => {
navAnchor.style.top = '14px'
navAnchor.style.height = '23px'
})
guidesDropdown.style.top = '42px'
searchBar.style.top = '52px'
iconDesignGuideAnchor.style.top = '65px'
pixelPerfectIconsAnchor.style.top = '108px'
dribbbleAudienceAnchor.style.top = '174px'
} else {
navBar.style.height = '80px'
navBar.style.paddingTop = '0px'
navBar.style.boxShadow = 'none'
mainIcon.style.top = '18px'
mainIcon.style.width = '139px'
mainIcon.style.height = '43px'
navAnchors.forEach(navAnchor => {
navAnchor.style.top = '28px'
navAnchor.style.height = '52px'
})
guidesDropdown.style.top = '80px'
searchBar.style.top = '80px'
iconDesignGuideAnchor.style.top = '103px'
pixelPerfectIconsAnchor.style.top = '146px'
dribbbleAudienceAnchor.style.top = '212px'
}
}
body {
margin: 0;
font-family: "Open Sans", Arial, sans-serif;
}
nav {
width: 100%;
height: 80px;
position: fixed;
border-bottom: 1px solid #E5E5E5;
z-index: 1;
background-color: #FFFFFF;
}
#nav-main-icon {
left: 135px;
top: 18px;
width: 139px;
height: 43px;
position: fixed;
}
a {
text-decoration: none;
}
nav a {
position: fixed;
top: 28px;
height: 52px;
font-family: "Open Sans", sans-serif;
font-size: 14px;
color: #666666;
}
nav a:hover {
color: #333333;
}
#nav-anchor-blog {
left: 748px;
}
#nav-anchor-guides {
left: 802px;
}
#nav-anchor-free-icons {
left: 887px;
}
#nav-anchor-free-wallpapers {
left: 979px;
}
#nav-anchor-about-me {
left: 1110px;
}
#nav-search-icon {
position: fixed;
left: 1197px;
width: 18px;
height: 17px;
font-size: 14px;
fill: #00000080;
}
#nav-search-icon:hover {
fill: #E74225;
}
.nav-dropdown {
top: 80px;
box-shadow: 0 2px 5px #0000001A;
border-top: 3px solid #E74225;
background-color: #FFFFFFFF;
display: none;
}
#dropdown-guides {
position: relative;
left: 776px;
width: 200px;
height: 175px;
padding: 20px;
z-index: 3;
}
#dropdown-guides a {
left: 796px;
width: 160px;
padding: 10px 20px;
line-height: 23px;
}
#dropdown-guides a:hover {
background-color: #00000008;
}
#nav-dropdown-guides-icon-design-guide {
top: 103px;
height: 23px;
}
#nav-dropdown-guides-crafting-pixel-perfect-icons {
top: 146px;
height: 46px;
}
#nav-dropdown-guides-build-your-dribbble-audience {
top: 212px;
height: 46px;
}
#search-bar {
position: absolute;
left: 895px;
width: 280px;
height: 35px;
padding: 20px;
z-index: 2;
}
#search-field {
left: 915px;
top: 103px;
width: 240px;
height: 15px;
padding: 10px 20px;
border: hidden;
background-color: #F8F8F8;
font-family: Arial;
font-weight: 400;
font-size: 13.3333px;
color: #757575;
}
#search-field:focus {
outline: none;
}
h1, h3, h4, p, a {
margin: 0;
font-weight: 500;
}
h1, h3, h4 {
text-align: center;
}
h1 {
font-size: 30px;
line-height: 30px;
color: #333333;
}
h3 {
font-size: 22px;
line-height: 22px;
color: #333333;
}
h4 {
font-size: 14px;
line-height: 24px;
color: #666666;
}
p {
font-size: 16px;
line-height: 27px;
color: #666666;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Main - Icon Utopia</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="index-styles.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<img id="nav-main-icon" src="icon-utopia.png">
<a id="nav-anchor-blog" href="blog.html">Blog</a>
<a id="nav-anchor-guides" href="www.iconutopia.com">Guides</a>
<a id="nav-anchor-free-icons" href="https://iconutopia.com/free-icons/">Free Icons</a>
<a id="nav-anchor-free-wallpapers" href="https://iconutopia.com/free-phone-wallpapers/">Free Wallpapers</a>
<a id="nav-anchor-about-me" href="https://iconutopia.com/about/">About Me</a>
<a id="search-icon_anchor"><svg id="nav-search-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32.2 32.2"><path d="M19 0C11.8 0 6 5.8 6 13c0 3.1 1.1 5.9 2.9 8.2l-8.6 8.6c-0.5 0.5-0.5 1.4 0 2 0.5 0.5 1.4 0.5 2 0l8.6-8.6C13.1 24.9 15.9 26 19 26c7.2 0 13-5.8 13-13S26.2 0 19 0zM19 24C12.9 24 8 19.1 8 13S12.9 2 19 2 30 6.9 30 13 25.1 24 19 24z"/></svg></a>
<div id="dropdown-guides" class="nav-dropdown">
<a id="nav-dropdown-guides-icon-design-guide" href="free-icon-design-guide.html">Icon Design Guide</a>
<a id="nav-dropdown-guides-crafting-pixel-perfect-icons" href="crafting-pixel-perfect-icons-the-right-way.html">Crafting Pixel Perfect Icons – The Right Way!</a>
<a id="nav-dropdown-guides-build-your-dribbble-audience" href="build-your-dribbble-audience.html">Build your Dribbble audience</a>
</div>
<div id="search-bar" class="nav-dropdown">
<form id="search-form">
<input id="search-field" type="text" placeholder="Search ...">
</form>
</div>
</nav>
</header>
</body>
<script src="nav.js"></script>
</html>
Please note that since the top set in CSS for the div is originally 80px, if I remove the code for changing the top of the div, after scrolling down, I can't reach it if I am hovering over the anchor, before it disappears. That's why I was not able to tell whether the eventListener stopped working because I scrolled down, or because I changed the top of the div.

I figured out the problem. In my javascript, I was setting the height of each navAnchor to fit only the text of the anchor. That's why the dropdown disappeared before I could hover over it. So I increased the height to extend the anchors to reach the bottom of the navigation bar. (I increased the height from 23px to 39px)

Compounding Value within an object used to slide dot across the page incrementally

I am unable to get a variable to function properly as the translateX value within my object. I am wanting to make the dot scroll across the page each time the next button is clicked. My code is only able to move it back and forth for the first step.
I am new to the animation API, and I have already made this work with CSS transitions but I am trying to get a good handle on the API.
html:
<div class="progress__container">
<div class="progress__bar">
<div id="progress__fill" class="step1"></div>
<div class="circ" id="circ__1"></div>
<div class="circ" id="circ__2"></div>
<div class="circ" id="circ__3"></div>
<div class="circ" id="circ__4"></div>
<div id="progress__dot" class="prog__1"></div>
</div>
<div class="backBar"></div>
<div class="flexrow">
<span class="stepName">Account</span>
<span class="stepName">Frequency</span>
<span class="stepName">Amount</span>
<span class="stepName">Taxes</span>
</div>
<div class="button__container">
<button class="buttonStep" id="back">Back</button>
<button class="buttonStep is-active" id="next">Next</button>
</div>
</div>
js:
// give a starting value for the transformation
var startVal = 0;
// define the keyframes
var moveDot = [
{ transform: `translateX(${startVal}px)`},
{ transform: `translateX(${startVal + 190}px)`}
];
// definte the timing
var dotTiming = {
duration: 400,
fill: "forwards",
easing: 'ease-in',
}
// make the animation happen
var movingDot = document.getElementById("progress__dot").animate(
moveDot,
dotTiming
);
// pause the animation until called
movingDot.pause();
// on click fire the animation
document.getElementById('next').addEventListener('click', function() {
movingDot.playbackRate = 1;
if (startVal <= 380) {
movingDot.play();
startVal += 190;
}
});
document.getElementById('back').addEventListener('click', function() {
movingDot.playbackRate = -1;
if (startVal >= 0) {
movingDot.play();
startVal -= 190;
}
});
css:
#progress__fill {
height:2px;
position: absolute;
top: 7px;
left: 0;
background-color: darkred;
}
#progress__dot {
background-color: darkred;
color: #fff;
border-radius: 50%;
height: 8px;
width: 8px;
position: absolute;
text-align:center;
line-height: 8px;
padding: 6px;
top: 0;
font-size: 12px;
}
/* Static Bar Elements */
.progress__container {
width: 600px;
margin: 20px auto;
position: relative;
}
.backBar {
height:2px;
width:96%;
position: absolute;
top: 7px;
left: 2%;
background-color: lightgrey;
}
.progress__bar {
z-index: 100;
position: relative;
width: 96%;
margin: 0 auto;
}
.circ {
background-color: #fff;
border: 2px solid lightgrey;
border-radius: 50%;
height: 12px;
width: 12px;
display: inline-block;
}
#circ__2, #circ__3 {
margin-left: 30%
}
#circ__4 {
float: right;
}
.passed {
background-color: darkred;
border: 2px solid darkred;
}
.hide {
visibility: hidden
}
.flexrow {
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* Buttons */
.buttonStep {
background: grey;
color: #fff;
padding: 10px 25px;
border-radius: 10px;
font-size: 16px;
}
#back {
float: left;
}
#next {
float: right;
}
.is-active {
background: darkred;
}
The way I have it set up, I expect for the translateX values to increment or decrement depending on the click event listeners which would make the circle slide across the page. What is actually happening is that only the first step works. it will not go past the first stop point. If I log moveDot in the console it gives me the values that I am expecting, but it will only start/stop at 0 and 190. the back button functions the same way. link to fiddle

It is animated from and to the same place every time. Move the definition of moveDot into the event listener:
// give a starting value for the transformation
var startVal = 0;
// definte the timing
var dotTiming = {
duration: 400,
fill: "forwards",
easing: 'ease-in',
}
// on click fire the animation
document.getElementById('next').addEventListener('click', function() {
if (startVal > 380){return;}
// define the keyframes
var moveDot = [{transform: `translateX(${startVal}px)`},
{transform: `translateX(${startVal + 190}px)`}];
// make the animation happen
var movingDot = document.getElementById("progress__dot").animate(
moveDot,
dotTiming
);
movingDot.playbackRate = 1;
movingDot.play();
startVal += 190;
});
document.getElementById('back').addEventListener('click', function() {
movingDot.playbackRate = -1;
if (startVal >= 0) {
movingDot.play();
startVal -= 190;
}
});

Using jQuery / JavaScript to float element to right

Fiddle
Hello,
I found sticky sidebar jQuery script, but the fixed element (sidebar) floats to the left once I start scrolling down. I am trying to keep it on the right-hand side the whole time. Also, I am trying to get some spacing around sidebar once it starts scrolling, as now it's just stuck to the very top.
I trust it's a simple fix but JavaScript is like a dark forest to me, I tried to change couple things, tried to look online but can't seem to find the answers or I just don't know how to look for them so I apologise if this has been asked before.
$( document ).ready(function() {
console.log( "document ready!" );
var $sticky = $('.sticky');
var $stickyrStopper = $('.sticky-stopper');
if (!!$sticky.offset()) { // make sure ".sticky" element exists
var generalSidebarHeight = $sticky.innerHeight();
var stickyTop = $sticky.offset().top;
var stickOffset = 0;
var stickyStopperPosition = $stickyrStopper.offset().top;
var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
var diff = stopPoint + stickOffset;
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset });
} else {
$sticky.css({position: 'absolute', top: 'initial'});
}
});
}
});
.container {
width: 1000px;
float: left
}
.header {
clear: both;
margin-bottom: 10px;
border: 1px solid #000000;
height: 90px;
}
.sidebar {
float: right;
width: 350px;
border: 1px solid #000000;
}
.content {
float: right;
width: 640px;
border: 1px solid #000000;
height: 800px;
}
.footer {
clear: both;
margin-top: 10px;
border: 1px solid #000000;
height: 820px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
This is header
</div>
<div class="sidebar sticky">
This is side bar
</div>
<div class="content">
This is main content
</div>
<div class="footer">
<div class="sticky-stopper"></div>
This is my footer
</div>
</div>

I used the Sticky-Kit.js plugin. That worked for me. See below, it keeps your sidebar to the right the entire time and has the sticky effect you're after:
$(document).ready(function() {
console.log("document ready!");
$(".sidebar").stick_in_parent();
});
.container {
width: 1000px;
float: left
}
.header {
clear: both;
margin-bottom: 10px;
border: 1px solid #000000;
height: 90px;
}
.sidebar {
float: right;
width: 350px;
border: 1px solid #000000;
}
.content {
float: left;
width: 640px;
border: 1px solid #000000;
height: 800px;
}
.footer {
clear: both;
margin-top: 10px;
border: 1px solid #000000;
height: 820px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.js"></script>
<div class="container">
<div class="header">
This is header
</div>
<div class="sidebar sticky">
This is side bar
</div>
<div class="content">
This is main content
</div>
<div class="footer">
<div class="sticky-stopper"></div>
This is my footer
</div>
</div>

You can use JQuery's css() method to apply css on scroll to the element to achieve the desired effect.
Change the JavaScript as follows:
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff, right: '0px' });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset, right: '0px' , margin: '10px 10px 0px 0px'});
} else {
$sticky.css({position: 'absolute', top: 'initial', right: "0px", margin: '0px'});
}
A css property of right:0px is applied to the element on scroll, since it's position becomes aboslute on scroll.
margin: 10px 10px 0px 0px was also applied to the element to provide additional spacing around it when scrolling. This is then sent to margin:0px when the scroll stops.
You will also need to adjust the css of the content css class, if you do not want your side bar sitting on top of the content area.
.content {
width: 550px;
border: 1px solid #000000;
height: 800px;
}
Here is an updated fiddle demonstrating these changes.

Jquery animate() effect doesn't function well

When hover on the first and second element, some element will animate to the left, it works well if hovered with a normal speed, but will crashed if hovered too fast for some times
(the text won't show or the text won't move back to its original place when mouseoff, checkout the figures below).
Any suggestions would be appreciated.
1.text won't show
2.text won't move back to its original place
$(document).ready(function() {
var flag = false;
$(".tab-ico").hover(function() {
var f = $(this);
f.data('timeout', window.setTimeout(function() {
f.find(".tab-text").stop(true, true).animate({
left: "-=64"
}, 300, function() {
flag = true;
});
}, 300));
}, function() {
clearTimeout($(this).data("timeout"));
if (flag === true) {
$(this).find(".tab-text").stop(true, true).animate({
left: "+=64"
}, 300, function() {
flag = false;
});
}
});
});
.pfm-toolbar-wrap {
height: 100%;
position: fixed;
right: 0;
top: 0;
width: 35px;
z-index: 9990;
}
.pfm-tbar-tab-Spike {
position: relative;
width: 35px;
}
.pfm-toolbar-tabs {
border-right: 5px solid #7a6e6e;
height: 100%;
}
.p-tab div.tab-ico {
background: #7a6e6e;
}
.tab-text {
border-radius: 3px;
color: #fff;
height: 32px;
left: 0px;
line-height: 32px;
position: absolute;
text-align: center;
width: 70px;
padding-right: 5px;
z-index: -1;
background: #7a6e6e;
}
.tab-text a {
color: #fff;
display: block;
}
.p-tab {
left: 0;
margin-top: -100px;
position: absolute;
top: 50%;
width: 35px;
z-index: 9;
text-align: center;
}
.p-tab div.tab-ico:hover {
background: #e20531;
cursor: pointer;
}
.p-tab div.tab-ico:hover .tab-text {
background: #e20531;
}
.tab-ico {
width:35px;
height:35px;
margin-bottom:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="pfm-toolbar-wrap">
<div class="pfm-toolbar-tabs">
<div class="p-tab">
<div class="pfm-tbar-tab-Spike m_b15">
<div class="tab-ico cart"> <i class="cbl-icon"></i> <em class="tab-text"> text</em>
</div>
</div>
<div class="pfm-tbar-tab-group m_b15">
<div class="tab-ico "> <i class="cbl-icon"></i>
<em class="tab-text"> text2</em>
</div>
</div>
</div>
</div>
</div>

you can use css transition-delay property as follows:
transition-delay: 1s; /* delays for 1 second */
-webkit-transition-delay: 1s; /* for Safari & Chrome */
Find more info here.

I suggest that you use CSS transition, here are two links that will help you make that with less code and using CSS transition
https://css-tricks.com/almanac/properties/t/transition/
https://blog.alexmaccaw.com/css-transitions

News Ticker - auto change div with next and previous buttons

I am new to JQuery so please be gentle. I have a news ticker built up in html and css with JQuery activating the next and previous buttons. I am looking get the div's to auto play on load but still allow the user to use the navigation buttons. I seem to be able to get either the navigation or the auto play to work but not together. Any chance someone can help me out. I know I am missing something big but I can't seem to figure it out.
My code can be seen here -
http://jsfiddle.net/s8qotsj2/8/
HTML
<div id="myNewsticker">
<div id="newsNav">
<img src="images/back.png"><img src="images/next.png">
</div>
<div class="tickerlable">News:</div>
<div class="newsContent">
<div class="newsTicker active">School closed 12/12/15 - Snow Day - All Classes Closed</div>
<div class="newsTicker">Checkout our New Website.</div>
<div class="newsTicker">New Students Handbook Now Available.</div>
<div class="newsTicker">Resouces Links Have Been Added to the Navigation Bar</div>
</div>
</div>
CSS
#myNewsticker{
float: right;
margin-top: 20px;
margin-right: 8px;
width: 460px;
border-radius: 25px;
padding: 0 20px;
background: #851818;
color: white;
font-size: 14px;
font-family: calibri;
}
.tickerLable {
margin: 5px;
padding: 5px;
max-width: 38px;
}
#myNewsticker .newsTicker {
display: none;
}
#myNewsticker .newsTicker.active{
display: block;
}
.newsTicker {
margin-top: -32px;
padding: 5px;
max-width: 400px;
float: left;
margin-left: 60px;
}
#newsNav {
padding-top: 3px;
width: 51px;
float: right;
margin-right: 15px;
margin-top: 3px;
}
#prev img, #next img{
width: 25px; /***changes size of images height and width****/
}
Script
$(document).ready(function(){
var news = $(".newsTicker");
var newsIndex = -1;
function showNextNews() {
++newsIndex;
news.eq(newsIndex % news.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextNews);
}
showNextNews();
}) ();
$(function () {
$("#next").click(function () {
var activeDiv = $("div.active");
activeDiv.removeClass("active");
if (activeDiv.next().length === 0) {
$("div.newsTicker").eq(0).addClass("active").css("opacity", 0).animate({
opacity: 1
}, 800);
} else {
activeDiv.next().addClass("active").css("opacity", 0).animate({
opacity: 1
}, 800);
}
});
$("#prev").click(function () {
var activeDiv = $("div.active");
activeDiv.removeClass("active");
if (activeDiv.prev().length === 0) {
$("div.newsTicker").eq(-1).addClass("active").css("opacity", 0).animate({
opacity: 1
}, 800);
} else {
activeDiv.prev().addClass("active").css("opacity", 0).animate({
opacity: 1
}, 800);
}
});
});

function next_item() {
do some stuff here;
}
$(document).ready(function() {
//maybe wait 5 secs?
next_item();
}
$(".next_buttons").on('click', function() {
next_item();
//maybe disable the button, till next element is ready
}
Now add what you need to the first function