Develop Reference

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.

Unable to add text into slideshow li element

I am unable to add text into slideshow li element. Its not my slideshow i downloaded it from codepen https://codepen.io/team/moderndeveloper/pen/MKgqzq?q=imageslider&limit=team&team_name=moderndeveloper . When i add some text into li element entire slideshow disappear. I tried to add div into li element but nothing help. So, is there any solution for this?
HTML
<div class="ImageSlider">
<div class="ImageSlider-scroller">
<ul class="ImageSlider-items">
<li class="ImageSlider-item" style="background-image: url(https://farm6.staticflickr.com/5076/14164379250_71c3a5b32a_b.jpg);"></li>
<li class="ImageSlider-item" style="background-image: url(https://farm3.staticflickr.com/2937/14371160993_186df4a083_b.jpg);"></li>
<li class="ImageSlider-item" style="background-image: url(https://farm3.staticflickr.com/2914/14185397280_e51c40b1df_b.jpg);"></li>
</ul>
<nav class="ImageSlider-indicators">
</nav>
</div>
</div>
CSS
body {
margin: 0;
}
.ImageSlider {
display: flex;
align-items: stretch;
}
.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;
}
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();

Durinko.
The slideshow doesn't disappear. The content is pushed down.
The secret is in the CSS code.
Try this:
HTML
<li class="ImageSlider-item" style="background-image: url(https://farm6.staticflickr.com/5076/14164379250_71c3a5b32a_b.jpg);"><p>Some Text</p></li>
CSS:
p {
position: absolute;
font-size: 30px;
}

how to change image in JavaScript using an array of image sources

here is my html code:
var picList = ["http://www.acidre.com/dummy/16:9x1080", "http://www.nexusnetsolutions.com/image/product.png", "http://lehmanlaw.mn/wp-content/uploads/2016/03/vga-1.png"];
function nextPic() {
var cur = 0;
var f = 0;
var x = document.getElementById("pics").src;
for (cur = 0; cur < picList.length; cur++) {
if (x == picList[cur]) {
f = 1;
break;
}
}
if (f == 1) {
if (cur < picList.length - 1) {
document.getElementById("pics").src = picList[cur + 1];
}
}
}
function prevPic() {
var cur = 0;
var f = 0;
var x = document.getElementById("pics").src;
for (cur = 0; cur < picList.length; cur++) {
if (x == picList[cur]) {
f = 1;
break;
}
}
if (f == 1) {
if (cur > 0) {
document.getElementById("pics").src = picList[cur - 1];
}
}
}
header {
position: absolute;
display: block;
background: cyan;
height: 150px;
width: 1350px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
h1 {
color: white;
position: absoute;
padding-left: 450px;
padding-top: 15px;
font-family: 'Cabin', sans-serif;
font-size: 50px;
font-variant: small-caps;
}
#pics {
margin-top: 170px;
margin-left: 270px;
}
#bnext {
position: absolute;
margin-left: 100px;
margin-top: 400px;
width: 80px;
}
#bprev {
position: absolute;
margin-left: -980px;
margin-top: 400px;
width: 80px;
}
<header>
<h1>Image Showcase</h1>
</header>
<img id="pics" src="http://lehmanlaw.mn/wp-content/uploads/2016/03/vga-1.png" alt="Forms" width="800px" height="500px"></img>
<button id="bnext" type="button" onclick="nextPic()">Next</input>
<button id="bprev" type="button" onclick="prevPic()">Previous</input>
nothing is happening on clicking the next and previous buttons. cant understand why.. would be very helpful if anyone gives a solution

Why would you want to check for the images source?
if (x == picList[cur]) {
f = 1;
break;
}
and I can't see where u changed your image, except on some conditions:
if (cur ...) {
document.getElementById("pics").src = ...;
}
All this are not needed. U only need to switch images based on the array content and add your conditions to safeguard against 'undefined' array index.
Here is a simple working sample code:
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Image Showcase</h1>
</header>
<img id="pics" src="http://lehmanlaw.mn/wp-content/uploads/2016/03/vga-1.png" alt="Forms" width="800px" height="500px"></img>
<button id="bnext" type="button">Next</input>
<button id="bprev" type="button">Previous</input>
<script>
(function(){
var images = ["http://www.w3schools.com/images/w3schoolscom_gray.gif", "none"];
var index = 0;
function prevImage() {
index--;
index = index < 0 ? 0 : index;
return images[index];
}
function nextImage() {
index++;
index = index >= images.length ? images.length - 1 : index;
return images[index];
}
document.querySelector("#bprev").onclick= function() {
document.querySelector("#pics").src = prevImage();
}
document.querySelector("#bnext").onclick= function() {
document.querySelector("#pics").src = nextImage();
}
})();
</script>
</body>
</html>

var picList = ["http://allwebco-templates.com/support/picts/sample-image.jpg",
"http://mfs1.cdnsw.com/fs/cc0/normal/cx0ms-193.jpg",
"https://freethumbs.dreamstime.com/114/big/free_1145336.jpg",
"http://images.all-free-download.com/images/graphicthumb/male_lion_193754.jpg"
];
var currentIndex = 0;
var pic = document.getElementById("pics");
function nextPic() {
pic.src = picList[(currentIndex++) % picList.length];
}
function prevPic() {
if (currentIndex == 0)
currentIndex = picList.length - 1;
else
currentIndex = currentIndex - 1;
pic.src = picList[currentIndex];
}
header {
position: absolute;
display: block;
background: cyan;
height: 150px;
width: 1350px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
h1 {
color: white;
position: absoute;
padding-left: 450px;
padding-top: 15px;
font-family: 'Cabin', sans-serif;
font-size: 50px;
font-variant: small-caps;
}
#pics {
margin-top: 170px;
margin-left: 270px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Image Showcase</title>
<link rel="stylesheet" type="text/css" href="imgShow.css"></link>
<script src="imgShow.js"></script>
</head>
<body>
<header>
<h1>Image Showcase</h1>
</header>
<img id="pics" src="http://allwebco-templates.com/support/picts/sample-image.jpg" alt="Forms" width="300px" height="200px" /></img>
<button id="bnext" type="button" onclick="nextPic()">Next</input>
<button id="bprev" type="button" onclick="prevPic()">Previous</input>
</body>
</html>

The Html for you button is incorrect,change it to .
<button id="bnext" type="button" onclick="nextPic()">Next</button >
<button id="bprev" type="button" onclick="prevPic()">Previous</button>

Here is an example to do this in a slightly different way. One thing is that I removed the invocation back in JS file instead of calling the prevPic() nextPic() inline.
JS
var picList = [
'http://orig10.deviantart.net/78b3/f/2009/025/0/0/0044146485035ccdcc4f99a681af80c6.jpg',
'http://pre15.deviantart.net/39b2/th/pre/i/2012/221/3/3/square_2_by_lilith1995-d5ag32b.jpg',
'http://img15.deviantart.net/4e63/i/2010/188/6/c/fly__fly_away___sqaure_crop_by_tagirocks.jpg',
'http://img13.deviantart.net/036f/i/2016/287/c/3/harley_quinn_by_mz09-dakslb5.jpg',
];
function imageShowCase(list) {
var cur = 0;
var img = document.getElementById('pics');
/* Use controls element to delegate from buttons */
var controls = document.getElementById('controls');
/* Update the image src */
var update = function(index) {
img.src = list[index];
};
/* Count up on the current index, reset to 0 if reaced the total length of array */
var next = function() {
cur = (cur < list.length - 1) ? (cur + 1) : 0;
};
/* Count down, reset to length of array, minus 1 */
var prev = function() {
cur = (cur === 0) ? (cur = list.length - 1) : cur - 1;
};
/* Delegate to the controls elememt */
controls.addEventListener('click', function(e) {
/* Stop any event bubling */
e.stopPropagation();
/* Check which element was clicked by comparing IDs */
if (e.target.id === 'bnext') { next(); }
else if (e.target.id === 'bprev') { prev(); }
else { return; }
/* Render the image with new src */
update(cur);
});
}
imageShowCase(picList);
CSS
header{
display: block;
background: cyan;
height: 150px;
width: 1350px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
h1{
color: white;
position: absoute;
padding-left: 450px;
padding-top: 15px;
font-family: 'Cabin', sans-serif;
font-size: 50px;
font-variant: small-caps;
}
.wrapper {
margin: 0 auto;
max-width: 400px;
}
#pics{
width: 100%;
}
#bnext{
width: 80px;
}
#bprev{
width: 80px;
}
HTML
<header>
<h1>Image Showcase</h1>
</header>
<div class="wrapper">
<div id="controls">
<button id="bprev" type="button">Previous</button>
<button id="bnext" type="button">Next</button>
</div>
<br>
<img id="pics" src="http://orig10.deviantart.net/78b3/f/2009/025/0/0/0044146485035ccdcc4f99a681af80c6.jpg"/>
</div>

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;
}