We Keep Coding

Detect how long is mouse down

Can someone show me how to monitor how long the mouse is down, and on mouse up display that time in seconds?

I created a CodePen where you can time how long a <button> element is held down for. This is the relevant code:
HTML:
<button id="button">click</button>
JavaScript:
(function(window, document, undefined){
'use strict';
var start;
var end;
var delta;
var button = document.getElementById("button");
button.addEventListener("mousedown", function(){
start = new Date();
});
button.addEventListener("mouseup", function() {
end = new Date();
delta = (end - start) / 1000.0;
alert("Button held for " + delta + " seconds." )
});
})(window, document);
You probably don't want to use an alert in your application, but that is a good starting point. You should be able to insert the delta value into a DOM element without an issue.

Fullcalendar js event overlap

I use fullcalendar js jquery plugin which is a great plugin but I have a small question do you know how:
I have a list of events which always not overlap.
Then sometimes I need to resize an event to be 1 or 2 hours much longer. The real step is here I try to make the next event to be not overlap but to move according to the resized end event. I have tried with event overlap custom function but it doesn't really work. There is always a gap of minutes between the two events.
I will send you a fiddle tomorrow to show you where I am.
/EDIT/
Just Create this Codepen :
http://codepen.io/cchumi/pen/pEGLXd
Javascript example for overlap :
eventOverlap: function(stillEvent, movingEvent) {
//Update MovingEvent
$('#calendar').fullCalendar('updateEvent', movingEvent);
//swap stillEvent time with movingEvent
stillEvent.end = stillEvent.end;
stillEvent.start = movingEvent.end;
//Update stillEvent
$('#calendar').fullCalendar('updateEvent', stillEvent);
//return true to allow swap.
return true;
}

it's been a while since your post but I think that I got a solution for you, I was looking your code and understood that, at the moment that the events overlaps the eventoverlap function is triggered, so I just add an event listener .mouseup() before your code to stop the trigger of your code until you release the click of the mouse. Now it works perfectly.
Now your code has to look like this:
eventOverlap: function(stillEvent, movingEvent) {
$('#calendar').mouseup(function() {
var movingEventEnd = moment(movingEvent.end).utc().format();
//"YYYY-MM-DDTHH:mm:ss"
var StillStart = moment(stillEvent.start).utc().format();
var StillEnd = moment(stillEvent.end).utc().format();
var duration = moment.duration(moment(StillEnd).diff(moment(StillStart)));
var hoursbaseStillEvent = duration.asHours();
console.log("Still Hours Base " + hoursbaseStillEvent);
$('#calendar').fullCalendar('updateEvent', movingEvent);
var movingEventNewEnd = moment(movingEvent.end).utc().format();
var durationMovingEvent =
moment.duration(moment(movingEventNewEnd).diff(moment(movingEventEnd)));
var hoursMovingEvent = durationMovingEvent.asHours();
console.log("hourss " + hoursMovingEvent);
stillEvent.start = moment(movingEvent.end).utc().format();
var StillEventStart = moment(stillEvent.start).utc().format();
console.log("StillEventStart " + StillEventStart);
var StillEventEnd = moment(stillEvent.end).utc().format();
var Startdate = moment(StillEventStart).utc().format();
console.log("Startdate " + moment(Startdate).utc().format());
var Enddate = moment(StillEventEnd);
var StillEventEndNew = moment(Startdate).add(hoursbaseStillEvent, 'hours');
console.log("StillEventEndNew " + moment(StillEventEndNew).utc().format());
stillEvent.end = moment(StillEventEndNew).utc().format();
$('#calendar').fullCalendar('updateEvent', stillEvent);
});
return true;
//return stillEvent.allDay && movingEvent.allDay;
},

multiple animations like flash

The below code (I just gave a snippet of working code) animates a few images based on time. Something like a Flash animation where at certain times images start to move at certain times or frame count. My question is , is there a better way to do this ? I know I can use something other than setInterval . I am calculating the elapsed time and setting off images based on the time interval.
It is the ClassLoadImages.prototype.m_draw which is the issue.
function doGameLoop() {
ctx.clearRect(0,0,600,400);
now = new Date();
totalSeconds = (now - start) / 1000;
last = now;
ctx.fillText("totalSeconds=" +totalSeconds ,10,100);
if (totalSeconds>2 && totalSeconds<6)
{
img2.m_draw(130);
}
if (totalSeconds>4 && totalSeconds<8)
{
img3.m_draw2(230);
}
if (totalSeconds>10){
start = new Date();//start again
}
img.m_draw(30);
// fi++;
}
var img= new ClassLoadImages(30,30);
var img2= new ClassLoadImages(30,30);
var img3= new ClassLoadImages(30,30);
</script>

If you want something like flash movieclips, check out SpriteClip on github. https://github.com/wolthers/SpriteClip.js

Loop is not working properly

I have create a javascript to change the audio after the audio ended.
var songlist = new Array("a.mp3", "b.mp3", "c.mp3", "d.mp3", "e.mp3", "f.mp3");
var dir = "music/";
var curr_track = 0;
var isfirstrun;
function start()
{
if(curr_track == songlist.length)
curr_track = 0;
var track = document.getElementById('track');
track.innerHTML = curr_track;
var audio = document.getElementById('audio');
isfirstrun = true;
audio.src = dir+songlist[curr_track];
audio.load();
audio.play();
if(isfirstrun == true)
{
audio.addEventListener('ended', function(){ curr_track++; start();}, false);
isfirstrun = false;
}
}
And inside the HTML,
<body onload="start();">
The track used in the code is to show what is the current track number, and I found out that the output is
0 then 1 then 3 then 7
Hence, it is missing c.mp3, e.mp3 and f.mp3 from the songlist.
How can I solve the problem of the looping?

Every time the song ends, you are adding another event handler. This is why you see +1, +2, +4 etc. because the number of event handlers doubles each time around.
This is the main reason why I prefer to use audio.onended = function() {curr_track++; start();};
But anyway, to fix this all you have to do is have an "isfirstrun" variable, starting at true, then only add the event listener if it is true and set it to false.

Calculating the time between two clicks in Javascript

I want to calculate the time between two clicks of an attribute with javascript but I don't know how.
For example;
click here
if the user clicks more than once -let's say in 5 seconds- I want to display an alert. I'm using jQuery if that helps. I don't know much about javascript but I've been coding a small project in my free time.

Something like this would do the trick. Keep a variable with the time of the last click and then compare it when the user clicks the link again. If the difference is < 5 seconds show the alert
<a id='testLink' href="#">click here</a>
<script type='text/javascript'>
var lastClick = 0;
$("#testLink").click(function() {
var d = new Date();
var t = d.getTime();
if(t - lastClick < 5000) {
alert("LESS THAN 5 SECONDS!!!");
}
lastClick = t;
});
</script>

The following may help you getting started:
var lastClicked = 0;
function onClickCheck() {
var timeNow = (new Date()).getTime();
if (timeNow > (lastClicked + 5000)) {
// Execute the link action
}
else {
alert('Please wait at least 5 seconds between clicks!');
}
lastClicked = timeNow;
}
HTML:
click here

Create a variable to hold the time of a click, say lastClick.
Set up a click handler for the element you want to track clicks on.
Inside the handler, check for a value in lastClick. If there is no value, set it to the current time. If there is a value, compare it against the current time. If the difference is within the range you're checking for, display the alert.

Start with
var lastClicked = (new Date()).getTime(); //not zero