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`);

How to have my css navbar be proportional to the page

My (epic) navbar gets messed up when the window is to small, how can I have it shrink proportionally to the page? I've tried a few things but it just shrinks the text size, but the text still ends up longer than the width of the window, with the title in the top left overlapping onto the text.
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<header id="nav-wrapper">
<nav id="nav">
<div class="nav left">
<span class="gradient skew">
<h1 class="logo un-skew">RiseUpOnario.ca</h1>
</span>
<button id="menu" class="btn-nav"><span class="fas fa-bars"></span></button>
</div>
<div class="nav right">
<span class="nav-link-span"><span class="u-nav">Home</span></span>
<span class="nav-link-span"><span class="u-nav">Blog</span></span>
<span class="nav-link-span"><span class="u-nav">Join</span></span>
<span class="nav-link-span"><span class="u-nav">Donate</span></span>
<span class="nav-link-span"><span class="u-nav">MPP Finder</span></span>
<span class="nav-link-span"><span class="u-nav">About Us</span></span>
<span class="nav-link-span"><span class="u-nav">Contact</span></span>
</div>
</nav>
</header>
<main>
<section id="home">
</section>
<section id="blog">
</section>
<section id="join">
</section>
<section id="donate">
</section>
<section id="mppfinder">
</section>
<section id="aboutus">
</section>
<section id="contact">
</section>
</main>
</body>
</html>
<style>
/*-------------Reset-------------*/
button {
background: none;
box-shadow: none;
border: none;
cursor: pointer;
}
button:focus,
input:focus {
outline: 0;
}
html {
scroll-behavior: smooth;
}
/*-------------Layout-------------*/
body {
line-height: 1.5em;
padding: 0;
margin: 0;
}
section {
height: 100vh;
}
#home {
background-color: #ddd;
}
#blog {
background-color: #aaa;
}
#join {
background-color: #888;
}
#donate {
background-color: #666;
}
#mppfinder {
background-color: #ddd;
}
#aboutus {
background-color: #aaa;
}
#contact {
background-color: #666;
}
/*-------------Helpers-------------*/
.skew {
transform: skew(-20deg);
}
.un-skew {
transform: skew(20deg);
}
/*-------------Nav-------------*/
#nav-wrapper {
overflow: hidden;
width: 100%;
margin: 0 auto;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
#nav {
background-color: #fff;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
font-family: "Saira Semi Condensed", sans-serif;
height: 4em;
overflow: hidden;
}
#nav.nav-visible {
height: 100%;
overflow: auto;
}
.nav {
display: flex;
height: 4em;
line-height: 4em;
flex-grow: 1;
}
.nav-link,
.logo {
padding: 0 1em;
}
span.gradient {
background: #e9b1a7;
background: -webkit-linear-gradient(45deg, #e9b1a7, #cf0a0a);
background: linear-gradient(45deg, #e9b1a7, #cf0a0a);
padding: 0 1em;
position: relative;
right: 1em;
margin-right: auto;
}
span.gradient:hover {
animation-name: logo-hover;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.17, 0.57, 0.31, 0.85);
}
h1.logo {
font-weight: 300;
font-size: 1.75em;
line-height: 0.75em;
color: #fff;
}
h1.logo a, a:active, a:hover, a:visited {
text-decoration: none;
color: #fff;
}
.nav-link {
text-transform: uppercase;
text-align: center;
border-top: 0.5px solid #ddd;
}
a:link, a:visited, a:active {
text-decoration: none;
color: #e9b1a7;
}
a:hover {
text-decoration: underline;
}
.right {
display: flex;
flex-direction: column;
height: 100%;
}
.btn-nav {
color: #e9b1a7;
padding-left: 2em;
padding-right: 2em;
}
#media (min-width: 800px) {
#nav-wrapper {
overflow: hidden;
}
#nav {
overflow: hidden;
flex-direction: row;
}
.nav-link {
border-top: none;
}
.right {
overflow: hidden;
flex-direction: row;
justify-content: flex-end;
position: relative;
left: 1.5em;
height: auto;
}
.btn-nav {
display: none;
}
.nav a:link.active, a:visited.active, a:active.active {
background: #e9b1a7;
background: -webkit-linear-gradient(45deg, #e9b1a7, #cf0a0a);
background: linear-gradient(45deg, #e9b1a7, #cf0a0a);
color: #fff;
}
.nav-link-span {
transform: skew(20deg);
display: inline-block;
}
.nav-link {
transform: skew(-20deg);
color: #777;
text-decoration: none;
}
.nav-link:last-child {
padding-right: 3em;
}
a:hover.nav-link:not(.active) {
color: #444;
background: #ddd;
background: linear-gradient(45deg, #fff, #ddd);
}
}
#keyframes logo-hover {
20% {
padding-right: 0em;
}
100% {
padding-right: 5em;
}
}
</style>
<script>
var util = {
mobileMenu() {
$("#nav").toggleClass("nav-visible");
},
windowResize() {
if ($(window).width() > 800) {
$("#nav").removeClass("nav-visible");
}
},
scrollEvent() {
var scrollPosition = $(document).scrollTop();
$.each(util.scrollMenuIds, function (i) {
var link = util.scrollMenuIds[i],
container = $(link).attr("href"),
containerOffset = $(container).offset().top,
containerHeight = $(container).outerHeight(),
containerBottom = containerOffset + containerHeight;
if (
scrollPosition < containerBottom - 20 &&
scrollPosition >= containerOffset - 20
) {
$(link).addClass("active");
} else {
$(link).removeClass("active");
}
});
}
};
$(document).ready(function () {
util.scrollMenuIds = $("a.nav-link[href]");
$("#menu").click(util.mobileMenu);
$(window).resize(util.windowResize);
$(document).scroll(util.scrollEvent);
});
</script>

Try implementing % in your stylesheet for fonts and divs!
For example, if you want a line of text or a container within a container to adjust in size when the parent container shrinks, you can have your interior elements set to something like
elementName{ max-width: 75%}
See if that helps with some of the elements inside the navWrapper.

Set the navbar's height to 10vh or less/more. ##vh = ##% of display height. There is also 100vw. = ##% of display width.

How do I do this to the progress bar?(html-css)

How do I do this to the progress bar like below:
.detail-load {
height: 42px;
border: 1px solid #A2B2C5;
padding: 1px;
border-radius: 10px;
}
.detail-load > .detail-loading {
background: #904BFF;
height: 100%;
border-radius: 10px;
}
.detail-load-text {
position: absolute;
right: 0;
left: 0;
top: 10px;
text-align: center;
color: #fff;
font-weight: 600;
font-size: 17px;
}
<div class="detail-pop-item">
<div class="detail-load">
<div class="detail-loading" style="width: 80%;"></div>
</div>
<div class="detail-load-text">80%</div>
</div>
The progress bar I want to make is like the image I shared above. Can anyone help?

You could use the clip-path property to achieve your desired result. I included some dummy javascript in the snippet to simulate loading.
You can set --loading-color-primary and --loading-color-secondary to any two colors you'd like.
const front = document.getElementById('progress-front');
const back = document.getElementById('progress-back');
let progress = 0;
setInterval(() => {
front.style.webkitClipPath = `inset(0 0 0 ${progress}%)`;
if(++progress >= 100) {
progress = 0;
}
front.innerHTML = back.innerHTML = progress + "%";
}, 50);
:root {
--loading-color-primary: purple;
--loading-color-secondary: white;
}
.progress {
position: relative;
display: flex;
font-size: 50px;
border: 2px solid var(--loading-color-primary);
overflow: hidden;
width: 100%;
}
.back {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background: var(--loading-color-primary);
color: var(--loading-color-secondary);
}
.front {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
left: 0;
width: 100%;
right: 0;
top: 0;
bottom: 0;
background: var(--loading-color-secondary);
color: var(--loading-color-primary);
}
<div class="progress">
<div class="back" id="progress-back">0%</div>
<div class="front" id="progress-front">0%</div>
</div>

This is an example of what you want to accomplish:
https://codepen.io/robinrendle/pen/wKqmbW
<div class="wrapper">
<div class="bg">
<div class="el"></div>
</div>
</div>
$loadingTime: 10s;
$color: rgb(255,0,0);
body {
background-color: white;
}
#keyframes loading {
0% {
width: 0;
} 100% {
width: 100%;
}
}
#keyframes percentage {
#for $i from 1 through 100 {
$percentage: $i + "%";
#{$percentage} {
content: $percentage;
}
}
}
.bg {
background-color: $color;
animation: loading $loadingTime linear infinite;
}
.el{
color: $color;
width: 200px;
border: 1px solid $color;
&:after {
padding-left: 20px;
content: "0%";
display: block;
text-align: center;
font-size: 50px;
padding: 10px 20px;
color: rgb(0,255,255);
mix-blend-mode: difference;
animation: percentage $loadingTime linear infinite;
}
}
html {
height: 100%;
background-color: white;
font-family: 'PT Sans', sans-serif;
font-weight: bold;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
The key item here is the mix-blend-mode property which defines how an element's content should blend with its background.
You can learn more about it here and here.

I used a different approach, where you can set a CSS variable to control the length of the loading progress as well as displaying the value.
Because I used a pseudo-class to display the value, I needed to use a number hack, using counter-reset on the ::after pseudo-element.
As for having the dark text turn white, you can use mix-blend-mode: color-dodge. It's not perfect, as you can see, but perhaps good enough?
.detail-load {
height: 42px;
border: 1px solid #A2B2C5;
padding: 1px;
border-radius: 10px;
}
.detail-load > .detail-loading {
background: #904BFF;
height: 100%;
border-radius: 10px;
/* ADDED */
width: calc(var(--progress) * 1%);
position: relative;
}
.detail-load > .detail-loading::after {
font-weight: 600;
font-size: 17px;
/* ADDED */
counter-reset: number-hack var(--progress);
content: counter(number-hack)"%";
position: absolute;
right: 0px;
top: 50%;
transform: translate(50%, -50%);
color: #d2b6ff;
mix-blend-mode: color-dodge;
}
.detail-load > .detail-loading.grey-text::after {
color: #b5b5b5;
}
<div class="detail-pop-item">
<div class="detail-load">
<div class="detail-loading" style="--progress: 30"></div>
</div>
</div>
<div class="detail-pop-item">
<div class="detail-load">
<div class="grey-text detail-loading" style="--progress: 60"></div>
</div>
</div>

Following Veselin's answer, you just need to change the color attributes as follows:
$color: rgb(255,0,0); becomes $color: rgb(255,0,255);
and
.el{
...
&:after {
...
color: rgb(0,255,255);
}
}
becomes
.el{
...
&:after {
...
color: rgb(0,255,0);
}
}
The result is:
$loadingTime: 10s;
$color: rgb(255,0,255);
body {
background-color: white;
}
#keyframes loading {
0% {
width: 0;
} 100% {
width: 100%;
}
}
#keyframes percentage {
#for $i from 1 through 100 {
$percentage: $i + "%";
#{$percentage} {
content: $percentage;
}
}
}
.bg {
background-color: $color;
animation: loading $loadingTime linear infinite;
}
.el{
color: $color;
width: 200px;
border: 1px solid $color;
&:after {
padding-left: 20px;
content: "0%";
display: block;
text-align: center;
font-size: 50px;
padding: 10px 20px;
color: rgb(0,255,0);
mix-blend-mode: difference;
animation: percentage $loadingTime linear infinite;
}
}
html {
height: 100%;
background-color: white;
font-family: 'PT Sans', sans-serif;
font-weight: bold;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}

Clicking on an element is triggering all the same class instead of the one clicked on

I am creating a sort-of popup menu that is specific to each .smallCatalogBlock div. The circle you see under the title is the trigger. The issue I am having is that if you click on the blue circle, both popup menus fadeIn, when it should only be that specific one.
The same applies to the popup title. It uses only the first .smallCatalogBlock information, opposed to the one clicked on.
Does anyone know how I can leave this in the dynamic setup I am going for, while populating the specific information for the one clicked on?
var catalogName = $('.smallCatalogBlock').data('fill-specs');
//Filling Circle
$('.catalogSmallCircle').html(
'<div class="catalogSmallCircleIn" data-catalog-name=' + catalogName + '><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
//Circle Expand
$('.catalogSmallCircleIn').on('click', function() {
// old $('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
$(this).closest('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
// old $('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//$(this).closest('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
$('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
$('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
$('.catalogSmallCircle').removeClass('rectangle').find('.catalogSmallCircleIn').fadeIn();
$('.catalogCircleExpand').hide().removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0, 0, 0, .9);
border: 2px solid #FFF;
webkit-transition: all 1s;
transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right, #225DB8, #4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s;
transition: all 1s;
transform: translate(-45%, -45%);
-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
<div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>

You have to loop over the smallCatalogBlocks and build them individually, otherwise they will all have the same catalog name. And then in your event handlers, you have to make all your selectors be contextual lookups.
I ran the modified code, and it appears to be building the circles correctly, however for some reason the text is not showing up on them, even though the text is there if you inspect the element. Didn't figure that part out, but this should show you at least how to do the contextual logic and the looping to build the elements.
$('.smallCatalogBlock').each(function(index, catalogBlock){
var catalogName = $(catalogBlock).data('fill-specs');
console.log(catalogName);
//Filling Circle
$('.catalogSmallCircle', catalogBlock).html(
'<div class="catalogSmallCircleIn" data-catalog-name='+ catalogName +'><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
});
//Circle Expand
$('.catalogSmallCircleIn').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.addClass('rectangle')
.find('.catalogSmallCircleIn')
.hide();
$smallCircle
.find('.catalogCircleExpand')
.fadeIn(100)
.addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
console.log(catalogChoice);
$smallCircle.find('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.removeClass('rectangle')
.find('.catalogSmallCircleIn')
.fadeIn();
$smallCircle
.find('.catalogCircleExpand')
.hide()
.removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0,0,0,.9);
border: 2px solid #FFF;
webkit-transition: all 1s;transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right,#225DB8,#4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s; transition: all 1s;transform: translate(-45%, -45%);-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div><div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>

Removing content from createRange in javascript

Long time lurker and first time poster here.
I have a javascript code that selects and copies rich text to the clipboard from a specific div.
It works well but there is an extra line break that I want to eliminate.
The relevant part of my code:
var textToSelect = document.getElementById('answerText');
range = document.createRange();
range.selectNode(textToSelect[0]);
window.getSelection().addRange(range);
document.execCommand("copy");
alert(range);
In div answerText the text I have is:
answer text
There aren't any spaces or line breaks before/after the text. The code results in the following message.
This extra line break is then also copied to the clipboard.
How can I remove the extra line break from the selection? I also prefer to check that the content I'm removing from my range is indeed a line break to make it safe to use.

Try to switch over to selectNodeContents() instead of selectNode() - so range.selectNodeContents(textToSelect[0]);.
I ran into the same problem trying to whip up some script to copy hex colors when the color block was clicked.
Here is the snippet to play with (remove contents and you'll see the extra line - at least in chrome):
$(function() {
//copys inner html of target div.
//event button
var copyBtn = $('.copy-btn');
copyBtn.on('click', function(event) {
var $this = $(this);
//find the element that has the text you want.
var content = $this.prev('.meta--value');
//creates new range object and sets text as boundaries.
var range = document.createRange();
range.selectNodeContents(content[0]);
window.getSelection().addRange(range);
try {
// Now that we've selected the text, execute the copy command
var successful = document.execCommand('copy');
/*var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copy email command was ' + msg);*/
//handle success
$(this).after('<span class="success"></span>');
setTimeout(function() {
$('.success').addClass('show');
setTimeout(function() {
$('.success').fadeOut(function() {
$('.success').remove();
});
}, 1000);
}, 0);
} catch (err) {
//console.log('Oops, unable to copy');
}
//clear out range for next event.
window.getSelection().removeAllRanges();
});
});
#import url(https://fonts.googleapis.com/css?family=Roboto:300,900|Merriweather);
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background-color: #efefef;
color: #131313;
}
p {
font-weight: 600;
font-size: 20px;
margin-top: 1.5vw;
}
.swatch-wrapper {
width: 90vw;
margin: 0 auto;
}
#media (max-width: 320px) {
.swatch-wrapper {
width: 100%;
margin: 0;
}
}
.swatch-wrapper .swatch {
display: inline-block;
vertical-align: top;
margin: 0 3px 10px 0;
width: 22.5vw;
max-width: 200px;
background-color: #e2e2e2;
box-shadow: 0 1px 0 0 rgba(19, 19, 19, 0.1);
-webkit-transition: box-shadow 150ms, -webkit-transform 150ms;
transition: box-shadow 150ms, -webkit-transform 150ms;
transition: transform 150ms, box-shadow 150ms;
transition: transform 150ms, box-shadow 150ms, -webkit-transform 150ms;
}
#media (max-width: 320px) {
.swatch-wrapper .swatch {
display: block;
width: 90%;
margin: 0 auto 1.5vh;
max-width: none;
}
}
.swatch-wrapper .swatch:hover {
-webkit-transform: scale(1.02);
transform: scale(1.02);
box-shadow: 0px 3px 10px -5px rgba(19, 19, 19, 0.3);
}
.swatch-wrapper .swatch--color {
margin: 0;
padding: 0;
width: 100%;
height: 5vw;
max-height: 133px;
}
.swatch-wrapper .swatch--meta {
padding: 0.375vw;
font-family: monospace;
}
#media (max-width: 320px) {
.swatch-wrapper .swatch--meta {
padding: .75vh .75vh 1vh;
}
}
.swatch-wrapper .meta + .meta {
margin-top: 0.375vw;
}
.swatch-wrapper .meta:before {
color: #939393;
}
.swatch-wrapper .meta--name:before {
content: "name: ";
}
.swatch-wrapper .meta--aliases:before {
content: 'aliases: ';
}
.swatch-wrapper .meta--value:before {
content: 'value: ';
}
/**
functional classes / none display stuff
*/
.cf:before, .cf:after {
content: ' ';
display: table;
}
.cf:after {
clear: both;
}
.swatch {
position: relative;
-webkit-transition: all .1s ease;
transition: all .1s ease;
}
.swatch:hover {
background-color: #EFEFEF;
}
.swatch:hover:after {
bottom: 0;
}
.swatch:hover .copy-btn {
opacity: .5;
right: 0;
}
.copy-btn {
position: absolute;
opacity: 0;
cursor: pointer;
top: 0;
text-align: center;
-webkit-transition: all .2s ease;
transition: all .2s ease;
right: -100%;
bottom: 0;
padding: 15px;
background-color: #636363;
color: #fff;
text-transform: uppercase;
font-size: 10px;
font-weight: 600;
border: none;
outline: none;
width: 100%;
}
.copy-btn:before {
content: "";
width: 10px;
height: 100%;
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
background-position-y: center;
}
.copy-btn:after {
content: "click to copy";
display: inline-block;
vertical-align: middle;
}
.success {
position: absolute;
right: 0;
cursor: pointer;
width: 100%;
top: 0;
font-size: 12px;
text-align: center;
font-style: normal;
font-weight: 600;
bottom: 0;
padding: 15px;
background-color: #000;
color: #fff;
text-transform: uppercase;
-webkit-transition: all .1s ease;
transition: all .1s ease;
font-weight: 600;
-webkit-transform: scale(0.1);
transform: scale(0.1);
border-radius: 100%;
}
.success:before {
content: "";
width: 10px;
height: 100%;
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
background-position-y: center;
}
.success:after {
content: "Copied!";
display: inline-block;
vertical-align: middle;
}
.success.show {
-webkit-transform: scale(1);
transform: scale(1);
border-radius: 0;
}
.p-success:hover {
border: 2px solid #E93937;
}
.p-success:before {
content: "Copied";
background: #E93937;
width: 92px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<article class="swatch-wrapper cf">
<footnote>Hover and Click to Copy Hex</footnote>
<br>
<section class="swatch">
<figure class="swatch--color" style="background-color:#fff;"></figure>
<figcaption class="swatch--meta">
<div class="meta meta--name">Millennium</div>
<div class="meta meta--value">#ffffff</div>
<button class="copy-btn"></button>
</figcaption>
</section>
</article>
When you use selectNode(), the startContainer, endContainer, and commonAncestorContainer are all equal to the parent node of the node that was passed in; startOffset is equal to the index of the given node within the parent's childNodes collection, whereas endOffset is equal to the startOffset plus one (because only one node is selected).
When you use selectNodeContents(), startContainer, endContainer, and commonAncestorContainer are equal to the node that was passed in; startOffset is equal to 0; endOffset is equal to the number of child nodes (node.childNodes.length).
From: http://www.wrox.com/WileyCDA/Section/JavaScript-DOM-Ranges.id-292301.html