Develop Reference

chrome extensions, trying to make minimize to tray button

I'm trying to use chrome app samples to make a chrome extensions that has a top custom top bar. I might have butcher the code but could someone help make it work?
https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/frameless-window
I can't make the minimize to tray button to work
function closeWindow() {
window.close();
}
function minimizeWindow() {
window.minimize();
}
function updateImageUrl(image_id, new_image_url) {
var image = document.getElementById(image_id);
if (image)
image.src = new_image_url;
}
function createImage(image_id, image_url) {
var image = document.createElement("img");
image.setAttribute("id", image_id);
image.src = image_url;
return image;
}
function createButton(button_id, button_name, normal_image_url,
hover_image_url, click_func) {
var button = document.createElement("div");
button.setAttribute("class", button_name);
var button_img = createImage(button_id, normal_image_url);
button.appendChild(button_img);
button.onmouseover = function() {
updateImageUrl(button_id, hover_image_url);
}
button.onmouseout = function() {
updateImageUrl(button_id, normal_image_url);
}
button.onclick = click_func;
return button;
}
function focusTitlebars(focus) {
var bg_color = focus ? "#3a3d3d" : "#000000";
var titlebar = document.getElementById("top-titlebar");
if (titlebar)
titlebar.style.backgroundColor = bg_color;
}
function addTitlebar(titlebar_name, titlebar_icon_url, titlebar_text) {
var titlebar = document.createElement("div");
var titlebar_name = "top-titlebar";
titlebar.setAttribute("id", titlebar_name);
titlebar.setAttribute("class", titlebar_name);
var icon = document.createElement("div");
icon.setAttribute("class", titlebar_name + "-icon");
icon.appendChild(createImage(titlebar_name + "icon", "16.png"));
titlebar.appendChild(icon);
var title = document.createElement("div");
title.setAttribute("class", titlebar_name + "-text");
title.innerText = document.title; // titlebar name
titlebar.appendChild(title);
var win = chrome.app.window.current();
var closeButton = createButton(titlebar_name + "-close-button",
titlebar_name + "-close-button",
"img/button_close.png",
"img/button_close_hover.png",
closeWindow);
titlebar.appendChild(closeButton);
// Create minimize button
var minimizeButton = createButton(titlebar_name + "-minimize-button",
titlebar_name + "-minimize-button",
"img/button_minimize.png",
"img/button_minimize_hover.png",
minimizeWindow);
titlebar.appendChild(minimizeButton);
//
var divider = document.createElement("div");
divider.setAttribute("class", titlebar_name + "-divider");
titlebar.appendChild(divider);
document.body.appendChild(titlebar);
}
function removeTitlebar(titlebar_name) {
var titlebar = document.getElementById(titlebar_name);
if (titlebar)
document.body.removeChild(titlebar);
}
function updateContentStyle() {
var content = document.getElementById("content");
if (!content)
return;
var left = 0;
var top = 0;
var width = window.outerWidth;
var height = window.outerHeight;
var titlebar = document.getElementById("top-titlebar");
if (titlebar) {
height -= titlebar.offsetHeight;
top += titlebar.offsetHeight;
}
if (titlebar) {
width -= titlebar.offsetWidth;
}
var contentStyle = "position: absolute; ";
contentStyle += "left: " + left + "px; ";
contentStyle += "top: " + top + "px; ";
contentStyle += "width: " + width + "px; ";
contentStyle += "height: " + height + "px; ";
content.setAttribute("style", contentStyle);
}

This will fix the problem
function minimizeWindow() {
var window = chrome.app.window.current();
window.minimize();
}

HTML5 & javascript - drawImage seems to trigger after animation completed

I'm trying to create the following animation:
- when the page loads, I load the 2 components of my logo and draw them onto the canvas
- after clicking the animate button, both images should smoothly move up to the top of the page and shrink
However, it seems that the drawImage() only takes place somewhere after the entire animation has been completed even though I can see it being executed at the right time in the console. Commenting out the clearRect function also shows me that every frame is actually drawn onto the screen, but sadly they all appear together after the animation should be completed.
I'm pretty new to canvases and relevant tutorials on such animations are scarce and don't get me much further.
Here's the relevant script:
<script type="text/javascript">
var logoCanvas;
var logoContext;
var direction = 1;
var logoAnimationDuration = 2000; //millisec
var frameSpeed = 30/1000; //frames per second
var logoImageRatio = 0;
var logoTextRatio = 0;
var initialLogoImageHeight = 0;
var initialLogoTextHeight = 0;
var initialLogoImageTop = 0;
var initialLogoImageLeft = 0;
var initialLogoTextTop = 0;
var initialLogoTextLeft = 0;
var newLogoImageLeft = 0;
var logoImageWidth = 0;
var logoImageHeight = 0;
var logoTextWidth = 0;
var logoTextHeight = 0;
var logoImageTop = 0;
var logoImageLeft = 0;
var logoTextTop = 0;
var logoTextLeft = 0;
var logoImageLoaded = false;
var logoTextLoaded = false;
var logoImage = new Image();
var logoText = new Image();
function AnimateFrontPageCanvas() {
if(logoCanvas.height <= $('#Page_0').height()) {
logoCanvas.height = $('#Page_0').height();
return;
}
if(logoImageHeight <= $('#Page_0').height() - 4) {
return;
}
if(logoImageTop <= 2) {
return;
}
//logoCanvas.height = parseFloat(logoCanvas.height) - (parseFloat(window.innerHeight) - parseFloat($('#Page_0').height())) * 1/frameSpeed * 1/logoAnimationDuration;
logoContext.clearRect(0, 0, logoCanvas.width, logoCanvas.height);
AnimateLogo();
setTimeout(AnimateFrontPageCanvas(), 1/frameSpeed);
}
function AnimateLogo() {
AnimateLogoImage();
AnimateLogoText();
}
function AnimateLogoImage() {
logoImageHeight = logoImageHeight - (initialLogoImageHeight - $('#Page_0').height() + 4) * (1/frameSpeed) * (1/logoAnimationDuration);
logoImageWidth = logoImageHeight*logoImageRatio;
logoImageTop = logoImageTop - (initialLogoImageTop - 2)*(1/frameSpeed) * (1/logoAnimationDuration);
logoImageLeft = logoImageLeft - (initialLogoImageLeft - newLogoImageLeft) * (1/frameSpeed) * (1/logoAnimationDuration);
logoContext.drawImage(logoImage, logoImageLeft, logoImageTop, logoImageWidth, logoImageHeight);
var time = new Date();
time = time.getTime();
console.log('logoimage drawn: ' + time);
}
function AnimateLogoText() {
logoTextHeight = logoTextHeight - (initialLogoTextHeight - $('#Page_0').height() + 4) * (1/frameSpeed) * (1/logoAnimationDuration);
logoTextWidth = logoTextHeight*logoTextRatio;
logoTextTop = logoTextTop - (initialLogoTextTop - 2) * (1/frameSpeed)*(1/logoAnimationDuration);
logoTextLeft = logoTextLeft - (initialLogoTextLeft - newLogoTextLeft)*(1/frameSpeed)*(1/logoAnimationDuration);
logoContext.drawImage(logoText, logoTextLeft, logoTextTop, logoTextWidth, logoTextHeight);
var time = new Date();
time = time.getTime();
console.log('logotext drawn: ' + time);
}
function InitiateFrontPageCanvas() {
logoImage.onload = function() {
logoImageLoaded = true;
AfterImagesLoadedActions();
}
logoImage.src = '/site_mats/images/logo_image.png';
logoText.onload = function() {
logoTextLoaded = true;
AfterImagesLoadedActions();
}
logoText.src = '/site_mats/images/logo_text.png';
}
function AfterImagesLoadedActions() {
if(logoImageLoaded && logoTextLoaded) {
logoImageRatio = logoImage.width/logoImage.height;
logoTextRatio = logoText.width/logoText.height;
if(logoImage.width > 0.8*logoCanvas.width) {
logoImage.width = 0.8*logoCanvas.width;
logoImage.height = logoImage.width/logoImageRatio;
}
if(logoText.width > 0.8*logoCanvas.width) {
logoText.width = 0.8*logoCanvas.width;
logoText.height = logoText.width/logoTextRatio;
}
if(parseFloat(logoImage.height) + parseFloat(logoText.height) > 0.66*logoCanvas.height) {
var x = (0.66*logoCanvas.height)/(parseFloat(logoImage.height) + parseFloat(logoText.height));
logoImage.height = x*logoImage.height;
logoImage.width = logoImage.height*logoImageRatio;
logoText.height = x*logoText.height;
logoText.width = logoText.height*logoTextRatio;
}
initialLogoImageHeight = logoImage.height;
initialLogoTextHeight = logoText.height;
logoImageHeight = logoImage.height;
logoImageWidth = logoImage.width;
logoTextHeight = logoText.height;
logoTextWidth = logoText.width;
initialLogoImageTop = parseFloat((logoCanvas.height-(parseFloat(logoImageHeight)+parseFloat(logoTextHeight)))/2);
initialLogoImageLeft = parseFloat((logoCanvas.width-logoImageWidth)/2);
initialLogoTextTop = parseFloat(((logoCanvas.height-(parseFloat(logoImageHeight)+parseFloat(logoTextHeight)))/2)+parseFloat(logoImageHeight));
initialLogoTextLeft = parseFloat((logoCanvas.width-logoImageWidth)/2);
logoImageTop = initialLogoImageTop;
logoImageLeft = initialLogoImageLeft;
logoTextTop = initialLogoTextTop;
logoTextLeft = initialLogoTextLeft;
newLogoImageLeft = parseFloat(2);
newLogoTextLeft = parseFloat((logoCanvas.width-$('#Page_0').height()*logoTextRatio)/2);;
logoContext.drawImage(logoText, logoTextLeft, logoTextTop, logoTextWidth, logoTextHeight);
logoContext.drawImage(logoImage, logoImageLeft, logoImageTop, logoImageWidth, logoImageHeight);
//remove onload from image objects
logoImage.onload = null;
logoText.onload = null;
}
}
function SetFrontPageCanvas() {
logoCanvas = document.getElementById('LogoCanvas');
logoContext = logoCanvas.getContext('2d');
logoCanvas.width = window.innerWidth;
logoCanvas.height = window.innerHeight;
logoContext.clearRect(0, 0, logoCanvas.width, logoCanvas.height);
InitiateFrontPageCanvas();
}
window.onload = function() {
SetFrontPageCanvas();
};
$(document).ready(function() {
windowWidth = $(window).width();
windowHeight = $(window).height();
});
$(window).resize(function() {
//alert($(window).width() + ' - ' + $(window).height());
logoImageLoaded = false;
logoTextLoaded = false;
SetFrontPageCanvas();
windowWidth = $(window).width();
windowHeight = $(window).height();
});
</script>
And here's the relevant html:
<canvas id="LogoCanvas" style="position:absolute;top:0;left:0;z-index:1;"></canvas>
<div id="Page_0" style="position:absolute;top:0;left:0;z-index:5;width:100%;height:90px;">
<div align="center" style="position:fixed;bottom:5px;z-index:100;width:100%;">
<input type="button" onClick="AnimateFrontPageCanvas()" value="Animate">
</div>
If desired, the code can also be seen in action here: http://villa-gloria-katouna.com/site_mats/animation.php

SVG Pan around viewport - onclick/onmove keeps resetting?

i posted this question earlier however it was a jumbled and made no real sense.
Also I've re hashed the code but i'm still getting the same issue.
To explain; i have an SVG element that i can current click on and drag about, this will works peachy and i'm, pleased with it, however once the user unclicks the mouse button and then goes and moves the mouse and starts the dragging functionality, the svg co-ords simply go back to 0 and the whole image just starts back at 0.0.
this is really buggin me now, i feel like i'm missing something simple.
edit: JSFiddle as requested - https://jsfiddle.net/2cu2jvbp/2/
Here is the code that i've "hashed" together:
var states = '', stateOrigin;
var root = document.getElementById("svgCanvas");
var viewport = root.getElementById("viewport");
function setAttributes(element, attribute)
{
for(var n in attribute) //rool through all attributes that have been created.
{
element.setAttributeNS(null, n, attribute[n]);
}
}
function setupEventHandlers() //self explanatory;
{
setAttributes(root, {
"onmousedown": "mouseDown(evt)", //do function
"onmouseup": "mouseUp(evt)",
"onmousemove": "mouseMove(evt)",
});
}
function setCustomTransMatrix(element, a,b,c,d,e,f) {
var m = "matrix(" + a + " " + b + " " + c + " " +d + " " + e + " " + f + ")";
element.setAttribute("transform", m);
}
function getMousePoint(evt) { //this creates an SVG point object with the co-ords of where the mouse has been clicked.
var points = root.createSVGPoint();
points.x = evt.clientX;
points.Y = evt.clientY;
return points;
}
function mouseDown(evt)
{
if(evt.target == root || viewport)
{
states = "pan";
stateOrigin = getMousePoint(evt);
}
}
function mouseMove(evt)
{
var pointsLive = getMousePoint(evt);
var storedCo = [];
if(states == "pan")
{
setCustomTransMatrix(viewport, 1,0,0,1, pointsLive.x - stateOrigin.x, pointsLive.Y - stateOrigin.Y);
storedCo[0] = pointsLive.x - stateOrigin.x
storedCo[1] = pointsLive.Y - stateOrigin.Y;
}
else if(states == "store")
{
stateOrigin = pointsLive;
states = "stop";
}
}
function mouseUp(evt)
{
if(states == "pan")
{
states = "store";
if(states == "stop")
{
states ='';
}
}
}
function intialize() {
var matrik = root.getCTM();
setupEventHandlers();
console.log(matrik);
//setCustomTransMatrix(viewport, matrik.a, matrik.b, matrik.c, matrik.d, matrik.e,matrik.f);
}
intialize();

Javascript only works in IE Quirks, 7 and Chrome and Firefox. Doesn't work in IE 8 or 9 Standards

My code makes a number of divisions appear to orbit around an invisible horizontal axis on a plane. How it works: it fires a mouseevent listener onMouseDown, and captures the X of the user's cursor relative to the window. onMouseUp is simulated by a setTimeout function that is called 90 milliseconds later, it does the same and then subtracts the two values to determine the distance and direction to spin.
My question is: Why does it work correctly in FF, Chrome, and IE Quirks and IE 7 Standards, but not IE 8 Standards or IE 9 Standards?
IE8: the model breaks down and the divisons float away outside the containing boundary division. IE9: No response from the JS whatsoever.
The following contains the entire javascript on the page, which can be found # http://electrifiedpulse.com/360.html :
<script type=text/javascript>
var objectCount = 8; var pixel = new Array(); var size = new Array();
var command = "Stop"; var panel = new Array('0','Back','Front','Front','Back','Front','Back','Front','Back');
var quadrant = new Array(); var originalSize = 50;
var WindowWidth = 360; var WindowWidthHalf = WindowWidth/2; var sTime=0; var s1=0; var scrollSpeed;
var myX, myY;
function myMove(evt) {
if (window.event){myX = event.clientX;myY = event.clientY;}
else{myX = evt.clientX;myY = evt.clientY;}
}
document.onmousemove = myMove;
if (!window.event) {document.captureEvents(Event.MOUSEMOVE);}
function iScrollStop(){
sTime = sTime - 10;
document.getElementById('I_CONTROLS').innerHTML = sTime + ", " + scrollSpeed;
if(sTime<=0) command = "Stop";
else setTimeout(function(){iScrollStop()},10);
}
function iScrollPause(){
setTimeout(function(){this.checkPause()},100);
this.checkPause = function(){if(s1>sTime){command="Stop"; sTime=0; s1=0;}}
}
var iInitialX; //var d='Up';
function iScrollListen(d){
if(d=='Down'){ iInitialX = myX; setTimeout(function(){iScrollListen('Up')},90); iScrollPause();
}else if(d=='Up'){
var spinDirection = 'Right';
var iDifference = myX - iInitialX; if(iDifference < 0){ spinDirection = 'Left'; iDifference = Math.abs(iDifference);}
if (command!=spinDirection){sTime=0;s1=0;} var doScroll=0; if(command=='Stop') doScroll=1;
command = spinDirection; s1=sTime; sTime+=(iDifference*15); if(s1<=0)iScrollStop();
if(doScroll==1) iScroll();
}
}
function iScrollControl(c){command = c; if((c=='Left')||(c=='Right')) iScroll();}
function iScroll(){
scrollSpeed=(sTime<=1)? 1 : Math.ceil(sTime/1000);
if(scrollSpeed>=10)scrollSpeed=10;
scrollSpeed = 15 - scrollSpeed;
if(command=='Left') pixelDirection=2;
else if(command=='Right') pixelDirection=(0-2);
pixelDirectionNeg = (0-pixelDirection);
for(i=1;i<=objectCount;i++){
iObj = document.getElementById("iObject" + i);
pixel[i] = iObj.offsetLeft;
if((pixel[i]>=WindowWidthHalf)&&(pixel[i]<=WindowWidth)){
if(panel[i]=="Front") quadrant[i] = 4;
else quadrant[i] = 3;
}
if((pixel[i]>=0)&&(pixel[i]<=WindowWidthHalf)){
if(panel[i]=="Front") quadrant[i] = 1;
else quadrant[i] = 2;
}
if(quadrant[i]==1){
iObj.style.left = pixel[i]-pixelDirection;
size[i] = (pixel[i]-pixelDirection)*(1/(WindowWidthHalf/(originalSize/2))) + (originalSize/2);
Attribute(iObj,size[i]);
if(pixel[i]-pixelDirection<=0){quadrant[i]=2; panel[i]='Back';}
if(pixel[i]-pixelDirection>=WindowWidthHalf){quadrant[i]=4; panel[i]='Front';}
}
if(quadrant[i]==2){
iObj.style.left = pixel[i]-pixelDirectionNeg;
size[i] = (pixel[i]-pixelDirectionNeg)*(-1/(WindowWidthHalf/(originalSize/2))) + (originalSize/2);
Attribute(iObj,size[i]);
if(pixel[i]-pixelDirectionNeg<=0){quadrant[i]=1; panel[i]='Front';}
if(pixel[i]-pixelDirectionNeg>=WindowWidthHalf){quadrant[i]=3; panel[i]='Back';}
}
if(quadrant[i]==3){
iObj.style.left = pixel[i]-pixelDirectionNeg;
size[i] = (WindowWidth-(pixel[i]-pixelDirectionNeg))*(-1/(WindowWidthHalf/(originalSize/2))) + (originalSize/2);
Attribute(iObj,size[i]);
if(pixel[i]-pixelDirectionNeg<=WindowWidthHalf){quadrant[i]=2; panel[i]='Back';}
if(pixel[i]-pixelDirectionNeg>=WindowWidth){quadrant[i]=4; panel[i]='Front';}
}
if(quadrant[i]==4){
iObj.style.left = pixel[i]-pixelDirection;
size[i] = (WindowWidth-(pixel[i]-pixelDirection))*(1/(WindowWidthHalf/(originalSize/2))) + (originalSize/2);
Attribute(iObj,size[i]);
if(pixel[i]-pixelDirection<=WindowWidthHalf){quadrant[i]=1; panel[i]='Front';}
if(pixel[i]-pixelDirection>=WindowWidth){quadrant[i]=3; panel[i]='Back';}
}
}
if((command=='Left')||(command=='Right')) setTimeout(function(){iScroll()},scrollSpeed);
}
function Attribute(iObj,s){
iObj.style.width = s; iObj.style.height = s; iObj.style.top='50%'; iObj.style.marginTop = (0-(s/2))+"px"; iObj.style.zIndex = s;
}
</script>
I don't know what may or may not be relevant to you, so I included the entire script. If you want you could ignore the longest function,
iScroll()

#RyanStortz. Try to register events in this maner:
var isMouseCaptured=false;
function i_boundary_mousedown(ev) {
isMouseCaptured=true;
iScrollListen("Down");
}
function doc_mousemove(ev) {
if(isMouseCaptured) {
ev=ev||event;
myX=ev.clientX;
myY=ev.clientY;
}
}
function doc_mouseup(ev) {
if(isMouseCaptured) {
isMouseCaptured=false;
ev=ev||event;
myX=ev.clientX;
myY=ev.clientY;
}
}
var i_boundaryObj=document.getElementById('I_BOUNDARY');
if(window.addEventListener) {
i_boundaryObj.addEventListener('mousedown',i_boundary_mousedown,false);
document.addEventListener('mousemove',doc_mousemove,false);
document.addEventListener('mouseup',doc_mouseup,false)
}
else if(window.attachEvent) {
i_boundaryObj.attachEvent('onmousedown',i_boundary_mousedown)
document.attachEvent('onmousemove',doc_mousemove);
document.attachEvent('onmouseup',doc_mouseup)
}
else ;//
Add for DIV with class "I_BOUNDARY" id attribute "I_BOUNDARY" and remove onmousedown attribute.

Javascript JQUERY Media Player Duration Issues

So, I've been working on an mp3 player that doesn't use Flash, just JS, HTML, and CSS. I took some open source code and have been playing with it, however I had to edit it when I started using JSONP to get the "link" of the MP3 file from another website. I had issues getting any of the JS function calls in the HTML to work, so I used JQUERY bind and that fixed everything but duration function and clientx issues. link = foo.mp3
function writePlayer(link){
$('<div id=\"main\"><h2>Episode</h2><div id=\"player\"><input id=\"playButton\" class=\'player_control\' type=\"button\" onClick=\"playClicked(this);\" value=\">\"><div id=\"duration\" class=\'player_control\' ><div id=\"duration_background\" onClick=\"durationClicked(event);\"><div id=\"duration_bar\" class=\'duration_bar\'></div></div></div><div id=\"volume_control\" class=\'player_control\' onClick=\"volumeChangeClicked(event);\"><div id=\"volume_background\"><div id=\"volume_bar\"></div></div></div><input type=\"button\" class=\'player_control\' id=\"volume_button\" onClick=\"volumeClicked();\" value=\"Vol\"></div><audio id=\"aplayer\" src='+ link +' type=\"audio/mp3\" onTimeUpdate=\"update();\" onEnded=\"trackEnded();\"><b>Your browser does not support the <code>audio</code> element. </b></audio><div id=\"msg\" class=\'output\'></div><div id=\"content\"><p></p></div></div></div>').appendTo('body');
$(document).ready(pageLoaded)
$("#playButton").bind('click',playClicked(this))
$("#duration_background").bind('click',durationClicked(event))
$("#volume_control").bind('click',volumeChangeClicked(event))
$("#volume_button").bind('click',volumeClicked(event))
$("#aplayer").bind('timeUpdate',update())
$("#aplayer").bind('ended',trackEnded())
};
var audio_duration;
var audio_player;
var volume_button;
var volume_control;
function pageLoaded()
{
audio_player = document.getElementById("aplayer");
alert(audio_player);
volume_button = document.getElementById('volume_button');
volume_control = document.getElementById('volume_control');
//get the duration
audio_duration = audio_player.duration;
//set the volume
set_volume(0.7);
}
function set_volume(new_volume)
{
audio_player.volume = new_volume;
update_volume_bar();
volume_button.value = "Volume: "+parseInt(new_volume*100);
}
function update_volume_bar()
{
new_top = volume_button.offsetHeight - volume_control.offsetHeight;
volume_control.style.top = new_top+"px";
volume = audio_player.volume;
//change the size of the volume bar
wrapper = document.getElementById("volume_background");
wrapper_height = wrapper.offsetHeight;
wrapper_top = wrapper.offsetTop;
new_height= wrapper_height*volume;
volume_bar = document.getElementById("volume_bar");
volume_bar.style.height=new_height+"px";
new_top = wrapper_top + ( wrapper_height - new_height );
volume_bar.style.top=new_top+"px";
}
function update(audio_player)
{
//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";
}
function playClicked(element)
{
//get the state of the player
if(audio_player.paused)
{
audio_player.play();
newdisplay = "| |";
}else{
audio_player.pause();
newdisplay = ">";
}
element.value=newdisplay;
}
function trackEnded()
{
//reset the playControl to 'play'
document.getElementById("playButton").value=">";
}
function volumeClicked(event)
{
control = document.getElementById('volume_control');
if(control.style.display=="block")
{
control.style.display="None";
}else{
control.style.display="Block";
update_volume_bar();
}
}
function volumeChangeClicked(event)
{
//get the position of the event
clientY = event.clientY;
offset = event.currentTarget.offsetTop + event.currentTarget.offsetHeight - clientY;
volume = offset/event.currentTarget.offsetHeight;
set_volume(volume);
update_volume_bar();
}
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;
};
</script>
Thank you very much for your help!