Is there a way to generate images in random positions (javascript)? - javascript

I am currently experimenting with a d-i-y collage game, where users can click an image and drag it into a desired position. The code works fine, except at load time all of the images are scrunched up in the top left corner. The are on top of one another and hide those under them.
I can't figure out why the random position generation isn't working. The images are in div, as a beginner I don't know if there's another way to do it at the moment. Is Math.random() possible?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
let currentlyDragging;
let drawing = false;;
let offset_x;
let offset_y;
let puzzle;
$(window).load(function () {
$(".draggable").click(startDragging);
$(".draggable").mousemove(whileDragging);
$("#puzzle").mousemove(whileDragging);
puzzle = document.getElementById("puzzle");
});
function startDragging(e) {
if (!drawing) {
drawing = true;
currentlyDragging = $(this);
if (offset_x == null && offset_y == null) {
var current_origin_y;
var current_origin_x;
var current_origin_y_string = currentlyDragging.context.style['margin-top'];
if (current_origin_y_string === "") {
current_origin_y = 0;
} else {
current_origin_y = parseInt(current_origin_y_string.split("px")[0]);
}
var current_origin_x_string = currentlyDragging.context.style['margin-left'];
if (current_origin_x_string === "") {
current_origin_x = 0;
} else {
current_origin_x = parseInt(current_origin_x_string.split("px")[0]);
}
offset_x = current_origin_x - e.pageX;
offset_y = current_origin_y - e.pageY;
}
} else {
drawing = false;
currentlyDragging = null;
offset_x = null;
offset_y = null;
}
}
function whileDragging(e) {
if (currentlyDragging == null) {
return false;
}
currentlyDragging.css({
"margin-top": Math.min(Math.max(e.pageY + offset_y, 0), puzzle.clientHeight - currentlyDragging.context.height) + "px",
"margin-left": Math.min(Math.max(e.pageX + offset_x, 0), puzzle.clientWidth - currentlyDragging.context.width) + "px"
});
}
</script>
<style>
.draggable {
position: absolute;
cursor: pointer;
user-select: none;
}
</style>
<div id="puzzle" scroll="no" style="height: 100%; overflow: hidden; border: 5px solid yellow;">
<img class=draggable src="https://avatars3.githubusercontent.com/u/9167554?s=460&v=4" width=50 height=50 />
<img class=draggable src="https://avatars3.githubusercontent.com/u/9167554?s=460&v=4" width=50 height=50 />
<img class=draggable src="https://avatars3.githubusercontent.com/u/9167554?s=460&v=4" width=50 height=50 />
<img class=draggable src="https://avatars3.githubusercontent.com/u/9167554?s=460&v=4" width=50 height=50 />
<img class=draggable src="https://avatars3.githubusercontent.com/u/9167554?s=460&v=4" width=50 height=50 />
</div>
</body>

Related

JavaScript 3d Viewer using images with Rotation and Zoom

I am trying to develop interactive 3d viewer with Rotation and Zoom using Java script. I successfully developed a script to view product which rotates only in one axis(X-axis), but need script sample to view product which is taken in X,Y and Z axis. I have attached an image which shows camera placements.
Fig-1 Sample Camera placement
Fig -1 Shows camera positions where images are taken in single axis, This is achieved and below is the code.
<html>
<head>
<style type="text/css">
table img {
height: 250px;
width: 250px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var arr = new Array();
var xCurrent = 0;
var currentImgPos = 0;
$("#dvImages img").each(function () {
arr.push($(this).attr("src"));
});
$("#product").attr("src", arr[0]);
$("#product").mouseleave(function () { xCurrent = 0; });
$("#product").mousemove(function (e) {
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
if (xCurrent > relX) {
if (relX - xCurrent <= -5) {
if (currentImgPos >= 25) {
currentImgPos = 0;
$("#product").attr("src", arr[currentImgPos]);
}
else {
currentImgPos = currentImgPos + 1;
$("#product").attr("src", arr[currentImgPos]);
}
xCurrent = relX;
}
}
else {
if (relX - xCurrent >= 5) {
if (currentImgPos <= 0) {
currentImgPos = 25;
$("#product").attr("src", arr[currentImgPos]);
}
else {
currentImgPos = currentImgPos - 1;
$("#product").attr("src", arr[currentImgPos]);
}
xCurrent = relX;
}
}
});
});
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img alt="" src="" id="product" />
</td>
</tr>
</table>
<div id="dvImages" style="display: none">
<img alt="" src="http://www.mathieusavard.info/threesixty/1.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/5.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/9.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/13.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/17.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/21.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/25.jpg" />
</div>
</body>
</html>
Fig-2 New Camera placement
Fig -2 Shows camera positions where images are taken in X,Y and Z axis. Need sample code this part

java script animation with mouse enter

With the "mouse enter" four picture move from left to right.
The animation should start with every "mouse enter".
And there is the problem: After the first "mouse enter" (and the first animation) the second animation only starts after a few seconds have passed. But it should start directly with the second "mouse enter".
Keep looking at the console.log() lines in my code, they explain what I mean.
<!doctype html>
<head>
<style>
* {
margin: 0;padding: 0;
}
</style>
</head>
<body>
<div id="wrapper" style="width:300px;height:250px;border:1px solid #dcdddd; ">
<a id="bild-move-1" href="" target="_blank" style="position: absolute; z-index: 4; margin-left: -75px;"><img src="bild_01-a.jpg" width="75" border="0"></a>
<a id="bild-move-2" href="" target="_blank" style="position: absolute; z-index: 3; margin-left: -75px;"><img src="bild_01-a.jpg" width="75" border="0"></a>
<a id="bild-move-3" href="" target="_blank" style="position: absolute; z-index: 2; margin-left: -75px;"><img src="bild_01-a.jpg" width="75" border="0"></a>
<a id="bild-move-4" href="" target="_blank" style="position: absolute; z-index: 1; margin-left: -75px;"><img src="bild_01-a.jpg" width="75" border="0"></a>
</div>
<script>
//Initialize interval (and variables) outside of the interval
var interval = null;
var indexA = 0;
var ziel = 75;
var numberofThePic = 1;
var currentMove = -75;
//Function to start the animation
function startAnimation() {
//Only set the interval if it hasn't already been set
if (interval == null) {
console.log("active");
console.log(document.getElementById('bild-move-1').style.marginLeft);
interval = setInterval(function() {
if (numberofThePic <=4) {
if (indexA < ziel){
currentMove = currentMove + 1;
document.getElementById('bild-move-'+ numberofThePic).style.marginLeft = currentMove + "px";
indexA++;
} else {
indexA = 0;
numberofThePic = numberofThePic + 1;
}
} else {
//otherwise, animation is complete, clear the interval
reset();
}
}, 10);
}
}
function reset(){
setTimeout(function(){
for (var indexB = 4; indexB >= 1; indexB--) {
document.getElementById('bild-move-'+ indexB).style.marginLeft = -75 + "px";
}
indexA = 0;
numberofThePic = 1;
currentMove = -75;
clearInterval(interval);
interval = null;
console.log("reset");
}, 2000);
}
wrapper.addEventListener("mouseenter", startAnimation);
</script>
</body>
</html>

SVG Clipping Issue (HTML, JS, JQUERY, CSS)

I am trying to incorporate a preloader within my site and I would like the splash screen's loading bar to be in the shape of a custom logo. I have successfully created a clipping svg on text and images before, so I don't believe that this is where the problem is (see my jsfiddle).
I just need the loading bar's containing svg to clip the loading bar div in the shape of the inline svg.
I have included my code.
Thanks.
(function($) {
var items = new Array(),
errors = new Array(),
onComplete = function() {},
current = 0;
var jpreOptions = {
splashVPos: '35%',
loaderVPos: '75%',
splashID: '#jpreContent',
showSplash: true,
showPercentage: false,
autoClose: true,
onetimeLoad: false,
debugMode: false,
splashFunction: function() {}
}
//cookie
var getCookie = function() {
if( jpreOptions.onetimeLoad ) {
var cookies = document.cookie.split('; ');
for (var i = 0, parts; (parts = cookies[i] && cookies[i].split('=')); i++) {
if ((parts.shift()) === "jpreLoader") {
return (parts.join('='));
}
}
return false;
} else {
return false;
}
}
var setCookie = function(expires) {
if( jpreOptions.onetimeLoad ) {
var exdate = new Date();
exdate.setDate( exdate.getDate() + expires );
var c_value = ((expires==null) ? "" : "expires=" + exdate.toUTCString());
document.cookie="jpreLoader=loaded; " + c_value;
}
}
//create jpreLoader UI
var createContainer = function() {
jOverlay = $('<div></div>')
.attr('id', 'jpreOverlay')
.css({
position: "fixed",
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: 9999999
})
.appendTo('body');
jLoader = $('<svg></svg>')
.attr('id', 'jpreLoader')
.appendTo(jOverlay);
var posWidth = $(window).width() - $(jLoader).width();
$(jLoader).css({
position: 'absolute',
top: jpreOptions.loaderVPos,
left: Math.round((50 / $(window).width()) * posWidth) + '%'
});
jBar = $('<div></div>')
.attr('id', 'jpreBar')
.css({
width: '0%',
height: '100%'
})
.appendTo(jLoader);
}
//get all images from css and <img> tag
var getImages = function(element) {
$(element).find('*:not(script)').each(function() {
var url = "";
if ($(this).css('background-image').indexOf('none') == -1 && $(this).css('background-image').indexOf('-gradient') == -1) {
url = $(this).css('background-image');
if(url.indexOf('url') != -1) {
var temp = url.match(/url\((.*?)\)/);
url = temp[1].replace(/\"/g, '');
}
} else if ($(this).get(0).nodeName.toLowerCase() == 'img' && typeof($(this).attr('src')) != 'undefined') {
url = $(this).attr('src');
}
if (url.length > 0) {
items.push(url);
}
});
}
//create preloaded image
var preloading = function() {
for (var i = 0; i < items.length; i++) {
if(loadImg(items[i]));
}
}
var loadImg = function(url) {
var imgLoad = new Image();
$(imgLoad)
.load(function() {
completeLoading();
})
.error(function() {
errors.push($(this).attr('src'));
completeLoading();
})
.attr('src', url);
}
//update progress bar once image loaded
var completeLoading = function() {
current++;
var per = Math.round((current / items.length) * 100);
$(jBar).stop().animate({
width: per + '%'
}, 500, 'linear');
if(jpreOptions.showPercentage) {
$(jPer).text(per+"%");
}
//if all images loaded
if(current >= items.length) {
current = items.length;
setCookie(); //create cookie
if(jpreOptions.showPercentage) {
$(jPer).text("100%");
}
//fire debug mode
if (jpreOptions.debugMode) {
var error = debug();
}
//max progress bar
$(jBar).stop().animate({
width: '100%'
}, 500, 'linear', function() {
//autoclose on
if( jpreOptions.autoClose )
loadComplete();
});
}
}
//triggered when all images are loaded
var loadComplete = function() {
$(jOverlay).fadeOut(800, function() {
$(jOverlay).remove();
onComplete(); //callback function
});
}
//debug mode
var debug = function() {
if(errors.length > 0) {
var str = 'ERROR - IMAGE FILES MISSING!!!\n\r'
str += errors.length + ' image files cound not be found. \n\r';
str += 'Please check your image paths and filenames:\n\r';
for (var i = 0; i < errors.length; i++) {
str += '- ' + errors[i] + '\n\r';
}
return true;
} else {
return false;
}
}
$.fn.jpreLoader = function(options, callback) {
if(options) {
$.extend(jpreOptions, options );
}
if(typeof callback == 'function') {
onComplete = callback;
}
//show preloader once JS loaded
$('body').css({
'display': 'block'
});
return this.each(function() {
if( !(getCookie()) ) {
createContainer();
getImages(this);
preloading();
}
else { //onetime load / cookie is set
$(jpreOptions.splashID).remove();
onComplete();
}
});
};
})(jQuery);
body{
display:none;
}
#jpreOverlay {
background-color: rgba(000, 000, 000, 0.87);
}
#jpreLoader{
width:300px;
height:300px;
}
#jpreBar {
background-size:30px 30px;
-moz-background-size:30px 30px;
-webkit-background-size:30px 30px;
-o-background-size:30px 30px;
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#33ffffff',
endColorstr='#33000000',
GradientType=0 );
background-color:#E07300;
clip-path: url(#clipping);
-webkit-clip-path: url(#clipping);
-moz-clip-path: url(#clipping);
-o-clip-path: url(#clipping);
position: absolute;
}
#-webkit-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
#-moz-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
#-ms-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
#-o-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
#keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jPreLoader v2 - A jQuery preloader for Website</title>
<link rel="stylesheet" href="css/jpreloader.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/jpreloader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="shortcut icon" href="http://www.inwebson.com/wp-content/themes/inwebson2/favicon.ico" />
<link rel="canonical" href="http://www.inwebson.com/demo/jpreloader-v2/" />
</head>
<body>
<section id="wrapper">
<div class="wrapper-inner">
<hgroup>
<h2>jPreLoader v2</h2>
<h3>A loading screen to preload images using jQuery</h3>
</hgroup>
<div class="container">
<ul id="set1" class="holder current">
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/181548_153793501342544_153515891370305_259700_7241508_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/196528_158118380910056_153515891370305_283882_234528_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/196556_159931940728700_153515891370305_293999_6261181_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-ash4/205687_165495210172373_153515891370305_326385_1869822_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/205600_167760236612537_153515891370305_338177_2160812_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/248150_174306909291203_153515891370305_374445_3774819_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/228343_171546129567281_153515891370305_358267_5126730_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-ash4/249232_174478049274089_153515891370305_375652_2662480_n.jpg" /></li>
<li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/268903_186646411390586_153515891370305_435046_34596_n.jpg" /></li>
<div class=clearfix></div>
</ul>
<ul id="set2" class="holder">
<li><div id="li1"></div></li>
<li><div id="li2"></div></li>
<li><div id="li3"></div></li>
<li><div id="li4"></div></li>
<li><div id="li5"></div></li>
<li><div id="li6"></div></li>
<li><div id="li7"></div></li>
<li><div id="li8"></div></li>
<li><div id="li9"></div></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="description txtright">
Images by Mike Shaw, Cheshire UK based photographer.
</div>
</div>
</section>
<!-- This section is for Splash Screen -->
<section id="jSplash">
<section class="selected">
<svg width="82" height="82" id="jpreLoader" clipPathUnits="objectBoundingBox">
<defs>
<clipPath id="clipping">
<path stroke-opacity="0" fill-opacity="1" stroke-width="0" stroke="none" fill="#282525" d="M244,121.9L250.5,123.2C239.2,127.9 228.9,132.6 221.4,138.2L212.2,138.2L212.2,147.3C212.2,157.7 224.6,172.8 233.2,182.2L238.1,182.2C253.2,200.4 299.6,221.8 320.6,232.1C309.8,235.3 290.9,234.3 281.2,230.2L258.6,220.8C251,219.6 241.9,218.9 235.4,221.5C217.6,213.3 198.7,207 205.2,202.3C180.4,191.6 168.6,184.1 162.6,176.5L136.7,191.6C133.5,190 127,190.7 123.8,192.6L84.4,214.9C62.9,216.1 35.9,243.4 9.5,243.4C8.4,243.4 7.9,243.1 7.9,242.8C7.9,241.2 16.5,238.1 18.7,236.5C19.2,236.2 19.2,235.9 19.7,235.6L43.5,222.4L42.4,218.6L23.5,228.7C25.1,221.8 23.5,213.3 28.9,204.8L46.7,195.1C48.9,190.7 52.6,186.9 57.5,182.8L65,185L94.2,169C100.6,165.2 111.9,159.6 111.4,152.7C121.6,147.3 130.3,142.3 137.3,136.7C141.6,136.3 145.9,135.7 148.6,133.8C148.6,133.2 147.5,132.3 147.5,131.6C130.3,96.5 128.7,61.6 150.8,26.4C155.1,24.6 162.1,22 165.3,24.6L156.1,41.5C163.2,38.4 167.5,30.5 172.3,24.6C203.1,27.1 203.1,39.3 219.8,39.9L225.7,46.5C216.5,57.5 210.6,74.2 210.1,82.3L206.8,87L211.1,88.6C245.6,68.2 286.6,41.2 319.5,23.6L328.1,23.6L328.1,28C333.5,26.4 338.9,19.2 352.9,20.5L348.1,25.5C372.9,28.6 389.6,36.5 389.6,41.8C389.6,43.4 389.1,45 386.4,46.2L244,121.9M46.7,216.1L48.3,219.3C53.7,217.7 55.9,214.5 55.9,211.7L46.7,216.1M65,181.3L61.3,180.3C66.1,176.9 72,173.4 78,169.9L81.7,172.1L65,181.3M85,170.3L81.2,168.1C84.4,166.5 87.1,164.9 90.4,163.3L90.4,167.1L85,170.3M237.6,138.2L230,138.2L242.9,131.3L247.3,132.3L237.6,138.2M253.2,228.7L240.3,223.3C246.2,221.8 253.7,223.6 262.4,227.7L253.2,228.7z"></path>
</clipPath>
</defs>
</svg>
<h2>jPreLoader v2</h2>
<strong>A loading screen to preload images using jQuery</strong>
</section>
</section>
<!-- End of Splash Screen -->
<script>
$(document).ready( function() {
var timer; //timer for splash screen
//calling jPreLoader
$('body').jpreLoader({
splashID: "#jSplash",
loaderVPos: '30%',
autoClose: false,
splashFunction: function() {
//passing Splash Screen script to jPreLoader
$('#jSplash').children('section').not('.selected').hide();
$('#jSplash').hide().fadeIn(800);
timer = setInterval(function() {
splashRotator();
}, 4000);
},
});
//create splash screen animation
function splashRotator(){
var cur = $('#jSplash').children('.selected');
var next = $(cur).next();
if($(next).length != 0) {
$(next).addClass('selected');
} else {
$('#jSplash').children('section:first-child').addClass('selected');
next = $('#jSplash').children('section:first-child');
}
$(cur).removeClass('selected').fadeOut(800, function() {
$(next).fadeIn(800);
});
}
});
</script>
</body>
</html>

how do i get this before/after slider to work?

I'm trying to get this plug in to work, but something isn't right.
here's the issue: http://www.youtube.com/watch?v=dIGFsBBcdTQ&feature=youtu.be
This is the <head> of my HTML document:
<script>
var $after = $('.after'),
img_width = $('.after img').width(),
init_split = Math.round(img_width/2);
$after.width(init_split);
$('.before_after_slider').mousemove(function(e){
var offX = (e.offsetX || e.clientX - $after.offset().left);
$after.width(offX);
});
$('.before_after_slider').mouseleave(function(e){
$after.stop().animate({
width: init_split
},1000)
});
</script>
This is the body:
<div class="before_after_slider">
<div class="before">
<img src="center_before.jpg" width="100%" height="100%" alt="before" />
</div>
<div class="after">
<img src="center_after.jpg" width="100%" height="100%" alt="after" />
</div>
</div>
And this is the CSS
.before_after_slider {
position: relative;
& > * {
position: absolute;
}
}
.after {
overflow: hidden;
}
Call function when DOM gets ready.
Try:
$(document).ready(function () {
var $after = $('.after'),
img_width = $('.after img').width(),
init_split = Math.round(img_width / 2);
$after.width(init_split);
$('.before_after_slider').mousemove(function (e) {
var offX = (e.offsetX || e.clientX - $after.offset().left);
$after.width(offX);
});
$('.before_after_slider').mouseleave(function (e) {
$after.stop().animate({
width: init_split
}, 1000)
});
});

audio onprogress in chrome not working

I am having a problem getting onprogress event for the audio tag working on chrome. it seems to work on fire fox.
http://www.scottandrew.com/pub/html5audioplayer/ works on chrome but there is no progress bar update. When I copy the code and change the src to a .wav file and run it on fire fox it works perfectly.
<style type="text/css">
#content
{
clear:both;
width:60%;
}
.player_control
{
float:left;
margin-right:5px;
height: 20px;
}
#player
{
height:22px;
}
#duration
{
width:400px;
height:15px;
border: 2px solid #50b;
}
#duration_background
{
width:400px;
height:15px;
background-color:#ddd;
}
#duration_bar
{
width:0px;
height:13px;
background-color:#bbd;
}
#loader
{
width:0px;
height:2px;
}
.style1
{
height: 35px;
}
</style>
<script type="text/javascript">
var audio_duration;
var audio_player;
function pageLoaded() {
audio_player = $("#aplayer").get(0);
//get the duration
audio_duration = audio_player.duration;
$('#totalTime').text(formatTimeSeconds(audio_player.duration));
//set the volume
}
function update(){
//get the duration of the player
dur = audio_player.duration;
time = audio_player.currentTime;
fraction = time/dur;
percent = (fraction*100);
wrapper = document.getElementById("duration_background");
new_width = wrapper.offsetWidth*fraction;
document.getElementById("duration_bar").style.width = new_width + "px";
$('#currentTime').text(formatTimeSeconds(audio_player.currentTime));
$('#totalTime').text(formatTimeSeconds(audio_player.duration));
}
function formatTimeSeconds(time) {
var minutes = Math.floor(time / 60);
var seconds = "0" + (Math.floor(time) - (minutes * 60)).toString();
if (isNaN(minutes) || isNaN(seconds))
{
return "0:00";
}
var Strseconds = seconds.substr(seconds.length - 2);
return minutes + ":" + Strseconds;
}
function playClicked(element){
//get the state of the player
if(audio_player.paused)
{
audio_player.play();
newdisplay = "||";
}else{
audio_player.pause();
newdisplay = ">";
}
$('#totalTime').text(formatTimeSeconds(audio_player.duration));
element.value = newdisplay;
}
function trackEnded(){
//reset the playControl to 'play'
document.getElementById("playControl").value=">";
}
function durationClicked(event){
//get the position of the event
clientX = event.clientX;
left = event.currentTarget.offsetLeft;
clickoffset = clientX - left;
percent = clickoffset/event.currentTarget.offsetWidth;
duration_seek = percent*audio_duration;
document.getElementById("aplayer").currentTime=duration_seek;
}
function Progress(evt){
$('#progress').val(Math.round(evt.loaded / evt.total * 100));
var width = $('#duration_background').css('width')
$('#loader').css('width', evt.loaded / evt.total * width.replace("px",""));
}
function getPosition(name) {
var obj = document.getElementById(name);
var topValue = 0, leftValue = 0;
while (obj) {
leftValue += obj.offsetLeft;
obj = obj.offsetParent;
}
finalvalue = leftValue;
return finalvalue;
}
function SetValues() {
var xPos = xMousePos;
var divPos = getPosition("duration_background");
var divWidth = xPos - divPos;
var Totalwidth = $('#duration_background').css('width').replace("px","")
audio_player.currentTime = divWidth / Totalwidth * audio_duration;
$('#duration_bar').css('width', divWidth);
}
</script>
</head>
<script type="text/javascript" src="js/MousePosition.js" ></script>
<body onLoad="pageLoaded();">
<table>
<tr>
<td valign="bottom"><input id="playButton" type="button" onClick="playClicked(this);" value=">"/></td>
<td colspan="2" class="style1" valign="bottom">
<div id='player'>
<div id="duration" class='player_control' >
<div id="duration_background" onClick="SetValues();">
<div id="loader" style="background-color: #00FF00; width: 0px;"></div>
<div id="duration_bar" class="duration_bar"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
<td>
<span id="currentTime">0:00</span>
</td>
<td align="right" >
<span id="totalTime">0:00</span>
</td>
</tr>
</table>
<audio id='aplayer' src='<%=getDownloadLink() %>' type="audio/ogg; codecs=vorbis" onProgress="Progress(event);" onTimeUpdate="update();" onEnded="trackEnded();" >
<b>Your browser does not support the <code>audio</code> element. </b>
</audio>
</body>
Chrome doesn't fire the progress event when it has the media in cache, that might be your problem.
The progress event doesn't fire in Chrome for WAV files but it does for MP3.
There is a known timeupdate bug: http://code.google.com/p/chromium/issues/detail?id=25185.

Categories

Resources