Develop Reference

How can I create scroll effect like Waven Website?

I want to create a scroll effect like Waven Website, using vanilla html, css and javascript, that when you scroll, the whole page goes down, but i don't want to use just CSS like:
section{
scroll-snap-align: start;
}
.container{
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
Because when I use this method, the page scroll a little and after a second scroll the whole section, I want some method when you scroll, the page goes instantly down.
Thank you :)

I think this is what you are looking for, please see snippet below or working codepen .
// original example (without scroll with mouse) :
// https://codepen.io/VeronQ/pen/MVzNOg
function scroll(event) {
event.preventDefault();
// iterate through all inputs
const inputs = document.querySelectorAll('input[name="item"]')
for(var i = 0;i < inputs.length;i++){
if(inputs[i].checked){
//check which input is checked and check next one or previous one according to the event.deltaY (scroll up or down)
if(event.deltaY>0 && i!=inputs.length-1)
inputs[i+1].checked = true
else if(event.deltaY<0 && i!=0)
inputs[i-1].checked = true
break;
}
}
}
// attach scroll function to onwheel event
document.onwheel = scroll;
#import url(https://fonts.googleapis.com/css?family=Carter+One);
input[type=radio] {
display: none;
}
input[type=radio]#section1:checked ~ nav label[for=section1] {
background-color: white;
}
input[type=radio]#section1:checked ~ section:nth-of-type(1) {
z-index: 1;
top: 0;
transition: top 0.5s ease-in-out;
transition-delay: 0s;
}
input[type=radio]#section1:checked ~ .cover {
background-color: #f8b195;
}
input[type=radio]#section2:checked ~ nav label[for=section2] {
background-color: white;
}
input[type=radio]#section2:checked ~ section:nth-of-type(2) {
z-index: 1;
top: 0;
transition: top 0.5s ease-in-out;
transition-delay: 0s;
}
input[type=radio]#section2:checked ~ .cover {
background-color: #c06c85;
}
input[type=radio]#section3:checked ~ nav label[for=section3] {
background-color: white;
}
input[type=radio]#section3:checked ~ section:nth-of-type(3) {
z-index: 1;
top: 0;
transition: top 0.5s ease-in-out;
transition-delay: 0s;
}
input[type=radio]#section3:checked ~ .cover {
background-color: #6c5c7c;
}
input[type=radio]#section4:checked ~ nav label[for=section4] {
background-color: white;
}
input[type=radio]#section4:checked ~ section:nth-of-type(4) {
z-index: 1;
top: 0;
transition: top 0.5s ease-in-out;
transition-delay: 0s;
}
input[type=radio]#section4:checked ~ .cover {
background-color: #345d7e;
}
.nav {
position: fixed;
z-index: 2;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
.nav__item {
width: 12px;
height: 12px;
display: block;
margin: 12px auto;
border: solid 2px white;
border-radius: 50%;
cursor: pointer;
}
.nav__item:hover {
background-color: white;
}
section {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 100%;
right: 0;
left: 0;
transition-delay: 0.5s;
}
section:nth-of-type(1) {
background: #f8b195;
}
section:nth-of-type(2) {
background: #c06c85;
}
section:nth-of-type(3) {
background: #6c5c7c;
}
section:nth-of-type(4) {
background: #345d7e;
}
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
html,
body {
height: 100%;
}
body {
overflow: hidden;
color: white;
font: 100% "Carter One", cursive;
}
h1 {
font-size: 6em;
text-align: center;
}
<!-- Inputs-->
<input type="radio" name="item" checked="checked" id="section1"/>
<input type="radio" name="item" id="section2"/>
<input type="radio" name="item" id="section3"/>
<input type="radio" name="item" id="section4"/>
<!-- Navigation-->
<nav class="nav">
<label class="nav__item" for="section1"></label>
<label class="nav__item" for="section2"></label>
<label class="nav__item" for="section3"></label>
<label class="nav__item" for="section4"></label>
</nav>
<!-- Sections-->
<section>
<h1>One Page</h1>
</section>
<section>
<h1>Pure CSS</h1>
</section>
<section>
<h1>Full Screen</h1>
</section>
<section>
<h1>#Ver_Qn</h1>
</section>
<!-- Fix the white space when scrolling two sections at the time-->
<div class="cover"></div>

Hamburger menu doesn't close after click on anchor tag

After clicking on some anchor item in the menu I want to be able to close the menu, but it doesn't work. The remove method in javascript is not working for some reason. If I go through pages the menu closes itself but not on the index page and it stays open. I'm still learning Javascript so bear with me. Here's the additional CSS
const netflix_open_btn = document.querySelector('.netflix-open-btn');
const netflix_close_btn = document.querySelector('.netflix-close-btn');
const netflix_nav = document.querySelectorAll('.netflix-nav');
netflix_open_btn.addEventListener('click', () => {
netflix_nav.forEach(nav_el => { nav_el.classList.add('visible') });
});
netflix_close_btn.addEventListener('click', () => {
netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') });
});
.netflix-text {
text-transform: uppercase;
}
.netflix-list li a:hover{
color: #d6aa55;
}
.netflix-nav-btn {
border: 0;
background: transparent;
cursor: pointer;
font-size: 20px;
z-index: 10;
}
.netflix-open-btn {
position: fixed;
top: 30px;
left: 10px;
z-index: 10;
}
.netflix-nav {
position: fixed;
top: 0;
left: 0;
height: 100vh;
transform: translateX(-100%);
transition: transform .3s ease-in-out;
z-index: 10;
}
.netflix-nav.visible {
transform: translateX(0);
}
.netflix-nav-black {
background-color: black;
width: 60%;
max-width: 480px;
min-width: 320px;
transition-delay: .4s;
}
.netflix-nav-black.visible {
transition-delay: 0s;
}
.netflix-nav-red {
background-color: rgb(214, 170, 85);
transition-delay: .2s;
width: 95%;
}
.netflix-nav-red.visible {
transition-delay: .2s;
}
.netflix-nav-white {
background-color: #fff;
padding: 40px;
position: relative;
transition-delay: 0s;
width: 95%;
}
.netflix-nav-white.visible {
transition-delay: .4s;
}
.netflix-close-btn {
opacity: 0.3;
position: absolute;
top: 40px;
right: 30px;
}
.netflix-logo {
width: 245px;
}
#media (max-width:768px){
.netflix-logo{
width: 197px;
}
}
.netflix-list {
list-style-type: none;
padding: 0;
}
.netflix-list li {
margin: 20px 0;
}
.netflix-list li a {
color: rgb(34, 31, 31);
font-size: 19px;
text-decoration: none;
text-transform: uppercase;
}
.netflix-list ul {
list-style-type: none;
padding-left: 20px;
}
<button class="netflix-nav-btn netflix-open-btn">
<i class="fas fa-bars fa-2x"></i>
</button>
<div class="netflix-nav netflix-nav-black">
<div class="netflix-nav netflix-nav-red">
<div class="netflix-nav netflix-nav-white">
<button class="netflix-nav-btn netflix-close-btn">
<i class="fas fa-times"></i>
</button>
<img class="netflix-logo" src="images/GOLD.png" alt="Logo" />
<ul class="netflix-list">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>
<ul>
<li>Tattoo</li>
<li>Beauty</li>
<li>Piercing</li>
</ul>
</li>
<li>Contact</li>
<li>
Danish<img src="/images//denmark.svg" alt="danish-flag" class="flag" />
</li>
</ul>
</div>
</div>
</div>

You need to attach an event listener to each <a> element.
const netflix_open_btn = document.querySelector('.netflix-open-btn');
const netflix_close_btn = document.querySelector('.netflix-close-btn');
const netflix_nav = document.querySelectorAll('.netflix-nav');
const netflix_btns = document.querySelectorAll('.netflix-list a');
netflix_open_btn.addEventListener('click', () => {
netflix_nav.forEach(nav_el => {
nav_el.classList.add('visible')
});
});
netflix_close_btn.addEventListener('click', () => {
netflix_nav.forEach(nav_el => {
nav_el.classList.remove('visible')
});
});
var length = netflix_btns.length;
for (let x = 0; x < length; x++) {
netflix_btns[x].addEventListener('click', () => {
netflix_nav.forEach(nav_el => {
nav_el.classList.remove('visible')
});
});
}
.netflix-text {
text-transform: uppercase;
}
.netflix-list li a:hover {
color: #d6aa55;
}
.netflix-nav-btn {
border: 0;
background: transparent;
cursor: pointer;
font-size: 20px;
z-index: 10;
}
.netflix-open-btn {
position: fixed;
top: 30px;
left: 10px;
z-index: 10;
}
.netflix-nav {
position: fixed;
top: 0;
left: 0;
height: 100vh;
transform: translateX(-100%);
transition: transform .3s ease-in-out;
z-index: 10;
}
.netflix-nav.visible {
transform: translateX(0);
}
.netflix-nav-black {
background-color: black;
width: 60%;
max-width: 480px;
min-width: 320px;
transition-delay: .4s;
}
.netflix-nav-black.visible {
transition-delay: 0s;
}
.netflix-nav-red {
background-color: rgb(214, 170, 85);
transition-delay: .2s;
width: 95%;
}
.netflix-nav-red.visible {
transition-delay: .2s;
}
.netflix-nav-white {
background-color: #fff;
padding: 40px;
position: relative;
transition-delay: 0s;
width: 95%;
}
.netflix-nav-white.visible {
transition-delay: .4s;
}
.netflix-close-btn {
opacity: 0.3;
position: absolute;
top: 40px;
right: 30px;
}
.netflix-logo {
width: 245px;
}
#media (max-width:768px) {
.netflix-logo {
width: 197px;
}
}
.netflix-list {
list-style-type: none;
padding: 0;
}
.netflix-list li {
margin: 20px 0;
}
.netflix-list li a {
color: rgb(34, 31, 31);
font-size: 19px;
text-decoration: none;
text-transform: uppercase;
}
.netflix-list ul {
list-style-type: none;
padding-left: 20px;
}
<button class="netflix-nav-btn netflix-open-btn">
<i class="fas fa-bars fa-2x"></i>Open
</button>
<div class="netflix-nav netflix-nav-black">
<div class="netflix-nav netflix-nav-red">
<div class="netflix-nav netflix-nav-white">
<button class="netflix-nav-btn netflix-close-btn">
<i class="fas fa-times"></i>Close
</button>
<img class="netflix-logo" src="images/GOLD.png" alt="Logo" />
<ul class="netflix-list">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>
<ul>
<li>Tattoo</li>
<li>Beauty</li>
<li>Piercing</li>
</ul>
</li>
<li>Contact</li>
<li>
Danish<img src="/images//denmark.svg" alt="danish-flag" class="flag" />
</li>
</ul>
</div>
</div>
</div>

for that you will have to create a function which you can call every time you click a link!
const netflix_open_btn = document.querySelector(".netflix-open-btn");
const netflix_nav = document.querySelectorAll(".netflix-nav");
netflix_open_btn.addEventListener("click", () => {
netflix_nav.forEach(nav_el => {
nav_el.classList.add("visible");
});
});
function closeTab() {
netflix_nav.forEach(nav_el => {
nav_el.classList.remove("visible");
});
}
.netflix-text {
text-transform: uppercase;
}
.netflix-list li a:hover {
color: #d6aa55;
}
.netflix-nav-btn {
border: 0;
background: transparent;
cursor: pointer;
font-size: 20px;
z-index: 10;
}
.netflix-open-btn {
position: fixed;
top: 30px;
left: 10px;
z-index: 10;
}
.netflix-nav {
position: fixed;
top: 0;
left: 0;
height: 100vh;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
z-index: 10;
}
.netflix-nav.visible {
transform: translateX(0);
}
.netflix-nav-black {
background-color: black;
width: 60%;
max-width: 480px;
min-width: 320px;
transition-delay: 0.4s;
}
.netflix-nav-black.visible {
transition-delay: 0s;
}
.netflix-nav-red {
background-color: rgb(214, 170, 85);
transition-delay: 0.2s;
width: 95%;
}
.netflix-nav-red.visible {
transition-delay: 0.2s;
}
.netflix-nav-white {
background-color: #fff;
padding: 40px;
position: relative;
transition-delay: 0s;
width: 95%;
}
.netflix-nav-white.visible {
transition-delay: 0.4s;
}
.netflix-close-btn {
opacity: 0.3;
position: absolute;
top: 40px;
right: 30px;
}
.netflix-logo {
width: 245px;
}
#media (max-width: 768px) {
.netflix-logo {
width: 197px;
}
}
.netflix-list {
list-style-type: none;
padding: 0;
}
.netflix-list li {
margin: 20px 0;
}
.netflix-list li a {
color: rgb(34, 31, 31);
font-size: 19px;
text-decoration: none;
text-transform: uppercase;
}
.netflix-list ul {
list-style-type: none;
padding-left: 20px;
}
<button class="netflix-nav-btn netflix-open-btn">
<i class="fas fa-bars fa-2x"></i> open
</button>
<div class="netflix-nav netflix-nav-black">
<div class="netflix-nav netflix-nav-red">
<div class="netflix-nav netflix-nav-white">
<button
onclick="closeTab()"
class="netflix-nav-btn netflix-close-btn"
>
<i class="fas fa-times"></i>close
</button>
<img class="netflix-logo" src="images/GOLD.png" alt="Logo" />
<ul class="netflix-list">
<li>
<a onclick="closeTab()" href="index-en.php" class="gold">Home</a>
</li>
<li><a onclick="closeTab()" href="#about">About</a></li>
<li><a onclick="closeTab()" href="#services">Services</a></li>
<li>
<ul>
<li>Tattoo</li>
<li>Beauty</li>
<li>Piercing</li>
</ul>
</li>
<li>Contact</li>
<li>
<a href="index.php">Danish</a
><img src="/images//denmark.svg" alt="danish-flag" class="flag" />
</li>
</ul>
</div>
</div>
</div>

Meybe it doesnt close because there is no page change, thus no reload.
You could use some js to close it manually. Your example there is not close function related to item click. Ex.:
netflix_nav.addEventListener('click', () => {
netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') });
});

image lightslider has 0px height until window resize

I am using this image slider :https://github.com/sachinchoolur/lightslider
I have the slider in a hidden div, when the div is opened the ul in slider containing images has a height of 0px, until the window is resized. This is inline css seen when you inspect element.
Before resize:
<ul id="content-slider" class="content-slider" style="width: 40px; transform: translate3d(-40px, 0px, 0px); height: 165px; padding-bottom: 0%;"
After resize:
<ul id="content-slider" class="content-slider" style="width: 3112px; transform: translate3d(-778px, 0px, 0px); height: 165px; padding-bottom: 0%;">
It seems to be a common issue and there are solutions such as turning autoWidth to false, but it's already false. Also a suggestion to add this but I'm not sure where:
$.each($(".light-slider"), function(i, instance){
$(instance).imagesLoaded(function(){
$(instance).lightSlider();
});
});
This is the js file used with the below code https://github.com/sachinchoolur/lightslider/blob/master/src/js/lightslider.js
Functions:
<script type="text/javascript" src="js/libs/jquery.min.js"></script>
<script src="js/lightslider.js"></script>
/* show and hide content */
$('document').ready(function() {
$('#show5').click( function() {
var $div = $('#' + $(this).data('href'));
$('#project-one').not($div).hide();
$div.slideToggle();
});
$('#show6').click( function() {
var $div = $('#' + $(this).data('href'));
$('#project-one').not($div).hide();
$div.slideToggle();
});
});
/* image slider */
$(document).ready(function() {
$("#content-slider").lightSlider({
loop:true,
keyPress:true
});
$('#image-gallery').lightSlider({
gallery:true,
item:1,
thumbItem:9,
slideMargin: 0,
speed:500,
auto:true,
loop:true,
onSliderLoad: function() {
$('#image-gallery').removeClass('cS-hidden');
}
});
});
HTML:
<div id="projects-container" class="row">
<div class="w-33 ml-100 mp-100 project" id="first-project">
<img class="project-image" src="img/proj-temp.jpg" alt="" title="" id="show5" data-href="project-one" >
<h4>Title</h4>
<a class="learn-more" id="show6" data-href="project-one">Explore <span>This Project</span></a>
<div class="panel" id="project-one">
<div class="project-gallery-container w-100">
<div class="item">
<ul id="content-slider" class="content-slider">
<li>
<h3>1</h3>
</li>
<li>
<h3>2</h3>
</li>
<li>
<h3>3</h3>
</li>
<li>
<h3>4</h3>
</li>
<li>
<h3>5</h3>
</li>
<li>
<h3>6</h3>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS:
#projects-container .panel {
display:none;
}
.project {
margin-left: 2%!important;
transition: .5s;
}
.panel .w-100 {
padding:0!important;
}
.project-gallery-container ul {
list-style: none outside none;
padding-left: 0;
margin: 0;
}
.content-slider li{
background-color: #333;
text-align: center;
color: #FFF;
}
.content-slider h3 {
margin: 0;
padding: 70px 0;
}
.lSSlideOuter {
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.lightSlider:before, .lightSlider:after {
content: " ";
display: table;
}
.lightSlider {
overflow: hidden;
margin: 0;
}
.lSSlideWrapper {
max-width: 100%;
overflow: hidden;
position: relative;
}
.lSSlideWrapper > .lightSlider:after {
clear: both;
}
.lSSlideWrapper .lSSlide {
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition: all 1s;
-webkit-transition-property: -webkit-transform,height;
-moz-transition-property: -moz-transform,height;
transition-property: transform,height;
-webkit-transition-duration: inherit !important;
transition-duration: inherit !important;
-webkit-transition-timing-function: inherit !important;
transition-timing-function: inherit !important;
}
.lSSlideOuter .lSPager.lSpg {
margin: 10px 0 0;
padding: 0;
text-align: center;
}
.lSSlideOuter .lSPager.lSpg > li {
cursor: pointer;
display: inline-block;
padding: 0 5px;
}
.lSSlideOuter .lSPager.lSpg > li a {
background-color: #222222;
border-radius: 30px;
display: inline-block;
height: 8px;
overflow: hidden;
text-indent: -999em;
width: 8px;
position: relative;
z-index: 99;
-webkit-transition: all 0.5s linear 0s;
transition: all 0.5s linear 0s;
}
.lSSlideOuter .lSPager.lSpg > li:hover a, .lSSlideOuter .lSPager.lSpg > li.active a {
background-color: #428bca;
}
.lSSlideOuter .media {
opacity: 0.8;
}
.lSSlideOuter .media.active {
opacity: 1;
}
.lSAction > a {
width: 32px;
display: block;
top: 50%;
height: 32px;
background-image: url('../img/controls.png');
cursor: pointer;
position: absolute;
z-index: 99;
margin-top: -16px;
opacity: 0.5;
-webkit-transition: opacity 0.35s linear 0s;
transition: opacity 0.35s linear 0s;
}
.lSAction > a:hover {
opacity: 1;
}
.lSAction > .lSPrev {
background-position: 0 0;
left: 10px;
}
.lSAction > .lSNext {
background-position: -32px 0;
right: 10px;
}
.lSSlideOuter.lSrtl {
direction: rtl;
}
.lSSlideOuter .lightSlider, .lSSlideOuter .lSPager {
padding-left: 0;
list-style: none outside none;
}
.lSSlideOuter .lightSlider > *, .lSSlideOuter .lSGallery li {
float: left;
}
.lightSlider.lsGrabbing > * {
cursor: move;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: -o-grabbing;
cursor: -ms-grabbing;
cursor: grabbing;
}
When I take the slider outside the hidden div it works without needing to resize.

I just had the exact same issue... Thanks to your post, I figured out that resizing the window did make the gallery appear! As such, I triggered a resize event manually:
var triggerResize = function(){
window.dispatchEvent(new Event('resize'));
}

Css animations not applying to JSON list

I have a nice list of CSS generated cards. They contain icons and text and have a nice animation to expand once you tap on them, to reveal more icons and options. I hard coded the list and got it looking and behaving exactly the way I wanted.
Now, I have some JSON data on a database and I want to use that data to populate the list dynamically.
Problem: It works great, except the CSS animations no longer apply.
How can I fix this? Here's my code.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/customFitStyling.css" type="text/css">
<link rel="stylesheet" href="css/w3c_v4.css" type="text/css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/customFitFunctions.js"></script>
</head>
<body>
<!--APPEND CARDS-->
<ul id="cardList" class="cards">
</ul>
</body>
</html>
JavaScript:
// Sync with Firebase in real time.
dbRef.on("value", snap =>
{
var workouts = snap.val();
for (var i = 0, len = workouts.length; i < len; i++) // Populate list.
{
$("#cardList").append("<li><div class='card transform'>\n\
<div class='cardInfo'><h3>" + workouts[i].title + "</h3><p>10 min.</p><a class='startIt' href='timer.html'>\n\
<img src='images/playIcon.png' width='70' alt='' /></a><div class='infoIcons'>\n\
<img src='images/thorso.png' width='48' alt='' /><img src='images/legs.png' width='28' alt='' />\n\
<img src='images/cardio.png' width='48' alt='' /></div><div class='timeIcon'>\n\
<img src='images/tenMinutes.png' width='66' alt='' /></div></div>\n\
<div class='disappear'><div class='playIt'><a class='playButton' href='timer.html'>\n\
<img src='images/playButtonUp.png' width='100' alt='' /><img src='images/playButtonDown.png' width='95' alt='' /></a>\n\
</div><div class='deleteIt'><a class='deleteButton' href='#'>\n\
<img src='images/thrashButtonUp.png' width='60' alt='' />\n\
<img src='images/thrashButtonDown.png' width='55' alt='' /></a></div><div class='modifyIt'>\n\
<a class='modifyButton' href='#'><img src='images/cogButtonUp.png' width='100' alt=''/>\n\
<img src='images/cogButtonDown.png' width='95' alt='' /></a></div></div></div></li>");
}
});
jQuery:
// Triggers CSS animation for cards.
$(".card").click(function()
{
$(this).toggleClass("transformActive");
$(".disappear", this).toggleClass("appear");
});
CSS:
/**
* ROUTINE CARDS SECTION
*
*/
/* Style cards and content */
.cards
{
position: absolute;
width: 100%;
top: 60px;
list-style: none;
text-decoration: none;
text-align: center;
z-index: -1;
}
.cards li
{
position: relative;
width: 100%;
padding-bottom: 10px;
}
.card
{
position: relative;
background-color: #ffffff;
height: 150px;
width: 100%;
left: -6%;
border-radius: 8px;
box-shadow: 2px 2px 2px #686868;
}
.transform
{
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.transformActive
{
background-color: #ffffff;
height: 260px;
width: 100%;
box-shadow: 6px 6px 6px #888888;
}
/* CARD CONTENT SECTION */
.cardInfo
{
position: relative;
margin: auto;
width: 95%;
height: 130px;
text-align: left;
}
.cardInfo h3
{
position: relative;
top: 5px;
}
.cardInfo p
{
position: relative;
color: black;
text-align: right;
top: -40px;
}
.startIt
{
position: absolute;
bottom: 0px;
}
.timeIcon
{
position: absolute;
bottom: 0px;
left: 78%;
}
.infoIcons
{
position: relative;
margin: auto;
top: -20px;
width: 52%;
height: 100px;
}
.infoIcons img
{
margin-left: 6px;
}
#holder
{
position: relative;
width: 100%;
height: 80px;
}
/* CARD ANIMATION */
.disappear
{
position: relative;
width: 95%;
height: 40%;
top: 8%;
margin: auto;
opacity: 0;
}
.appear
{
-webkit-animation: appearFade 1.2s ease forwards;
-moz-animation: appearFade 1.2s ease forwards;
-o-animation: appearFade 1.2s ease forwards;
-ms-animation: appearFade 1.2s ease forwards;
animation: appearFade 1.2s ease forwards;
}
#keyframes appearFade
{
0%
{
opacity: 0;
}
100%
{
opacity: 1;
}
}
/* CARD OPTIONS ICONS */
.playIt
{
position: absolute;
left: 0px;
}
.playButton img:last-child
{
display: none;
}
.playButton:hover img:first-child
{
display: none;
}
.playButton:hover img:last-child
{
display: inline-block;
position: relative;
left: 3px;
top: 3px;
}
.deleteIt
{
position: relative;
margin: auto;
top: 25px;
}
.deleteButton img:last-child
{
display: none;
}
.deleteButton:hover img:first-child
{
display: none;
}
.deleteButton:hover img:last-child
{
display: inline-block;
position: relative;
left: 2px;
top: 2px;
}
.modifyIt
{
position: absolute;
right: 0px;
top: 0px;
}
.modifyButton img:last-child
{
display: none;
}
.modifyButton:hover img:first-child
{
display: none;
}
.modifyButton:hover img:last-child
{
display: inline-block;
position: relative;
left: 0px;
top: 3px;
}

Check if removing the </div> close tag in the <div class="card transform"> works well. I don't know, how are you using your css classes but looks like that the childs elements are outside the parent div container.

Vue.js won't adhere to multiple instances

I have tried creating a like button for comments using Vue.js. However, the like button only seems to work on one comment (first) while the second comment appears as if it doesn't even recognize Vue.js syntax. Can someone point me in the right direction?
CodePen: http://codepen.io/chrisburton/pen/EVKLxL
new Vue({
el: '.containComments',
data: {
liked: false,
likesCount: 0
},
methods: {
toggleLike: function() {
this.liked = ! this.liked;
this.liked ? this.likesCount++ : this.likesCount--;
}
}
});
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,200italic,300italic);
#import url(https://dl.dropboxusercontent.com/u/26380646/rocknroll/assets/style.css);
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;}
a {
-webkit-transition: .1s color linear;
-moz-transition: .1s color linear;
-o-transition: .1s color linear;
transition: .1s color linear;
}
a:hover {
-webkit-transition: .25s color linear;
-moz-transition: .25s color linear;
-o-transition: .25s color linear;
transition: .25s color linear;
}
/*
************************
Project Start
************************
*/
html {font-size: 18px;}
body {
background:;
color: #404040;
font-family: 'Source Sans Pro', Georgia;
font-size: 1em;
font-weight: 200;
line-height: 1.65;
letter-spacing: .01em;
margin: 50px 0;
padding: 0 25px;
}
section {
max-width: 500px;
min-width: 300px;
margin: 50px auto;
}
div.containComments {
position: relative;
border-bottom: solid 1px rgba(178, 179, 153, .15);
margin: 0 auto 50px auto;
}
div.containComments:last-child {
border: none;
}
p.username {
font-weight: 300;
margin-bottom: 25px;
}
p.username a {
color: #BFBFA8;
text-transform: lowercase;
text-decoration: none;
}
.reply {
color: #BFBFA8;
cursor: pointer;
}
p.username a:hover {color: #000;}
p.username img.maskable {
position: absolute;
top: -10px;
left: -70px;
width: 50px;
height: 50px;
border-width: 0;
border-radius: 100%;
}
.likesCount,
.icon-rocknroll {
position: relative;
float: right;
opacity: 0;
}
.likesCount {
top: 4px;
left: 0;
font-size: 15px;
margin-right: .05em;
}
.icon-rocknroll {
top: 7px;
left: 0;
background: none;
border: 0;
outline: none;
font-family: "icons";
font-size: 13px;
opacity: 0;
cursor: pointer;
}
div.containComments:hover .icon-rocknroll {
opacity: .44;
}
div.containComments:hover .icon-rocknroll:hover,
div.containComments:hover .likesCount {
opacity: .75;
}
.active,
active:hover,
div.containComments:hover .active {
opacity: .75;
}
div.containComments:hover .active:hover {
opacity: .44;
}
p.info {
font-size: 18px;
margin-bottom: 50px;
}
code {
font-family: "Source Code Pro";
}
/* Break */
#media (max-width: 775px) {
section {max-width: 400px;}
.icon-rocknroll {float: right;}
}
/* Smartphones Landscape */
#media (max-width: 600px) {
section {max-width: 350px;}
div.containComments {padding: 0 25px;}
img.maskable {
position: relative !important;
top:0 !important;
left: 0 !important;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
.icon-rocknroll {
float: right;
top: 16px;
}
.likesCount {
top: 12px;
}
p.info {margin-left: 0;}
.closed {
width: 280px;
}
}
/* Smartphones Portrait */
#media (max-width: 500px) {
body {padding: 0;}
section {max-width: 270px;}
img.maskable {
position: relative !important;
top:0 !important;
left: 0 !important;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
.icon-rocknroll {
float: right;
top: 15px;
}
p.info {margin-left: 0;}
.closed {
width: 270px;
text-align: center;
margin: 0 auto 50px auto;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.14/vue.min.js"></script>
<section class="comments">
<div class="containComments">
<p class="username">
<img class="maskable" src="https://en.gravatar.com/userimage/18343163/cf3a7b15b60479a37b2167e84ffb85a6.jpg?size=100" />
chrisburton
<button class="icon-rocknroll" v-class="active: liked" v-on="click: toggleLike"></button>
<span class="likesCount" v-class="active: liked">{{ likesCount }}</span>
</p>
<p class="info">Thank you for visiting all the way from New York. This is just a test to determine if the Twitter API is working as it should. You should see your profile image and your username at the very top that links to your account. You should also see that I wrote in a thank you introduction with your location.</p>
</div>
<div class="containComments">
<p class="username first">
<img class="maskable" src="http://assets.arabiaweddings.com/sites/default/files/news/2014/06/anna.jpg" />
AnnaWintour
<button class="icon-rocknroll" v-class="active: liked" v-on="click: toggleLike"></button>
<span class="likesCount" v-class="active: liked">{{ likesCount }}</span>
</p>
<p class="info first"><span class="reply">#chrisburton</span> +1. Really interesting reply.</p>
</div>
</section>

You have to create a Vue.component with a template to be able to reuse the code.
Vue.js
Vue.component('like', {
template: "<button class='icon-rocknroll' v-class='active: liked' v-on='click: toggleLike'></button>\
<span class='likesCount' v-class='active: liked'>{{ likesCount }}</span>",
data: function() {
return {
liked: false,
likesCount: 0
}
},
methods: {
toggleLike: function() {
this.liked = !this.liked;
this.liked ? this.likesCount++ : this.likesCount--;
}
}
});
new Vue({
el: '#app',
});
HTML
<like></like>