We Keep Coding

Changing Header/Navbar Elements on Scroll

Currently struggling to add the .is-active class to my header via javascript. If you add "is-active" to the header classes it works well. But I can't seem to work it out in javascript.
I just want the class to be added as soon as you start scrolling, and then removed when returning to the top.
Appreciate all the help!
HTML:
<header class="header">
<div class="header-nav flex container">
<figure class="header-logo">
<a href="#">
<img class="header-logo-light" src="images/logoWhite.png" alt="San Miguel Services Logo">
<img class="header-logo-dark" src="images/logoDark.png" alt="San Miguel Services Logo">
</a>
</figure>
<nav class="header-menu flex">
<div class="header-menu-li">
WELCOME
SERVICES
ABOUT
PORTFOLIO
CONTACT
</div>
</nav>
<div class="header-btn">
<button href="#" class="button header-btn">REQUEST A QUOTE</button>
</div>
</div>
</header>
CSS:
.header {
position: fixed;
z-index: 1;
width: 100vw;
line-height: 18px;
}
.header .header-logo-dark {
opacity: 0;
display: none;
}
.header .header-logo-light {
opacity: 1;
display: block;
}
.header.is-active .header-logo-dark {
opacity: 1;
display: block;
}
.header.is-active .header-logo-light {
opacity: 0;
display: none;
}
.header.is-active .header-menu-li a {
color: $darkBlue;
&::before {
background: linear-gradient(to right, $mediumGreen, $lightGreen);
}
}
.header.is-active .header-btn button {
background: $mediumGreen;
color: $white;
transition: 300ms ease-in-out;
&:hover {
box-shadow: inset 0 0 0 2px $darkBlue;
color: $darkBlue;
background: transparent;
}
}
.header.is-active {
background: $white;
}
.header-nav {
padding: 20px 5.5%;
position: relative;
justify-content: space-between;
margin: auto;
}
.header-logo {
position: relative;
a img {
height: 46px;
}
}
.header-menu {
align-items: center;
}
.header-menu-li {
a {
position: relative;
margin: 0 0.625rem;
font-weight: 500;
font-size: $font-sm;
color: $white;
transition: color 300ms ease-in-out;
&::before {
content: "";
display: block;
position: absolute;
height: 5px;
background: $white;
left: 0;
right: 0;
bottom: -33px;
opacity: 0;
transition: opacity 300ms ease-in-out;
}
&:hover {
opacity: 0.95;
&::before {
opacity: 1;
}
}
}
}
.header-btn {
height: 46px;
font-size: $font-sm;
font-weight: 500;
button {
background: transparent;
border: 1px solid $white;
transition: 200ms ease-in-out;
&:hover {
background: $white;
color: $darkBlue;
}
}
}

Try this code:
window.addEventListener("scroll", function(){
var header = document.querySelector(".header");
header.classList.toggle("is-active", window.scrollY > 0);
})

Try to use more semantic HTML, this will help you in building the site.
<div class="menu">
<ul>
<li>Home</li>
</ul>
</div>
<section id="home">
<div class="wrapper">
</div>
</section>
You can also add some initial CSS settings to help you build your site, like :root, * {}, etc...
If you still don't know what a :root is, look it up, this will make it a lot easier.
I left some example code.
/* GENERAL */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
:root {
font-size: 62.5%; /* 1rem = 10px */
}
html {
scroll-behavior: smooth;
}
html,
body {
width: 100%;
height: 100%;
}
body {
font-family: " ";
font-size: 1.6rem;
text-align: center;
overflow: overlay;
background-color: var(--name-var);
}
.wrapper {
width: min(50rem, 100%);
margin-inline: auto;
padding-inline: 2.4rem;
}
window.addEventListener('scroll', onScroll)
onScroll()
function onScroll() {
showNavOnScroll ();
showBackToTopButtonOnScroll();
activateMenuAtCurrentSection(home);
}
function activateMenuAtCurrentSection(section) {
const targetLine = scrollY + innerHeight / 2
// check if the section has passed the line
// what data will I need?
const sectionTop = section.offsetTop
const sectionHeight = section.offsetHeight
const sectionTopReachOrPassedTargetLine = targetLine >= sectionTop
// check if the base is below the target line
// what data will I need?
const sectionEndAst = sectionTop + sectionHeight
const sectionEndPassedTargetLine = sectionEndAst <= targetLine
console.log('Did the session bottom go over the line?', sectionEndPassedTargetLine)
// section boundaries
const sectionBoundaries =
sectionTopReachOrPassedTargetLine && !sectionEndPassedTargetLine
const sectionId = section.getAttribute('id')
const menuElement = document.querySelector(`.menu a[href*=${sectionId}]`)
menuElement.classList.remove('active')
if (sectionBoundaries) {
menuElement.classList.add('active')
}
}
// This is so that when you scroll down your navigation bar goes out
function showNavOnScroll() {
if (scrollY > 0) {
navigation.classList.add('scroll');
} else {
navigation.classList.remove('scroll');
}
}
// Will make them appear smooth
ScrollReveal({
origin:'top',
distance: '30px',
duration: 700,
}).reveal(`
#home`);

why is font-awesome icon displaying the icon too small and off center?

;
(function($) {
class Popup {
constructor(options, elem) {
var self = this;
var defaultPopupMenu = `<div>
<i id="faInfo" class="fa fa-info"></i>
<i id="faQuest" class="fa fa-question"></i>
<i id="faLink" class="fa fa-external-link"></i>
</div>`;
this.defaultOptions = {
content: defaultPopupMenu, //this option MUST be set when new options passed through, or only the default menu will show
position: "top", //where the popup will show by default- top. Other options: right, bottom, or left
theme: "popupTheme", //Menu Element theme. Defaults to popupTheme, but custom class can be set instead
style: "", //Popup Menu Style. Default no style, will revert to default colours. Other options: Blue, Red, Green, Custom
animation: "standard", //Standard animation by default. Other options: flip, grow, bounce
event: "click", //Default set to "click", can also be set to hover
hideOnClick: true, //When true, clicking off the menu closes it. When false, only clicking on the menu closes it
zIndex: 100, //Individual z-index can be set for each menu for layering if necessary
//function to handle actions when clicking on popup menu icons. MUST be set when options are passed through or an error or default menu actions will occur
popItemClick: function(globalthis) {
//Default actions
var twentyEightSpaces = `
`;
var twentyFourSpaces = `
`;
var eightSpaces = ` `;
var sixteenSpaces = `
`;
var content;
var container = $(event.target).attr("id");
switch (container) {
case "faInfo":
content = {
type: "info",
heading: "Information",
text: `<p>To set a new menu when calling .popup() on an element,
you must set a variable that holds a string with the html for that menu, then
pass that variable through as the "content" part of the options. For example: </p>
<p>var myMenu = '<div>\ <br />
${twentyEightSpaces}<a href="#''><i id="faInfo" class="fa fa-info"></i></a>\<br />
${twentyFourSpaces}</div>'; </p>
<p>would create a menu with one item, and just add more '<a>' tags with icons inside the '<div>' tags to add more menu items. </p>
<p>Then add it to the content when calling the popup: </p>
<p>$("#myPopUp").popup({ <br />
${eightSpaces}content: myMenu, <br />
${eightSpaces}popItemClick(globalthis) { <br />
${sixteenSpaces}...new actions here... <br />
${eightSpaces}} <br />
});</p>
<p>You must set new actions in the "popItemClick" function for your menu
in the options you pass or it will throw an error.</p>`
}
globalthis.alertBox(content);
break;
case "faQuest":
content = {
type: "info",
heading: "Question",
text: `<p>Why is this being shown?</p>
<p>Because you need to set a popup menu of your own (and the popItemClick() function) or you get this default menu.</p>
<p>If you set the popup menu but don't change the popItemClick() function, you will get an error.</p>
<p>Click the "i" button for more info.</p>`
}
globalthis.alertBox(content);
break;
case "faLink":
window.open("http://example.com/");
break;
default:
content = {
type: "danger",
heading: "Error",
text: `<p>Error! You have set a new menu without changing the 'popItemClick' function.
The 'popItemClick' function must be set to new menu actions.</p>`
}
globalthis.alertBox(content);
}
}
}
this.elem = elem;
this.$elem = $(elem);
this.options = $.extend({}, this.defaultOptions, options);
if (!this.$elem.hasClass(this.options.theme)) {
this.$elem.addClass(this.options.theme);
}
this.init();
}
init() {
this.popup = $('<div class="pop-cont" />')
.addClass('pop-' + this.options.position)
.addClass('popupTheme' + this.options.style)
.append('<div class="pop-items" />')
.appendTo('body').css("opacity", 0).hide();
this.setContent();
this.setTriggers();
}
setContent() {
var self = this;
var location = this.popup.find(".pop-items");
var content;
if ((this.options.position == 'top') || (this.options.position == 'bottom')) {
content = $(this.options.content).find("a").addClass("pop-item");
location.html(content);
this.popup.find("i").first().addClass("leftBorder");
this.popup.find("i").last().addClass("rightBorder");
} else if ((this.options.position == 'left') || (this.options.position == 'right')) {
content = $(this.options.content).find("a").addClass("pop-item").addClass('item-side');
location.html(content);
this.popup.find("i").first().addClass("topBorder");
this.popup.find("i").last().addClass("bottomBorder");
}
//popItemClick callback****************************************
location.find('.pop-item').on('click', function(event) {
event.preventDefault();
self.options.popItemClick.call(this, self);
});
}
setTriggers() {
var self = this;
if (this.options.event === 'click') {
this.$elem.on('click', function(event) {
event.preventDefault();
if (self.$elem.hasClass('pressed')) {
self.pophide();
} else {
self.popshow();
}
});
}
if (this.options.event === 'hover') {
this.$elem.on('mouseenter', function(event) {
setTimeout(function() {
self.popshow();
self.popup = $(self.popup[0]);
}, 250);
});
$(this.popup).on('mouseleave', function(event) {
setTimeout(function() {
self.pophide();
}, 1000);
});
}
if (this.options.hideOnClick === true) {
$('html').on('click.popup', function(event) {
if (event.target != self.elem && self.$elem.has(event.target).length === 0 &&
self.popup.has(event.target).length === 0 && self.popup.is(":visible")) {
self.pophide();
}
});
}
}
pophide() {
var self = this;
var animation = {
opacity: 0
};
this.$elem.removeClass('pressed');
switch (this.options.position) {
case 'top':
animation.top = '+=20';
break;
case 'left':
animation.left = '+=20';
break;
case 'right':
animation.left = '-=20';
break;
case 'bottom':
animation.top = '-=20';
break;
}
this.popup.animate(animation, 200, function() {
self.popup.hide();
});
}
popshow() {
this.$elem.addClass('pressed');
this.setPosition();
this.popup.show().css({
opacity: 1
}).addClass('animate-' + this.options.animation);
}
setPosition() {
var self = this;
this.coords = this.$elem.offset();
var x = this.coords.left;
var y = this.coords.top;
var popWidth = this.popup.width();
var popHeight = this.popup.height();
var adjLeft = popWidth / 2;
var adjTop = popHeight / 2;
this.testy = $('<div class="test" />')
.css({
display: 'inline-block',
margin: '0px',
padding: '0px'
})
.appendTo('body');
var measure = this.$elem.clone().css({
padding: "0px",
margin: "0px"
});
var loc = this.testy;
loc.html(measure);
var textWidth = this.testy.width();
var textHeight = this.testy.height();
this.testy.remove();
var adjMenuWidth = textWidth / 2;
var adjMenuHeight = textHeight / 2;
var up = y - (popHeight + 7);
var down = y + textHeight;
if (this.popup.hasClass('pop-top')) {
this.popup.css({
top: up + "px",
left: (x - adjLeft + adjMenuWidth + 5) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
if (this.popup.hasClass('pop-bottom')) {
this.popup.css({
top: (down + 7) + "px",
left: (x - adjLeft + adjMenuWidth + 5) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
if (this.popup.hasClass('pop-left')) {
this.popup.css({
top: (y - adjTop + adjMenuHeight + 5) + "px",
left: (x - popWidth - 2) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
if (this.popup.hasClass('pop-right')) {
this.popup.css({
top: (y - adjTop + adjMenuHeight + 5) + "px",
left: (x + textWidth + 12) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
}
alertBox(content) {
var self = this;
var myAlert = `<div id="alertBox" class="alert">
<div class="alert-content">
<div class="alert-header">
<h2></h2>
</div>
<div class="alert-body"></div>
<div class="alert-footer">
<button class="alert-close">OK</button>
</div>
</div>
</div>`;
$('body').append(myAlert);
this.alert = $('#alertBox');
this.header = this.alert.find('div.alert-header');
this.heading = this.header.find('h2');
this.alertBody = this.alert.find('div.alert-body');
this.footer = this.alert.find('div.alert-footer');
this.close = this.footer.find('button.alert-close');
this.heading.append(content.heading);
this.alertBody.append(content.text);
switch (content.type) {
case "info":
this.header.addClass("info");
this.footer.addClass("info");
this.close.addClass("info");
break;
case "success":
this.header.addClass("success");
this.footer.addClass("success");
this.close.addClass("success");
break;
case "danger":
this.header.addClass("danger");
this.footer.addClass("danger");
this.close.addClass("danger");
break;
case "warning":
this.header.addClass("warning");
this.footer.addClass("warning");
this.close.addClass("warning");
break;
default:
break;
}
this.alert.show();
var closeBtn = $("button.alert-close");
closeBtn.on("click", function() {
self.alert.remove();
});
$(document).on("click", function(event) {
event.preventDefault();
if (event.target == self.alert[0]) {
self.alert.remove();
}
});
}
};
//Set $.fn.popup so it returns an instance of the Popup class when called*******************************
$.fn.popup = function(options) {
return this.each(function() {
var popobject = new Popup(options, this);
});
};
}(jQuery));
/*jshint multistr: true */
//this is a sample .js file that shows how you might set up the popup menus
;
(function($) {
$(document).ready(function() {
$('#defaultTest').popup();
});
}(jQuery));
/*Default theme**************/
.popupTheme {
background-color: #333;
background-size: 100% 100%;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 0;
position: relative;
box-shadow: 5px 5px 3px #888;
z-index: 1;
float: left;
margin: 5px;
cursor: pointer;
}
.popupTheme i,
.popupThemeRed i,
.popupThemeBlue i,
.popupThemeGreen i,
.popupThemeCustom i {
width: 20px;
height: 20px;
font-size: 18px;
color: #fff;
display: block;
background-color: transparent;
padding: 10px;
background-size: 100% 100%;
cursor: pointer;
}
.popupTheme i:hover {
background-color: #4d4d4d;
}
.pop-cont.pop-top::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -7px;
border-width: 7px;
border-style: solid;
border-color: #333 transparent transparent transparent;
z-index: 100;
}
.pop-cont.pop-bottom::before {
content: "";
position: absolute;
top: -14px;
left: 50%;
margin-left: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent transparent #333 transparent;
z-index: 100;
}
.pop-cont.pop-left::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent transparent transparent #333;
z-index: 100;
}
.pop-cont.pop-right::before {
content: "";
position: absolute;
top: 50%;
left: -14px;
margin-top: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent #333 transparent transparent;
z-index: 100;
}
.pop-cont {
margin: auto;
position: relative;
display: block;
cursor: pointer;
border-radius: 6px;
box-shadow: 5px 5px 3px #888;
}
.pop-cont,
.pop-item,
.popupTheme {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/*Individual menu item*/
.pop-item {
height: 100%;
display: block;
width: 20px;
height: 20px;
text-align: center;
padding: 10px;
text-decoration: none;
float: left;
}
.item-side {
float: none !important;
}
.pop-item i {
margin: -10px 0 0 -10px;
}
.pop-top {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
}
.pop-bottom {
position: absolute;
top: 0;
left: 50%;
margin-left: -5px;
}
.pop-left {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -7px;
}
.pop-right {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -7px;
}
.animate-standard {
animation: animateStandard 0.3s 1 ease;
-webkit-animation: animateStandard 0.3s 1 ease;
}
#-webkit-keyframes animateStandard {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
#keyframes animateStandard {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
.animate-grow {
animation: animateGrow 0.4s 1 ease;
-webkit-animation: animateGrow 0.4s 1 ease;
}
#-webkit-keyframes animateGrow {
0% {
transform: scale(0) translateY(40px);
opacity: 0;
}
70% {
transform: scale(1.5) translate(0px);
}
100% {
transform: scale(1) translate(0px);
opacity: 1;
}
}
#keyframes animateGrow {
0% {
transform: scale(0) translateY(40px);
opacity: 0;
}
70% {
transform: scale(1.5) translate(0px);
}
100% {
transform: scale(1) translate(0px);
opacity: 1;
}
}
.animate-flip {
animation: animateFlip 0.4s 1 ease;
-webkit-animation: animateFlip 0.4s 1 ease;
}
#-webkit-keyframes animateFlip {
from {
transform: rotate3d(2, 2, 2, 180deg);
opacity: 0;
}
to {
transform: rotate3d(0, 0, 0, 0deg);
opacity: 1;
}
}
#keyframes animateFlip {
from {
transform: rotate3d(2, 2, 2, 180deg);
opacity: 0;
}
to {
transform: rotate3d(0, 0, 0, 0deg);
opacity: 1;
}
}
.leftBorder {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.rightBorder {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.bottomBorder {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.topBorder {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.hidden {
display: none !important;
}
.clear {
clear: both;
}
/* The Alert Box (background) */
.alert {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1001;
/* Sit on top */
padding-top: 250px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.8);
/* Black w/ opacity */
}
.alert-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
border-radius: 6px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
max-width: 700px;
min-width: 300px;
/*width settings for different browsers. Note that these won't work at all for IE and versions of Edge before v79*/
width: fit-content;
/*works in chrome and opera*/
width: -moz-fit-content;
/*works for firefox */
width: -webkit-fit-content;
/*works for Edge v79 and up*/
width: -ms-fit-content;
width: -o-fit-content;
}
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
.alert-header,
.alert-header.info {
padding: 2px 16px;
background-color: #02baf2;
color: #fff;
border-radius: 5px 5px 0px 0px;
text-align: center;
}
.alert-header.success {
background-color: #00cc1b;
}
.alert-header.danger {
background-color: #ff0000;
}
.alert-header.warning {
background-color: #f7931e;
}
.alert-body {
padding: 2px 16px;
text-align: left;
font-size: 18px;
font-weight: bold;
color: #000;
min-height: 40px;
}
.alert-footer,
.alert-footer.info {
padding: 15px 16px;
background-color: #02baf2;
color: #fff;
border-radius: 0px 0px 5px 5px;
text-align: center;
}
.alert-footer.success {
background-color: #00cc1b;
}
.alert-footer.danger {
background-color: #ff0000;
}
.alert-footer.warning {
background-color: #f7931e;
}
.alert-close,
.alert-close.info {
padding: 5px 15px;
border-radius: 3px;
border: 0;
background-color: #fff;
color: #02baf2;
font-weight: bold;
box-shadow: 5px 5px 10px #666;
}
.alert-close.success {
color: #00cc1b;
}
.alert-close.danger {
color: #ff0000;
}
.alert-close.warning {
color: #f7931e;
}
.alert-close:hover {
color: #000;
text-decoration: none;
cursor: pointer;
}
.alert-close:focus {
outline: none;
}
body {
font-family: Helvetica, sans-serif;
}
.displayBox {
background-color: #efefef;
padding: 0px 0px 30px 0px;
display: inline-block;
width: 100%;
}
.header {
text-align: center;
font-size: 12px;
border-bottom: 1px solid #fff;
width: 100%;
color: #fff;
background-color: #130e5a;
}
.header h1 {
margin: 0px;
padding: 5px 0px;
}
div.icon-box-top {
margin: 50px 0px 25px 0px;
display: block;
float: left;
clear: both;
}
div.icon-box {
margin: 25px 0px 25px 0px;
display: block;
float: left;
clear: both;
}
p.icon-text,
p.menuText {
display: block;
margin-left: 45px;
margin-bottom: 0px;
float: left;
}
p.menuText {
margin-left: 20px !important;
margin-top: 0px;
}
.textPopup {
/*When attaching popups to text menus, style text menu separately*/
display: block;
font-size: 28px;
font-weight: bold;
color: #130e5a;
margin: 0px 0px 0px 75px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
float: left;
z-index: 1;
}
p.textPopup.pressed {
color: #02baf2 !important;
}
div#myPopUp,
div#myPopUp2,
div#myPopUp3,
div#myPopUp4 {
margin-left: 75px;
display: inline-block;
}
i.swIcon {
font-size: 208px !important;
margin: 10px;
}
text-decoration: none;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="icon-box-top">
<div id="defaultTest" style="margin-left: 75px">
<i class="fa fa-cog leftBorder rightBorder"></i>
</div>
</div>
I have an example I'm working from which works fine. When I duplicate that code in my app, the icon looks too small and off center.
Here is how it is supposed to look, per example:
Here is how it looks when I enter the same code:
It is smaller and the cog is off center.
Here is the example's html:
<div class="icon-box-top">
<div id="defaultTest" style="margin-left: 75px">
<i class="fa fa-cog leftBorder rightBorder"></i>
</div>
</div>
Here is my html:
<div class="icon-box-top">
<div id="defaultTest" style="margin-left: 75px">
<i class="fa fa-cog leftBorder rightBorder"></i>
</div>
</div>
Here are the example's dependencies:
<link rel="stylesheet" type="text/css" href="styles/Popup-plugin.css">
<link rel="stylesheet" type="text/css" href="styles/Example.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- necessary for the "draggable" ui -->
<script src="scripts/Popup-plugin.js"></script>
<script src="scripts/Example.js"></script>
Here are my dependencies:
<link rel="stylesheet" type="text/css" href="css/Popup-plugin.css">
<link rel="stylesheet" type="text/css" href="css/Example.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- necessary for the "draggable" ui -->
<script src="js/Popup-plugin.js"></script>
<script src="js/Example.js"></script>
The only difference that I can see is he stores his javascript in scripts folder and mine is in js folder. And he stores his css in styles folder whereas mine is in css folder.
The javascript is the same too:
$('#defaultTest').popup();
Any ideas?

I finally found the problem. There was a bootstrap css library that was interfering with the Popup-plugin css. But now my bootstrap tabs don't work and I'll have to spend additional time looking at different versions of it, or replacing the tabs with something else. I figured there was a css conflict somewhere but it took me all day to find it. This has happened to me before and it is a painful and time-consuming process to isolate the problem and fix it. If anyone has suggestions of tools or techniques for speeding up this process, please leave comments below for everyone reading this to benefit.

Trying to set value for Progress Circle

Is there a way I can hard code a number into the code instead of having "Goals completed: " and the progress bar still complete based on percentage? I do not want the users to see "Goals Completed" or have a input bar where they enter a number. I want to do all of that behind the scenes.
What I am really trying to do is get rid of the whole "Goals Completed: (input box)" prompt. So that I, for example, can just hard code: goals = 69 and then the progress circle reacts and shows 60% in the middle and 69 of 115 goals completed AND the green circle on the outside matches that. I do not want the user to be able to enter anywhere how many goals were completed or see a input prompt. I want to only be able to modify the number of goals completed behind the scenes in the JS code.
Here is my current code:
document.querySelector('.goals').addEventListener('change', function() {
var goals = parseInt(this.value);
var circle = document.querySelector('circle');
var percentdiv = document.querySelector('.percent');
var completed = document.querySelector('.completed');
completed.innerHTML = goals;
var totaldiv = document.querySelector('.total');
var total = totaldiv.innerHTML;
var pc = goals * 100 / total;
var r = circle.getAttribute('r').replace('%', '') * percentdiv.clientWidth / 100; //actual radius of the circle
var c = Math.PI * (r * 2); //circumference is 2*pi*r
if (isNaN(goals)) {
pc = 100;
} else if (pc < 0) {
pc = 0;
} else if (pc > 100) {
pc = 100;
}
document.querySelector('.number h2').innerHTML = Math.floor(pc) + '<span>%</span>';
var length = pc * c / 100;
circle.style.strokeDasharray = length + ' ' + (c - length);
circle.style.strokeWidth = (length > 0) ? '5%' : 0;
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#progress-bar {
position: absolute;
left: 50%;
top: 55%;
transform: translate(-51%, -50%);
width: 40%;
}
.container {
position: relative;
width: 100%;
display: flex;
justify-content: space-around;
}
.container .card {
position: relative;
width: 400px;
display: flex;
justify-content: center;
align-items: center;
height: 400px;
border-radius: 4px;
text-align: center;
overflow: hidden;
transition: 0.5s;
}
.container .card:before {
content: '';
position: absolute;
top: 0;
left: -50%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.03);
pointer-events: none;
z-index: 1;
}
.percent {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
border-color: transparent;
border-width: 0;
border-style: none;
rbox-shadow: inset 0 0 50px #000;
background-image: radial-gradient(#444 0%, #222 70%, transparent 70%, transparent 100%);
rbackground: #222;
z-index: 1000;
}
.percent .number {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.percent .number h2 {
color: #777;
font-weight: 700;
font-size: 40px;
transition: 0.5s;
}
.card:hover .percent .number h2 {
color: #fff;
font-size: 60px;
}
.percent .number h2 span {
font-size: 24px;
color: #777;
transition: 0.5s;
}
.card:hover .percent .number h2 span {
color: #fff;
}
.text {
position: relative;
color: #777;
margin-top: 40px;
font-weight: 700;
font-size: 18px;
letter-spacing: 1px;
text-transform: uppercase;
transition: 0.5s;
}
svg {
width: 100%;
height: 100%;
z-index: 1000;
}
svg circle {
fill: none;
stroke-width: 0;
stroke-linecap: round;
stroke: #00ff43;
}
<div class="container">
<div class="card">
<div class="box">
<div class="percent">
<svg>
<circle cx="50%" cy="50%" r="47.5%"></circle>
</svg>
<div class="number">
<h2>0<span>%</span></h2>
</div>
</div>
<h2 class="text"><span class="completed">0</span> of <span class="total">115</span> Goals Completed</h2>
</div>
</div>
</div>
Goals completed: <input class="goals" type='number' />

Rather than having your logic for updating the circle stored in the event handler for the input, have it as a separate function which you can then call with any number, e.g. setGoals(50) would update the circle to say 50 of 115 goals completed and 43%.
You can then optionally include the input box to change the displayed value in the circle, or just call setGoals(<some number here>) anywhere in your code.
This gives you the code snippet:
function setGoals(goals) {
const circle = document.querySelector('circle');
const percentdiv = document.querySelector('.percent');
const completed = document.querySelector('.completed');
completed.innerHTML = goals;
const totaldiv = document.querySelector('.total');
const total = totaldiv.innerHTML;
let pc = goals * 100 / total;
const r = circle.getAttribute('r').replace('%', '') * percentdiv.clientWidth / 100; //actual radius of the circle
const c = Math.PI * (r * 2); //circumference is 2*pi*r
if (isNaN(goals)) {
pc = 100;
} else if (pc < 0) {
pc = 0;
} else if (pc > 100) {
pc = 100;
}
document.querySelector('.number h2').innerHTML = Math.floor(pc) + '<span>%</span>';
const length = pc * c / 100;
circle.style.strokeDasharray = length + ' ' + (c - length);
circle.style.strokeWidth = (length > 0) ? '5%' : 0;
}
// For testing purposes, set up the input box to edit the number of displayed goals
document.querySelector('.goals').addEventListener('change', (e) => {
const goals = parseInt(e.target.value);
setGoals(goals);
});
// On page load, manually set the goals to 50 for demonstration purposes
setGoals(50);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#progress-bar {
position: absolute;
left: 50%;
top: 55%;
transform: translate(-51%, -50%);
width: 40%;
}
.container {
position: relative;
width: 100%;
display: flex;
justify-content: space-around;
}
.container .card {
position: relative;
width: 400px;
display: flex;
justify-content: center;
align-items: center;
height: 400px;
border-radius: 4px;
text-align: center;
overflow: hidden;
transition: 0.5s;
}
.container .card:before {
content: '';
position: absolute;
top: 0;
left: -50%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.03);
pointer-events: none;
z-index: 1;
}
.percent {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
border-color: transparent;
border-width: 0;
border-style: none;
rbox-shadow: inset 0 0 50px #000;
background-image: radial-gradient(#444 0%, #222 70%, transparent 70%, transparent 100%);
rbackground: #222;
z-index: 1000;
}
.percent .number {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.percent .number h2 {
color: #777;
font-weight: 700;
font-size: 40px;
transition: 0.5s;
}
.card:hover .percent .number h2 {
color: #fff;
font-size: 60px;
}
.percent .number h2 span {
font-size: 24px;
color: #777;
transition: 0.5s;
}
.card:hover .percent .number h2 span {
color: #fff;
}
.text {
position: relative;
color: #777;
margin-top: 40px;
font-weight: 700;
font-size: 18px;
letter-spacing: 1px;
text-transform: uppercase;
transition: 0.5s;
}
svg {
width: 100%;
height: 100%;
z-index: 1000;
}
svg circle {
fill: none;
stroke-width: 0;
stroke-linecap: round;
stroke: #00ff43;
}
<div class="container">
<div class="card">
<div class="box">
<div class="percent">
<svg>
<circle cx="50%" cy="50%" r="47.5%"></circle>
</svg>
<div class="number">
<h2>0<span>%</span></h2>
</div>
</div>
<h2 class="text"><span class="completed">0</span> of <span class="total">115</span> Goals Completed</h2>
</div>
</div>
</div>
Goals completed: <input class="goals" type='number' />
...It's a little difficult to test here on Stack Overflow, but if you call setGoals(50) (or another number) then it'll update the displayed goals in the circle. I added the line setGoals(50) to the above code snippet as an example to show 50 goals on page load.

Keep right-alignment after changing to fixed-position by scroll

I've got a function on a drop-down button which when scrolled past it, it changes position to fixed so that it's always visible. Although, my problem is when it changes to position:fixed, it's usually aligned to the right, but it changes position to the left. How can I make it so that it stays in place? I can't use any fixed "right" value, as I need this to work on mobile version as well(width of parent container varies). Check my jsFiddle https://jsfiddle.net/ramisrour/2asco9n1/6/
Also, the .dropContainer doesn't need height or width, I just set it there for the fiddle, so you can test with the scrolling.
<div class="dropContainer">
<div class="dropDwn">
<div class="dropToggle">Viktig informasjon! Les her <i class="bouncer"></i></div>
<div class="dropContentBox">
<div class="dropTxt">
Vær oppmerksom på at Huawei P40-serien og Mate Xs ikke har Google Mobile Services (GMS) installert (Du kan derfor ikke laste ned apper direkte fra Google Play Butikken). Istedenfor har den AppGallery, Huaweis egen offisielle appbutikk.
</br>Du kan bruke AppGallery til å lete etter, laste ned, håndtere og dele mobilapper.
</div>
</div>
<div class="acceptCta"><span class="acceptCtaTxt">Jeg har lest og forstått </span><i class="arroww"></i></div>
</div>
</div>
.dropContainer{
position: relative;
box-sizing: border-box;
}
.dropDwn {
font-family: inherit;
background-color: #fff;
color: #333;
border: solid 1px #333;
position: relative;
text-align: center;
display: block;
z-index: 9999;
cursor: pointer;
padding: 5px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
transition: all 0.5s ease;
font-size: 16px;
width: 250px;
box-sizing: border-box;
height: 30px;
overflow: hidden;
float: right;
}
.dropDwn.open {
height: 280px;
width: 320px;
cursor: default;
background-color: #000E52;
color: #fff;
}
.dropTxt{
margin: 10px;
}
.bouncer {
position: relative;
border: solid #333;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transition: all 0.5s ease;
animation: bouncer 2s infinite;
}
.dropDwn.open .bouncer {
transform: rotate(225deg);
border-color: #fff;
}
.dropContentBox {
margin-top: 10px;
display: inline-block;
color: #fff;
transition: all 0.5s ease;
text-align: center;
}
.acceptCta {
display: block;
position: relative;
cursor: pointer;
text-align: center;
margin: 0 auto;
background-color: #7CBD2B;
color: #333;
height: 35px;
width: 220px;
font-size: 14px;
font-weight: 600;
padding: 10px 25px;
box-sizing: border-box;
border-radius: 3px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
transition: all 0.5s ease;
z-index: 10;
}
.acceptCta:hover {
background-color: #88D41B;
padding: 9px 24px;
}
.acceptCtaTxt {
display: inline-block;
float: left;
vertical-align: middle;
position: relative;
}
.arroww {
border: solid #333;
border-width: 0 3px 3px 0;
display: inline-block;
box-sizing: border-box;
padding: 3px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transition: all 0.5s ease;
}
.acceptCta:hover .arroww {
/*padding: 6px 2px;
transform: rotate(-315deg);*/
}
#keyframes bouncer {
0% {
bottom: 0px;
}
20% {
bottom: 7px;
}
40% {
bottom: 0px;
}
60% {
bottom: 7px;
}
80% {
bottom: 0px;
}
100% {
bottom: 0px;
}
}
// Open/close
$(document).ready(function() {
$('.dropToggle').click(function() {
$(this).parent().addClass("open");
});
setTimeout(function() {
$('.acceptCta').click(function() {
//This needed
var $this = $(this);
var $container = $('.dropDwn');
var $arrow = $('.arroww');
$arrow.css("transform", "rotate(-315deg)");
$arrow.css("padding", "6px 2px");
setTimeout(function() {
$this.parent().removeClass("open");
}, 600);
setTimeout(function() {
$container.css("opacity", "0");
$container.css("right", "-1000px");
}, 1100);
setTimeout(function() {
$container.css("display", "none");
}, 1600);
});
})
});
// Hide if src image is in viewport, otherwise show
$(document).ready(function() {
var topOfOthDiv = $("[alt='Guide for installasjon av apper']").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > topOfOthDiv + 200) {
$(".dropDwn").css("right", "-1000px");
$(".dropDwn").css("opacity", "0");
} else {
$(".dropDwn").css("opacity", "1");
}
});
});
// Stick button when scrolling past it
$(document).ready(function() {
var topOfOthDiv2 = $('.dropDwn').offset().top;
var drop = $('.dropDwn');
$(window).scroll(function() {
if ($(window).scrollTop() > topOfOthDiv2 + 20) {
drop.css("position", "fixed");
} else {
drop.css("position", "relative");
}
});
});
It's the bottom jQuery function which makes it stick by scrolling.

you have to add right value when you apply fixed position. in simalr way you can add top value too.
Update below js and also the yo
if ($(window).scrollTop() > topOfOthDiv2 + 20) {
drop.css("position", "fixed");
drop.css("right", "10px");
} else {
drop.css("position", "relative");
drop.css("right", "0px");
}

I solved this by using flex. In case anybody needs help with this here's what I did:
Max-width: 1280px; on the container, because it never gets bigger than 1280px. Added display: flex; and justify-content: flex-end; so the child element would always sit at the end of the parent element, even in fixed position.
Also added some margin and top values to make the transition from absolute to fixed more smoothly, but that might differ for you as this suited my situation.
.dropContainer{
display: flex;
max-width: 1280px;
justify-content: flex-end;
position: relative;
box-sizing: border-box;
}
.dropDwn {
font-family: inherit;
background-color: #fff;
color: #333;
border: solid 1px #333;
position: absolute;
text-align: center;
display: block;
z-index: 9999;
cursor: pointer;
padding: 5px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
transition: all 0.5s ease;
font-size: 16px;
width: 250px;
box-sizing: border-box;
height: 30px;
overflow: hidden;
float: right;
margin-right: 10px;
}
// Hide if src image is in viewport, show if not
$(document).ready(function() {
var topOfOthDiv2 = $('.dropDwn').offset().top;
var drop = $('.dropDwn');
var cont = $('.dropContainer');
$(window).scroll(function() {
if ($(window).scrollTop() > topOfOthDiv2 - 10) {
drop.css("position", "fixed");
drop.css("top", "10px");
} else {
drop.css("position", "absolute");
drop.css("top", "");
}
});
});

Prices wont show up

I made a program showing the price for BTC and i was going to make an chrome extension out of it.
But sadly, i wrote it in PHP. which google extensions does not support.
I looked up a script on Codepen.io to see if it will work at all,
and i found this one - https://codepen.io/magnificode/pen/KyMMOB?q=bitcoin+price+&limit=all&type=type-pens
JS file ->
const app = new Vue({
el: '.btc-badge',
data: {
btcUSD: '0.00',
upDown: 'up',
},
mounted() {
this.getInfo();
setInterval(()=> {
this.getInfo();
}, 1000*60);
},
methods: {
getInfo() {
axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => {
const oldPrice = this.btcUSD
const newPrice = parseFloat(response.data.bpi.USD.rate_float).toFixed(2)
if (newPrice > oldPrice) {
this.upDown = 'up'
} else {
this.upDown = 'down'
}
this.btcUSD = newPrice
});
}
},
});
CSS file ->
body,html {
height: 100%;
}
body {
-webkit-font-smoothing: antialiased;
background-image: linear-gradient(to right, #ece9e6, #ccc);
font-smoothing: antialiased;
align-items: center;
color: #fafafa;
display: flex;
font-family: "macha";
height: 100%;
justify-content: center;
}
.card {
align-items: center;
background-image: linear-gradient(to top right, #141e30, #243b55);
border-radius: .4em;
box-shadow: 0 0 66px rgba(#000, 0.3);
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
overflow: hidden;
padding: 1em;
position: relative;
width: 250px;
height: 300px;
z-index: 0;
&:after {
mix-blend-mode: overlay;
border: 1px solid #eee;
border-radius: .4em;
content: '';
height: calc(100% - 2em);
left: 0;
margin: 1em;
position: absolute;
top: 0;
width: calc(100% - 2em);
z-index: 1;
}
}
h1 {
letter-spacing: 0.05em;
margin: 0;
}
p {
margin: 0;
}
.up {
color: #42ffa8;
}
.down {
color: #ff0740;
&:after {
transform: rotate(180deg);
}
}
.up,
.down {
align-items: center;
display: flex;
&:after{
border-style: solid;
border-width: 0 5px 5px 5px;
border-color: transparent transparent currentColor transparent;
content: "";
height: 0;
margin-left: .5em;
margin-top: .1em;
width: 0;
}
}
svg {
bottom: -50%;
fill: #999;
left: -20%;
mix-blend-mode: overlay;
position: absolute;
transform: scaleX(-1);
width: 150%;
z-index: -1;
}
and the html file ->
try{Typekit.load({ async: true });}catch(e){}
<div class="btc-badge">
<div class="card">
<p>Current Bitcoin price</p>
<h1>${{ btcUSD }}</h1>
<p :class="upDown">{{upDown}}</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125"><path d="M50 30L30 40 10 10v80h80V50L70 60"/></svg>
</div>
</doesnt took the code and put it in a folder, uploaded it and i pressed the little icon for my app. but now i saw that the prices doesn't show up.
Does anyone of you have any idea as to why this is happening?
Thanks - Jonas.