We Keep Coding

How make Javascript code work for each element individually, to create multiple duplicates in HTML with same Javascript code

I have created a simple image carousel that I am using on my site.
It all works well until I only have one but as soon as I try to create a new one it doesn't work properly.
All I need is that all the image sliders I create are independent of each other.
Both of the sliders should work individually.
Any help would be very great.
Here is my code:
//current position
var pos = 0;
//number of slides
var totalSlides = $('.slider-wrap ul li').length;
//get the slide width
var sliderWidth = $('.slider-wrap').width();
$(document).ready(function(){
/*****************
BUILD THE SLIDER
*****************/
//set width to be 'x' times the number of slides
$('.slider-wrap ul.slider').width(sliderWidth*totalSlides);
//next slide
$('.next').click(function(){
slideRight();
});
//previous slide
$('.previous').click(function(){
slideLeft();
});
/*************************
//*> OPTIONAL SETTINGS
************************/
//automatic slider
var autoSlider = setInterval(slideRight, 3000);
//for each slide
$.each($('.slider-wrap ul li'), function() {
//set its color
var c = $(this).attr("data-color");
$(this).css("background",c);
//create a pagination
var li = document.createElement('li');
$('.pagination-wrap ul').append(li);
});
//counter
countSlides();
//pagination
pagination();
//hide/show controls/btns when hover
//pause automatic slide when hover
$('.slider-wrap').hover(
function(){ $(this).addClass('active'); clearInterval(autoSlider); },
function(){ $(this).removeClass('active'); autoSlider = setInterval(slideRight, 3000); }
);
});//DOCUMENT READY
/***********
SLIDE LEFT
************/
function slideLeft(){
pos--;
if(pos==-1){ pos = totalSlides-1; }
$('.slider-wrap ul.slider').css('left', -(sliderWidth*pos));
//*> optional
countSlides();
pagination();
}
/************
SLIDE RIGHT
*************/
function slideRight(){
pos++;
if(pos==totalSlides){ pos = 0; }
$('.slider-wrap ul.slider').css('left', -(sliderWidth*pos));
//*> optional
countSlides();
pagination();
}
/************************
//*> OPTIONAL SETTINGS
************************/
function countSlides(){
$('.counter').html(pos+1 + ' / ' + totalSlides);
}
function pagination(){
$('.pagination-wrap ul li').removeClass('active');
$('.pagination-wrap ul li:eq('+pos+')').addClass('active');
}
/*GLOBALS*/
* {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: #666;
}
a:hover {
color: #1bc1a3;
}
body,
hmtl {
background: #ecf0f1;
font-family: 'Anton', sans-serif;
}
.wrapper {
width: 600px;
margin: 50px auto;
height: 400px;
position: relative;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.1) 2px 2px 0px;
}
.slider-wrap {
width: 600px;
height: 400px;
position: relative;
overflow: hidden;
}
.slider-wrap ul.slider {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.slider-wrap ul.slider li {
float: left;
position: relative;
width: 600px;
height: 400px;
}
.slider-wrap ul.slider li > div {
position: absolute;
top: 20px;
left: 35px;
}
.slider-wrap ul.slider li > div h3 {
font-size: 36px;
text-transform: uppercase;
}
.slider-wrap ul.slider li > div span {
font-family: Neucha, Arial, sans serif;
font-size: 21px;
}
.slider-wrap ul.slider li i {
text-align: center;
line-height: 400px;
display: block;
width: 100%;
font-size: 90px;
}
.object-fit_contain {
object-fit: contain;
height: auto;
max-width: 600px;
}
/*btns*/
.btns {
position: absolute;
width: 50px;
height: 60px;
top: 50%;
margin-top: -25px;
line-height: 57px;
text-align: center;
cursor: pointer;
z-index: 100;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.next {
right: -1px;
margin-right: 200px;
}
.previous {
left: -1px;
margin-left: 200px;
}
.counter {}
.slider-wrap.active .next {
right: 0px;
}
.slider-wrap.active .previous {
left: 0px;
}
/*bar*/
.pagination-wrap {
min-width: 20px;
margin-top: 350px;
margin-left: auto;
margin-right: auto;
height: 15px;
position: relative;
text-align: center;
}
.pagination-wrap ul {
width: 100%;
}
.pagination-wrap ul li {
margin: 0 4px;
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #3ab8cb;
opacity: 0.5;
position: relative;
top: 0;
}
.pagination-wrap ul li.active {
width: 12px;
height: 12px;
top: 3px;
opacity: 1;
box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 0px;
}
/*Header*/
h1,
h2 {
text-shadow: none;
text-align: center;
}
h1 {
color: #666;
text-transform: uppercase;
font-size: 36px;
}
h2 {
color: #7f8c8d;
font-family: Neucha, Arial, sans serif;
font-size: 18px;
margin-bottom: 30px;
}
/*ANIMATION*/
.slider-wrap ul,
.pagination-wrap ul li {
-webkit-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
-moz-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
-o-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
-ms-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
transition: all 0.3s cubic-bezier(1, .01, .32, 1);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ########################### Slider 1 ##########################-->
<div class="slider-wrap">
<ul class="slider">
<li>
<img class="object-fit_contain" src="http://www.spiritanimal.info/wp-content/uploads/Lion-Spirit-Animal-1.jpg">
</li>
<li>
<img class="object-fit_contain" src="https://cdn.images.express.co.uk/img/dynamic/galleries/x701/156708.jpg">
</li>
</ul>
<!--controls-->
<div class="pagination-wrap">
<div class="btns next"><i class="fas fa-greater-than"></i></div>
<div class="counter"></div>
<div class="btns previous"><i class="fas fa-less-than"></i></div>
</div>
<!--controls-->
</div>
<!-- ########################### Slider 2 ##########################-->
<div class="slider-wrap">
<ul class="slider">
<li>
<img class="object-fit_contain" src="http://www.spiritanimal.info/wp-content/uploads/Lion-Spirit-Animal-1.jpg">
</li>
<li>
<img class="object-fit_contain" src="https://cdn.images.express.co.uk/img/dynamic/galleries/x701/156708.jpg">
</li>
</ul>
<!--controls-->
<div class="pagination-wrap">
<div class="btns next"><i class="fas fa-greater-than"></i></div>
<div class="counter"></div>
<div class="btns previous"><i class="fas fa-less-than"></i></div>
</div>
<!--controls-->
</div>

You have multiple elements with the same ID. You will need to update your code to work off of class and "closest" related items if you need multiples of these on a single page.
For example, where you click "previous", you might need to change to something like:
//previous slide
$('.previous').click(function(event){
slideLeft(event.target); // to pass the clicked 'previous' button to slideLeft()
});
Then in your slideLeft() function, find the slider by whichever one is ancestrally closest to the clicked button:
function slideLeft(target){
pos--;
if(pos==-1){ pos = totalSlides-1; }
$(target).closest('.slider').css('left', -(sliderWidth*pos)); // only line I changed in your example
//*> optional
countSlides();
pagination();
}
I did not run this fully but the concept of "know which one is clicked, then find what to update from there" is what you're going for I believe.

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>

CSS Navbar Transition is Smooth on Scroll Down but no Transition at all on Scroll Back Up

I am currently working on a website with a navigation bar at the top of the screen that is initially transparent when you first visit the site, but turns into a white bar with black text the moment you start scrolling down. It also shrinks a little. It has a really nice and smooth transition as it changes it's color and shrinks, but when you scroll back to the top of the page, there is no more smooth transition but rather an instant ugly transition. Actually the changing of the color back to transparent seems okay but the resize of the bar lacks the transition. I uploaded a GIF so you can see exactly what's the problem.
There is a second problem I would like to ask for. As you can see in the GIF, there is an underline animation on text hover, however, I cannot get it to work on the white navbar. I want that underline to become black, just like the text and shrink with the rest of the navbar.
Here is the GIF:
https://media.giphy.com/media/5jYbvzN9OzaVm3IRE6/giphy.gif
Also the CSS:
/* -=-=-=-=-= FONT IMPLEMENTATION =-=-=-=-=- */
#import url('https://fonts.googleapis.com/css?family=Quicksand:300|Roboto:100');
/* -=-=-=-= END FONT IMPLEMENTATION =-=-=-=- */
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Roboto",sans-serif;
font-weight: lighter;
}
header.index {
width: 100%;
height: 100vh;
background: url(../res/images/back.png) no-repeat 50% 50%;
background-size: cover;
}
header.page1 {
width: 100%;
height: 100vh;
background: url(../res/images/test.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
}
.logoimg {
position: fixed;
display: inline-block;
float: left;
width: 235px;
height:54px;
margin: 37px 80px;
transition: 0.5s ease-in-out;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
transition: 0.5s ease-in-out;
}
nav ul {
line-height: 100px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 50px;
transition: 0.5s ease-in-out;
}
nav ul li {
display: inline-block;
padding: 16px 20px;
transition: 0.5s ease-in-out;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 24px;
transition: 0.5s ease-in-out;
}
nav ul li a.current{
font-weight: 600;
}
nav.scrolled{
background: #fff;
min-height: 20px;
line-height: 40px;
transition: 0.5s ease-in-out;
}
nav.scrolled ul li a{
text-decoration: none;
color: #000;
font-size: 20px;
line-height: 40px;
transition: 0.5s ease-in-out;
}
nav.scrolled img{
width: 180px;
height: 41px;
margin: 27px 80px;
transition: 0.5s ease-in-out;
}
/* -=-=-=-=-= MENU ITEM HOVER ANIMATION =-=-=-=-=- */
.menu a {
transition: color 0.1s, background-color 0.1s;
}
.menu a {
position: relative;
display: block;
transition: color 0.1s,background-color 0.1s,padding 0.2s ease-in;
color: #fff;
}
.menu a::before {
content: '';
display: block;
position: absolute;
bottom: 24px;
left: 0;
height: 2px;
width: 100%;
background-color: #fff;
transform-origin: right top;
transform: scale(0, 1);
transition: color 0.1s,transform 0.2s ease-out;
}
.menu a:active::before {
background-color: #fff;
}
.menu a:hover::before, a:focus::before {
transform-origin: left top;
transform: scale(1, 1);
}
.menu.scrolled {
color: #000;
background-color:
}
/* -=-=-=-=-= END MENU ITEM HOVER ANIMATION =-=-=-=-=- */
And the JS:
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('scrolled');
}
else {
$('nav').removeClass('scrolled');
}
})
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop()> 2) {
$('.logo img').attr('src', 'res/logos/main.png');
}
if ($(this).scrollTop() < 2) {
$('.logo img').attr('src', 'res/logos/main_light.png');
}
});
});
And the important HTML:
<header class="index">
<nav class="navbar">
<div class="logo">
<a href="#">
<img class="logoimg" src="res/logos/main_light.png">
</a>
</div>
<div class="menu">
<ul>
<li><a class="current" href="index.html">Home</a></li>
<li>Company</li>
<li>Services</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
Note that .scrolled is the one that changes the navbar once you scrolled. May your road lead you to warm sands!

You're setting the transition for the a elements twice. First as .menu a and then as nav ul li a. The nav bar animates when scrolling up, but the transition lasts 0.1s, as declared for the selector .menu a.
You can either change .menu a to .menu nav ul li a or redesign your classes.
For the underline animation, just add the nav.scrolled selector to the classes you already have, for instance: nav.scrolled .menu a::before and change the background color. You will probably also need to re position the ::before element.

Animate div positioning rearrangement

I am building a simple push-down effect which affects the position of two containers. So far I have managed to achieve a near-desired effect using fixed positioning for the hidden container while changing its position to a relative for the opened state.
I want to apply a smooth transition to the blue main div, which is being pushed down by the hidden div with a class of .sub-header. How can I bypass the choppy rearrangement of the containers and is there a more elegant way of doing this instead of switching positioning on click? (e.g. fixed to a relative in this case)
Currently, when I switch the positioning from fixed to a relative as expected - there is a gap being produced, which is the .sub-header's height.
NOTE: The heights of the current divs are fixed values, but I need this to be able to handle dynamic changes in the .sub-header height.
NOTE: This should be achieved by adding a custom class, not using jQuery's nested effects like .slideToggle etc.
Here is the Fiddle.
And the simple jQuery function needed for the Fiddle share:
$('.trigger').click(function() {
$('.sub-header').toggleClass('opened');
}).stop();

Make position: relative; and do margin top for animating
$('.trigger').click(function() {
$('.sub-header').toggleClass('opened');
}).stop();
body {
font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
header,
.sub-header,
main {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-direction: column;
font-weight: bold;
text-transform: uppercase;
color: #fff;
transition: all .5s ease-in-out;
}
header {
height: 100px;
background: tomato;
z-index: 1000;
position: relative;
}
.sub-header {
height: 150px;
background: gainsboro;/*
transform: translateY(-200%);*/
margin-top:-150px;
left: 0;
right: 0;
z-index: 10;
position: relative;
}
.opened {/*
transform: translateY(0%);*/
margin-top:0;
}
main {
height: 250px;
background: deepskyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>Header content TRIGGER</header>
<div class="sub-header">Sub Header content</div>
<main>Main Content</main>
Update:-
As to get -100% you have make it float and set all width to 100%
$('.trigger').click(function() {
$('.sub-header').toggleClass('opened');
}).stop();
body {
font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
header,
.sub-header,
main {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-direction: column;
font-weight: bold;
text-transform: uppercase;
color: #fff;
transition: all .5s ease-in-out;
}
header {
width:100%;
height: 100px;
background: tomato;
z-index: 1000;
position: relative;
}
.sub-header {
height: 150px;
width:100%;
background: gainsboro;/*
transform: translateY(-200%);*/
margin-top:-100%;
left: 0;
right: 0;
z-index: 10;
float:left;
}
.opened {/*
transform: translateY(0%);*/
margin-top:0;
}
main {
width:100%;
height: 250px;
background: deepskyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>Header content TRIGGER</header>
<div class="sub-header">Sub Header content</div>
<main>Main Content</main>

Correct me if I misunderstood your question, but I guess there's much simpler approach to what you're trying to achieve. Try changing corresponding classes in your CSS code:
.sub-header {
background: gainsboro;
height: 0;
-webkit-transition: height .3s linear;
transition: height .3s linear;
}
.opened {
height: 150px;
}
Here's the fiddle. My approach does not cover all bases, as you can see there is still text visible in the hidden container, which is going to need some additional workaround in your js or css, but I guess it is simpler than yours, considering that your .sub-container has fixed height.
EDIT
For non fixed height, there is workaround in my approach:
.sub-header {
background: gainsboro;
height: auto;
max-height: 0px;
-webkit-transition: max-height .3s linear;
transition: max-height .3s linear;
}
.opened {
max-height: 400px;
}
but it still needs to be adjusted - when you set .opened's max-height to the lower value, transition is going to be slower. It is not perfect, thought it covers cases, where .sub-containers' heights are relatively similar.

please check this out. we can use margin for styling and keep position the same relative
$('.trigger').click(function() {
$('.sub-header').toggleClass('opened');
}).stop();
body {
font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
header,
.sub-header,
main {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-direction: column;
font-weight: bold;
text-transform: uppercase;
color: #fff;
transition: all .5s ease-in-out;
}
header {
height: 100px;
background: tomato;
z-index: 1000;
position: relative;
}
.sub-header {
height: 150px;
background: gainsboro;
transform: translateY(-200%);
left: 0;
right: 0;
z-index: 10;
/*play with position and margin*/
position: relative;
margin-bottom:-200px;
}
.opened {
transform: translateY(0%);
margin-bottom:0;
}
main {
height: 250px;
background: deepskyblue;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<header>Header content TRIGGER</header>
<div class="sub-header">
<p>Sub Header content</p>
</div>
<main>Main Content</main>

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