We Keep Coding

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;
},

audio duration is NaN

I am trying to get the duration of audio, but the result is NaN. the following is what I did, Can someone tell me what the problem is?
<audio class="my-audio"></audio>
$(document).ready(function(){
addAudioPlayer();
});
//dynamically assign id to an audio player
function addAudioPlayer(){
var index = 0;
//find class"my-audio-player"
$(document).find(".my-audio-player").each(function(){
$(this).attr('id', 'player'+index );
$(this).append("<source src=\""+mediaFiles[index]+"\" type=\"audio/mp3\" >")
new AudioPlayer(mediaFiles[index], index);
index++;
});
}
function AudioPlayer(media, index){
//set objects reference
this.audio = document.getElementById("player"+ index);
this.audio.onloadedmetadata;
this.audio.play();
console.log("audio = " + this.audio);
console.log("audio src = " + this.audio.src);
console.log("audio dur = " + this.audio.duration);
}

Further to my comment above, here's a working demo. I've opted to swap the jQuery references for vanilla JS, since that's my preference (and I've not taken the time to familiarize myself with jQuery. One of these years perhaps :) )
You can easily put it back in.
You won't be getting a valid result for the source either, since the <audio> element's src attribute is empty, what you want is the src attribute of the source element that's contained within the <audio> element.
Another oversight is the scope. Since the onloadedmetadata event is a part of the <audio> element object, the this keyword refers to the <audio> element
this.audio.play() should be this.play(), this.audio should be replaced with this, this.audio.src should be changed to this.childNodes[0].src (remember, we want the src attribute of the source element) and finally, this.audio.duration should be this.duration.
It's also worth pointing out that the this on the first line of your AudioPlayer refers to the AudioPlayer function (object) since you're not assigning the result of new AudioPlayer to anything, this line is essentially doing nothing and can be altered slightly, I've just grabbed a reference to the <audio> element and from there set its onloadmetadata event handler.
Phew! Got a sore head yet? Scoping in javascript catches everybody out at some point. Many still never quite get the hang of it. ;)
First, here's the complete code:
(EDIT #2: updated code so that it displays the progress of each of the playing tracks, updated every 500ms and displayed as a % of the track length - it should be sufficient to give you an idea, I hope)
<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function allByClass(className,parent){return (parent == undefined ? document : parent).getElementsByClassName(className);}
function forEachNode(nodeList, func){for (var i=0, n=nodeList.length; i<n; i++) func(nodeList[i], i, nodeList); }
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded()
{
addAudioPlayer();
}
var mediaFiles = ['audio/voice_welcomeback.mp3', 'audio/Some Chords.mp3'];
var progressIntervalHandle;
function addAudioPlayer()
{
var index = 0;
var audioPlayers = allByClass('my-audio-player');
forEachNode(audioPlayers, audioPlayerEnumCallback);
progressIntervalHandle = setInterval(updateProgress, 500);
function audioPlayerEnumCallback(elem, index, elemArray)
{
elem.id = 'player'+index;
elem.innerHTML = "<source src='" + mediaFiles[index] + "' type='audio/mp3'>";
new AudioPlayer(mediaFiles[index], index);
index++;
}
}
function AudioPlayer(media, index)
{
document.getElementById("player"+ index).onloadedmetadata = function(evt)
{
this.play();
console.log("audio = " + this);
console.log("audio src = " + this.childNodes[0].src);
console.log("audio dur = " + this.duration);
}
}
function updateProgress()
{
var audioElems = allByClass('my-audio-player');
var outputMsg = '';
forEachNode(audioElems, audioElemEnumProgressCallback);
document.getElementById('progressOutput').innerHTML = outputMsg;
function audioElemEnumProgressCallback(elem, index, elemAray)
{
outputMsg += "Song " + index + ": " + ((100*elem.currentTime) / elem.duration).toFixed(2) + "%" + "<br>";
}
}
</script>
<style>
</style>
</head>
<body>
<audio class="my-audio-player"></audio>
<audio class="my-audio-player"></audio>
Progress:<br>
<div id='progressOutput'></div>
</body>
</html>
EDIT #1: The console output appears pretty much instantaneously upon page-load and the audio files are (both) playing immediately too. I'd have to use a screen-recording application to get even semi-accurate figures, since it all happens so quickly.
EDIT #3: Here's the console output. (the line numbers should be on the right-hand side)
audioDemo.html:42 audio = [object HTMLAudioElement]
audioDemo.html:43 audio src = file:///C:/xampp/htdocs/enhzflep/audio/voice_welcomeback.mp3
audioDemo.html:44 audio dur = 1.68
audioDemo.html:42 audio = [object HTMLAudioElement]
audioDemo.html:43 audio src = file:///C:/xampp/htdocs/enhzflep/audio/Some%20Chords.mp3
audioDemo.html:44 audio dur = 444.186122

You absolutely don't need to dig through your <audio> element's childNodes, which is prone to error errors (e.g if you've got multiple <source> elements as you're supposed to, or if you set a fallback message into the <audio> element.)
In order to get the address of the currently playing media, you need to check for the AudioElement.currentSrc property.
Your problem of duration returning NaN is just that you tried to get it before the metadata were loaded, because you didn't set anything to the loadedmetadata event, and even if you did, the this was not referencing to the good object anymore.
var mediaFiles = ["http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp3"];
//dynamically assign id to an audio player
function addAudioPlayer(){
var index = 0;
//find class"my-audio-player"
$(document).find(".my-audio-player").each(function(){
$(this).attr('id', 'player'+index );
$(this).append("<source src=\""+mediaFiles[index]+"\" type=\"audio/mp3\" >")
new AudioPlayer(mediaFiles[index], index);
index++;
});
}
function AudioPlayer(media, index){
//set objects reference
// instead of passing the index, you could simply pass the element as argument
this.audio = document.getElementById("player"+ index);
// you forgot to set onloadedmetadata as a function
this.audio.onloadedmetadata = function(){
// "this" now refers to the audio element
this.play();
snippet.log("audio = " + this);
// to get the audio src, it is always preferred to get its currentSrc (the one of the choosen media resource)
snippet.log("audio src = " + this.currentSrc);
snippet.log("audio dur = " + this.duration);
}
}
addAudioPlayer();
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio class="my-audio-player" controls></audio>

As #PaulRoub pointed out from the linked MDN Arcticle:
If the media data is available but the length is unknown, this value is NaN. If the media is streamed and has no predefined length, the value is Inf.
To fix this, check for the value of NaN and replace it with something more desirable to the user, such as maybe unknown or unknown duration.
See below for a quick implementation:
console.log("audio dur = "
+ ((this.audio.duration != this.audio.duration) ? "unknown" : this.audio.duration));
This is a quick way of searching for the value NaN. this.audio.duration != this.audio.duration will be true if and only if this.audio.duration is NaN.

Audio recording javascript

Is it possibly in Jquery or Javascript, without the use of libraries to record audio for X seconds and save to a audio file. I've looked at getUserMedia, an I see that it can retrieve audio and video from the webcam. I am currently using the webcam with another library: Clmtracker and for that reason I would want to try and do this without any more external libraries.
I want to store the recorded audio in a div. I am currently taking a picture and assigning it a unique name, so I am wondering how I can capture a short section of audio and store it in the same generated div.
Question: How can I achieve getting audio for 5 seconds from webcam?
Sub-Question: How can I store that in an element within a div?
My Code for capturing Img and Data on my page
function capturePage() {
var now = new Date();
if (nextAllowedCapture <= now) {
// Do capture logic
audioElement.play();
counting++
console.log("Capturing...");
$(".capturing").show().delay(500).fadeOut(3000);
var innerDiv = document.createElement('div'),
innerDivImg = document.createElement('canvas'),
image = document.createElement('img'),
ul = document.createElement('ul');
innerDiv.className = 'divCreate';
innerDiv.id = 'img' + counting;
innerDivImg.height = 450;
innerDivImg.width = 600;
innerDivImg.getContext('2d').drawImage(vid, 0, 0);
image.id = 'image' + counting;
image.src = innerDivImg.toDataURL();
image.className = 'divCreateImg';
innerDiv.appendChild(image);
innerDiv.appendChild(ul);
document.getElementById('galleryWrapper').appendChild(innerDiv);
$('#measurements h4').each(function () {
$("#" + innerDiv.id + " " + 'ul').append('<li>' + $(this).text() + ': ' + $(this).next().text());
});
nextAllowedCapture = new Date();
nextAllowedCapture.setSeconds(nextAllowedCapture.getSeconds() + coolDownSeconds);
} else {
nextCapTime = (nextAllowedCapture.getTime() - now.getTime()) / 1000;
console.log("Can't capture again yet. This function can be executed again in " +
(nextAllowedCapture.getTime() - now.getTime()) / 1000 +
" seconds.");
}
}

You can see the code for Recorder.js as an example which implements the capture audio functionality and saves it in wav format using getUserMedia annd yes, just html5 and javascript.
Now you might say that you asked without any plugins. In fact, I checked the code for recorder.js which is just 90 lines of plain javascript, just html5 and javascript.
UPDATE: I found one online demo which experiments with this and it seems to work fine and all source code is open. You might want to check that out.
Here is the link:
Recorder JS
Here is another link to tweak it and make it more functional.
Recording MP3 Using Only HTML5 and JavaScript

Can't change iframes onload listener in IE9

I have the following code within an external javascript file.
jQuery(function ($) {
//////////////////////UPCOMING EVENTS JSON SERVER START///////////////////////////
var eventList = $("#eventList"); //cache the element
$.getJSON("/JsonControl/Events.json", function (jsonObj) {
val = "";
for (var i = 0; i < jsonObj.events.length; ++i) {
val += "<p>" + jsonObj.events[i].dateMonth + "/" + jsonObj.events[i].dateNumber +
"/" + jsonObj.events[i].dateYear + " - <span id='EL" + i + "' class='link' " +
"onclick=plotEvent(" + i +")>" + jsonObj.events[i].title + "</span></p>";
}
eventList.html(val);
});
//////////////////////UPCOMING EVENTS JSON SERVER END/////////////////////////////
});
function plotEvent(index)
{
$.ajax({
url: "/JsonControl/Events.json",
dataType: 'json',
async: false,
success: function (jsonObj)
{
var eventBox = window.frameElement;
alert("This alert fires in all browsers, including IE9")
eventBox.onload = function ()
{
alert("This alert doesn't fire in IE9.")
window.frameElement.onload = null; // unset it so it only fires once
eventBox = eventBox.contentDocument || eventBox.contentWindow.document;
eventBox.getElementById("title").innerHTML = (jsonObj.events[index].title);
eventBox.getElementById("content").innerHTML = (jsonObj.events[index].explanation);
eventBox.getElementById("dateHolder").innerHTML = (jsonObj.events[index].dateMonth + "-" + jsonObj.events[index].dateNumber + "-" + jsonObj.events[index].dateYear);
};
eventBox.src="/Event htms/Event.htm";
}
});
}
The page that loads this script is in the iframe itself. A very similar function called in a different external js file, from the main page outside of the iframe (for a different but similar purpose) works in all browsers just fine. The only difference is that with this code I have to target the onload of the iframe from within the iframe, instead of just grabbing the iframe by id. I then attempt to change, the onload of said iframe, for use with the next internal iframe page (which is why I need to preserve the json array index [i] when dynamically writing the first iframe page's innerHTML.
Sorry if that was a bit wordy, and/or confusing, but suffice it to say that with using the above-pasted code, I have no problems... except with IE (tried in IE9). I have tried dozens of examples and supposed solutions, but nothing has worked. Using IE9.
Here's what I mean when I say 'it doesn't work in IE9':
This part of the code within plotEvent() doesn't fire:
eventBox.onload = function ()
{
alert("This alert doesn't fire in IE9.")
window.frameElement.onload = null; // unset it so it only fires once
eventBox = eventBox.contentDocument || eventBox.contentWindow.document;
eventBox.getElementById("title").innerHTML = (jsonObj.events[index].title);
eventBox.getElementById("content").innerHTML = (jsonObj.events[index].explanation);
eventBox.getElementById("dateHolder").innerHTML = (jsonObj.events[index].dateMonth + "-" + jsonObj.events[index].dateNumber + "-" + jsonObj.events[index].dateYear);
};
Is there any solution to this problem, or is this sort of thing why iframes aren't used more often (that is, that IE doesn't fully support them)?

Try eventBox.contentWindow.onload or maybe $(eventBox).load(function)

Bitly API - JavaScript function to open new window

I am using a script i found here to dynamically generate short link for my Tweet buttons and it works perfectly well, but the only thing i cant seem to do is create the link to open in either a new tab or preferably a popup window.
I have tried several variations of the window.location section of the script but so far I've had no luck. If anybody could point me in the right direct I'd be very grateful.
This is the script I am using...
<script>
var TweetThisLink = {
shorten: function(e) {
// this stops the click, which will later be handled in the response method
e.preventDefault();
// find the link starting at the second 'http://'
var url = this.href.substr(this.href.indexOf('http:', 5));
BitlyClient.shorten(url, 'TweetThisLink.response');
},
response: function(data) {
var bitly_link = null;
for (var r in data.results) {
bitly_link = data.results[r]['shortUrl'];
break;
}
var tweet_text = "Text for the Tweet goes here"
window.location = "http://twitter.com/home?status=" + encodeURIComponent(tweet_text + ' ' + bitly_link + " #Hashtag1 #Hashtag2");
}
}
jQuery('.tweetlink').bind('click', TweetThisLink.shorten);
</script>
Many thanks in advance :)

Normally you could just do window.open:
window.open("http://twitter.com/home?status=" + encodeURIComponent(tweet_text + ' ' + bitly_link + " #Hashtag1 #Hashtag2");
BUT, since you are doing an ajax call before this happens, chances are that this window popup will be blocked by the browser, since the window.open command is no longer associated with the click (browsers allow a certain time before a window.open command falls under non-initiated "popup").
A solution would be to first open the window on click (in your shorten function):
var win = window.open('about:blank');
And then redirect in your response function:
win.location = 'http://twitter.com/etc...';
Demo: http://jsbin.com/usovik/1

Perhaps you're looking for
window.open("http://example.com");