We Keep Coding

Images and text are not fading in and BG color of navbar not changing when scrolled down

This code was working properly before adding JS for fading in elements (images and text) for my service section. Now both the code are not working. Can you please help me out with both the problem
//NAVBAR
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if(document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
document.getElementById("navbar").style.background = "black" ;
}
else{
document.getElementById("navbar").style.background = "transparent";
}
}
After adding this JS for my fade in for the images the background color of navbar does not change when i scroll down.
Even this code is not working properly the images are not fading in as expected. Please check what is the mistake i have done
//SERVICES SECTION
const sliders = document.querySelectorAll(".slide-in");
const fader = documnet.querySelectorAll(".fade-in");
const appearOptions = { threshold: 10, rootMargin: "0px 0px -100px 0px" };
const appearOnScroll1 = new IntersectionObserver(
function(entries,appearOnScroll)
{
entries.forEach(entry=>{
if(!entry.isIntersecting){
return;
}
else{
entry.target.classList.add('appear');
appearOnScroll.unobserve(entry.target);
}
});
},
appearOptions;
fader.forEach(fader=>{
appearOnScroll.observe(fader);
});
sliders.forEach(slider=>{
appearOnScroll.observe(sliders);
});
);
This my CSS for service section
#service-container{
/* margin: 15px 43px; */
display: grid;
/* grid-template-columns: min-content 1fr; */
padding: 30px;
width: 96%;
height: 100%;
background-image: linear-gradient(to bottom right,rgb(255, 255, 255),rgb(226, 162,
194),rgb(196, 113, 154),rgb(248, 138, 193));
z-index: -1;
}
#service-container .h-primary2{
margin: 15px 43px;
padding: 50px;
font-family: 'Libre Baskerville', serif;
text-align: center;
font-weight:900;
}
#services{
font-family: 'Libre Baskerville', serif;
}
.columns img{
/* display: grid; */
width: 50%;
height: 50%;
/* margin-left: auto;
margin-right: auto; */
}
div #h-secondary{
text-align: center;
}
div .from-right{
/* display: grid; */
float: right;
text-align: center;
grid-column: 3/4;
transform: translateX(50%);
}
div .from-left{
/* display: grid; */
float: left;
text-align: center;
grid-column: 2/3;
transform: translateX(-50%);
}
.from-left, .from-right{
opacity: 250ms ease-in;
transform: 400ms ease-in;
opacity: 0;
}
.from-left .appear, .from-right .appear{
transform: translateX(0);
opacity: 1;
}
body{
margin: 0;
/* overflow: hidden; */
}
.fade-in{
opacity: 0;
transition: opacity 250ms ease-in;
}
.fade-in .appear{
opacity: 1;
}
```

after click on `Open Modal` button. why it's disappear?

after click on Open Modal button. it's disappear . i did not see anything wrong with my code.
Code Example - Scenario
let nrSanckbar = (function(){
const modalContent = `<div class="nr-modal-container" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>`;
document.addEventListener("click",function(e){
e.preventDefault();
e.stopPropagation()
const modal = document.querySelector(".nr-modal-container");
if(e.target.classList.contains('close')){
console.log(e.target)
modal.classList.remove("visible");
modal.remove();
return false;
}
})
const shwoModal = function(){
document.body.innerHTML = modalContent;
const modal = document.querySelector(".nr-modal-container");
modal.classList.add("visible");
return false;
}
return {
deleteConfirm: function(data) {
shwoModal()
},
}
})();
document.addEventListener("click",function(e){
e.preventDefault();
e.stopPropagation()
if(e.target.classList.contains('open-modal-button')){
nrSanckbar.deleteConfirm()
}
})
.modal {
position: fixed;
z-index: 10;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
display: none;
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
border-radius: 5px;
box-shadow: 0 24px 38px 3px rgba(60, 75, 100, 0.14);
display:none;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.visible {
display: block;
}
.visible > .modal-content {
display: block;
-webkit-animation: scale .3s ease-out;
-moz-animation: scale .3s ease-out;
}
#-webkit-keyframes scale {
0% { opacity: 0; -webkit-transform: scale(1.3); }
100% { opacity: 1; -webkit-transform: scale(1); }
}
#-moz-keyframes scale{
0% { opacity: 0; -moz-transform: scale(1.3); }
100% { opacity: 1; -moz-transform: tscale(1);}
}
<button class="open-modal-button">Open Modal</button>

Your button is being removed due to document.body.innerHTML = modalContent; (as inner HTML contains the button)
You should be able to do something like document.body.innerHTML += modalContent;
Or: document.body.insertAdjacentHTML( 'beforeend', modalContent);

How do I make my arrow accordion display a downward pointing arrow when pressed?

I have created an accordion with an arrow that points right next to it, I would like the arrow to point downwards when clicked on. How would I accomplish this? Should I use images instead of the normal arrow or is it possible to just use the arrow in the way that I used it? Here is my code in jsfiddle: https://jsfiddle.net/homjt76L/2/
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
h1 {
text-align: center;
}
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.down {
margin-right: 50px;
float: left;
transform: rotate(45deg);
-webkit-transform: rotate(45);
}
.right {
margin-right: 50px;
float: left;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.collapsible {
color: black;
cursor: pointer;
padding: 18px;
width: 100%;
border: solid thin;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #555;
}
.collapsible:after {
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
<h1>FAQ</h1>
<button class="collapsible" data-toggle="">
<b>Questions and Answers</b><i class="arrow right"></i>
</button>
<div class="content">
<p>Lorem Ipsum...</p>
</div>

I would probably rename the right class to indicator and then just add this
.collapsible.active .indicator{
transform: rotate(45deg);
}
This would mean that you can remove the down class you've written
The indicator class would look like this if you wanted to add a small transition as well
.indicator {
margin-right: 50px;
float: left;
transform: rotate(-45deg);
transition: 0.2s ease transform;
}

Change icon className right to down on change of className.
Check here: https://jsfiddle.net/Dev024/t4fe6quL/2/
if(this.classList.contains("active"))
{
this.childNodes[1].className = "arrow right"
}
else
{
this.childNodes[1].className = "arrow down"
}

You can put a css like this :
.collapsible.active .right:{
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

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

How to morph a plus sign to a minus sign using CSS transition?

I want to create a toggle button that morphs its shape from a plus sign to a minus sign.
Using CSS only, without the use of pseudo-elements.
My desired effect is to have the vertical line in the "+" sign to shrink into the horizontal line.
I know it's possible but I'm not sure which is the best route to take. I was thinking of doing something with the height but I'm worried about the line-height of browsers changing its position in the element.
$('button').on("click", function(){
$(this).toggleClass('active');
});
button {
color: #ecf0f1;
background: #e74c3c;
width: 50px;
height: 50px;
border: 0;
font-size: 1.5em;
}
button span {
transition: all .75s ease-in-out;
}
button.active span {
/* Code to morph + to - */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button><span>+</span></button>

Because of the simplicity of the shapes, the easiest way is just to make the + and - with elements. Using pseudo elements would be the cleanest solution, but you can also just use a DOM element and have a slightly messier document structure.
With that in mind, the actual solution is straightforward. We use CSS to position elements to resemble the desired characters, and then "morph" between them by animating that position.
Take a look over the following code, and try to understand what each rule is accomplishing.
button {
color: #ecf0f1;
background: #e74c3c;
width: 50px;
height: 50px;
border: 0;
font-size: 1.5em;
position: relative;
}
button span {
position: absolute;
transition: 300ms;
background: white;
border-radius: 2px;
}
/* Create the "+" shape by positioning the spans absolutely */
button span:first-child {
top: 25%;
bottom: 25%;
width: 10%;
left: 45%;
}
button span:last-child {
left: 25%;
right: 25%;
height: 10%;
top: 45%;
}
/* Morph the shape when the button is hovered over */
button:hover span {
transform: rotate(90deg);
}
button:hover span:last-child {
left: 50%;
right: 50%;
}
<button>
<span></span>
<span></span>
</button>

Note : please stop editing the question making the answers incorrect
CSS solution
$('button').on("click", function(){
$(this).toggleClass('active');
});
button {
color: #ecf0f1;
background: #e74c3c;
width: 70px;
height: 70px;
position: relative;
font-size: 50px;
cursor: pointer;
border: 0;
outline: 0;
padding: 0
}
.plus,
.minus {
color: #fff;
padding: 10px;
width: 70px;
height: 70px;
line-height: 50px;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
box-sizing: border-box;
transition: .5s all ease-out;
}
.plus {
opacity: 1;
transform: rotate(0deg);
}
button.active .plus {
opacity: 0;
transform: rotate(90deg);
}
.minus {
opacity: 0;
transform: rotate(-90deg);
}
button.active .minus {
opacity: 1;
transform: rotate(0deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<button>
<span class="plus"><i class="fa fa-plus"></i></span>
<span class="minus"><i class="fa fa-minus"></i></span>
</button>
A (old) CSS solution:
Using pseudo element ::before with content property
$('button').on("click", function() {
$(this).toggleClass('active');
});
button {
color: #ecf0f1;
background: #e74c3c;
width: 50px;
height: 50px;
border: 0;
font-size: 1.5em;
}
button span {
transition: all .75s ease-in-out;
position:relative
}
button span::before {
content:"+"
}
button.active span::before {
content:"-"
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button><span></span></button>
A (old) jquery Solution:
no need for span, you can do this using text() with a if statement in jquery
$('button').on("click", function() {
$(this).toggleClass('active');
$(this).text() == "+" ? $(this).text("-") : $(this).text("+");
});
button {
color: #ecf0f1;
background: #e74c3c;
width: 50px;
height: 50px;
border: 0;
font-size: 1.5em;
transition: all .75s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>+</button>

Ah my bad I've overlooked that OP doesn't want to use any pseudo
elements. But the big advantage with pseudo elements would be that you have less HTML Code and a cleaner structure.
It's also a different morphing animation as OP wants but maybe someone else can use this.
So if you don't mind I'll let my suggestion there.
Maybe something like this?
HTML
<div class="button"></div>
CSS
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
background: #343838;
}
.button {
position: absolute;
width: 55px;
height: 55px;
background: #70975B;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
border-radius: 50%;
cursor: pointer;
z-index: 100;
transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1);
}
.button:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 2px;
width: 50%;
background: white;
}
.button:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 50%;
width: 2px;
background: white;
}
.button.clicked {
transform: translate(-50%, -50%) rotate(360deg);
background: #CC2A41;
}
.button.clicked:before {
width: 0;
}
jQuery
$(".button").click(function() {
$(this).toggleClass("clicked");
});
And here a working example
http://codepen.io/svelts/pen/LkyZoZ

try this
$('button').on("click", function() {
var $this = $(this);
$this.toggleClass('toggle');
if ($this.hasClass('toggle')) {
$this.text('+');
} else {
$this.text('-');
}
});
button {
color: #ecf0f1;
background: #e74c3c;
width: 50px;
height: 50px;
border: 0;
font-size: 1.5em;
transition: all .75s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="toggle">+</button>