Develop Reference

Carousel css3 animation acting weird

I've created this 3 item vertical carousel, and need to correct the transition.
My current project can be seen here:
http://hotelfjordgaarden.dk.test.vjm.dk/
I want to create the transition from this pen (the regular swipe/fade carousel transition):
https://codepen.io/marcusmichaels/pen/yGGoLM
If anyone could help me solve this, I would be so greatful!
Thanks in advance!
My HTML:
<div class="container">
<div class="frontpage__content__carousel">
<div class="frontpage__content__carousel__list">
<div class="frontpage__content__carousel__list__item" data-href="//google.com">
<a href="//google.com">
<p class="h1">
Heading
</p>
<p class="sub">
Subheading
</p>
</a>
</div>
<div class="frontpage__content__carousel__list__item" data-href="//google.com">
<a href="//google.com">
<p class="h1">
Heading
</p>
<p class="sub">
Subheading
</p>
</a>
</div>
<div class="frontpage__content__carousel__list__item" data-href="//google.com">
<a href="//google.com">
<p class="h1">
Heading
</p>
<p class="sub">
Subheading
</p>
</a>
</div>
<div class="frontpage__content__carousel__list__item" data-href="//google.com">
<a href="//google.com">
<p class="h1">
Heading
</p>
<p class="sub">
Subheading
</p>
</a>
</div>
<div class="frontpage__content__carousel__list__item" data-href="//google.com">
<a href="//google.com">
<p class="h1">
Heading
</p>
<p class="sub">
Subheading
</p>
</a>
</div>
</div>
<div class="frontpage__content__carousel__navigation">
<div class="prev icon" id="jsGoToPrev"></div>
<div class="next icon" id="jsGoToNext"></div>
</div>
</div>
</div>
My SASS:
.frontpage {
width: 100%;
overscroll-behavior: none;
.header {
background: white;
display: flex;
width: 100%;
justify-content: center;
align-items: center;
height: 138px;
}
.frontpage__content {
width: 100%;
height: 100%;
display: flex;
text-align: center;
align-items: center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
#media only screen and (max-width: #screen-sm-max) {
> div {
width: 100%;
margin-left: auto;
margin-right: auto;
}
}
&::before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #8fa2a6;
z-index: -2;
}
&__video {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: -1;
opacity: 0.4;
}
// carousel wrapper
&__carousel {
overflow: hidden;
& * {
box-sizing: border-box;
}
// carousel
&__list {
overflow: hidden;
transform-style: preserve-3d;
&__item {
// disable user selection
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: transform .5s, top .5s, z-index .5s;
width: 100%;
z-index: -100;
margin: auto;
a {
.h1 {
font-size: 18px;
color: white;
text-transform: uppercase;
margin: 0;
}
.sub {
font-size: 14px;
font-weight: 500;
color: white;
margin: 0;
}
}
&.prev {
transform: translateY(-100%);
z-index: 800;
opacity: 0.5;
}
&.next {
transform: translateY(420%);
#media only screen and (min-width: #screen-lg) {
transform: translateY(500%);
}
z-index: 800;
opacity: 0.5;
}
&.active {
opacity: 1;
position: relative;
z-index: 900;
padding: 40px 0;
margin: 20px 0;
border: 1px solid rgba(255, 255, 255, 0.4);
border-left: none;
border-right: none;
a {
.h1 {
font-size: 18px;
}
.sub {
font-size: 16px;
}
}
}
}
}
&__navigation {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: none;
position: relative;
.icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-size: 20px;
border-radius: 50%;
border: 2px solid rgba(white, 0.5);
color: rgba(white, 0.5);
font-weight: 400;
font-family: 'Font Awesome 5 Pro';
position: fixed;
left: 60px;
cursor: pointer;
}
.prev {
top: 40%;
&::before {
content: '\f176';
}
}
.next {
top: 70%;
&::before {
content: '\f175';
}
}
}
}
}
// tablet portrait
#media only screen and (min-width: #screen-sm) {
height: 100vh;
.frontpage__content__carousel__list__item {
a {
.h1 {
font-size: 30px;
}
.sub {
font-size: 10px;
}
}
&.active {
a {
.h1 {
font-size: 40px;
}
.sub {
font-size: 24px;
}
}
}
}
}
// tablet landscape
#media only screen and (min-width: #screen-md) {
.frontpage__content__carousel__list__item {
a {
.h1 {
font-size: 30px;
}
.sub {
font-size: 10px;
}
}
&.active {
a {
.h1 {
font-size: 40px;
}
.sub {
font-size: 24px;
}
}
}
}
}
// desktop
#media only screen and (min-width: #screen-lg) {
.frontpage__content__carousel__navigation {
display: block;
}
.frontpage__content__carousel__list__item {
a {
.h1 {
font-size: 30px;
}
.sub {
font-size: 10px;
}
}
&.active {
a {
.h1 {
font-size: 60px;
}
.sub {
font-size: 30px;
}
}
}
}
}
}
My Javascript:
if ($('.frontpage__content').length > 0) {
$(document).ready(function () {
adjustFrontpageContentHeight();
});
$(window).resize(function () {
adjustFrontpageContentHeight();
});
function adjustFrontpageContentHeight() {
var $windowHeight = $(window).height();
var $headerHeight = $('.header').height();
$('.frontpage__content').height($windowHeight - $headerHeight);
}
(function ($) {
var carousel = $('.frontpage__content__carousel');
var list = $('.frontpage__content__carousel__list');
var items = $('.frontpage__content__carousel__list__item');
var totalItems = items.length;
var slide = 0;
var moving = true;
var itemClassName = 'frontpage__content__carousel__list__item';
function getElements() {
var prev = $('.frontpage__content__carousel__list__item.prev');
var active = $('.frontpage__content__carousel__list__item.active');
var next = $('.frontpage__content__carousel__list__item.next');
var beforePrev;
if (prev.prev().length > 0) {
beforePrev = prev.prev();
} else if (prev.data('index') == 0) {
beforePrev = $('[data-index=' + (totalItems - 1) + ']')
} else {
beforePrev = $('[data-index=' + (prev.data('index') - 1) + ']');
}
var afterNext;
if (next.next().length > 0) {
afterNext = next.next();
} else {
afterNext = $('[data-index=' + (next.data('index') + 1) + ']');
}
return {
beforePrev: beforePrev,
prev : prev,
active : active,
next : next,
afterNext : afterNext,
}
}
function setInitialClasses() {
items[totalItems - 1].className = itemClassName + ' prev';
items[0].className = itemClassName + ' active';
items[1].className = itemClassName + ' next';
}
function goToPrev() {
if (!moving) {
// if first slide, set as last slide, else -1
if (slide === 0) {
slide = (totalItems - 1);
} else {
slide--;
}
goToSlide(slide);
//prependPrev();
}
}
function goToNext() {
if (!moving) {
// if last slide, reset to 0, else +1
if (slide === (totalItems - 1)) {
slide = 0;
} else {
slide++;
}
goToSlide(slide);
//appendNext();
}
}
function goToSlide(slide) {
if (!moving) {
disableInteraction();
// Update the "old" adjacent slides with "new" ones
var newPrevious = slide - 1,
newNext = slide + 1,
oldPrevious = slide - 2,
oldNext = slide + 2;
// Checks and updates if the new slides are out of bounds
if (newPrevious <= 0) {
oldPrevious = (totalItems - 1);
} else if (newNext >= (totalItems - 1)) {
oldNext = 0;
}
// Checks and updates if slide is at the beginning/end
if (slide === 0) {
newPrevious = (totalItems - 1);
oldPrevious = (totalItems - 2);
oldNext = (slide + 1);
} else if (slide === (totalItems - 1)) {
newPrevious = (slide - 1);
newNext = 0;
oldNext = 1;
}
items.each(function() {
$(this).removeClass('active prev next');
});
// Add new classes
items[newPrevious].className = itemClassName + " prev";
items[slide].className = itemClassName + " active";
items[newNext].className = itemClassName + " next";
}
}
function disableInteraction() {
moving = true;
// set timeout to same as transition length
setTimeout(function () {
moving = false;
}, 500);
}
function setEventListeners() {
// click listeners
$('body').on('click', '#jsGoToPrev', function () {
goToPrev();
});
$('body').on('click', '#jsGoToNext', function () {
goToNext();
});
$('body').on('click', '.frontpage__content__carousel__list__item.prev', function () {
goToPrev();
});
$('body').on('click', '.frontpage__content__carousel__list__item.next', function () {
goToNext();
});
$('body').on('click', '.frontpage__content__carousel__list__item.active', function () {
if (!moving) {
window.location.href = $(this).data('href');
}
});
// mousewheel scroll listener
$('body').on('wheel', carousel.selector, function (e) {
if (e.originalEvent.deltaY < 0) {
goToPrev();
} else if (e.originalEvent.deltaY > 0) {
goToNext();
}
});
// touch scroll listener
var ts;
var te;
$('body').on('touchstart', function (e) {
ts = e.originalEvent.touches[0].clientY;
});
$('body').on('touchend', function (e) {
te = e.originalEvent.changedTouches[0].clientY;
if (ts > te+5) {
goToNext();
} else if (ts < te-5) {
goToPrev();
}
});
}
function prependPrev() {
list.prepend(getElements().prev);
}
function appendNext() {
list.append(getElements().next);
}
function initCarousel() {
// nullify links href after load - this is due to SEO
items.each(function () {
$(this).find('a').attr('href', 'javascript:void(0)');
});
setInitialClasses();
setEventListeners();
prependPrev();
moving = false;
}
$(document).ready(function () {
initCarousel();
});
})(jQuery);
}

What I eventually wounded up doing is:
Make my carousel DIV/container overflow: hidden, so I can have items inside which are hidden due to overflow.
I then use jQuery to scroll my div when a non-active item is clicked.
The entire script for the page is here:
if ($('.frontpage__content').length > 0) {
$('.frontpage__content__carousel__list__item ').click(function (e) {
if (!$(this).hasClass('active')) {
e.preventDefault();
var direction = 'up';
if ($(this).index() >= $('.frontpage__content__carousel__list__item.active').index()) {
direction = 'down';
}
$('.frontpage__content__carousel__list__item').removeClass('active');
$(this).addClass('active');
var _this = this;
var scrollTop = 0;
var items = $('.frontpage__content__carousel__list__item');
items.each(function (index, item) {
if ($(this).is($(_this).prev()) || $(_this).index() == 0) {
return false;
}
scrollTop += $(this).height();
});
$('.frontpage__content__carousel__list').stop().animate({
'scrollTop': scrollTop
});
}
});
function goToPrev() {
$('.frontpage__content__carousel__list__item.active').prev().trigger('click');
}
function goToNext() {
$('.frontpage__content__carousel__list__item.active').next().trigger('click');
}
$('#jsGoToPrev').click(function () {
goToPrev();
});
$('#jsGoToNext').click(function () {
goToNext();
});
$(window).resize(function () {
adjustFrontpageContentHeight();
});
function adjustFrontpageContentHeight() {
var $windowHeight = $(window).height();
var $headerHeight = $('.header').height();
$('.frontpage__content').height($windowHeight - $headerHeight);
}
var moving = false;
// mousewheel scroll listener
$('body').on('wheel', '.frontpage__content__carousel', function (e) {
if (!moving) {
moving = true;
setTimeout(function () {
moving = false;
}, 250);
if (e.originalEvent.deltaY < 0) {
goToPrev();
} else if (e.originalEvent.deltaY > 0) {
goToNext();
}
}
});
// touch scroll listener
var ts;
var te;
$('body').on('touchstart', '.frontpage__content__carousel', function (e) {
ts = e.originalEvent.touches[0].clientY;
});
$('body').on('touchend', '.frontpage__content__carousel', function (e) {
te = e.originalEvent.changedTouches[0].clientY;
if (ts > te + 5) {
goToNext();
} else if (ts < te - 5) {
goToPrev();
}
});
}

Vue - Convert html audio player into component

I'm converting a player in html into a Vue component.
Half of the component is already created, only the time control slider is missing.
Here is the html player code (Lines with multiple tabs are already implemented in the Vue component):
var audioPlayer = document.querySelector('.green-audio-player');
var playPause = audioPlayer.querySelector('#playPause');
var playpauseBtn = audioPlayer.querySelector('.play-pause-btn');
var loading = audioPlayer.querySelector('.loading');
var progress = audioPlayer.querySelector('.progress');
var sliders = audioPlayer.querySelectorAll('.slider');
var player = audioPlayer.querySelector('audio');
var currentTime = audioPlayer.querySelector('.current-time');
var totalTime = audioPlayer.querySelector('.total-time');
var speaker = audioPlayer.querySelector('#speaker');
var draggableClasses = ['pin'];
var currentlyDragged = null;
window.addEventListener('mousedown', function(event) {
if(!isDraggable(event.target)) return false;
currentlyDragged = event.target;
let handleMethod = currentlyDragged.dataset.method;
this.addEventListener('mousemove', window[handleMethod], false);
window.addEventListener('mouseup', () => {
currentlyDragged = false;
window.removeEventListener('mousemove', window[handleMethod], false);
}, false);
});
playpauseBtn.addEventListener('click', togglePlay);
player.addEventListener('timeupdate', updateProgress);
player.addEventListener('loadedmetadata', () => {
totalTime.textContent = formatTime(player.duration);
});
player.addEventListener('canplay', makePlay);
player.addEventListener('ended', function(){
playPause.attributes.d.value = "M18 12L0 24V0";
player.currentTime = 0;
});
sliders.forEach(slider => {
let pin = slider.querySelector('.pin');
slider.addEventListener('click', window[pin.dataset.method]);
});
function isDraggable(el) {
let canDrag = false;
let classes = Array.from(el.classList);
draggableClasses.forEach(draggable => {
if(classes.indexOf(draggable) !== -1)
canDrag = true;
})
return canDrag;
}
function inRange(event) {
let rangeBox = getRangeBox(event);
let rect = rangeBox.getBoundingClientRect();
let direction = rangeBox.dataset.direction;
if(direction == 'horizontal') {
var min = rangeBox.offsetLeft;
var max = min + rangeBox.offsetWidth;
if(event.clientX < min || event.clientX > max) return false;
} else {
var min = rect.top;
var max = min + rangeBox.offsetHeight;
if(event.clientY < min || event.clientY > max) return false;
}
return true;
}
function updateProgress() {
var current = player.currentTime;
var percent = (current / player.duration) * 100;
progress.style.width = percent + '%';
currentTime.textContent = formatTime(current);
}
function getRangeBox(event) {
let rangeBox = event.target;
let el = currentlyDragged;
if(event.type == 'click' && isDraggable(event.target)) {
rangeBox = event.target.parentElement.parentElement;
}
if(event.type == 'mousemove') {
rangeBox = el.parentElement.parentElement;
}
return rangeBox;
}
function getCoefficient(event) {
let slider = getRangeBox(event);
let rect = slider.getBoundingClientRect();
let K = 0;
if(slider.dataset.direction == 'horizontal') {
let offsetX = event.clientX - slider.offsetLeft;
let width = slider.clientWidth;
K = offsetX / width;
} else if(slider.dataset.direction == 'vertical') {
let height = slider.clientHeight;
var offsetY = event.clientY - rect.top;
K = 1 - offsetY / height;
}
return K;
}
function rewind(event) {
if(inRange(event)) {
player.currentTime = player.duration * getCoefficient(event);
}
}
function formatTime(time) {
var min = Math.floor(time / 60);
var sec = Math.floor(time % 60);
return min + ':' + ((sec<10) ? ('0' + sec) : sec);
}
function togglePlay() {
if(player.paused) {
playPause.attributes.d.value = "M0 0h6v24H0zM12 0h6v24h-6z";
player.play();
} else {
playPause.attributes.d.value = "M18 12L0 24V0";
player.pause();
}
}
function makePlay() {
playpauseBtn.style.display = 'block';
loading.style.display = 'none';
}
.audio.green-audio-player {
width: 400px;
min-width: 300px;
height: 56px;
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 24px;
padding-right: 24px;
border-radius: 4px;
user-select: none;
-webkit-user-select: none;
background-color: #fff;
}
.audio.green-audio-player .play-pause-btn {
display: none;
cursor: pointer;
}
.audio.green-audio-player .spinner {
width: 18px;
height: 18px;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/loading.png);
background-size: cover;
background-repeat: no-repeat;
animation: spin 0.4s linear infinite;
}
.audio.green-audio-player .slider {
flex-grow: 1;
background-color: #D8D8D8;
cursor: pointer;
position: relative;
}
.audio.green-audio-player .slider .progress {
background-color: #44BFA3;
border-radius: inherit;
position: absolute;
pointer-events: none;
}
.audio.green-audio-player .slider .progress .pin {
height: 16px;
width: 16px;
border-radius: 8px;
background-color: #44BFA3;
position: absolute;
pointer-events: all;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);
}
.audio.green-audio-player .controls {
font-family: 'Roboto', sans-serif;
font-size: 16px;
line-height: 18px;
color: #55606E;
display: flex;
flex-grow: 1;
justify-content: space-between;
align-items: center;
margin-left: 24px;
}
.audio.green-audio-player .controls .slider {
margin-left: 16px;
margin-right: 16px;
border-radius: 2px;
height: 4px;
}
.audio.green-audio-player .controls .slider .progress {
width: 0;
height: 100%;
}
.audio.green-audio-player .controls .slider .progress .pin {
right: -8px;
top: -6px;
}
.audio.green-audio-player .controls span {
cursor: default;
}
svg, img {
display: block;
}
#keyframes spin {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(1turn);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="audio green-audio-player">
<div class="loading">
<div class="spinner"></div>
</div>
<div class="play-pause-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewBox="0 0 18 24">
<path fill="#566574" fill-rule="evenodd" d="M18 12L0 24V0" class="play-pause-icon" id="playPause"/>
</svg>
</div>
<div class="controls">
<span class="current-time">0:00</span>
<div class="slider" data-direction="horizontal">
<div class="progress">
<div class="pin" id="progress-pin" data-method="rewind"></div>
</div>
</div>
<span class="total-time">0:00</span>
</div>
<audio>
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/Swing_Jazz_Drum.mp3" type="audio/mpeg">
</audio>
</div>
Html Codepen: https://codepen.io/caiokawasaki/pen/JwVwry
Here is the Vue component:
Vue.component('audio-player', {
props: ['message'],
data: () => ({
audio: undefined,
loaded: false,
playing: false,
currentTime: '00:00',
totalTime: '00:00',
percent: '0%',
draggableClasses: ['pin'],
currentlyDragged: null
}),
computed: {},
methods: {
formatTime(time) {
var min = Math.floor(time / 60);
var sec = Math.floor(time % 60);
return min + ':' + ((sec < 10) ? ('0' + sec) : sec);
},
loadedMetaData() {
this.totalTime = this.formatTime(this.audio.duration)
},
canPlay() {
this.loaded = true
},
timeUpdate(){
var current = this.audio.currentTime;
var percent = (current / this.audio.duration) * 100;
this.percent = percent + '%';
this.currentTime = this.formatTime(current);
},
ended(){
this.playing = false
this.audio.currentTime = 0
},
isDraggable(el) {
let canDrag = false;
let classes = Array.from(el.classList);
this.draggableClasses.forEach(draggable => {
if (classes.indexOf(draggable) !== -1)
canDrag = true;
})
return canDrag;
},
inRange(event) {
let rangeBox = getRangeBox(event);
let rect = rangeBox.getBoundingClientRect();
let direction = rangeBox.dataset.direction;
if (direction == 'horizontal') {
var min = rangeBox.offsetLeft;
var max = min + rangeBox.offsetWidth;
if (event.clientX < min || event.clientX > max) return false;
} else {
var min = rect.top;
var max = min + rangeBox.offsetHeight;
if (event.clientY < min || event.clientY > max) return false;
}
return true;
},
togglePlay() {
if (this.audio.paused) {
this.audio.play();
this.playing = true;
} else {
this.audio.pause();
this.playing = false;
}
},
makePlay() {
playpauseBtn.style.display = 'block';
loading.style.display = 'none';
},
getRangeBox(event) {
let rangeBox = event.target;
let el = currentlyDragged;
if (event.type == 'click' && isDraggable(event.target)) {
rangeBox = event.target.parentElement.parentElement;
}
if (event.type == 'mousemove') {
rangeBox = el.parentElement.parentElement;
}
return rangeBox;
},
getCoefficient(event) {
let slider = getRangeBox(event);
let rect = slider.getBoundingClientRect();
let K = 0;
if (slider.dataset.direction == 'horizontal') {
let offsetX = event.clientX - slider.offsetLeft;
let width = slider.clientWidth;
K = offsetX / width;
} else if (slider.dataset.direction == 'vertical') {
let height = slider.clientHeight;
var offsetY = event.clientY - rect.top;
K = 1 - offsetY / height;
}
return K;
},
rewind(event) {
if (this.inRange(event)) {
this.audio.currentTime = this.audio.duration * getCoefficient(event);
}
}
},
mounted() {
this.audio = this.$refs.audio
},
template: `<div class="audio-message-content">
<a v-if="loaded" class="play-pause-btn" href="#" :title="playing ? 'Clique aqui para pausar o audio' : 'Clique aqui ouvir o audio'" #click.prevent="togglePlay">
<svg key="pause" v-if="playing" x="0px" y="0px" viewBox="0 0 18 20" style="width: 18px; height: 20px; margin-top: -10px">
<path d="M17.1,20c0.49,0,0.9-0.43,0.9-0.96V0.96C18,0.43,17.6,0,17.1,0h-5.39c-0.49,0-0.9,0.43-0.9,0.96v18.07c0,0.53,0.4,0.96,0.9,0.96H17.1z M17.1,20"/>
<path d="M6.29,20c0.49,0,0.9-0.43,0.9-0.96V0.96C7.19,0.43,6.78,0,6.29,0H0.9C0.4,0,0,0.43,0,0.96v18.07C0,19.57,0.4,20,0.9,20H6.29z M6.29,20"/>
</svg>
<svg key="play" v-else x="0px" y="0px" viewBox="0 0 18 22" style="width: 18px; height: 22px; margin-top: -11px">
<path d="M17.45,10.01L1.61,0.14c-0.65-0.4-1.46,0.11-1.46,0.91V20.8c0,0.81,0.81,1.32,1.46,0.91l15.84-9.87C18.1,11.43,18.1,10.41,17.45,10.01L17.45,10.01z M17.45,10.01"/>
</svg>
</a>
<div v-else class="loading">
<div class="spinner"></div>
</div>
<div class="controls">
<span class="current-time">{{ currentTime }}</span>
<div class="slider" data-direction="horizontal" #click="">
<div class="progress" :style="{width: percent}">
<div class="pin" id="progress-pin" data-method="rewind"></div>
</div>
</div>
<span class="total-time">{{ totalTime }}</span>
</div>
<audio ref="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/Swing_Jazz_Drum.mp3" #loadedmetadata="loadedMetaData" #canplay="canPlay" #timeupdate="timeUpdate" #ended="ended"></audio>
</div>`
})
var app = new Vue({
el: '#app'
})
.audio-message-content {
width: 400px;
min-width: 300px;
height: 56px;
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 24px;
padding-right: 24px;
border-radius: 4px;
user-select: none;
-webkit-user-select: none;
background-color: #fff;
}
.audio-message-content .play-pause-btn {
position: relative;
width: 18px;
height: 22px;
cursor: pointer;
}
.audio-message-content .play-pause-btn svg {
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -9px;
}
.audio-message-content .spinner {
width: 18px;
height: 18px;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/loading.png);
background-size: cover;
background-repeat: no-repeat;
animation: spin 0.4s linear infinite;
}
.audio-message-content .slider {
flex-grow: 1;
background-color: #D8D8D8;
cursor: pointer;
position: relative;
}
.audio-message-content .slider .progress {
background-color: #44BFA3;
border-radius: inherit;
position: absolute;
pointer-events: none;
}
.audio-message-content .slider .progress .pin {
height: 16px;
width: 16px;
border-radius: 8px;
background-color: #44BFA3;
position: absolute;
pointer-events: all;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);
}
.audio-message-content .controls {
font-family: 'Roboto', sans-serif;
font-size: 16px;
line-height: 18px;
color: #55606E;
display: flex;
flex-grow: 1;
justify-content: space-between;
align-items: center;
margin-left: 24px;
}
.audio-message-content .controls .slider {
margin-left: 16px;
margin-right: 16px;
border-radius: 2px;
height: 4px;
}
.audio-message-content .controls .slider .progress {
width: 0;
height: 100%;
}
.audio-message-content .controls .slider .progress .pin {
right: -8px;
top: -6px;
}
.audio-message-content .controls span {
cursor: default;
}
svg, img {
display: block;
}
#keyframes spin {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(1turn);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<audio-player></audio-player>
</div>
Vue Component Codepen: https://codepen.io/caiokawasaki/pen/QzRMwz
Functions like the following I could not understand nor find anything on the internet:
window[handleMethod]
window[pin.dataset.method]
Can anyone help me finalize this component?
Edit
I've converted all of the html and javascript into a Vue component but anyway it still is not working properly.
The only thing that is not working properly is the progress bar. It needs to perform two functions:
Clicking it should go to the desired time.
When clicking on the pin and drag it should go to the desired time.
I use Vue Cli, neither of the above two work in the form of .vue files, but in Codepen normally written only function 2 works.
Codepen: https://codepen.io/caiokawasaki/pen/VqOqBQ

The function: window[handleMethod] is executed by deriving the name of the method off of the data- property from the pin element:
<div class="pin" id="progress-pin" data-method="rewind"></div>
So window[handleMethod] is equivalent to window.rewind()
The same is true for window[pin.dataset.method].
So in your case:
this[handleMethod](event)
and:
this[pin.dataset.method](event)
Should be suitable replacements.

Why slideshow wont work on server but work offline

My problem is that when i open index.html in browser(offline) image slider works great. But when i try to open it on server (it takes actually long time to load images are over 5mb) it wont slide. You can try to click on that white dots in right corner and nothing happen. Thanks for any advice.
Code is
<!-- BEGIN - SlideShow -->
<div class="ImageSlider">
<div class="ImageSlider-scroller">
<ul class="ImageSlider-items">
<li class="ImageSlider-item" style="background-image: url(http://vitas.sk/OnlineTv/images/1.jpg);"></li>
<li class="ImageSlider-item" style="background-image: url(http://vitas.sk/OnlineTv/images/2.jpg);"></li>
<li class="ImageSlider-item" style="background-image: url(http://vitas.sk/OnlineTv/images/3.jpg);"></li>
</ul>
<nav class="ImageSlider-indicators">
</nav>
</div>
</div>
<!-- END - SlideShow -->
/* Image Slider */
.ImageSlider {
display: flex;
align-items: stretch;
height: 50%;
}
.ImageSlider-button {
width: 40px;
border: none;
background: transparent;
color: #000000;
font-size: 40px;
text-align: center;
outline: none;
opacity: 0.5;
transition: opacity 300ms ease-out;
}
.ImageSlider-button:hover {
opacity: 1;
}
.ImageSlider-scroller {
flex: 1;
overflow: hidden;
position: relative;
}
.ImageSlider-items {
margin: 0;
padding: 0;
list-style: none;
white-space: nowrap;
font-size: 0;
line-height: 0;
transition: transform 0.6s cubic-bezier(1, 0, 0, 1);
}
.ImageSlider-item {
display: inline-block;
padding-bottom: 31.25%;
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
}
.ImageSlider-indicators {
list-style: none;
padding: 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: block;
text-align: right;
padding: 40px 140px;
font-size: 0;
}
.ImageSlider-indicator {
display: inline-block;
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
border: 2px solid #FFFFFF;
width: 14px;
height: 14px;
border-radius: 16px;
margin: 0 4px;
background-color: rgba(255, 255, 255, 0);
transition: background-color 0.4s ease-in-out;
}
.ImageSlider-indicator:hover,
.ImageSlider-indicator--is-active {
background-color: #FFFFFF;
}
And Js
/* global Modernizr */
if (!Object.assign) {
Object.defineProperty(Object, 'assign', {
enumerable: false,
configurable: true,
writable: true,
value: function(target) {
'use strict';
if (target === undefined || target === null) {
throw new TypeError('Cannot convert first argument to object');
}
var to = Object(target);
for (var i = 1; i < arguments.length; i++) {
var nextSource = arguments[i];
if (nextSource === undefined || nextSource === null) {
continue;
}
nextSource = Object(nextSource);
var keysArray = Object.keys(nextSource);
for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
var nextKey = keysArray[nextIndex];
var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
if (desc !== undefined && desc.enumerable) {
to[nextKey] = nextSource[nextKey];
}
}
}
return to;
}
});
}
(function(window, document, Modernizr) {
"use strict";
var d = document;
var transform = Modernizr.prefixed('transform');
function ImageSliderIndicators(imageSlider, options) {
this.imageSlider = imageSlider;
this.options = Object.assign({}, ImageSliderIndicators.DEFAULTS, options || {});
this.el = d.querySelector('.' + this.options.indicatorsClass);
this.indicators = [].slice.call(d.querySelectorAll('.' + this.options.indicatorClass));
this.imageSlider.el.addEventListener('positionChanged', this.onPositionChanged.bind(this));
this.el.addEventListener('click', this.onIndicatorClick.bind(this), false);
this.onPositionChanged();
}
ImageSliderIndicators.DEFAULTS = {
indicatorsClass: 'ImageSlider-indicators',
indicatorClass: 'ImageSlider-indicator',
indicatorActiveClass: 'ImageSlider-indicator--is-active'
};
ImageSliderIndicators.prototype.onIndicatorClick = function onIndicatorClick(event) {
var position = this.indicators.indexOf(event.target);
if (position !== -1) {
this.imageSlider.goto(position);
}
};
ImageSliderIndicators.prototype.onPositionChanged = function onPositionChanged() {
var self = this;
this.indicators.forEach(function(element, index) {
var action = index === self.imageSlider.position ? 'add' : 'remove';
element.classList[action](self.options.indicatorActiveClass);
});
};
function ImageSlider(options) {
this.options = Object.assign({}, ImageSlider.DEFAULTS, options || {});
this.position = 0;
this.el = d.querySelector('.' + this.options.imageSliderClass);
this.items = d.querySelector('.' + this.options.itemsClass);
this.itemCount = d.querySelectorAll('.' + this.options.itemClass).length;
this.scroller = d.querySelector('.' + this.options.scrollerClass);
this.previousButton = d.querySelector('.' + this.options.previousButtonClass);
this.nextButton = d.querySelector('.' + this.options.nextButtonClass);
this.indicators = new ImageSliderIndicators(this, this.options.indicators);
window.addEventListener('resize', this.render.bind(this));
this.nextButton && this.nextButton.addEventListener('click', this.next.bind(this));
this.previousButton && this.previousButton.addEventListener('click', this.previous.bind(this));
}
ImageSlider.DEFAULTS = {
imageSliderClass: 'ImageSlider',
itemsClass: 'ImageSlider-items',
itemClass: 'ImageSlider-item',
scrollerClass: 'ImageSlider-scroller',
previousButtonClass: 'js-ImageSlider-button--previous',
nextButtonClass: 'js-ImageSlider-button--next'
};
ImageSlider.prototype.render = function render() {
this.items.style[transform] = 'translate3d(' + (-this.position * this.items.offsetWidth) + 'px,0,0)';
};
ImageSlider.prototype.goto = function goto(position) {
var event = d.createEvent('Event');
event.initEvent('positionChanged', true, true);
this.position = position;
this.el.dispatchEvent(event);
this.render();
};
ImageSlider.prototype.previous = function previous() {
this.goto((this.position + (this.itemCount - 1)) % this.itemCount);
};
ImageSlider.prototype.next = function next() {
this.goto((this.position + 1) % this.itemCount);
};
window.ImageSlider = ImageSlider;
}).call(this, window, window.document, Modernizr);
new ImageSlider();

There is an JavaScript error in your code before the slider initialization.
Uncaught ReferenceError: Modernizr is not defined
You should fix this dependency issue and I guess your slider will work.
(maybe change http to https in Modernizr url)

For me my browser are blocking Modernizr script and a bunch of other thing to be loaded

How do I stop one div from moving the other but still keep them vertically aligned?

Here is the codepen: http://codepen.io/anon/pen/WbYjOW
When you add an interest in the right box (thus causing the right div to grow), the dropdown list moves with it, at least in Firefox and Chrome.
How can this unwanted movement be prevented?
Here is the code pasted (same as codepen):
HTML
/*Adder*/
$(document).ready(function() {
var i = 0;
for (i = 0; i < localStorage.length; i++) {
var taskID = "task-" + i;
$('#taskList').append("<li id='" + taskID + "'>" + localStorage.getItem(taskID) + "</li>");
}
$('#clear').click(function() {
localStorage.clear();
});
$('#taskEntryForm').submit(function() {
if ($('#taskInput').val() !== "") {
var taskID = "task-" + i;
var taskMessage = $('#taskInput').val();
localStorage.setItem(taskID, taskMessage);
$('#taskList').append("<li class='task' id='" + taskID + "'>" + taskMessage + "</li>");
var task = $('#' + taskID);
task.css('display', 'none');
task.slideDown();
$('#taskInput').val("");
i++;
}
return false;
});
$('#taskList').on("click", "li", function(event) {
self = $(this);
taskID = self.attr('id');
localStorage.removeItem(taskID);
self.slideUp('slow', function() {
self.remove();
});
});
});
/*EasyDropDown*/
/*
* EASYDROPDOWN - A Drop-down Builder for Styleable Inputs and Menus
* Version: 2.0.4
* License: Creative Commons Attribution 3.0 Unported - CC BY 3.0
* http://creativecommons.org/licenses/by/3.0/
* This software may be used freely on commercial and non-commercial projects with attribution to the author/copyright holder.
* Author: Patrick Kunka
* Copyright 2013 Patrick Kunka, All Rights Reserved
*/
(function(d) {
function e() {
this.isField = !0;
this.keyboardMode = this.hasLabel = this.cutOff = this.inFocus = this.down = !1;
this.nativeTouch = !0;
this.wrapperClass = "dropdown";
this.onSelect = null
}
function f(a, c) {
var b = new e;
b.init(a, c);
b.instances.push(b)
}
e.prototype = {
constructor: e,
instances: [],
init: function(a, c) {
var b = this;
d.extend(b, c);
b.$select = d(a);
b.options = [];
b.$options = b.$select.find("option");
b.isTouch = "ontouchend" in document;
b.$select.removeClass(b.wrapperClass + " dropdown");
b.$options.length && (b.$options.each(function(a) {
var c =
d(this);
c.is(":selected") && (b.selected = {
index: a,
title: c.text()
}, b.focusIndex = a);
c.hasClass("label") && 0 == a ? (b.hasLabel = !0, b.label = c.text(), c.attr("value", "")) : b.options.push({
domNode: c[0],
title: c.text(),
value: c.val(),
selected: c.is(":selected")
})
}), b.selected || (b.selected = {
index: 0,
title: b.$options.eq(0).text()
}, b.focusIndex = 0), b.render())
},
render: function() {
var a = this;
a.$container = a.$select.wrap('<div class="' + a.wrapperClass + (a.isTouch && a.nativeTouch ? " touch" : "") + '"><span class="old"/></div>').parent().parent();
a.$active = d('<span class="selected">' + a.selected.title + "</span>").appendTo(a.$container);
a.$carat = d('<span class="carat"/>').appendTo(a.$container);
a.$scrollWrapper = d("<div><ul/></div>").appendTo(a.$container);
a.$dropDown = a.$scrollWrapper.find("ul");
a.$form = a.$container.closest("form");
d.each(a.options, function() {
a.$dropDown.append("<li" + (this.selected ? ' class="active"' : "") + ">" + this.title + "</li>")
});
a.$items = a.$dropDown.find("li");
a.maxHeight = 0;
a.cutOff && a.$items.length > a.cutOff && a.$container.addClass("scrollable");
for (i = 0; i < a.$items.length; i++) {
var c = a.$items.eq(i);
a.maxHeight += c.outerHeight();
if (a.cutOff == i + 1) break
}
a.isTouch && a.nativeTouch ? a.bindTouchHandlers() : a.bindHandlers()
},
bindTouchHandlers: function() {
var a = this;
a.$container.on("click", function() {
a.$select.focus()
});
a.$select.on({
change: function() {
var c = d(this).find("option:selected"),
b = c.text(),
c = c.val();
a.$active.text(b);
"function" == typeof a.onSelect && a.onSelect.call(a, {
title: b,
value: c
})
},
focus: function() {
a.$container.addClass("focus")
},
blur: function() {
a.$container.removeClass("focus")
}
})
},
bindHandlers: function() {
var a = this;
a.query = "";
a.$container.on({
click: function() {
a.down ? a.close() : a.open()
},
mousemove: function() {
a.keyboardMode && (a.keyboardMode = !1)
}
});
d("body").on("click", function(c) {
c = d(c.target);
var b = a.wrapperClass.split(" ").join(".");
!c.closest("." + b).length && a.down && a.close()
});
a.$items.on({
click: function() {
var c = d(this).index();
a.select(c);
a.$select.focus()
},
mouseover: function() {
if (!a.keyboardMode) {
var c = d(this);
c.addClass("focus").siblings().removeClass("focus");
a.focusIndex =
c.index()
}
},
mouseout: function() {
a.keyboardMode || d(this).removeClass("focus")
}
});
a.$select.on({
focus: function() {
a.$container.addClass("focus");
a.inFocus = !0
},
blur: function() {
a.$container.removeClass("focus");
a.inFocus = !1
}
});
a.$dropDown.on("scroll", function(c) {
a.$dropDown[0].scrollTop == a.$dropDown[0].scrollHeight - a.maxHeight ? a.$container.addClass("bottom") : a.$container.removeClass("bottom")
});
a.$select.on("keydown", function(c) {
if (a.inFocus) {
a.keyboardMode = !0;
var b = c.keyCode;
if (38 == b || 40 == b || 32 == b) c.preventDefault(),
38 == b ? (a.focusIndex--, a.focusIndex = 0 > a.focusIndex ? a.$items.length - 1 : a.focusIndex) : 40 == b && (a.focusIndex++, a.focusIndex = a.focusIndex > a.$items.length - 1 ? 0 : a.focusIndex), a.down || a.open(), a.$items.removeClass("focus").eq(a.focusIndex).addClass("focus"), a.cutOff && a.scrollToView(), a.query = "";
if (a.down)
if (9 == b || 27 == b) a.close();
else {
if (13 == b) return c.preventDefault(), a.select(a.focusIndex), a.close(), !1;
if (8 == b) return c.preventDefault(), a.query = a.query.slice(0, -1), a.search(), !1;
38 != b && 40 != b && (c = String.fromCharCode(b),
a.query += c, a.search())
}
}
});
if (a.$form.length) a.$form.on("reset", function() {
a.$active.text(a.hasLabel ? a.label : "")
})
},
open: function() {
var a = window.scrollY || document.documentElement.scrollTop,
c = window.scrollX || document.documentElement.scrollLeft,
b = this.notInViewport(a);
this.closeAll();
this.$select.focus();
window.scrollTo(c, a + b);
this.$container.addClass("open");
this.$scrollWrapper.css("height", this.maxHeight + "px");
this.down = !0
},
close: function() {
this.$container.removeClass("open");
this.$scrollWrapper.css("height",
"0px");
this.focusIndex = this.selected.index;
this.query = "";
this.down = !1
},
closeAll: function() {
var a = Object.getPrototypeOf(this).instances;
for (i = 0; i < a.length; i++) a[i].close()
},
select: function(a) {
var c = this.options[a],
b = this.hasLabel ? a + 1 : a;
this.$items.removeClass("active").eq(a).addClass("active");
this.$active.text(c.title);
this.$select.find("option").prop("selected", !1).eq(b).prop("selected", "selected");
this.selected = {
index: a,
title: c.title
};
this.focusIndex = i;
"function" == typeof this.onSelect && this.onSelect.call(this, {
title: c.title,
value: c.value
})
},
search: function() {
for (i = 0; i < this.options.length; i++)
if (-1 != this.options[i].title.toUpperCase().indexOf(this.query)) {
this.focusIndex = i;
this.$items.removeClass("focus").eq(this.focusIndex).addClass("focus");
this.scrollToView();
break
}
},
scrollToView: function() {
if (this.focusIndex >= this.cutOff) {
var a = this.$items.eq(this.focusIndex).outerHeight() * (this.focusIndex + 1) - this.maxHeight;
this.$dropDown.scrollTop(a)
}
},
notInViewport: function(a) {
var c = a + (window.innerHeight || document.documentElement.clientHeight),
b = this.$dropDown.offset().top + this.maxHeight;
return b >= a && b <= c ? 0 : b - c + 5
}
};
d.fn.easyDropDown = function(a) {
return this.each(function() {
f(this, a)
})
};
d(function() {
"function" !== typeof Object.getPrototypeOf && (Object.getPrototypeOf = "object" === typeof "test".__proto__ ? function(a) {
return a.__proto__
} : function(a) {
return a.constructor.prototype
});
d(".dropdown").each(function() {
var a = d(this).attr("data-settings");
settings = a ? d.parseJSON(a) : {};
f(this, settings)
})
})
})(jQuery);
/*adder*/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);
* {
padding: 0;
margin: 0;
}
body {
background: url('');
background-color: #2a2a2a;
font-family: 'Open Sans', sans-serif;
}
.adder #container {
background-color: #111216;
color: #999999;
width: 350px;
/*margin: 50px auto auto auto;*/
padding-bottom: 12px;
}
.adder #formContainer {
padding-top: 12px;
}
.adder #taskIOSection {} .adder #taskInput {
font-size: 14px;
font-family: 'Open Sans', sans-serif;
height: 36px;
width: 311px;
border-radius: 100px;
background-color: #202023;
border: 0;
color: #fff;
display: block;
padding-left: 15px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
}
.adder #taskInput:focus {
box-shadow: 0px 0px 1pt 1pt #999999;
background-color: #111216;
outline: none;
}
.adder::-webkit-input-placeholder {
color: #333333;
font-style: italic;
/* padding-left:10px; */
}
.adder:-moz-placeholder {
/* Firefox 18- */
color: #333333;
font-style: italic;
}
.adder::-moz-placeholder {
/* Firefox 19+ */
color: #333333;
font-style: italic;
}
.adder:-ms-input-placeholder {
color: #333333;
font-style: italic;
}
.adder header {
margin-top: 0;
background-color: #F94D50;
width: 338px;
height: 48px;
padding-left: 12px;
}
.adder header h1 {
font-size: 25px;
font-weight: 300;
color: #fff;
line-height: 48px;
width: 50%;
display: inline;
}
.adder header a {
width: 40%;
display: inline;
line-height: 48px;
}
.adder #taskEntryForm {
background-color: #111216;
width: 326px;
height: 48px;
border-width: 0px;
padding: 0px 12px 0px 12px;
font-size: 0px;
}
.adder #taskList {
width: 350px;
margin: auto;
font-size: 16px;
font-weight: 600;
text-align: left;
}
.adder ul li {
background-color: #17181D;
height: 48px;
width: 314px;
padding-left: 12px;
margin: 0 auto 10px auto;
line-height: 48px;
list-style: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*now this*/
/* reset */
ul {
margin: 0;
padding: 0;
}
/* --- EASYDROPDOWN DEFAULT THEME --- */
/* PREFIXED CSS */
.dropdown,
.dropdown div,
.dropdown li,
.dropdown div::after {
-webkit-transition: all 150ms ease-in-out;
-moz-transition: all 150ms ease-in-out;
-ms-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
}
.dropdown .selected::after,
.dropdown.scrollable div::after {
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
pointer-events: none;
}
/* WRAPPER */
.dropdown {
/*margin: 50px auto auto auto;*/
position: relative;
width: 160px;
border: 1px solid #ccc;
cursor: pointer;
background: #fff;
border-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.dropdown.open {
z-index: 2;
}
.dropdown:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, .15);
}
.dropdown.focus {
box-shadow: 0 0 5px rgba(51, 102, 248, .4);
}
/* CARAT */
.dropdown .carat {
position: absolute;
right: 12px;
top: 50%;
margin-top: -4px;
border: 6px solid transparent;
border-top: 8px solid #000;
}
.dropdown.open .carat {
margin-top: -10px;
border-top: 6px solid transparent;
border-bottom: 8px solid #000;
}
/* OLD SELECT (HIDDEN) */
.dropdown .old {
position: absolute;
left: 0;
top: 0;
height: 0;
width: 0;
overflow: hidden;
}
.dropdown select {
position: absolute;
left: 0px;
top: 0px;
}
.dropdown.touch .old {
width: 100%;
height: 100%;
}
.dropdown.touch select {
width: 100%;
height: 100%;
opacity: 0;
}
/* SELECTED FEEDBACK ITEM */
.dropdown .selected,
.dropdown li {
display: block;
font-size: 18px;
line-height: 1;
color: #000;
padding: 9px 12px;
overflow: hidden;
white-space: nowrap;
}
.dropdown .selected::after {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 60px;
border-radius: 0 2px 2px 0;
box-shadow: inset -55px 0 25px -20px #fff;
}
/* DROP DOWN WRAPPER */
.dropdown div {
position: absolute;
height: 0;
left: -1px;
right: -1px;
top: 100%;
margin-top: -1px;
background: #fff;
border: 1px solid #ccc;
border-top: 1px solid #eee;
border-radius: 0 0 3px 3px;
overflow: hidden;
opacity: 0;
}
/* Height is adjusted by JS on open */
.dropdown.open div {
opacity: 1;
z-index: 2;
}
/* FADE OVERLAY FOR SCROLLING LISTS */
.dropdown.scrollable div::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50px;
box-shadow: inset 0 -50px 30px -35px #fff;
}
.dropdown.scrollable.bottom div::after {
opacity: 0;
}
/* DROP DOWN LIST */
.dropdown ul {
/*position: absolute;
left: 0;
top: 0;*/
height: 100%;
width: 100%;
list-style: none;
overflow: hidden;
}
.dropdown.scrollable.open ul {
overflow-y: auto;
}
/* DROP DOWN LIST ITEMS */
.dropdown li {
list-style: none;
padding: 8px 12px;
}
/* .focus class is also added on hover */
.dropdown li.focus {
background: #d24a67;
position: relative;
z-index: 3;
color: #fff;
}
.dropdown li.active {
font-weight: 700;
}
/*Vertical*/
.wrap {
text-align: center;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100px;
display: block;
}
div div {
display: inline-block;
}
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="css/styletime.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/init.js"></script>
</head>
<body>
Hello?
<div class="wrap">
<div>
<select name="" id="" class="dropdown" style="display:inline-block;">
<option class="label">Label</option>
<option value="1">option 1</option>
<option value="1">option 2</option>
<option value="1">option 3</option>
<option value="1">option 4</option>
<option value="1">option 5</option>
<option value="1">option 6</option>
<option value="1">option 7</option>
<option value="1">option 8</option>
<option value="1">option 9</option>
</select>
</div>
<div class="adder" style="display:inline-block;">
<div id="container">
<section id="taskIOSection">
<div id="formContainer">
<form id="taskEntryForm">
<input id="taskInput" placeholder="Add your interests here..." />
</form>
</div>
<ul id="taskList"></ul>
</section>
</div>
</div>
</div>
</body>
</html>

set vertical-align to top to .dropdown wrapper, like here

JS slider tooltip

I have a slider with a pop-up that shows the current value of the slider.
but I want it only appears if I click on the slider and disappears when I do not click
is there a way to do it?
Below is my css js and html code
html:
<input type="range" id="myrange" name="myrange" class="zoom-range" min="0.25" max="2.00" step="0.01"/>
<output id="rangeHover" for="myrange" onmouseover="value = myrange.valueAsNumber;"></output>
js:
function modifyOffset() {
var el, newPoint, newPlace, offset, siblings, k;
width = this.offsetWidth;
newPoint = (this.value - this.getAttribute("min")) / (this.getAttribute("max") - this.getAttribute("min"));
offset = -1;
if (newPoint < 0) { newPlace = 0; }
else if (newPoint > 1) { newPlace = width; }
else { newPlace = width * newPoint + offset; offset -= newPoint;}
siblings = this.parentNode.childNodes;
for (var i = 0; i < siblings.length; i++) {
sibling = siblings[i];
if (sibling.id == this.id) { k = true; }
if ((k == true) && (sibling.nodeName == "OUTPUT")) {
outputTag = sibling;
}
}
outputTag.style.left = newPlace + "px";
outputTag.style.marginLeft = offset + "%";
outputTag.innerHTML = this.value;
}
function modifyInputs() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].getAttribute("type") == "range") {
inputs[i].onchange = modifyOffset;
// the following taken from http://stackoverflow.com/questions/2856513/trigger-onchange-event-manually
if ("fireEvent" in inputs[i]) {
inputs[i].fireEvent("onchange");
} else {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
inputs[i].dispatchEvent(evt);
}
}
}
}
window.onload = modifyInputs;
css:
output {
position: absolute;
background-image: linear-gradient(#FAFAD2, #FAFAD2);
width: 30px;
height: 15px;
text-align: center;
color: black;
border-radius: 5px;
display: block;
bottom: 120%;
margin-top:5000px;
font-size:11px;
left: 100%;
}
output:after {
content: "";
position: absolute;
width: 0px;
height: 0px;
border-top: 10px solid #FAFAD2;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: 100%;
left: 100%;
margin-left: -26px;
margin-top: -1px;
}
#rangeHover{
display: block;
position: relative;
margin: -50px;
padding-right:10px;
padding-left:10px;
}
Thanks for help!

you could add to css:
output
{
display:none
}
input:hover + output
{
display:block;
}
UPDATE
tooltip visible on click:
input:active+ output
{
display:block;
}