I am currently working on a drag-drop web application whereupon users can plan a marquee layout.
Part of the functionality is that users can rotate certain items of furniture on the canvas. However, it seems that scrolling whilst your mouse pointer is over a rotatable element will also rotate that element, which causes problems, especially if the user has got their layout perfect and then scrolls down the page to fill in a form - potentially messing up the layout.
The app uses the rotatable class from jQuery, and implements the draggable and droppable classes.
This is my javascript:
$(function() {
//Make every clone image unique.
var counts = [0];
var resizeOpts = {
handles: "all",
autoHide: true
};
var nw = $("<div>", {
class: "ui-rotatable-handle"
});
var ne = nw.clone();
var se = nw.clone();
$('.box div.ui-rotatable-handle').addClass("ui-rotatable-handle-sw");
nw.addClass("ui-rotatable-handle-nw");
ne.addClass("ui-rotatable-handle-ne");
se.addClass("ui-rotatable-handle-se");
$(".dragImg").draggable({
helper: "clone",
//Create counter
start: function() {
counts[0]++;
}
});
$("#dropHere").droppable({
drop: function(e, ui) {
if (ui.draggable.hasClass("dragImg")) {
$(this).append($(ui.helper).clone());
//Pointing to the dragImg class in dropHere and add new class.
$("#dropHere .dragImg").addClass("item-" + counts[0]);
$("#dropHere .img").addClass("imgSize-" + counts[0]);
//Remove the current class (ui-draggable and dragImg)
$("#dropHere .item-" + counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging").addClass('rotatable');
$('.rotatable').resizable().rotatable();
//$(".rotatable").append(nw, ne, se);
$(".small-table div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
$('.rotatable').resizable().rotatable();
$('.rotatable').rotatable("instance").startRotate(e);
});
$(".item-" + counts[0]).dblclick(function() {
$(this).remove();
});
make_draggable($(".item-" + counts[0]));
$(".imgSize-" + counts[0]).resizable(resizeOpts);
}
}
});
var zIndex = 0;
function make_draggable(elements) {
elements.draggable({
containment: 'parent',
start: function(e, ui) {
ui.helper.css('z-index', ++zIndex);
},
stop: function(e, ui) {}
});
}
});
As you can see, each item that is dragged is cloned once it's dropped on the dropzone (#dropHere div) and then remains on there unless it's double clicked. I want to know, is there any way to stop the element rotating if the user scrolls their mouse over it?
EDIT: Here is a FIDDLE of the app:
Note that you just can configure you rotatable by passing parameters as and object , one of those parameters is the wheelRotate whihch set to true by default , so you've just to create an object contating this param with false value : var rotateParams = {wheelRotate:false}; and then passe the object in the rotatable() fanction as below :
$('.rotatable').resizable().rotatable(rotateParams);
Please see bellow working snippet :
//adds are commented
$(function() {
//Make every clone image unique.
var counts = [0];
var resizeOpts = {
handles: "all",
autoHide: true
};
var nw = $("<div>", {
class: "ui-rotatable-handle"
});
var ne = nw.clone();
var se = nw.clone();
$('.box div.ui-rotatable-handle').addClass("ui-rotatable-handle-sw");
nw.addClass("ui-rotatable-handle-nw");
ne.addClass("ui-rotatable-handle-ne");
se.addClass("ui-rotatable-handle-se");
$(".dragImg").draggable({
helper: "clone",
//Create counter
start: function() {
counts[0]++;
}
});
/****** adding config param ******/
var rotateParams = {
wheelRotate: false
};
/**/
$("#dropHere").droppable({
drop: function(e, ui) {
if (ui.draggable.hasClass("dragImg")) {
$(this).append($(ui.helper).clone());
//Pointing to the dragImg class in dropHere and add new class.
$("#dropHere .dragImg").addClass("item-" + counts[0]);
$("#dropHere .img").addClass("imgSize-" + counts[0]);
//Remove the current class (ui-draggable and dragImg)
$("#dropHere .item-" + counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging").addClass('rotatable');
/****** applying the config param ******/
$('.rotatable').resizable().rotatable(rotateParams);
//$(".rotatable").append(nw, ne, se);
$(".small-table div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
/****** applying the config param ******/
$('.rotatable').resizable().rotatable(rotateParams);
$('.rotatable').rotatable("instance").startRotate(e);
});
$(".item-" + counts[0]).dblclick(function() {
$(this).remove();
});
make_draggable($(".item-" + counts[0]));
$(".imgSize-" + counts[0]).resizable(resizeOpts);
}
}
});
var zIndex = 0;
function make_draggable(elements) {
elements.draggable({
containment: 'parent',
start: function(e, ui) {
ui.helper.css('z-index', ++zIndex);
},
stop: function(e, ui) {}
});
}
});
#outer-dropzone {
height: 140px;
}
#inner-dropzone {
height: 80px;
}
.dropzone {
background-color: #ccc;
border: dashed 4px transparent;
border-radius: 4px;
margin: 10px auto 30px;
padding: 10px;
width: 80%;
transition: background-color 0.3s;
}
.drop-active {
border-color: #aaa;
}
.drop-target {
background-color: #29e;
border-color: #fff;
border-style: solid;
}
.drag-drop {
display: inline-block;
min-width: 40px;
color: #fff;
background-color: transparent;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
transition: background-color 0.3s;
}
.drag-drop.can-drop {}
.dragImg {
width: 50px;
height: 50px;
cursor: move;
}
.small-table {
width: 50px;
height: 50px;
cursor: move;
}
#dropHere {
width: 400px;
height: 400px;
border: dotted 1px black;
float: left;
}
.box {
border: 2px solid black;
width: 100px;
height: 100px;
background-color: green;
margin: 27px;
position: relative;
}
.ui-rotatable-handle {
background: url("https://image.ibb.co/knL4iF/1497037929_rotate_right.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 25px;
width: 25px;
position: absolute;
top: -10px;
left: -10px;
}
.ui-rotatable-handle-sw {
bottom: -27px;
left: -27px;
}
.ui-rotatable-handle-nw {
top: -27px;
left: -27px;
}
.ui-rotatable-handle-se {
bottom: -27px;
right: -27px;
}
.ui-rotatable-handle-ne {
top: -27px;
right: -27px;
}
.small-table {
background-image: url('https://image.ibb.co/gXCjiF/small_table.png');
background-size: contain;
}
.dance-floor {
background-image: url('https://image.ibb.co/gjHjiF/dance_floor.png');
background-size: contain;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.1/jquery.ui.rotatable.min.js"></script>
<div class="container">
<div class="dragImg small-table"></div>
<div class="dragImg dance-floor"></div>
<div id="dropHere"></div>
</div>
Related
I am using jsplumb to my project. I mentioned my sample below. when I drag and drop divs, divs should appear with anchor points. anchors points can be connecting each other. in my sample I did drag and drop part. but I am unable to complete the rest of the work. please check my sample and get an idea.
I am using jsplumb to my project. I mentioned my sample below. when I drag and drop divs, divs should appear with anchor points. anchors points can be connecting each other. in my sample I did drag and drop part. but I am unable to complete rest of the work. please check my sample and get the idea.
jsPlumb.ready(function() {
jsPlumb.Defaults.Container=$("#dropArea");
jsPlumb.Defaults.PaintStyle = { strokeStyle:"palevioletred", lineWidth:2,
dashstyle: '3 3'};
jsPlumb.Defaults.EndpointStyle = { radius:7, fillStyle:"palevioletred" };
jsPlumb.importDefaults({Connector : [ "Bezier", { curviness:50 } ]});
jsPlumb.connect({
connector: ["Straight"],
source:"element",
target:"element",
anchor: ["Left", "Right"],
endpoint:"Dot"
});
jsPlumb.setContainer($('#dropArea'));
var i = 1;
$(".element").draggable ({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
$("#dropArea").droppable ({
accept: '.element',
containment: 'dropArea',
drop: function (e, ui) {
droppedElement = ui.helper.clone();
ui.helper.remove();
$(droppedElement).removeAttr("class");
jsPlumb.repaint(ui.helper);
var newAgent = $('<div>').attr('id', 'pro' + i).addClass('pro');
newAgent.text('Element ' + i);
$(droppedElement).draggable({containment: "dropArea"});
$('#dropArea').append(newAgent);
jsPlumb.draggable(newAgent, {
containment: 'parent' });
i++;
}
});
$("#dropArea").on('click', '.pro', function (e) {
i++;
var newState = $('<div>').attr('id', 'state' + i).addClass('section').
text('Section '+ (i-1));
var title = $('<div>').addClass('title');
var connect = $('<div>').addClass('connector').
text('Click here to drag');
newState.css({
'top': e.pageY,
'left': e.pageX });
newState.append(title);
newState.append(connector);
$(this).append(newState);
jsPlumb.makeTarget(newState, {
anchor: 'Continuous' });
jsPlumb.makeSource(connector, {
anchor: 'Continuous' });
newState.dblclick(function (e) {
jsPlumb.detachAllConnections($(this));
$(this).remove();
e.stopPropagation();
});
});
});
#import url(http://fonts.googleapis.com/css?family=Montserrat);
* {
font-family: 'Montserrat', sans-serif;
}
#dropArea {
position: relative;
resize: both;
margin-left: 180px;
border: 1px solid #aaaaaa;
width: 800px;
height: 650px;
overflow-x: scroll;
overflow-y: scroll;
}
.title {
padding: 10px;
cursor: move;
}
.connector {
font-size:10px;
text-align: center;
width: 100%;
height: 20px;
background-color: #ffffff;
cursor: pointer;
}
.element {
border: 1px solid gray;
text-align: center;
width: 170px;
height: 75px;
background-color: lightpink;
position: absolute;
}
.pro {
border: 1px solid gray;
text-align: center;
width: 170px;
height: 75px;
background-color: lightpink;
position: absolute;
}
.section {
font-size: 12px;
text-align: center;
font-weight: 200;
border: 1px solid black;
background-color: #ddddff;
}
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.7.13/js/jsplumb.js"></script>
</head>
<body>
<div class="element" id="cId">
</div>
<div id="dropArea">
</div>
</body>
</html>
I have created a web page with drag and drop features for some of the elements.
Once the drag and drop are done, I store the elements which are in the droppable area in the local storage of the browser.
Later when the page is accessed again, I take the values from local storage and restore them on the web page.
After I restore, I couldn't drag the elements in the droppable area within its containment. Could anyone please help? Below is the code I have used.
Here is the link to FIDDLE
HTML
×
Battery Voltage
<div class="left_flight floatleft ui-widget-content">
<a class="boxclose displayblock">×</a>
<p>Flight Time Left</p>
<div class="flightLeft"></div>
</div>
<div class="cnt_flight floatleft ui-widget-content">
<a class="boxclose displayblock">×</a>
<p>Current Flight Time</p>
<div class="curFlight"></div>
</div>
<div style="clear:both"></div>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</div>
JS:
$(function() {
if (localStorage.length > 0) {
for (var i = 0; i < localStorage.length; i++) {
var dropClass = localStorage.key(i);
var clonediv = $("." + dropClass.substr(4, dropClass.length - 4)).clone();
var droppable = $("#droppable");
clonediv.appendTo(droppable);
clonediv
//.draggable({ revert: false, grid: [30, 30], scroll: true })
//.sortable()
.resizable({
containment: "#droppable"
});
clonediv.find('a').removeClass("displayblock").click(function() {
var par = $(this).parent();
var id = par.attr("class").split(' ');
var droppable = $("#droppable");
var removing = droppable.find("." + id[0]);
removing.remove();
localStorage.removeItem("drop" + id[0]);
});
}
} else {}
$(".bat_voltage").draggable({
revert: true,
grid: [30, 30],
scroll: true
});
$(".left_flight").draggable({
revert: true,
grid: [30, 30],
scroll: true
});
$(".cnt_flight").draggable({
revert: true,
grid: [30, 30],
scroll: true
});
$("#droppable").droppable({
drop: function(event, ui) {
var dragged = ui.draggable;
var id = dragged.attr("class").split(' ');
var droppable = $("#droppable");
var findElement = (droppable.find("." + id[0]));
if (findElement.length != 0) {} else {
ui.helper.css({
'top': 0,
'left': 0,
'position': 'relative'
});
ui.helper.clone()
.appendTo(droppable)
.draggable({
containment: "#droppable",
grid: [30, 30],
snap: true
})
.resizable({
containment: "#droppable"
}).sortable({
revert: false
});
droppable.find("." + id[0]).find('a').removeClass("displayblock").click(function() {
var par = $(this).parent();
var id = par.attr("class").split(' ');
var droppable = $("#droppable");
var removing = droppable.find(findElement);
removing.remove();
localStorage.removeItem("drop" + id[0]);
});
localStorage.setItem("drop" + id[0], droppable);
}
}
});
});
CSS:
.bat_voltage { width: 250px; height: 100px; padding: 0.5em; margin: 10px 10px 10px 0; z-index: 1; }
.floatleft { float: left; }
.left_flight { width: 250px; height: 100px; padding: 0.5em; margin: 10px 10px 10px 0; z-index: 1; }
.cnt_flight { width: 250px; height: 100px; padding: 0.5em; margin: 10px 10px 10px 0; z-index: 1; }
#droppable { width: 50%; height: 400px; padding: 0.5em; margin: 10px; resize: both; border: 2px; overflow: auto; }
#progressbar { width: 200px; height: 50px; margin-top: 20px; }
a.boxclose { float: right; margin-top: -10px; margin-right: -10px; cursor: pointer; color: #fff; border: 1px solid #AEAEAE; border-radius: 8px;
background: #605F61; font-size: 21px; font-weight: bold; display: inline-block; line-height: 0px; padding: 8px 3px; display: block; }
.displaynone { display: none !important; }
.displayblock { display: none !important; }
It must be somehow caused by the element not being dragged into the droppable area, making the revert parameter active because of this. Not sure how to solve this better than by just disabling it for the elements present inside it at the start:
$('#droppable .ui-draggable').draggable( "option", "revert", false );
Working FIDDLE
I've tried to run the interact.js drag and drop method as in the example itself. I downloaded the interact.js and interact.min.js and include them in my html file as well. But the function doesn't seem to be implemented. Any suggestions in this regard will be appreciated. I've provided the jsFiddle for the code in context below
/**
* Created by nayantara on 8/3/16.
*/
/* The dragging code for '.draggable' from the demo above
* applies to this demo as well so it doesn't have to be repeated. */
// enable draggables to be dropped into this
interact('.dropzone').dropzone({
// only accept elements matching this CSS selector
accept: '#yes-drop',
// Require a 75% element overlap for a drop to be possible
overlap: 0.75,
// listen for drop related events:
ondropactivate: function(event) {
// add active dropzone feedback
event.target.classList.add('drop-active');
},
ondragenter: function(event) {
var draggableElement = event.relatedTarget,
dropzoneElement = event.target;
// feedback the possibility of a drop
dropzoneElement.classList.add('drop-target');
draggableElement.classList.add('can-drop');
draggableElement.textContent = 'Dragged in';
},
ondragleave: function(event) {
// remove the drop feedback style
event.target.classList.remove('drop-target');
event.relatedTarget.classList.remove('can-drop');
event.relatedTarget.textContent = 'Dragged out';
},
ondrop: function(event) {
event.relatedTarget.textContent = 'Dropped';
},
ondropdeactivate: function(event) {
// remove active dropzone feedback
event.target.classList.remove('drop-active');
event.target.classList.remove('drop-target');
}
});
#outer-dropzone {
height: 140px;
}
#inner-dropzone {
height: 80px;
}
.dropzone {
background-color: #ccc;
border: dashed 4px transparent;
border-radius: 4px;
margin: 10px auto 30px;
padding: 10px;
width: 80%;
transition: background-color 0.3s;
}
.drop-active {
border-color: #aaa;
}
.drop-target {
background-color: #29e;
border-color: #fff;
border-style: solid;
}
.drag-drop {
display: inline-block;
min-width: 40px;
padding: 2em 0.5em;
color: #fff;
background-color: #29e;
border: solid 2px #fff;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
transition: background-color 0.3s;
}
.drag-drop.can-drop {
color: #000;
background-color: #4e4;
}
JS Demo only
<html>
<head>
<script src="http://code.interactjs.io/v1.2.6/interact.js"></script>
<script src="http://code.interactjs.io/v1.2.6/interact.min.js"></script>
</head>
<body>
<div id="no-drop" class="draggable drag-drop">#no-drop</div>
<div id="yes-drop" class="draggable drag-drop">#yes-drop</div>
<div id="outer-dropzone" class="dropzone">
#outer-dropzone
<div id="inner-dropzone" class="dropzone">#inner-dropzone</div>
</div>
</body>
</html>
Just thought of posting the working version
// target elements with the "draggable" class
interact('.draggable')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
// call this function on every dragend event
onend: function (event) {
var textEl = event.target.querySelector('p');
textEl && (textEl.textContent =
'moved a distance of '
+ (Math.sqrt(event.dx * event.dx +
event.dy * event.dy)|0) + 'px');
}
});
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
// this is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener;
// enable draggables to be dropped into this
interact('.dropzone').dropzone({
// only accept elements matching this CSS selector
accept: '#yes-drop',
// Require a 75% element overlap for a drop to be possible
overlap: 0.75,
// listen for drop related events:
ondropactivate: function (event) {
// add active dropzone feedback
event.target.classList.add('drop-active');
},
ondragenter: function (event) {
var draggableElement = event.relatedTarget,
dropzoneElement = event.target;
// feedback the possibility of a drop
dropzoneElement.classList.add('drop-target');
draggableElement.classList.add('can-drop');
draggableElement.textContent = 'Dragged in';
},
ondragleave: function (event) {
// remove the drop feedback style
event.target.classList.remove('drop-target');
event.relatedTarget.classList.remove('can-drop');
event.relatedTarget.textContent = 'Dragged out';
},
ondrop: function (event) {
event.relatedTarget.textContent = 'Dropped';
},
ondropdeactivate: function (event) {
// remove active dropzone feedback
event.target.classList.remove('drop-active');
event.target.classList.remove('drop-target');
}
});
#outer-dropzone {
height: 140px;
}
#inner-dropzone {
height: 80px;
}
.dropzone {
background-color: #ccc;
border: dashed 4px transparent;
border-radius: 4px;
margin: 10px auto 30px;
padding: 10px;
width: 80%;
transition: background-color 0.3s;
}
.drop-active {
border-color: #aaa;
}
.drop-target {
background-color: #29e;
border-color: #fff;
border-style: solid;
}
.drag-drop {
display: inline-block;
min-width: 40px;
padding: 2em 0.5em;
color: #fff;
background-color: #29e;
border: solid 2px #fff;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
transition: background-color 0.3s;
}
.drag-drop.can-drop {
color: #000;
background-color: #4e4;
}
<script src="http://code.interactjs.io/v1.2.6/interact.js"></script>
<div id="no-drop" class="draggable drag-drop"> #no-drop </div>
<div id="yes-drop" class="draggable drag-drop"> #yes-drop </div>
<div id="outer-dropzone" class="dropzone">
#outer-dropzone
<div id="inner-dropzone" class="dropzone">#inner-dropzone</div>
</div>
The JS you posted is the code for dropzone handling only, you also need to add the piece from first example on the page you linked to be able to drag.
I am using jQuery UI tooltip which is enabled when I hover over a few images. I have attached a picture to this question. The white margin that we see after the pink is extra. Any idea why it is being formed ?
I am struggling for the past few hours to get the reason behind it.
tooltip example
`HTML: This is my HTML content
:
CSS: My CSS rules
.ui-tooltip {
padding: 1em;
border: 2px solid $colorBrown;
color: $colorBrown;
margin: 0;
}
.ui-tooltip-content {
padding: 1em;
color: $colorWhite;
background: $colorBrown;
}
.ui-tooltip-content::after {
content: '';
position: absolute;
border-style: solid;
display: block;
color: $colorBrown;
}
.top .ui-tooltip-content::after {
bottom: -10px;
left: 70px;
border-color: $colorBrown transparent;
border-width: 10px 10px 0;
}
JS: The JS function that initiates tooltip
function toolTipInit() {
$('.social-icons span').tooltip({
items: 'a.whatsapp, a.skype',
content: function() {
return $(this).data('content');
},
show: null,
position: {
my: 'center bottom',
at: 'center top-50'
},
tooltipClass: 'top',
open: function(event, ui) {
if (typeof(event.originalEvent) === 'undefined') {
return false;
}
},
close: function(event, ui) {
ui.tooltip.hover(function() {
$(this).stop(true).fadeTo(400, 1);
},
function() {
$(this).fadeOut('400', function() {
$(this).remove();
});
});
}
});
}
`
use !important in your custom css so that it can override the default ui css. I think it will help.
Ex:
padding:0 !important;
For some reason I'm unable to get the mp3 I want to be played to play with this code. Here's the fiddle:
http://jsfiddle.net/haGYL/
Here's the code:
<style>
#player {
width: 350px;
height: 50px;
position: relative;
margin: 0 auto;
top: 150px;
background: url('http://iviewsource.com/exercises/audioslider/images/volume-background.png') no-repeat left top;
}
#volume {
position: absolute;
left: 24px;
margin: 0 auto;
height:15px;
width: 300px;
background: url('http://iviewsource.com/exercises/audioslider/images/volume-empty.png') no-repeat left top;
border: none;
outline: none;
}
#volume .ui-slider-range-min {
height:15px;
width: 300px;
position: absolute;
background: url('http://iviewsource.com/exercises/audioslider/images/volume-full.png') no-repeat left top;
border: none;
outline: none;
}
#volume .ui-slider-handle {
width: 38px;
height:39px;
background: url('http://iviewsource.com/exercises/audioslider/images/volume-knob.png') no-repeat left top;
position: absolute;
margin-left: -15px;
cursor: pointer;
outline: none;
border: none;
}
</style>
<script>
$("#volume").slider({
min: 0,
max: 100,
value: 0,
range: "min",
animate: true,
slide: function(event, ui) {
setVolume((ui.value) / 100);
}
});
var myMedia = document.createElement('audio');
$('#player').append(myMedia);
myMedia.id = "myMedia";
playAudio('http://www.catholic.com/sites/default/files/audio/radioshows/ca140331b.mp3', 0);
function playAudio(fileName, myVolume) {
var mediaExt = (myMedia.canPlayType('audio/mp3')) ? '.mp3'
: (myMedia.canPlayType('audio/ogg')) ? '.ogg'
: '';
if (mediaExt) {
myMedia.src = fileName + mediaExt;
myMedia.setAttribute('loop', 'loop');
setVolume(myVolume);
myMedia.play();
}
}
function setVolume(myVolume) {
var myMedia = document.getElementById('myMedia');
myMedia.volume = myVolume;
}
</script>
<div id="player">
<div id="volume"></div>
</div>
Observe the following part of your code.
function playAudio(fileName, myVolume) {
// here you are checking if player can mp3 or ogg file
var mediaExt = (myMedia.canPlayType('audio/mp3')) ? '.mp3'
: (myMedia.canPlayType('audio/ogg')) ? '.ogg'
: '';
if (mediaExt) {
//here you are adding the extention that the player can play with the passed file url. So if url is www.xxx.com/myAudioFile and mediaExt is .mp3, here it will become www.xxx.com/myAudioFile.mp3
myMedia.src = fileName + mediaExt;
myMedia.setAttribute('loop', 'loop');
setVolume(myVolume);
myMedia.play();
}
}
And you are calling the above function as
playAudio('http://www.catholic.com/sites/default/files/audio/radioshows/ca140331b.mp3', 0);
Notice you are providing the extension also.
So while execution the playAudio method the effective file url is becoming like following
http://www.catholic.com/sites/default/files/audio/radioshows/ca140331b.mp3.mp3
OR
http://www.catholic.com/sites/default/files/audio/radioshows/ca140331b.mp3.ogg
So to run your code you just need to call the playAudio function as following
playAudio('http://www.catholic.com/sites/default/files/audio/radioshows/ca140331b', 0);
Notice I'm not passing the extension.
See the JSFiddle below.
Demo
here is your code working jsfiddle
$(document).ready(function() {
var myMedia = document.createElement('audio');
$('#player').append(myMedia);
myMedia.id = "myMedia";
playAudio('http://www.catholic.com/sites/default/files/audio/radioshows/ca140331b', 0);
});