OwlCarousel2 animated dots onChange - javascript

I would like to make dots in owl-carousel animated like progress bar for each item of carousel, I am using simple jQuery function for animated, which is called onChange event. But problem is, that function is called before HTML structure is changed.
CSS for dots:
.owl-theme .owl-dots .owl-dot{
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
width: 100px;
height: 5px;
margin-left: 2px;
margin-right: 2px;
background: #ccc;
border:none;
}
.owl-theme .owl-dots .owl-dot span {
margin: 0;
background: white;
width:0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
height: 5px;
}
.owl-theme .owl-dots .owl-dot.active span {
background: white;
width:0px;
}
JS
$(carousel).owlCarousel({
slideSpeed: 500,
paginationSpeed: 500,
singleItem: true,
navigation: true,
items: 1,
autoplay:false,
loop:true,
autoplayTimeout:2000,
onChange:navigationFill,
});
function navigationFill() {
var progressbar = $(".owl-theme .owl-dots .owl-dot.active span");
$(progressbar).animate({ width: "100%" }, 'slow');
}
This code works only when carousel is changed on next item, but animation is made for previous dot. Is there any way, how can I "pause" this JS, wait until HTML structure is changed and after that call this function?
JSFIDDLE
https://jsfiddle.net/nxa36myc/29/ ( previous black "navigation dot" is changed to white when slide is changed)


I have created a fiddle based on your question here https://jsfiddle.net/mazinoukah/m45hx3v2/3/
Basically i added the 'owl-theme' class to the owl-carousel container.
Also, i removed the 'onChange' option and added a listener, 'changed.owl.carousel', to the owl instance.
HTML
<div class="wrapper">
<div class="owl-carousel owl-theme">
<div class="item"><img src="http://shrani.si/f/1W/4U/KrJheJj/tine.jpg"></div>
<div class="item"><img src="http://shrani.si/f/3A/q3/kC00r7/torbice.jpg"></div>
<div class="item padded"><img src="http://shrani.si/f/2o/hl/1xmizZhJ/medvedki.jpg"></div>
<div class="item padded"><img src="http://shrani.si/f/27/wV/4moHQxYk/maladva.jpg"></div>
</div>
<div id="nav"></div>
CSS
body {
background: #fff;
}
.owl-carousel .item {
background: #ccc;
text-align: center;
height: 450px;
}
.wrapper {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.padded {
line-height: 450px;
}
#nav {
position: relative;
}
#nav > div {
font-size: 28px;
position: absolute;
top: -250px;
z-index: 2;
cursor: pointer;
padding: 0 5px;
visibility: hidden;
}
.wrapper:hover #nav > div {
visibility: visible;
}
.owl-prev {
left: 0;
}
.owl-next {
right: 0;
}
.owl-theme .owl-dots .owl-dot{
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
width: 100px;
height: 5px;
margin-left: 2px;
margin-right: 2px;
background: #ccc;
border:none;
}
.owl-theme .owl-dots .owl-dot span {
margin: 0;
background: white;
width:0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
height: 5px;
}
.owl-theme .owl-dots .owl-dot.active span {
background: white;
width:0px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
JAVASCRIPT
var owl = $(".owl-carousel").owlCarousel({
slideSpeed: 500,
paginationSpeed: 500,
singleItem: true,
navigation: true,
items: 1,
autoplay:true,
loop:true,
autoplayTimeout:2000,
navText: [
'<i class="fa fa-angle-left"></i>',
'<i class="fa fa-angle-right"></i>'
],
responsive:{
0:{
items:1
},
767:{
items:1,
nav:true
}
}
});
owl.on('changed.owl.carousel', function(event) {
navigationFill();
})
function navigationFill() {
// Reset the width of all the 'dots'
var pr = $(".owl-theme .owl-dots .owl-dot span");
$(pr).css({ width: "0%" });
var progressbar = $(".owl-theme .owl-dots .owl-dot.active span");
$(progressbar).animate({ width: "100%" }, 'slow');
}
Let me know if you have any issues, or need further assistance.
Hope it helps :)

Related

Jquery sortable / scrollable tabs jumping

I have some sortable / scrollable tabs but the sibling tabs keep jumping when I start sorting.
The axis is set to 'x' yet when sorting you can slightly drag up and down, which is where you will see the jumping.
Normally I would fix this by setting float: left; but this causes each tab to be in it's own "row" somehow.
How can I stop this "jumping" issue in sortable / scrollable tabs?
$('.data_tab_tabs').sortable({
items: '.data_tab',
axis: 'x',
containment: 'parent',
helper: 'clone',
appendTo: 'parent',
forcePlaceholderSize: true,
tolerance: 'pointer',
});
.data_tab_container {
width: 500px;
height: fit-content;
position: relative;
}
.data_tab_tabs {
height: 40px;
width: fit-content;
max-width: 100%;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.data_tab {
border: 1px solid #ddd;
display: inline-block;
width: fit-content;
height: 100%;
border-radius: 5px 5px 0 0;
padding: 10px 10px;
background: #f1f3f6;
cursor: pointer;
position: relative;
z-index: 10;
margin-right: 4px;
/* float: left; */
font-weight: 600;
}
.data_tab * {
display: inline-block;
}
.data_tab.active_data_tab {
background: #fff;
border-bottom: 1px solid #fff;
}
/* width */
.data_tab_tabs::-webkit-scrollbar {
height: 6px !important;
}
/* Track */
.data_tab_tabs::-webkit-scrollbar-track {
background: transparent !important;
}
/* Handle */
.data_tab_tabs::-webkit-scrollbar-thumb {
background: #ddd !important;
border-radius: 3px;
}
/* Handle on hover */
.data_tab_tabs::-webkit-scrollbar-thumb:hover {
background: #ccc !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="data_tab_container">
<div class="data_tab_tabs">
<div class="data_tab active_data_tab" data-tab="headers" data-level="1">Here is something</div>
<div class="data_tab" data-tab="body" data-level="1">Here is something else</div>
<div class="data_tab" data-tab="footers" data-level="1">Here is something else again</div>
</div>
</div>

Yes, float:left; will fix your sorting problem but it will open another problem where 3rd tab goes in new line.
It's because there is not enough space for 3rd tab. If you remove width: 500px; from .data_tab_container style than you will see its working fine.
See the Snippet below:
$('.data_tab_tabs').sortable({
items: '.data_tab',
axis: 'x',
containment: 'parent',
helper: 'clone',
appendTo: 'parent',
forcePlaceholderSize: true,
tolerance: 'pointer',
});
.data_tab_container {
/*width: 500px;*/
height: fit-content;
position: relative;
}
.data_tab_tabs {
height: 40px;
width: fit-content;
max-width: 100%;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.data_tab {
border: 1px solid #ddd;
display: inline-block;
width: fit-content;
height: 100%;
border-radius: 5px 5px 0 0;
padding: 10px 10px;
background: #f1f3f6;
cursor: pointer;
position: relative;
z-index: 10;
margin-right: 4px;
float: left;
font-weight: 600;
}
.data_tab * {
display: inline-block;
}
.data_tab.active_data_tab {
background: #fff;
border-bottom: 1px solid #fff;
}
/* width */
.data_tab_tabs::-webkit-scrollbar {
height: 6px !important;
}
/* Track */
.data_tab_tabs::-webkit-scrollbar-track {
background: transparent !important;
}
/* Handle */
.data_tab_tabs::-webkit-scrollbar-thumb {
background: #ddd !important;
border-radius: 3px;
}
/* Handle on hover */
.data_tab_tabs::-webkit-scrollbar-thumb:hover {
background: #ccc !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="data_tab_container">
<div class="data_tab_tabs">
<div class="data_tab active_data_tab" data-tab="headers" data-level="1">Here is something</div>
<div class="data_tab" data-tab="body" data-level="1">Here is something else</div>
<div class="data_tab" data-tab="footers" data-level="1">Here is something else again</div>
</div>
</div>
Update 2
Have fixed it by adding 1px of height in placeholder (which jQuery adds when you start drag). I think its an open bug in jQuery..
here is a fix
.ui-sortable-placeholder {
display: inline-block;
height: 1px;
}
See the Snippet below:
$('.data_tab_tabs').sortable({
items: '.data_tab',
axis: 'x',
containment: 'parent',
helper: 'clone',
appendTo: 'parent',
forcePlaceholderSize: true,
tolerance: 'pointer',
start: function(event, ui) {
ui.placeholder.html(' ');
}
});
.data_tab_container {
width: 500px;
height: fit-content;
position: relative;
}
.data_tab_tabs {
height: 55px; /* changin height from 40px to 55px */
width: fit-content;
max-width: 100%;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.data_tab {
border: 1px solid #ddd;
display: inline-block;
width: fit-content;
/*height: 100%;*/
border-radius: 5px 5px 0 0;
padding: 10px 10px;
background: #f1f3f6;
cursor: pointer;
position: relative;
z-index: 10;
margin-right: 4px;
/* float: left; */
font-weight: 600;
}
.data_tab * {
display: inline-block;
}
.data_tab.active_data_tab {
background: #fff;
border-bottom: 1px solid #fff;
}
.ui-sortable-placeholder {
display: inline-block;
height: 1px;
}
/* width */
.data_tab_tabs::-webkit-scrollbar {
height: 6px !important;
}
/* Track */
.data_tab_tabs::-webkit-scrollbar-track {
background: transparent !important;
}
/* Handle */
.data_tab_tabs::-webkit-scrollbar-thumb {
background: #ddd !important;
border-radius: 3px;
}
/* Handle on hover */
.data_tab_tabs::-webkit-scrollbar-thumb:hover {
background: #ccc !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="data_tab_container">
<div class="data_tab_tabs">
<div class="data_tab active_data_tab" data-tab="headers" data-level="1">Here is something</div>
<div class="data_tab" data-tab="body" data-level="1">Here is something else</div>
<div class="data_tab" data-tab="footers" data-level="1">Here is something else again</div>
</div>
</div>

I had to contain the element .data_tab_tabs within another div which I named .data_tab_scroll.
I had to do quite a few css changes to get this to work correctly without breaking the way the tabs looked normally or when sorting.
With these changes another issue occurred which was that the sortable placeholder width would only be 1px wide when the scroll bar was visible. To fix this I needed .data_tab_tabs to have width: fit-content and for .data_tab_scroll to have width: 100%;. There is a question related to this issue here
Snippets here still have the original issue, and so does Internet Explorer.
You can find a working example in my codepen

How to make shaking animation away

I am creating a yellow hover area, when the mouse hovers around this area, event: a tab appear in exactly this hover area. But when I put the mouse there, the tab starts to appear and shaking
But I don't know how to make the shaking error go away
here is my code
$(document).ready(function () {
$('#demo').mouseleave(function(event) {
$('.tab').stop().animate({
opacity : '0.5',
marginLeft: '190px',
width:'0px'
}, 600, function() { //animation complete
$('#demo').addClass('hovered');
});
});
$('#demo').mouseover(function(event) {
$('.tab').stop().animate({
opacity : '1',
marginLeft: '0px', width:'190px'
}, 300, function() { //animation complete
$('#demo').removeClass('hovered');
});
});
});
#demo {
padding: 5px;
font-size: 18px;
text-align: center;
background-color: #555;
color: white;
border: solid 1px #666;
border-radius: 3px;
position:absolute;
margin-left: 10px;
width:190px;
height:100%;
opacity: 0.5;
background-color: yellow;
}
#demo.hovered {
backgound-color: #000;
}
.tab {
margin-left: 190px;
width: 0px;
height:100%;
opacity: 0.5;
background-color: #876;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Hover here!</button>
<div class="tab">First Panel</div>
anyone help me with this? I am a javascript beginner

Instead of firing mouseleave event on #demo, i fire mouseleave event on .tab
$(document).ready(function() {
$('.tab').mouseleave(function(event) {
$('.tab').stop().animate({
opacity: '0.5',
marginLeft: '190px',
width: '0px'
}, 600, function() { //animation complete
$('#demo').addClass('hovered');
});
});
$('#demo').mouseover(function(event) {
$('.tab').stop().animate({
opacity: '1',
marginLeft: '0px',
width: '190px'
}, 300, function() { //animation complete
$('#demo').removeClass('hovered');
});
});
});
#demo {
padding: 5px;
font-size: 18px;
text-align: center;
background-color: #555;
color: white;
border: solid 1px #666;
border-radius: 3px;
position: absolute;
margin-left: 10px;
width: 190px;
height: 100%;
opacity: 0.5;
background-color: yellow;
}
#demo.hovered {
backgound-color: #000;
}
.tab {
margin-left: 190px;
width: 0px;
height: 100%;
opacity: 0.5;
background-color: #876;
position: absolute;
}
`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Hover here!</button>
<div class="tab">First Panel</div>

it's because you trigger the hover only on the yellow rectangle and when the tab appears you stop hover the yellow rectangle. In my solution, you need to trigger the mouseleave() event also on the .tab.
$(document).ready(function() {
$('#demo').mouseleave(function(event) {
$('.tab').mouseleave(function(event) { //add this line
$('.tab').stop().animate({
opacity: '0.5',
marginLeft: '190px',
width: '0px'
}, 600, function() { //animation complete
$('#demo').addClass('hovered');
});
}); //add this line
});
$('#demo').mouseover(function(event) {
$('.tab').stop().animate({
opacity: '1',
marginLeft: '0px',
width: '190px'
}, 300, function() { //animation complete
$('#demo').removeClass('hovered');
});
});
});
#demo {
padding: 5px;
font-size: 18px;
text-align: center;
background-color: #555;
color: white;
border: solid 1px #666;
border-radius: 3px;
position: absolute;
margin-left: 10px;
width: 190px;
height: 100%;
opacity: 0.5;
background-color: yellow;
}
#demo.hovered {
backgound-color: #000;
}
.tab {
margin-left: 190px;
width: 0px;
height: 100%;
opacity: 0.5;
background-color: #876;
position: absolute;
}
`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Hover here!</button>
<div class="tab">First Panel</div>

Do you want any user interaction on the tab?
If not, then I would add pointer-events: none; property to your .tab class.
Then the mouseleave event won't trigger, but you wouldn't be able to use any mouse events inside your tab element.

How can I trigger the width style of a class to another?

I have these 2 objects in my HTML:
//1st object
<span class="ui-slider-handle" tabindex="0" style="left: 15.3153%;"></span>
//2nd object
<div id="waveform">
<wave style="display: block; position: relative; user-select: none; height: 50px; overflow-x: auto; overflow-y: hidden;">
<canvas></canvas>
<wave style="position: absolute; z-index: 2; left: 0px; top: 0px; bottom: 0px; overflow: hidden; width: 0px; display: block; box-sizing: border-box; border-right: 1px solid rgb(255, 255, 255);"><canvas width="350" height="50" style="width: 350px;"></canvas></wave>
</wave>
</div>
Is it possible using Javascript/jQuery connect the percentage of the "left" css attribute of the ui-slider-handle class to the width of the inner wave and triggering all the time the percentage (of the 1st object) change?
My 1st try
$(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);
}
}
});
$( ".ui-slider-range" ).slider({
change: function( event, ui ) {
$('wave').css('width', ui.value)
}
});
});
*, *: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: 100px;
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: 20px 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/126/126499.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");
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/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>
<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.0.52/wavesurfer.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>
UPDATE
The code above creates 2 different slider selector, also the slider affect the width of the wave object. Instead of I need something like this:

I am assuming you're using the UI Slider from jQuery. Once you initialise it, you can use the change event as follows:
$( ".ui-slider-handle" ).slider({
change: function( event, ui ) {
$('wave').first().next().css('width', ui.value)
}
});
Edit: I just realised you wanted the second wave so I added .next()

What you are looking for is MutationObserver(). It allows you to register any change in element's attribute and act on it.
Be sure to check browser support, as it is very likely that it does not include what you actually need.

Two divs to simultaneously animate

I am attempting to create a simple slide show type feature on a web page. I have created the slide show, but run into issues smoothly transitioning the next slide into frame when the user presses the 'next slide' button. Here is my code
var $slideshow = $('#slideshow');
var sswidth = $slideshow.width();
var ssheight = $slideshow.height();
var currentslide = 0;
$('.slide').eq(currentslide).addClass('show');
$('.btnslideshow.right').click(function(){
var left = $('.slide.show').offset().left;
$('.slide.show').animate({'left': '+=' + sswidth + 'px'}, 'slow', function(){
$('.slide').eq(currentslide).removeClass('show');
$('.slide').eq(currentslide).css({left: '0px'});
currentslide+=1;
if (currentslide > $('.slide').length-1) currentslide = 0;
$('.slide').eq(currentslide).addClass('show', 'slow');
});
});
.background {
background-color: lightgray;
border-color: gray;
border-style: solid;
border-width: 1px 0 1px 0;
width: 100%;
}
.btnslideshow {
background: lightgray;
height: 25px;
position: relative;
top: 77.5px;
width: 25px;
box-sizing: border-box;
border-style:inset;
z-index: 1;
}
.btnslideshow:hover {
background: lightblue;
border-style:outset;
}
.btnslideshow.left {
float: left;
left: 7%;
transform: rotate(180deg);
}
.btnslideshow.right {
float:right;
right: 7%;
}
#nav {
height: 25px;
text-align: right;
}
.navHeader {
border: none;
background-color: transparent;
display: inline;
font-size: 13px;
font-variant: small-caps;
font-weight: 600;
padding-right: 20px;
}
.navHeader:nth-child(1) {
margin-right:10px;
}
.navHeader:hover {
font-size: 16px;
}
.show {
display:inline-block !important;
}
#slideshow {
background-color: white;
border: 1px solid black;
height:200px;
margin-left: 12.5%;
overflow:hidden;
width:75%;
}
.slide {
border:1px solid black;
display: none;
height:100%;
position:relative;
width:0px;
z-index: 0;
}
.slide.show {
width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
<div class="navone">
<button class="navHeader">
About
</button>
<button class="navHeader">
Contact
</button>
</div>
</div>
<div id="container">
<div class="background">
<img class="btnslideshow left" src="https://cdn3.iconfinder.com/data/icons/buttons/512/Icon_22-512.png">
<img class="btnslideshow right" src="https://cdn3.iconfinder.com/data/icons/buttons/512/Icon_22-512.png">
<div id="slideshow">
<div class="slide">
Test slide
</div>
<div class="slide">
Test slide 22222
</div>
</div>
</div>
</div>
As you can see, my slide show is essentially working, but the transition is pretty rough. What I am wanting is for the second slide to move into frame while the first slide is moving out, with no space in between them. I have tried animating the width on the second slide inside the callback function of the first animation, outside the first animation, and other things but I can't seem to get it.

I made quite a few changes in your code.
I made the #slideshow div position:relative and the slides position:abosulte. Then made some over all changes in the js structure, Introduced the queue:false in the animate function, etc.
var $slideshow = $('#slideshow');
var sswidth = $slideshow.width();
var ssheight = $slideshow.height();
var currentslide = 0;
var duration = 1000;
$('.slide').eq(currentslide).addClass('show');
$('.slide').not('.show').css('left', -(sswidth+3) + 'px');
$('.btnslideshow.right').click(function() {
var left = $('.slide.show').offset().left;
$('.slide.show').animate({
'left': sswidth + 'px'
}, {
duration: duration,
queue: false,
complete:function(){
$(this).delay(20).css('left', -(sswidth+3) + 'px').removeClass('show');
}
});
currentslide++;
if (currentslide > $('.slide').length - 1) currentslide = 0;
$('.slide').eq(currentslide).animate({
left: '0px'
}, {
duration: duration,
queue: false
}).delay(duration).addClass('show');
});
.background {
background-color: lightgray;
border-color: gray;
border-style: solid;
border-width: 1px 0 1px 0;
width: 100%;
}
.btnslideshow {
background: lightgray;
height: 25px;
position: relative;
top: 77.5px;
width: 25px;
box-sizing: border-box;
border-style: inset;
z-index: 1;
}
.btnslideshow:hover {
background: lightblue;
border-style: outset;
}
.btnslideshow.left {
float: left;
left: 7%;
transform: rotate(180deg);
}
.btnslideshow.right {
float: right;
right: 7%;
}
#nav {
height: 25px;
text-align: right;
}
.navHeader {
border: none;
background-color: transparent;
display: inline;
font-size: 13px;
font-variant: small-caps;
font-weight: 600;
padding-right: 20px;
}
.navHeader:nth-child(1) {
margin-right: 10px;
}
.navHeader:hover {
font-size: 16px;
}
.show {
display: inline-block !important;
}
#slideshow {
background-color: white;
border: 1px solid black;
height: 200px;
margin-left: 12.5%;
overflow: hidden;
width: 75%;
position:relative;
}
.slide {
border: 1px solid black;
height: 100%;
position: absolute;
width: 100%;
z-index: 0;
display:none;
}
.slide.show {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
<div class="navone">
<button class="navHeader">
About
</button>
<button class="navHeader">
Contact
</button>
</div>
</div>
<div id="container">
<div class="background">
<img class="btnslideshow left" src="https://cdn3.iconfinder.com/data/icons/buttons/512/Icon_22-512.png">
<img class="btnslideshow right" src="https://cdn3.iconfinder.com/data/icons/buttons/512/Icon_22-512.png">
<div id="slideshow">
<div class="slide">Test slide</div>
<div class="slide">Test slide 22222</div>
</div>
</div>
</div>

CSS animation doesn't trigger after onclick event

I have css blocks that must go away from the page when they gain the .gone class.
I register a click event in Javascript, in the event handler I add the .gone class to the clicked element.
The bullet should go away to the left, or to the right, but it just disappears.
Here is the HTML code:
<div id="firstPage">
<div id="bullets">
<div data-href="#projects" class="top left">Projects</div>
<div data-href="#skills" class="top right">Skills</div>
<div data-href="#experiences" class="bottom left">Experiences</div>
<div data-href="#contact" class="bottom right">Contact</div>
</div>
</div>
The javascript code:
var bullets = [];
function openPage(e) {
e.preventDefault();
this.classList.add('gone');
}
var tmpBullets = document.querySelectorAll('#bullets div');
for(var i = 0 ; i < tmpBullets.length ; i++) {
tmpBullets[i].addEventListener('click', openPage, true);
bullets.push(tmpBullets[i]);
}
The CSS code:
html {
font-family: QuattrocentoSans;
overflow: hidden;
}
#firstPage {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('../images/noise.png');
}
#firstPage h1 {
display: block;
margin: auto;
text-align: center;
margin-top: 100px;
font-family: Pacifico;
font-size: 50px;
color: #fff;
text-shadow: 0 0 3px #000;
}
#bullets {
display: block;
width: 320px;
margin: auto;
}
#bullets div {
position: absolute;
display: inline-block;
width: 150px;
height: 150px;
line-height: 150px;
border-radius: 50%;
background-color: #333;
text-align: center;
color: white;
text-decoration: none;
margin-top: 10px;
margin-right: 5px;
margin-left: 5px;
text-shadow: 0 0 3px #999;
font-size: 1.2rem;
transition: box-shadow 500ms, left 1000ms, right 1000ms;
}
#bullets div.top {
top: 100px;
}
#bullets div.bottom {
top: 270px;
}
#bullets div.left {
left: calc(50% - 165px);
}
#bullets div.right {
right: calc(50% - 165px);
}
#bullets div:hover {
box-shadow: 0 0 10px #555;
transition: box-shadow 500ms;
}
#bullets div.left.gone {
left: -160px;
}
#bullets div.right.gone {
right: -160px;
}
See jsfiddle for live demo : http://jsfiddle.net/8u9j6n6x/
Thanks for your help

You need to add the transition to the .gone class not the #bullets div
#bullets div.gone {
transition: box-shadow 500ms, left 1000ms, right 1000ms;
}
updated fiddle http://jsfiddle.net/8u9j6n6x/1/

Categories

Resources