We Keep Coding

Load/replace an img or video specified in a data-src

My aim is to display a different image or video displayed within a div, which changes when other elements are hovered over.
I think I have this working with just an image by checking what image file is specified in a data-src and loading that into an img tag on the page. However I need to change the markup from img to video when a movie file is specifed - that's what I need help with.
You can see the 'working' image version here (not the 3rd item has a placeholder video in the data-src so won't show):
https://codepen.io/moy/pen/BaNxzdL
So currently on the page I have this empty image tag:
<div class="carousel__bg">
<img src="" />
</div>
Image files are specified on multiple carousel items in a data-src like the example below:
<div class="carousel__item" data-src="img/content/1-wide.jpg">
<div class="carousel__content">
<h4 class="carousel__title">Behind The Scenes</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Denim Cox in Fuck Yes Dude!</h2>
Read the Article
</div>
<img src="img/content/1.jpg" class="carousel__image" />
</div>
And the javascript that gets the image URL and adds it to the page is this:
$(function() {
var overlay = $('.carousel__bg img'), cached = {};
$('.carousel__item').mouseenter(function() {
var item = $(this),
spot = $(this).index('.carousel__item'),
value = item.attr('data-src');
overlay.fadeTo(0,0).attr('src', value);
if (!overlay[0].complete && !cached[spot]) {
cached[spot] = true;
$('.carousel__bg').addClass('loading');
overlay.one('load', function() {
$('.carousel__bg').removeClass('loading');
overlay.fadeTo(300,1);
});
}
else overlay.fadeTo(300,1);
})
.mouseleave(function() {
overlay.finish();
});
});
Obviously the problem is if I specify data-src="video/safari.mp4" it isn't going to work as it's currently trying to add the video into an img element. So how would I go about switching between img/video tags? A related issue would be to be able to load both an mp4 + webm/ogg versions of the file?
So would it need to be reworked to 'inject' an img or video element onto the page depending on the extension? I tried using an if/else statement to check if the data-src contained the .mp4 extension and just hardcoded a video element on the page to text but couldn't get that to work. :/
These files can be quite large which is why I'm not loading them until they're needed.
Edit
As a bit of an aside, I decided to put these items in a carousel to see if this effect would work - and it pretty much does!
However, I noticed the way that I fade out the images in the CSS (fade all of them out when the .carousel is hovered but then target the individual item and overwrite) is now a problem when you hover over the prev/next buttons as the images don't fade back in.
Anyone got a better way of handling this? I tried a 100% CSS method but maybe added a class would be better?
Slick carousel example: https://codepen.io/moy/pen/JjdvRyG

The video element part is not two hard, the important part is getting the mime type of the video to add to the source element.
The data-src takes an array of video urls (of different types) and adds the different sources to the element after finding the type.
I updated your codepen
As for the buttons, they are inside the .carousel element so the will bubble the hover to all the elements styled based on that. I made some elements more specific so they will only change style when the list of items is hovered.
Finally, in order for the listeners to apply to the slick element, I changed them to .on.
var VIDEO_TYPES = {
'mp4': 'video/mp4',
'webm': 'video/webm',
'ogv': 'video/ogg',
}
/**
* Slick
*/
$(document).ready(function() {
$('.slick-carousel').slick({
//centerMode: true,
centerPadding: '0',
slidesToShow: 3,
arrows: true,
dots: false,
prevArrow: '<a class="slick-arrow slick-arrow--prev"><span>←</span></a>',
nextArrow: '<a class="slick-arrow slick-arrow--next"><span>→</span></a>',
responsive: [{
breakpoint: 960,
settings: {
centerMode: true,
slidesToShow: 1
}
},
{
breakpoint: 600,
settings: {
centerMode: true,
slidesToShow: 1
}
},
{
breakpoint: 480,
settings: {
centerMode: true,
slidesToShow: 1
}
}
]
})
.on('setPosition', function(event, slick) {
slick.$slider.find(".slick-slide .tile:not(.position-set)").addClass('position-set').css('height', slick.$slideTrack.height() - 30 + 'px');
});
/**
* Image Swap
*/
var cached = {};
var overlay_video = $(".carousel__bg video");
var overlay_img = $(".carousel__bg img");
var overlay = $(".carousel__bg");
$(".carousel__item")
.on('mouseenter', function() {
var item = $(this),
spot = $(this).index(".carousel__item"),
value = item.data("src");
overlay_video.empty();
var overlay_item;
overlay.fadeTo(0, 0);
//videos will have an array ur urls
var is_video = value instanceof Array;
if(is_video) {
overlay_item = overlay_video;
overlay_img.attr("src", '');
overlay_video.append(value.map((url) => {
var extension = url.split('.').pop();
var type = VIDEO_TYPES[extension];
return `<source src="${url}" type="${type}">`
}));
} else {
overlay_item = overlay_img;
overlay_img.attr("src", value);
}
//force the video element to reload
overlay_video.get(0).load();
if (!overlay_item.complete && !cached[spot]) {
cached[spot] = true;
overlay.addClass("loading");
overlay_item.one(is_video ? "loadeddata" : "load", function() {
overlay.removeClass("loading");
overlay.fadeTo(300, 1);
});
} else overlay.fadeTo(300, 1);
})
.on('mouseleave', function() {
overlay.finish();
});
});
/**
* Base styling.
*/
html {
background: rgb(255,255,255);
font-size: 62.5%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: 100%;
}
body {
background-color: transparent;
color: rgb(0,0,0);
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
font-weight: 400;
line-height: 1.6rem;
margin: 0;
padding: 30px 0 0;
text-rendering: optimizeLegibility;
}
/**
* Carousel
*/
.carousel {
background: rgb(0,0,0);
color: rgb(255,255,255);
height: 640px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 100%;
max-width: 1200px;
}
.carousel:before,
.carousel:after {
background: rgba(255,255,255,.25);
content: "";
height: 100%;
position: absolute;
top: 0;
left: 33.33333%;
width: 1px;
z-index: 30;
}
.carousel:after {
left: 66.66666%;
}
/**
* Background (fullwidth) image
*/
.carousel__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
.carousel__bg.loading {
background: url(../img/interface/loading.gif) no-repeat center center;
}
.carousel__bg img, .carousel__bg video {
display: block;
height: 640px;
object-fit: cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
}
/**
* Individual carousel item
*/
.carousel__item {
box-sizing: border-box;
float: left;
height: 640px;
position: relative;
width: 33.33333%;
}
.carousel__item:hover {
cursor: pointer;
}
/* Text Content */
.carousel__content {
background: rgba(0,0,0,.45);
box-sizing: border-box;
color: rgb(255,255,255);
height: 100%;
min-height: 100%;
padding: 30px;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 15;
}
.carousel__title,
.carousel__subtitle,
.carousel__flag {
color: rgb(255,255,255);
letter-spacing: 1px;
font-family: 'Anton', sans-serif;
font-weight: 400;
line-height: 1;
margin: 0 0 5px;
padding: 0;
text-transform: uppercase;
}
.carousel__title {
font-size: 20px;
transition: all .25s;
}
.carousel__subtitle {
display: none;
font-size: 48px;
}
.carousel__flag {
color: rgb(45,190,193);
font-size: 14px;
}
/* Button */
.carousel__btn {
background: transparent;
border: 1px solid rgb(255,255,255);
box-sizing: border-box;
color: rgb(255,255,255);
display: block;
font-family: 'Anton', sans-serif;
font-size: 12px;
font-weight: 400;
height: 45px;
line-height: 45px;
letter-spacing: 1px;
opacity: 0;
position: absolute;
padding: 0 30px;
bottom: 30px;
left: 30px;
right: 30px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: all .15s;
-webkit-backface-visibility: hidden;
}
.carousel__btn:visited {
background: transparent;
}
.carousel__btn:focus,
.carousel__btn:hover {
background: rgb(45,190,193);
border-color: rgb(45,190,193);
}
/* Image */
.carousel__image {
display: block;
height: 100%;
opacity: 1;
object-fit: cover;
transition: all .30s;
position: relative;
width: 100%;
max-width: 100%;
-webkit-backface-visibility: hidden;
}
/* When hovering over the carousel, fade all the titles out */
.carousel>.slick-carousel>.slick-list:hover .carousel__title {
opacity: .30;
}
/* But not the one contained without the 'item' you're hovering over */
.carousel:hover .carousel__item:hover .carousel__title {
opacity: 1;
}
/* Fade all images out so the fullwidth background image is visble */
.carousel>.slick-carousel>.slick-list:hover .carousel__image {
opacity: 0;
}
/* Hide the flag element */
.carousel>.slick-carousel>.slick-list:hover .carousel__flag {
display: none;
}
/* Show the subtitle */
.carousel:hover .carousel__item:hover .carousel__subtitle {
display: block;
}
/* Display the CTA of the active item */
.carousel:hover .carousel__item:hover .carousel__btn {
opacity: 1;
}
/* Slick Prev/Next */
.slick-carousel,
.slick-list,
.slick-track {
height: 100%;
min-height: 100%;
}
.slick-arrow {
background: transparent;
border: 1px solid rgb(255,255,255);
color: rgb(255,255,255);
display: block;
font-family: 'Anton', sans-serif;
font-size: 24px;
height: 45px;
line-height: 45px;
margin-top: -30px;
overflow: hidden;
position: absolute;
top: 50%;
left: 30px;
text-align: center;
transform: rotate(45deg);
transition: all .15s;
width: 45px;
z-index: 60;
}
.slick-arrow:hover {
background: rgb(255,255,255);
color: rgb(0,0,0);
}
.slick-arrow span {
display: block;
transform: rotate(-45deg);
}
.slick-arrow--next {
left: auto;
right: 30px;
}
/* Slick Core */
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="carousel">
<div class="carousel__bg">
<img src="" />
<video autoplay muted loop></video>
</div>
<div class="slick-carousel">
<div class="carousel__item" data-src="https://www.fillmurray.com/750/550">
<div class="carousel__content">
<h4 class="carousel__title">Behind The Scenes</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>
Read the Article
</div>
<img src="https://www.fillmurray.com/g/400/600" class="carousel__image" />
</div>
<div class="carousel__item" data-src="https://www.fillmurray.com/800/600">
<div class="carousel__content">
<h4 class="carousel__title">Reed Stark</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>
Watch the Video
</div>
<img src="https://www.fillmurray.com/g/450/650" class="carousel__image" />
</div>
<div class="carousel__item" data-src='[ "https://www.w3schools.com/tags/movie.mp4", "https://www.w3schools.com/tags/movie.ogg"]'>
<div class="carousel__content">
<h4 class="carousel__title">Fresh Drops</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>
See The Collection
</div>
<img src="https://www.fillmurray.com/g/350/550" class="carousel__image" />
</div>
<div class="carousel__item" data-src='[ "https://www.w3schools.com/tags/movie.mp4", "https://www.w3schools.com/tags/movie.ogg"]'>
<div class="carousel__content">
<h4 class="carousel__title">Fresh Drops</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>
See The Collection
</div>
<img src="https://www.fillmurray.com/g/300/500" class="carousel__image" />
</div>
</div>
</div>

How do I make my multiple choice code written in CSS & JS to only select one option? Currently I can select both

I am having a bit of trouble here, and I am sure this is an easy fix. I am very inexperienced in Javascript & I am trying to learn how to code better looking sites.
Basically I am using this code for selecting iOS or Android, but I want to be able to only select one or the other. Instead I am able to select both. Could someone please help explain how to select either one or the other? Preferably when selecting one it automatically deselects the other if the other is already selected. I would really appreciate help! Thank you very much.
https://codepen.io/cmpackagingllc/pen/JVLPjq
HTML
<h1>Device</h1>
<div class="wrap">
<ul>
<li><i class="fa fa-apple"></i></li>
<li><i class="fa fa-android"></i></li>
</ul>
</div>
CSS
#import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
* {
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
background: #222;
}
h1 {
text-align: center;
margin-top: 50px;
color: tomato;
font-weight: 300;
word-spacing: 14px;
text-transform: uppercase;
}
.wrap {
width: 400px;
height: 300px;
margin: 0px auto;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
height: 100%;
}
ul li {
display: block;
width: 50%;
height: 50%;
line-height: 150px;
font-size: 40px;
color: #fff;
text-align: center;
float: left;
position: relative;
}
.borderOverlay {
width: 70%;
height: 70%;
background: rgba(255, 255, 255, .1);
border: 3px solid tomato;
border-radius: 10px;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
animation: 0.25s enter;
}
.borderOverlay i {
position: absolute;
font-size: 29px;
color: #222;
top: -15px;
right: -13px;
background: #fff;
padding: 1px;
border-radius: 50%;
animation: 0.75s enter2;
}
#keyframes enter {
0% {
transform: scale(0) rotate(-90deg);
}
100% {
transform: scale(1);
}
}
#keyframes enter2 {
0% {
transform: scale(0);
}
50% {
transform: scale(0);
}
75% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
Javascript
$("li").click(function () {
if($(this).find('.borderOverlay').length) {
$(this).find('.borderOverlay').remove();
} else {
$(this).append('<div class="borderOverlay"><i class="fa fa-check"></i></div>');
}
});

$("li").click(function () {
var isActive = $(this).find('.borderOverlay').length;
$('.borderOverlay').remove();
if(!isActive) {
$(this).append('<div class="borderOverlay"><i class="fa fa-check"></i></div>');
}
});

You just have to remove the other's .borderOverlay.
You can do that by using $(this).siblings() and this will select all other li except the one that was clicked on.
$("li").click(function () {
if($(this).find('.borderOverlay').length) {
$(this).find('.borderOverlay').remove();
} else {
$(this).append('<div class="borderOverlay"><i class="fa fa-check"></i></div>');
$(this).siblings().find('.borderOverlay').remove();
}
});
#import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
* {
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
background: #222;
}
h1 {
text-align: center;
margin-top: 50px;
color: tomato;
font-weight: 300;
word-spacing: 14px;
text-transform: uppercase;
}
.wrap {
width: 400px;
height: 300px;
margin: 0px auto;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
height: 100%;
}
ul li {
display: block;
width: 50%;
height: 50%;
line-height: 150px;
font-size: 40px;
color: #fff;
text-align: center;
float: left;
position: relative;
}
.borderOverlay {
width: 70%;
height: 70%;
background: rgba(255, 255, 255, .1);
border: 3px solid tomato;
border-radius: 10px;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
animation: 0.25s enter;
}
.borderOverlay i {
position: absolute;
font-size: 29px;
color: #222;
top: -15px;
right: -13px;
background: #fff;
padding: 1px;
border-radius: 50%;
animation: 0.75s enter2;
}
#keyframes enter {
0% {
transform: scale(0) rotate(-90deg);
}
100% {
transform: scale(1);
}
}
#keyframes enter2 {
0% {
transform: scale(0);
}
50% {
transform: scale(0);
}
75% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<h1>Device</h1>
<div class="wrap">
<ul>
<li><i class="fa fa-apple"></i></li>
<li><i class="fa fa-android"></i></li>
</ul>
</div>

There is a reason semantic HTML is a thing - there is an element that does this natively - the input type="radio".
<h1>Device</h1>
<div class="wrap">
<label>
<input type="radio" class="myRadio" name="myRadio"/>
<i class="fa fa-apple"></i>
<div class="borderOverlay"></div>
</label>
<label>
<input type="radio" class="myRadio" name="myRadio"/>
<i class="fa fa-android"></i>
<div class="borderOverlay"></div>
</label>
</div>
We place them within a label, so clicking anywhere within the label triggers the radio.
When a radio is pressed, all other radios with the same 'name' will be updated.
This will also accept input from space/enter not only click (as do <button> elements). Simply adding an 'click' eventListener will also apply for these keys.
And are also focusable by keyboard navigation (using the Tab Key), which is quite important but gets omitted way too much.
You can easily hide the actual buttons:
.wrap > label{
position: relative;
}
.myRadio {
position: absolute;
opacity: 0;
z-index: -1;
}
And also style them directly with pure CSS:
.myRadio:checked ~ .borderOverlay {
/* rules for showing borderOverlay animation */
}
And loop them when a change occurs:
var radioButtons = Array.from(document.getElementsByClassName('myRadio'));
radioButtons.map(function(radio){
radio.addEventListener('change', function(e){
var selectedTarget = radioButtons.filter(btn => btn.checked)[0];
// do something with **selectedTarget**
};
});

Extra Space Between Slick Slider Dots and Other Divs

I am using slick slider. The slider is taking extra white space under the slider. When I checked with the Chrome Dev Tools, I found that it is because of the dots of slick slider. I have added custom styles to the dots. Don't understand why I am facing the issue! Here is my Codepen link https://codepen.io/nemo011/pen/aMRJZK
<section class="slider">
<div class="slide">
<img src="https://via.placeholder.com/1680x720">
<h2>text 1</h2>
</div>
<div class="slide">
<img src="https://via.placeholder.com/1680x720">
<h2>text 2</h2>
</div>
<div class="slide">
<img src="https://via.placeholder.com/1680x720">
<h2>Lets see</h2>
</div>
</section>
<section id="donate">
<div class="container">
<h3>Help Us to Make a Change</h3>
<div class="btn-dark">Donate</div>
</div>
</section>
CSS Styles
h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-80%, -80%);
color: white;
font-size: 46px;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
text-transform: uppercase;
}
.slide {
position: relative;
overflow: hidden;
}
.slide img{
margin: 0;
max-width: 100vw;
}
.slick-dots {
top: 90%;
list-style-type: none;
}
.slick-dots li{
margin: 0 0.25rem;
}
.slick-dots li button {
display: block;
width: 0.5rem;
height: 0.5rem;
padding: 0;
border: none;
border-radius: 100%;
background-color: white!important;
text-indent: -9999px;
}
.slick-dots li button:hover{
background-color: #2f638b!important;
}
.slick-dots li.slick-active button{
border: 3px solid white!important;
background-color: transparent!important;
}
#media (min-width: 768px) and (max-width: 1024px) {
.slick-dots {
top: 90%;
list-style-type: none;
}
}
#media (min-width: 481px) and (max-width: 767px) {
.slick-dots {
top: 85%;
list-style-type: none;
}
}
#media (min-width: 320px) and (max-width: 480px) {
.slick-dots {
top: 70%;
list-style-type: none;
}
}
/* Donate Bar Section #donate */
#donate {
margin: 0;
padding: 0;
background-color: #2f638b;
}
Javascript
$(document).ready(function () {
$('.slider').slick({
autoplay: true,
infinite: true,
// centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
// centerPadding: '220px',
dots: true,
dotsClass: 'slick-dots',
fade: true,
});
});

There are styles to 3 elements that are causing the gap.
The <h3> in <section id="donate"> has a margin-top
The <section class="slider"> has a margin-bottom
The <ul class="slick-dots"> has both bottom and top defined.
These styles are being applied from an external css file being loaded called slick-theme.css
Hence, paste the following at the end of your stylesheet.
section#donate h3{
margin-top: 0;
}
ul.slick-dots{
bottom: 0;
}
section.slick-dotted.slick-slider{
margin-bottom:0;
}
And modify the margin-bottom of section.slick-dotted.slick-slider to obtain the space as per required.

Modified a bit of your .slick-dots style:
.slick-dots {
position: absolute;
display: block;
width: 100%;
padding: 0;
margin: 0;
margin-top: 0px;
list-style: none;
list-style-type: none;
text-align: center;
margin-top: 40px;
}
This giving extra white space under the slider:
.slick-dotted.slick-slider {
margin-bottom: 30px; /* Should be removed */
}
Also the h3 tag gives margin-top value in general, so you can get rid of it by:
.container h3 {
margin-top: 0;
}

How to use jPlayer with Wavesurfer-JS as audio player?

I'm using jPlayer as audio player for my music library and Wavesurfer-JS for draw my waveforms.
Waveforms are generated by using JSON data like this (long code in the snippet):
wavesurfer.backend.peaks = [...];
wavesurfer.drawBuffer();
Eg. This is my audio player so far:
$(document).ready(function(){
var playlist = [{
title:"Hidden",
artist:"Miaow",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg",
poster: "https://i.imgur.com/sCbrzQa.png"
},{
title:"Cro Magnon Man",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg",
poster: "https://i.imgur.com/lXvsuBu.png"
},{
title:"Bubble",
m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg",
poster: "https://i.imgur.com/klJKSVZ.jpg"
}];
var cssSelector = {
jPlayer: "#jquery_jplayer",
cssSelectorAncestor: ".music-player"
};
var options = {
swfPath: "http://cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/jquery.jplayer/Jplayer.swf",
supplied: "ogv, m4v, oga, mp3",
volumechange: function(event) {
$( ".volume-level" ).slider("value", event.jPlayer.options.volume);
},
timeupdate: function(event) {
$( ".progress" ).slider("value", event.jPlayer.status.currentPercentAbsolute);
}
};
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
var PlayerData = $(cssSelector.jPlayer).data("jPlayer");
// Create the volume slider control
$( ".volume-level" ).slider({
animate: "fast",
max: 1,
range: "min",
step: 0.01,
value : $.jPlayer.prototype.options.volume,
slide: function(event, ui) {
$(cssSelector.jPlayer).jPlayer("option", "muted", false);
$(cssSelector.jPlayer).jPlayer("option", "volume", ui.value);
}
});
// Create the progress slider control
$( ".progress" ).slider({
animate: "fast",
max: 100,
range: "min",
step: 0.1,
value : 0,
slide: function(event, ui) {
var sp = PlayerData.status.seekPercent;
if(sp > 0) {
// Move the play-head to the value and factor in the seek percent.
$(cssSelector.jPlayer).jPlayer("playHead", ui.value * (100 / sp));
} else {
// Create a timeout to reset this slider to zero.
setTimeout(function() {
$( ".progress" ).slider("value", 0);
}, 0);
}
}
});
});
*, *:before, *:after {
box-sizing: border-box;
}
html {
min-height: 100%;
}
body {
background: #eee;
font-family: "Open Sans", sans-serif;
}
.music-player {
position: relative;
width: 350px;
height: 370px;
margin: 50px auto;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
border-radius: 10px;
background: #222;
overflow: hidden;
z-index: 0;
}
.music-player img {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
z-index: -1;
display: block;
width: 100% !important;
height: 100% !important;
-webkit-filter: blur(2px);
filter: blur(2px);
}
.music-player .info {
width: 100%;
height: 120px;
background: #222;
background: rgba(0, 0, 0, 0.8);
text-align: center;
position: relative;
}
.music-player .info .jp-playlist li {
display: none;
}
.music-player .info .jp-playlist li a {
font-size: 30px;
font-weight: 300;
text-decoration: none;
color: #fff;
color: rgba(225, 225, 225, 0.4);
}
.music-player .info .jp-playlist li a span {
font-size: 14px;
display: block;
margin-top: 10px;
}
.music-player .info .jp-playlist li.jp-playlist-current {
display: block;
}
.music-player .info .jp-playlist li .jp-free-media, .music-player .info .jp-playlist li .jp-playlist-item-remove {
display: none;
}
.music-player .info .left, .music-player .info .right {
width: 25px;
position: absolute;
top: 30px;
left: 30px;
}
.music-player .info .right {
left: auto;
right: 30px;
}
.music-player .info [class^="icon-"] {
margin: 0 0 10px;
}
.music-player .info .center {
padding: 6px 0 0;
}
.music-player .progress, .music-player .volume-level {
width: 100%;
height: 5px;
display: block;
background: #ccc;
position: absolute;
bottom: 0px;
cursor: pointer;
border: none;
}
.music-player .progress .ui-slider-range, .music-player .volume-level .ui-slider-range {
display: block;
background: #ed553b;
height: 5px;
border-radius: 0;
}
.music-player .progress .ui-slider-handle, .music-player .volume-level .ui-slider-handle {
position: absolute;
top: -8px;
width: 8px;
height: 22px;
background: url("//i.imgur.com/tsqwz1N.png") no-repeat center;
border: none;
outline: none;
margin: 0 0 0 -3px;
cursor: move;
}
.music-player .controls {
text-align: center;
width: 100%;
height: 190px;
background: #982e4b;
background: rgba(152, 46, 75, 0.6);
}
.music-player .controls .current {
font-size: 48px;
color: #fff;
color: rgba(225, 225, 225, 0.4);
padding: 15px 0 20px;
}
.music-player .controls .play-controls a {
display: inline-block;
width: 35px;
height: 40px;
margin: 0 30px;
}
.music-player .controls .volume-level {
position: relative;
bottom: auto;
width: 200px;
height: 2px;
margin: 30px auto 0;
background: rgba(225, 225, 225, 0.3);
}
.music-player .controls .volume-level .ui-slider-range {
height: 2px;
}
.music-player .controls .volume-level .ui-slider-handle {
top: -8px;
margin-left: -9px;
width: 22px;
height: 22px;
background-image: url("http://image.flaticon.com/icons/svg/106/106874.svg");
}
.music-player .controls .volume-level .icon-volume-up, .music-player .controls .volume-level .icon-volume-down {
position: absolute;
right: -34px;
top: -8px;
width: 22px;
}
.music-player .controls .volume-level .icon-volume-down {
right: auto;
left: -27px;
}
[class^="icon-"] {
width: 18px;
height: 18px;
background: url("//i.imgur.com/E09T8tf.png") no-repeat center;
display: block;
}
.icon-shuffle {
background-image: url("http://image.flaticon.com/icons/svg/148/148739.svg");
}
.icon-heart {
background-image: url("http://image.flaticon.com/icons/svg/138/138533.svg");
}
.icon-repeat {
background-image: url("http://image.flaticon.com/icons/svg/137/137485.svg");
}
.icon-share {
background-image: url("http://image.flaticon.com/icons/svg/189/189676.svg");
}
.icon-previous {
background-image: url("http://image.flaticon.com/icons/svg/137/137518.svg");
}
.icon-play {
background-image: url("http://image.flaticon.com/icons/svg/148/148744.svg");
}
.icon-pause {
background-image: url("http://image.flaticon.com/icons/svg/189/189639.svg");
}
.icon-next {
background-image: url("http://image.flaticon.com/icons/svg/137/137517.svg");
}
.icon-volume-up {
background-image: url("http://image.flaticon.com/icons/svg/149/149139.svg");
}
.icon-volume-down {
background-image: url("http://image.flaticon.com/icons/svg/109/109699.svg");
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
}
<head>
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.0.52/wavesurfer.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/jquery.jplayer/jquery.jplayer.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/add-on/jplayer.playlist.min.js"></script>
</head>
<div class="music-player">
<div style="background-image: url(https://image.freepik.com/free-vector/welcome-summer-badge-on-blurry-background_23-2147511412.jpg);" class="album"></div>
<div class="info">
<div class="left">
</div>
<div class="center">
<div class="jp-playlist">
<ul>
<li></li>
</ul>
</div>
</div>
<div class="right">
</div>
<div class="progress"></div>
</div>
<div class="demo">
<div id="waveform"></div>
<script>
var ctx = document.createElement('canvas').getContext('2d');
var linGrad = ctx.createLinearGradient(0, 64, 0, 200);
linGrad.addColorStop(0.5, 'rgba(255, 255, 255, 1.000)');
linGrad.addColorStop(0.5, 'rgba(183, 183, 183, 1.000)');
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: linGrad,
progressColor: 'hsla(200, 100%, 30%, 0.5)',
cursorColor: '#fff',
normalize: true,
backend: 'MediaElement',
height:50,
barWidth: 3
});
//Set peaks
wavesurfer.backend.peaks = [0.0218, 0.0183, 0.0165, 0.0198, 0.2137, 0.2888, 0.2313, 0.15, 0.2542, 0.2538, 0.2358, 0.1195, 0.1591, 0.2599, 0.2742, 0.1447, 0.2328, 0.1878, 0.1988, 0.1645, 0.1218, 0.2005, 0.2828, 0.2051, 0.1664, 0.1181, 0.1621, 0.2966, 0.189, 0.246, 0.2445, 0.1621, 0.1618, 0.189, 0.2354, 0.1561, 0.1638, 0.2799, 0.0923, 0.1659, 0.1675, 0.1268, 0.0984, 0.0997, 0.1248, 0.1495, 0.1431, 0.1236, 0.1755, 0.1183, 0.1349, 0.1018, 0.1109, 0.1833, 0.1813, 0.1422, 0.0961, 0.1191, 0.0791, 0.0631, 0.0315, 0.0157, 0.0166, 0.0108];
//Draw peaks
wavesurfer.drawBuffer();
</script>
</div>
<div class="controls">
<div class="current jp-current-time">00:00</div>
<div class="play-controls">
</div>
<div class="volume-level">
</div>
</div>
<div id="jquery_jplayer" class="jp-jplayer"></div>
</div>
As you can see from this snippet the progress bar works only for jPlayer.
I want to keep the jPlayer as it is and use my waveform as progress bar.
How can I use as progress bar my waveform without loading the song from Wavesurfer-JS but only using my pre-generated waveform with the jPlayer?

How do I get the dots to go away? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
This is a pre made website. I am working on it, and I am okay with CSS and HTML, but I don't have much experience with Java. I think that the problem is with Java. I would really like the dots to not be there where the list items just rotate without the dots appearing below.
/*! http://responsiveslides.com v1.54 by #viljamis */
(function(c,I,B){c.fn.responsiveSlides=function(l){var a=c.extend({auto:!0,speed:500,timeout:4E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!0,prevText:"Previous",nextText:"Next",maxwidth:"",navContainer:"",manualControls:"",namespace:"rslides",before:c.noop,after:c.noop},l);return this.each(function(){B++;var f=c(this),s,r,t,m,p,q,n=0,e=f.children(),C=e.size(),h=parseFloat(a.speed),D=parseFloat(a.timeout),u=parseFloat(a.maxwidth),g=a.namespace,d=g+B,E=g+"_nav "+d+"_nav",v=g+"_here",j=d+"_on",
w=d+"_s",k=c("<ul class='"+g+"_tabs "+d+"_tabs' />"),x={"float":"left",position:"relative",opacity:1,zIndex:2},y={"float":"none",position:"absolute",opacity:0,zIndex:1},F=function(){var b=(document.body||document.documentElement).style,a="transition";if("string"===typeof b[a])return!0;s=["Moz","Webkit","Khtml","O","ms"];var a=a.charAt(0).toUpperCase()+a.substr(1),c;for(c=0;c<s.length;c++)if("string"===typeof b[s[c]+a])return!0;return!1}(),z=function(b){a.before(b);F?(e.removeClass(j).css(y).eq(b).addClass(j).css(x),
n=b,setTimeout(function(){a.after(b)},h)):e.stop().fadeOut(h,function(){c(this).removeClass(j).css(y).css("opacity",1)}).eq(b).fadeIn(h,function(){c(this).addClass(j).css(x);a.after(b);n=b})};a.random&&(e.sort(function(){return Math.round(Math.random())-0.5}),f.empty().append(e));e.each(function(a){this.id=w+a});f.addClass(g+" "+d);l&&l.maxwidth&&f.css("max-width",u);e.hide().css(y).eq(0).addClass(j).css(x).show();F&&e.show().css({"-webkit-transition":"opacity "+h+"ms ease-in-out","-moz-transition":"opacity "+
h+"ms ease-in-out","-o-transition":"opacity "+h+"ms ease-in-out",transition:"opacity "+h+"ms ease-in-out"});if(1<e.size()){if(D<h+100)return;if(a.pager&&!a.manualControls){var A=[];e.each(function(a){a+=1;A+="<li><a href='#' class='"+w+a+"'>"+a+"</a></li>"});k.append(A);l.navContainer?c(a.navContainer).append(k):f.after(k)}a.manualControls&&(k=c(a.manualControls),k.addClass(g+"_tabs "+d+"_tabs"));(a.pager||a.manualControls)&&k.find("li").each(function(a){c(this).addClass(w+(a+1))});if(a.pager||a.manualControls)q=
k.find("a"),r=function(a){q.closest("li").removeClass(v).eq(a).addClass(v)};a.auto&&(t=function(){p=setInterval(function(){e.stop(!0,!0);var b=n+1<C?n+1:0;(a.pager||a.manualControls)&&r(b);z(b)},D)},t());m=function(){a.auto&&(clearInterval(p),t())};a.pause&&f.hover(function(){clearInterval(p)},function(){m()});if(a.pager||a.manualControls)q.bind("click",function(b){b.preventDefault();a.pauseControls||m();b=q.index(this);n===b||c("."+j).queue("fx").length||(r(b),z(b))}).eq(0).closest("li").addClass(v),
a.pauseControls&&q.hover(function(){clearInterval(p)},function(){m()});if(a.nav){g="<a href='#' class='"+E+" prev'>"+a.prevText+"</a><a href='#' class='"+E+" next'>"+a.nextText+"</a>";l.navContainer?c(a.navContainer).append(g):f.after(g);var d=c("."+d+"_nav"),G=d.filter(".prev");d.bind("click",function(b){b.preventDefault();b=c("."+j);if(!b.queue("fx").length){var d=e.index(b);b=d-1;d=d+1<C?n+1:0;z(c(this)[0]===G[0]?b:d);if(a.pager||a.manualControls)r(c(this)[0]===G[0]?b:d);a.pauseControls||m()}});
a.pauseControls&&d.hover(function(){clearInterval(p)},function(){m()})}}if("undefined"===typeof document.body.style.maxWidth&&l.maxwidth){var H=function(){f.css("width","100%");f.width()>u&&f.css("width",u)};H();c(I).bind("resize",function(){H()})}})}})(jQuery,this,0);
#slider3,#slider4 {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
margin: 0 auto;
}
.rslides_tabs {
list-style: none;
padding: 0;
background: rgba(0,0,0,.25);
box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
font-size: 18px;
list-style: none;
margin: 0 auto 50px;
max-width: 540px;
padding: 10px 0;
text-align: center;
width: 100%;
}
.rslides_tabs li {
display: inline;
margin-right: 1px;
}
.rslides_tabs a {
width: auto;
line-height: 20px;
padding: 9px 20px;
height: auto;
background: transparent;
display: inline;
}
.rslides_tabs li:first-child {
margin-left: 0;
}
.rslides_tabs .rslides_here a {
background: rgba(255,255,255,.1);
color: #fff;
font-weight: bold;
}
.events {
list-style: none;
}
.callbacks_container {
position: relative;
width: 100%;
}
.callbacks {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.callbacks li {
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.callbacks img {
position: relative;
z-index: 1;
height: auto;
border: 0;
}
.callbacks .caption {
display: block;
position: absolute;
z-index: 2;
font-size: 20px;
text-shadow: none;
color: #fff;
left: 0;
right: 0;
padding: 10px 20px;
margin: 0;
max-width: none;
top: 10%;
text-align: center;
}
.callbacks_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 61%;
left: 0;
opacity: 0.7;
z-index: 3;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 62px;
width: 45px;
margin-top: -65px;
}
.callbacks_nav:active {
opacity: 1.0;
}
a.callbacks_nav.callbacks1_nav.prev {
background: transparent url("../images/themes.png") no-repeat 0px 0px;
left: -3.1%;
}
.callbacks_nav.next {
background: transparent url("../images/themes.png") no-repeat -46px 0px;
left: 100%;
}
#slider3-pager a,#slider4-pager a {
display: inline-block;
}
#slider3-pager span,#slider4-pager span{
}
#slider3-pager span,#slider4-pager span{
width:100px;
height:15px;
background:#fff;
display:inline-block;
border-radius:30em;
opacity:0.6;
}
#slider3-pager .rslides_here a ,#slider4-pager .rslides_here a {
background: #FFF;
border-radius:30em;
opacity:1;
}
#slider3-pager a ,#slider4-pager a {
padding: 0;
}
#slider3-pager li, #slider4-pager li{
display:inline-block;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li{
position: relative;
display: block;
}
<div class="banner-info">
<script src="js/responsiveslides.min.js"></script>
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 4
$("#slider3").responsiveSlides({
auto: true,
pager: true,
nav: false,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
<div id="top" class="callbacks_container">
<ol class="rslides" id="slider3">
<li>
<div class="banner-text">
<h3>Strategic Benefits Design</h3>
<h4>
We simplify HR so you can focus on your business!</h4>
</div>
</li>
<li>
<div class="banner-text">
<h3>Strategic Benefits Design</h3>
<h4>We are committed to helping grow your business!</h4>
</div>
</li>
<li>
<div class="banner-text">
<h3>Strategic Benefits Design</h3>
<h4>We give you exactly what you need!</h4>
</div>
</li>
</ol>
</div>
</div>

You got the following code in your HTML file:
$("#slider3").responsiveSlides({
auto: true,
pager: true,
nav: false,
speed: 500,
namespace: "callbacks",
before: function () {
Change pager: true, to pager: false, and see if it works. I don't know if it will for sure, but this would be the first thing I would try after seeing the ResponsiveSlides.js website.