Develop Reference

Why wavesurferjs is overflowing the parent div

i have problem with wavesurferjs
It is overflowing the parent div
It is happening for the first time and on resize of the parent div
On resize it should fit the parent div
Question: when parent div is resized waveform should adjust itself to accomodate
it is shown in the below image:
here is my code:
var wavesurfer = WaveSurfer.create({
container: '#waveform',
// waveColor: 'violet',
waveColor: '#5B88C8',
progressColor: '#264E73',
hideScrollbar: true,
cursor: false,
drag: false
});
wavesurfer.load('https://ia800301.us.archive.org/15/items/fire_and_ice_librivox/fire_and_ice_frost_apc_64kb.mp3');
wavesurfer.enableDragSelection({
drag: false,
slop: 1,
loop : false,
});
wavesurfer.on('region-created', function (region) {
console.log(region.start, region.end);
});
wavesurfer.on('ready', function (readyObj) {
wavesurfer.addRegion({
start: 0, // time in seconds
end: wavesurfer.getDuration(), // time in seconds
color: 'hsla(100, 100%, 30%, 0.1)',
loop: false,
multiple: false,
drag: false
});
})
document.querySelectorAll('wave').forEach(function(wave){
wave.addEventListener('mousedown', function(e) {
e.preventDefault();
wavesurfer.clearRegions();
});
});
$('.toggle-width').on('click',function(){
var width = $('#wavesurferContainer').width();
width = width - 120;
$('#wavesurferContainer').width(width + 'px');
});
handle.wavesurfer-handle{
width: 9% !important;
max-width: 7px !important;
/* background: #03A9F4; */
background: orange;
cursor: default !important;
}
#wavesurferContainer{
width: calc(100% - 50px);
border: 1px solid red;
position: relative;
margin-top: 56px;
}
handle.wavesurfer-handle.wavesurfer-handle-end:before{
bottom: -17px !important;
top: unset !important;
}
#waveform{
margin-top: 10%
}
#waveform wave{
overflow: unset !important;
}
span.toggle-width{
position: relative;
float: right;
}
span.toggle-width:before {
content: "<";
position: absolute;
left: 0;
top: 0;
background: red;
width: 30px;
height: 30px;
text-align: center;
line-height: 29px;
color: #fff;
font-size: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
<!-- wavesurfer.js timeline -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.5/plugin/wavesurfer.regions.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="wavesurferContainer">
<span class="toggle-width"></span>
<div id="waveform"></div>
</div>
Please help me thanks in advance!!!

The documentation of wavesurfer mentions the responsive and fillParent options, which should solve the problem.
reponsive is available as of waveSurfer v2.0.0 (source), so an upgrade is needed, in case you are using the version 1.2.3 as in the example snippet.
Latest stable version is 3.3.1.
Edit, as a comment mentions that npm is not in use:
The recent builds of the library can be found in a cdns:
wavesurfer.js/3.3.1/wavesurfer.min.js
wavesurfer.js/3.3.1/plugin/wavesurfer.regions.min.js
Edit2: As documented:
You need to include the plugin's configuration when creating an instance of WaveSurfer:
var wavesurfer = WaveSurfer.create({
container: '#waveform',
plugins: [
WaveSurfer.regions.create({})
]
});
Registering the plugin during the instantiation of wavesurfer solves the problem, as demonstrated in the snippet below.
var wavesurfer = WaveSurfer.create({
container: '#waveform',
// waveColor: 'violet',
waveColor: '#5B88C8',
progressColor: '#264E73',
hideScrollbar: true,
cursor: false,
drag: false,
plugins: [
WaveSurfer.regions.create({})
]
});
wavesurfer.load('https://ia800301.us.archive.org/15/items/fire_and_ice_librivox/fire_and_ice_frost_apc_64kb.mp3');
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
wavesurfer.empty();
wavesurfer.drawBuffer();
var regs = Object.values(wavesurfer.regions.list);
window.setTimeout(() => {
wavesurfer.regions.clear();
var clear = ({start,end,resize,drag,loop,color}) =>({start,end,resize,drag,loop,color})
regs.forEach(e => wavesurfer.addRegion(clear(e)));
}, 100);
}
});
wavesurfer.enableDragSelection({
drag: false,
slop: 1,
loop : false,
});
wavesurfer.on('region-updated', function (region) {
console.log(region.start, region.end);
});
wavesurfer.on('ready', function (readyObj) {
resizeObserver.observe($('#wavesurferContainer')[0])
wavesurfer.addRegion({
start: 0, // time in seconds
end: wavesurfer.getDuration(), // time in seconds
color: 'hsla(100, 100%, 30%, 0.1)',
loop: false,
multiple: false,
drag: false
});
})
document.querySelectorAll('wave').forEach(function(wave){
wave.addEventListener('mousedown', function(e) {
e.preventDefault();
wavesurfer.clearRegions();
});
});
$(document).on('click','.toggle-width',function(){
console.log('clicked');
var width = $('#wavesurferContainer').width();
width = width - 120;
$('#wavesurferContainer').width(width + 'px');
// you can put here implementation of our redraw.
});
handle.wavesurfer-handle{
width: 9% !important;
max-width: 7px !important;
/* background: #03A9F4; */
background: orange;
cursor: default !important;
}
#wavesurferContainer{
width: calc(100% - 50px);
border: 1px solid red;
position: relative;
margin-top: 56px;
}
handle.wavesurfer-handle.wavesurfer-handle-end:before{
bottom: -17px !important;
top: unset !important;
}
#waveform{
margin-top: 10%
}
#waveform wave{
overflow: unset !important;
}
span.toggle-width{
position: relative;
float: right;
}
span.toggle-width:before {
content: "<";
position: absolute;
left: 0;
top: 0;
background: red;
width: 30px;
height: 30px;
text-align: center;
line-height: 29px;
color: #fff;
font-size: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/3.3.1/wavesurfer.min.js"></script>
<!-- wavesurfer.js timeline -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/3.3.1/plugin/wavesurfer.regions.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="wavesurferContainer">
<span class="toggle-width"></span>
<div id="waveform"></div>
</div>

I found a fix for your current version of wavesurfer.js.
All I did is update drawer size and call redraw method when you change the container width. But then the regions doesn't get updated. So I took the current regions values to a temp variable and removed regions and redraw. Now the region will be in proper position and proper size.
Next issue was that the handle bar keeps moving out of the container and the region starts acting crazy. You can fix it with simple css trick by applying the following css code.
Hope it helps.
handle.wavesurfer-handle-end{
transform: translateX(-100%);
}
Here's a snippet of a working solution.
$('document').ready(function() {
var wavesurfer = WaveSurfer.create({
container: '#waveform',
// waveColor: 'violet',
waveColor: '#5B88C8',
progressColor: '#264E73',
hideScrollbar: true,
cursor: false,
drag: false
});
wavesurfer.load('https://ia800301.us.archive.org/15/items/fire_and_ice_librivox/fire_and_ice_frost_apc_64kb.mp3');
wavesurfer.enableDragSelection({
drag: false,
slop: 1,
loop: false,
});
wavesurfer.on('region-created', function(region) {
console.log(region.start, region.end);
});
wavesurfer.on('ready', function(readyObj) {
wavesurfer.addRegion({
start: 0, // time in seconds
end: wavesurfer.getDuration(), // time in seconds
color: 'hsla(100, 100%, 30%, 0.1)',
loop: false,
multiple: false,
drag: false
});
})
document.querySelectorAll('wave').forEach(function(wave) {
wave.addEventListener('mousedown', function(e) {
e.preventDefault();
wavesurfer.clearRegions();
});
});
$('.toggle-width').on('click', function() {
var width = $('#wavesurferContainer').width();
width = width - 120;
$('#wavesurferContainer').width(width + 'px');
wavesurfer.drawer.updateSize();
wavesurfer.drawBuffer();
var region_list = wavesurfer.regions.list;
var region_keys = Object.keys(region_list);
region_keys.map(function(key){
var temp_region = {
start: region_list[key].start, // time in seconds
end: region_list[key].end, // time in seconds
color: region_list[key].color,
loop: region_list[key].loop,
multiple: region_list[key].multiple,
drag: region_list[key].drag
};
region_list[key].remove();
wavesurfer.addRegion(temp_region);
});
});
});
handle.wavesurfer-handle {
width: 9% !important;
max-width: 7px !important;
/* background: #03A9F4; */
background: orange;
cursor: default !important;
}
handle.wavesurfer-handle-end{
transform: translateX(-100%);
}
#wavesurferContainer {
position: relative;
width: calc(100% - 50px);
border: 1px solid red;
position: relative;
margin-top: 56px;
}
handle.wavesurfer-handle.wavesurfer-handle-end:before {
bottom: -17px !important;
top: unset !important;
}
#waveform {
position: relative;
margin-top: 10%
}
#waveform wave {
overflow: unset !important;
}
span.toggle-width {
position: relative;
float: right;
}
span.toggle-width:before {
content: "<";
position: absolute;
left: 0;
top: 0;
background: red;
width: 30px;
height: 30px;
text-align: center;
line-height: 29px;
color: #fff;
font-size: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js">
</script>
<!-- wavesurfer.js timeline -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.5/plugin/wavesurfer.regions.min.js">
</script>
<div id="wavesurferContainer">
<span class="toggle-width">
</span>
<div id="waveform">
</div>
</div>

There is no such functionality in your version of this library, but you still can implement such. Below is working example. Key here is to force to rerender buffers (here drawBuffer()). Regions are separate thing and we just remove and add them manually after redraw (not sure if best idea... but works).
//this needs to be called after resize!
wavesurfer.empty();
wavesurfer.drawBuffer();
var regs = Object.values(wavesurfer.regions.list);
wavesurfer.regions.clear();
regs.forEach(e => wavesurfer.addRegion(e));
this snipped needs to be called whenever container size has been changed. Here we are calling it just after such change from code, but in most cases it will be impossible, then you should use ResizeObserver to handle this.
To keep regions in container add such css:
.wavesurfer-region {
max-width: 100%;
}
var wavesurfer = WaveSurfer.create({
container: '#waveform',
// waveColor: 'violet',
waveColor: '#5B88C8',
progressColor: '#264E73',
hideScrollbar: true,
cursor: false,
drag: false
});
wavesurfer.load('https://ia800301.us.archive.org/15/items/fire_and_ice_librivox/fire_and_ice_frost_apc_64kb.mp3');
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
wavesurfer.empty();
wavesurfer.drawBuffer();
var regs = Object.values(wavesurfer.regions.list);
window.setTimeout(() => {
wavesurfer.regions.clear();
var clear = ({start,end,resize,drag,loop,color}) =>({start,end,resize,drag,loop,color})
regs.forEach(e => wavesurfer.addRegion(clear(e)));
}, 100);
}
});
wavesurfer.enableDragSelection({
drag: false,
slop: 1,
loop : false,
});
wavesurfer.on('region-updated', function (region) {
console.log(region.start, region.end);
});
wavesurfer.on('ready', function (readyObj) {
resizeObserver.observe($('#wavesurferContainer')[0])
wavesurfer.addRegion({
start: 0, // time in seconds
end: wavesurfer.getDuration(), // time in seconds
color: 'hsla(100, 100%, 30%, 0.1)',
loop: false,
multiple: false,
drag: false
});
})
document.querySelectorAll('wave').forEach(function(wave){
wave.addEventListener('mousedown', function(e) {
e.preventDefault();
wavesurfer.clearRegions();
});
});
$('.toggle-width').on('click',function(){
var width = $('#wavesurferContainer').width();
width = width - 120;
$('#wavesurferContainer').width(width + 'px');
// you can put here implementation of our redraw.
});
handle.wavesurfer-handle{
width: 9% !important;
max-width: 7px !important;
/* background: #03A9F4; */
background: orange;
cursor: default !important;
}
#wavesurferContainer{
width: calc(100% - 50px);
border: 1px solid red;
position: relative;
margin-top: 56px;
}
handle.wavesurfer-handle.wavesurfer-handle-end:before{
bottom: -17px !important;
top: unset !important;
}
#waveform{
margin-top: 10%
}
#waveform wave{
overflow: unset !important;
}
.wavesurfer-region {
max-width: 100%;
}
span.toggle-width{
position: relative;
float: right;
}
span.toggle-width:before {
content: "<";
position: absolute;
left: 0;
top: 0;
background: red;
width: 30px;
height: 30px;
text-align: center;
line-height: 29px;
color: #fff;
font-size: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.js"></script>
<!-- wavesurfer.js timeline -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.5/plugin/wavesurfer.regions.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="wavesurferContainer">
<span class="toggle-width"></span>
<div id="waveform"></div>
</div>

Scrolling div inside a div appear over div with higher z-index

https://jsfiddle.net/09rcqwdf/1/
The sidebar has a higher z-index. The container .main has overflow: none, the div inside it has overflow: scroll but for some reason when you drag the text it thinks its over the .scrolling div when in fact its over the sidebar div.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fafafa">
<style>
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
bottom: 0;
left: 300px;
right: 0;
top: 0;
overflow: hidden;
}
.scroll-container {
display: block;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: scroll;
z-index: 1;
}
.scrolling {
display: block;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 3500px;
height: 4000px
}
.sidebar {
display: block;
position: absolute;
background-color: #5555;
overflow: hidden;
z-index: 100000;
width: 300px;
bottom: 0;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="content">
<div class="main">
<div class="scroll-container">
<div class="scrolling">
</div>
</div>
</div>
<div class="sidebar">
<div>
<div class="drag">Drag</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.scrolling').droppable({
tolerance: 'pointer',
accept: '.drag',
drop(event, ui) {
console.log(event);
console.log(ui);
if (ui.helper.hasClass('cancelled')) {
return;
}
},
});
$('.drag').draggable({
helper() {
const $helper = $('<div></div>');
$helper.text('drag');
return $helper.clone().addClass('dragged-component-helper');
},
start() {},
stop(event, ui) {
ui.helper[0].remove();
},
cursorAt: {
left: 0,
top: 5,
},
cancelOnEscape: true,
appendTo: '#content',
disabled: false,
distance: 0,
revert: 'invalid',
});
</script>
</body>
</html>

First thing I noticed is your helper callback was configured incorrectly, you had:
$('.drag').draggable({
helper() {
const $helper = $('<div></div>');
$helper.text('drag');
return $helper.clone().addClass('dragged-component-helper');
},
start() {
},
Since you're defining an Object, you need to have the keyname, a colon, and then the function. Example:
$('.drag').draggable({
helper: function() {
const $helper = $('<div></div>');
$helper.text('drag');
return $helper.clone().addClass('dragged-component-helper');
},
start: () => {
},
This may have been causing various initialization issues for your draggable and I am surprised it did not appear as an error in your console.
In regards to the drag action, I think this will also be cleared up by the correction.
https://jsfiddle.net/Twisty/3gn57quj/10/
JavaScript
$(function() {
$('.scrolling').droppable({
tolerance: 'pointer',
accept: '.drag',
drop(event, ui) {
if (ui.helper.hasClass('cancelled')) {
return false;
}
$(this).append(ui.helper.clone().css({
left: (ui.offset.left - $(".sidebar").width()) + "px",
top: ui.offset.top + "px"
}));
},
});
$('.drag').draggable({
helper: function() {
return $("<div>", {
class: "drag component"
}).html("drag");
},
stop(event, ui) {
ui.helper[0].remove();
},
cursorAt: {
left: 0,
top: 5,
},
cancelOnEscape: true,
appendTo: '#content',
disabled: false,
distance: 0,
revert: 'invalid',
});
});

Regarding the z-index issue, I believe You can either
set in Your CSS:
.scrolling {
background-color: transparent;
}
and use the background-color of the scroll-container
or simply raise a little bit the z-index of the draggable
(preferred solution):
.drag {
z-index: 10;
}
or maybe set the inline style in Your helper function:
return $('<div style="z-index: 10;">', {
Finally, I believe You don't even need to raise so much the z-index of the sidebar, You can quietly avoid that
z-index: 100000
I strongly believe You may need also to change: ui.helper[0].remove(); to: ui.helper.remove();
As a bonus, to correctly position the draggable I believe the simplest solution will be to get the scroll position of the closest scrollable container:
$(function() {
$('.scrolling').droppable({
tolerance: 'pointer',
accept: '.drag',
drop: function(event, ui) {
if (ui.helper.hasClass('cancelled')) {
return false;
}
var container = $(event.target).scrollParent();
$(this).append(ui.helper.clone().css({
left: (ui.offset.left + container.scrollLeft()- $(".sidebar").width()) + "px",
top: (ui.offset.top + container.scrollTop()) + "px"
}));
}
});
$('.drag').draggable({
helper: function() {
return $("<div>", {
class: "drag component"
}).html("drag");
},
stop: function(event, ui) {
ui.helper.remove();
},
cursorAt: {left: 0, top: 5},
cancelOnEscape: true,
appendTo: '#content',
disabled: false,
distance: 0,
revert: 'invalid'
});
});
Moreover, please note: Twisty's remark is correct, in latest Firefox and Chrome Your snippet works, but a brief test in some other browsers raises below error:
Expected: ':'

It does not think it’s over the .scrolling div. It it just that the .scrolling div is transparent and you can see “through” it. To see what I am saying, add a background color to your .scrolling div, which will prevent you to see what is happening behind it.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fafafa">
<style>
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
bottom: 0;
left: 300px;
right: 0;
top: 0;
overflow: hidden;
}
.scroll-container {
display: block;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: scroll;
z-index: 1;
}
.scrolling {
display: block;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 3500px;
height: 4000px;
background: orange; <!-- Background Color to prevent transparency -->
}
.sidebar {
display: block;
position: absolute;
background-color: #5555;
overflow: hidden;
z-index: 100000;
width: 300px;
bottom: 0;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="content">
<div class="main">
<div class="scroll-container">
<div class="scrolling">
</div>
</div>
</div>
<div class="sidebar">
<div>
<div class="drag">Drag</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.scrolling').droppable({
tolerance: 'pointer',
accept: '.drag',
drop(event, ui) {
console.log(event);
console.log(ui);
if (ui.helper.hasClass('cancelled')) {
return;
}
},
});
$('.drag').draggable({
helper() {
const $helper = $('<div></div>');
$helper.text('drag');
return $helper.clone().addClass('dragged-component-helper');
},
start() {},
stop(event, ui) {
ui.helper[0].remove();
},
cursorAt: {
left: 0,
top: 5,
},
cancelOnEscape: true,
appendTo: '#content',
disabled: false,
distance: 0,
revert: 'invalid',
});
</script>
</body>
</html>

I suppose you want to restrict the dragging between the sidebar only.
For that you need to provide option for containment in draggable function. Which will block the movement of drag.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fafafa">
<style>
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
bottom: 0;
left: 300px;
right: 0;
top: 0;
overflow: hidden;
}
.scroll-container {
display: block;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: scroll;
z-index: 1;
}
.scrolling {
display: block;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 3500px;
height: 4000px
}
.sidebar {
display: block;
position: absolute;
background-color: #5555;
overflow: hidden;
z-index: 100000;
width: 300px;
bottom: 0;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="content">
<div class="main">
<div class="scroll-container">
<div class="scrolling">
</div>
</div>
</div>
<div class="sidebar">
<div>
<div class="drag">Drag</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.scrolling').droppable({
tolerance: 'pointer',
accept: '.drag',
drop(event, ui) {
console.log(event);
console.log(ui);
if (ui.helper.hasClass('cancelled')) {
return;
}
},
});
$('.drag').draggable({
containment: ".sidebar",
helper() {
const $helper = $('<div></div>');
$helper.text('drag');
return $helper.clone().addClass('dragged-component-helper');
},
start() {},
stop(event, ui) {
ui.helper[0].remove();
},
cursorAt: {
left: 0,
top: 5,
},
cancelOnEscape: true,
appendTo: '#content',
disabled: false,
distance: 0,
revert: 'invalid',
});
</script>
</body>
</html>

How to Customize slide bar using CSS

I have created slider which appears on top of html page but i need it to appear at the bottom and also the horizontal slide bar
should be reduced to half of its size and also I want to limit the value from (0-100) to (min:1-max:25)
I am new to the css and I don't know how to do this can someone help me please.I have also uploaded the complete code.
$(function() {
var handle = $("#custom-handle");
$("#slider").slider({
create: function() {
handle.text($(this).slider("value"));
},
slide: function(event, ui) {
handle.text(ui.value);
}
});
});
#custom-handle {
width: 3em;
height: 1.6em;
top: 50%;
margin-top: -.8em;
text-align: center;
line-height: 1.6em;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider">
<div id="custom-handle" class="ui-slider-handle"></div>
</div>

To set the minimum and maximum for the slider you would do this:
$(function() {
var handle = $("#custom-handle");
$("#slider").slider({
min: 1, //<--------Min
max: 25, //<-------Max
create: function() {
handle.text($(this).slider("value"));
},
slide: function(event, ui) {
handle.text(ui.value);
}
});
});
for the CSS, you could position it like this:
#slider {
width:50%; /*make it half its width*/
position:absolute; /*allow you to position it at the bottom*/
bottom:20px; /*how far from the bottom*/
left:20px; /* how far from the left*/
}
Demo: https://jsfiddle.net/3t0s597v/

Here you go, everything you need!
$(function() {
var handle = $("#custom-handle");
$("#slider").slider({
min: 1,
max: 25,
create: function() {
handle.text($(this).slider("value"))
},
slide: function(event, ui) {
handle.text(ui.value);
}
});
});
#custom-handle {
width: 3em;
height: 1.6em;
top: 50%;
margin-top: -.8em;
text-align: center;
line-height: 1.6em;
}
#slider {
width: 50%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider">
<div id="custom-handle" class="ui-slider-handle"></div>
</div>

Easy Pie Charts - Why there's no numbers running animation

I have an issue with Rendro Easy Pie Chart version 2.1.6.
I've used the easy-pie-chart exact as the documents and it shows
the animation of the bars itself until getting to the right percentage.
Let's say its 45%.
The issue is that the easy pie chart is only running an animation on the bar itself and unfortunately the number is not running from 0 to 45%.
Here's my code snippet:
HTML:
<div class='circular-bar circular-bar-xs m-none mt-xs mr-md pull-right'>
<div class='chart circular-bar-chart circular-bar-container' data-percent='45'>
<label class='circular-bar-percentage-text'><span class='percent'>45</span>%</label>
</div>
</div>
CSS:
.circular-bar {
margin-bottom: 25px;
}
.circular-bar .circular-bar-chart {
position: relative;
}
.circular-bar strong {
display: block;
font-weight: 600;
font-size: 18px;
line-height: 30px;
position: absolute;
top: 35%;
width: 80%;
left: 10%;
text-align: center;
}
.circular-bar label {
display: block;
font-weight: 100;
font-size: 17px;
line-height: 20px;
position: absolute;
top: 50%;
width: 80%;
left: 10%;
text-align: center;
}
JS:
$('.circular-bar-chart').easyPieChart({
barColor: "#2baab1",
delay: 300,
size: 45,
lineWidth: 4,
trackColor: '#f2f2f2',
scaleColor: false,
scaleLength: 5,
rotate: 0,
animate: 1600,
onStart: $.noop,
onStop: $.noop
});
Here's the link of how it looks:
https://jsfiddle.net/6455nw8t/
How to solve the issue of the running number from 0 to 45% ?
Thanks in Advance!

You will have to add onStep parameter.
$('.circular-bar-chart').easyPieChart({
barColor: "#2baab1",
delay: 300,
size: 45,
lineWidth: 4,
trackColor: '#f2f2f2',
scaleColor: false,
scaleLength: 5,
rotate: 0,
animate: 1600,
onStart: $.noop,
onStop: $.noop,
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});

Pushing Javascript to DIV Tag

I'm trying to output this twitter feed to a tag in the right column, but I can't figure out how to make it work. It seems like the code is set up to print wherever it is located. However, I can't place the code in the body of the page.
http://cusli.org/NiagaraIntlMootCourt/NiagaraMoot.aspx
Here is the code. I have a div tag with id "comments" in the html body.
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<style type="text/css">
#nav {
padding: 0 0 0 10px;
margin: 0;
list-style: none;
width: 760px;
height: 0px;
background:#6E102B;
margin-bottom: 5px;
}
.twtr-hd,
.twtr-ft,
.twtr-user
{
display: none;
}
</style>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#b80b0b'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('NiagaraMoot').start();
</script>

Try this:
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<style type="text/css">
#nav {
padding: 0 0 0 10px;
margin: 0;
list-style: none;
width: 760px;
height: 0px;
background:#6E102B;
margin-bottom: 5px;
}
.twtr-hd,
.twtr-ft,
.twtr-user
{
display: none;
}
</style>
<script>
var myThing = new TWTR.Widget({ //save you reference
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#b80b0b'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}); //remove from here
</script>
inside your HTML go
<div>
<script>
myThing.render().setUser('NiagaraMoot').start(); //add here
</script>
</div>

Put the script tag inside the div where you want it to render.
eg:
<html>
<body>
<h1>Hello world</h2>
<div>
<script type="text/javascript">
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#b80b0b'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('NiagaraMoot').start();
</script>
</div>
</body>
</html>

<div id="contentRight">
<!-- this is your right coulmn, put TWitter script here -->
<div class="myTwitter">
<script>
new TWTR.Widget({
version: 2,
....
}).render().setUser('NiagaraMoot').start();
</script>
</div>
<!-- end of your insert -->
<div id="dnn_ContentPane_Right">
....
CSS and main Tweeter JS library should stay in <head> ... </head> tag of you page - prefferably ... if you can not place them there ... they can be anywhere in your page but just before the init part (shown above).
I meen this part:
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<style type="text/css">
#nav {
padding: 0 0 0 10px;
margin: 0;
list-style: none;
width: 760px;
height: 0px;
background:#6E102B;
margin-bottom: 5px;
}
.twtr-hd,
.twtr-ft,
.twtr-user
{
display: none;
}
</style>