We Keep Coding

Custom Audio Player play and pause button

I am creating an audio playlist. I have created the custom audio player using the code below. It works fine although the issue is that i have auto play on which means that when the first song is over it automatically goes into the next song. This causes the play pause button to be all messed up. It is kind of hard to explain though if you go to this link and go the very end of a song you will know what i mean. Please help me, this is really holding me back.
<!--HTML5 audio-->
<audio id="audioPlayer" preload="true">
<source src="oh-my.mp3">
</audio>
<div id="wrapper">
<!--Audio Player Interface-->
<div id="audioplayer">
<button id="pButton" class="play"></button>
<div id="timeline">
<div id="playhead"></div>
</div>
</div>
</div>
<script src="js/html5audio.js" type="text/javascript"></script>

I'd recommend listening to the onplay event in your JavaScript. This event is raised when the audio starts playing. Here's an example:
document.getElementById('audioPlayer').onplay = function(){
document.getElementById('pButton').style.background = "url(pause.png)"
}
This causes the button to be changed to a pause button whenever the audio plays, regardless of whether is was started by a user click. I hope this helps!
EDIT
I've looked at your code some more, and I've discovered that this works:
$("#audioPlayer").on("ended play", function(){
$("#pButton").addClass("pause").removeClass("play")
})

Ng-click doesn't work with HTML5 video scrubber bar

I have been following thenewboston's HTML5 video tutorials and have been trying to change bits to use AngularJS. However, I am having trouble with the bar not updating when you click in a different place than where its currently playing at.
My code:
https://github.com/IdrisAbdul-Hussein/portfolio2.git
Essentially, I have a video.html file which loads the video player etc (video.html is included in the repo) which looks like this:
<div id="big_wrapper">
<section id="skin">
<video id="myMovie" width="640" height="360">
<source src="videos/testVideo.mp4"/>
</video>
<nav>
<div id="buttons">
<button type="button" id="playButton" ng-click="playOrPause()">Play</button>
</div>
<div id="defaultBar" ng-click="clickedBar()">
<div id="progressBar"></div>
</div>
<div style="clear:both"></div>
</nav>
</section>
</div>
The functions that the ng-click's refer to are in my controller.js.
The error that I'm getting is:
TypeError: e is undefined - controller.js(line 53)
However, when I put ng-click="clickedBar(this)" then it gives me the following error:
Error: Value being assigned to HTMLMediaElement.currentTime is not a finite floating-point value. - controller.js(line 55)
I'm not sure which is more in the right direction and not sure how to solve the problem! Been bashing my head trying to fix this problem for a while.
Any help is appreciated!
Thanks in advance!

In angular expressions this points to current scope object, not to the DOM element like in HTML event attributes.
You need to pass DOM node into your ngClick handler which is available in $event.target:
ng-click="clickedBar($event.target)"

Your "e is undefined" error is because your code expects e to contain the click event. ng-click="clickedBar() does not pass the event to clickedBar. Try ng-click="clickedBar($event)"> instead.

How do I stop as a video using HTML5 on close of Modal Window?

I have searched here and all over the web for a way to stop HTML5 video on modal window close. While there has been a lot of answers none seem to work for my site
The page from my site
<script>
("#bone").on('click', function(){
stopVideo();
});
</script>
<a class="button" href="#openModal">Watch Bad to the Bone</a>
<div id="openModal" class="modalbg">
<div class="dialog">
C
<video id="bone" src="http://gluedesign.com/work/newgluetwo/video/b2b_7_15a.m4v" controls width="960" height="540"></video>
<p class="fineprint">Bad To The Bone.</p>
</div>
What am I missing here?

One way to pause/stop video is to do it like this:
$("#close").on("click",function(){
$("#bone").get(0).pause(); // $("#bone").trigger('pause');
});
To play the video after clicking on the open modal button:
$("#openModalBtn").on("click",function(){
$("#bone").get(0).play(); // $("#bone").trigger('play');
});
For pure javascript, you would need to do it like this:
var bone = document.getElementById("bone");
var close = document.getElementById("close");
var openModalBtn = document.getElementById("openModalBtn");
close.addEventListener("click",function(){
bone.pause();
});
openModalBtn.addEventListener("click",function(){
bone.play();
});
And there are few error in the html part as well, you might want to correct them to this:
<a id="openModalBtn" class="button" href="#openModal">Watch Bad to the Bone</a>
<div id="openModal" class="modalbg">
<div class="dialog">
C
<video id="bone" controls width="960" height="540">
<source src="http://gluedesign.com/work/newgluetwo/video/b2b_7_15a.m4v">
</video>
<p class="fineprint">Bad To The Bone.</p>
</div>
I tested this using a bootstrap modal, but haven't tested it for this one.
Hope it helps.

fadeIn of an element after fading out another one isn't really working

I've created a website called "Pumpn Records" and it's almost finished. On the website there is a section called "Releases". It is divided in two sections, but only one is visible.
So this is the website: http://s448350928.online.de/pumpn/records/index3
The Releases Section there has this html code (simplified):
<div class="container1" id="releases">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script>
function hide2014and2016show2015()
{
$("#2014").fadeOut(4000);
}
</script>
<script>
$(document).ready(function(){
$("#2015").hide();// hide it initially
$('#forward2014').click(function(){
$("#2015").delay(4000).fadeIn(4000); });
});
</script>
<h2>Releases</h2>
<div id="yearcontainer">
<div id="back2014" style="display:inline-block">
<img id="back2014img" src="..."/>
</div>
<h2 id="year">2014</h2>
<div id="forward2014" onclick="hide2014and2016show2015();" style="display:inline-block">
<img id="forward2014img" src="..."/>
</div>
</div>
<div id="2014">
<div class='container3' style="overflow:visible;">
<h2>EPs</h2>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Ganz Okay EP (Instrumental)</h3>
</a>
</div>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Ganz Okay EP</h3>
</a>
</div>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Viernacheins EP</h3>
</a>
</div>
</div>
</div>
<div id="2015">
<div class='container3' style="overflow:visible;">
<h2>Alben</h2>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Larmoyanz</h3>
</a>
</div>
</div>
<div class='container3' style="overflow:visible;">
<h2>EPs</h2>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Mrs. EP</h3>
</a>
</div>
</div>
</div>
</div>
If you look at the Releases Section, you will see there is this title ("2014"). Left and right to this titles are arrows, or carets I think they are called. :D
What I wanted to code is:
When someone clicks on the right arrow, the div with the id "2014" should fade out in 4000 milliseconds, then the div with the id "2015" should fade in in 4000 milliseconds. I put a delay before the fade in of that "2015" div. It's also 4000 milliseconds, so the fade in of "2015" should start right after the fade out of "2014" has finished.
What really happens is: http://i.stack.imgur.com/hxLVB.gif
So why isn't it working? I googled and stackoverflowed so much in the last hours and changed that code so often, but it still doesn't work. :(
UPDATE:
Now I know what the problem is, but I can't solve it. This website is a single page website, so I have a javascript plugin. It's called fullpage.js and I know how it works. When you scroll with your mouse, it adds an "transform: translate3d(x, y, z);" property to the "page-container fullpage-wrapper", and changes the y-value, so the page goes down. So I made two fiddles for a demonstration of the problem:
NOT WORKING FIDDLE (with the transform property in it):
jsfiddle.net/ktf9onjo/ (sorry, I'm not allowed to post more then two clickable links...)
WORKING FIDDLE:
jsfiddle.net/rant5af9/
You see that the problem is the transform property.
WHY???
I need an alternative. I cannot just remove it, the script will
be readd it every time I scroll.
Yeah, I could just change the translate3d(x, y, z) to a translateY(y), but nooo, that isn't working, I tried it. :D
INFO: You can find the fullpage.js in the javascript box in both fiddles.
PS: The website isn't finished yet. A lot of links and other things aren't working at the moment.
Please help, fanx! :)

Why the problem happens
As explained by #kosmos in comment:
Because the queue for animations is for every element animation itself. a won't wait for b to make its animation, but if you try to animate a two times, the second animation will wait for the end of the first one.
Solution
jQuery fadeOut function accepts a complete callback function (source).
This callback function is executed once the fade-out is complete. You don't need to use delay anymore this way, and your animations chaining will keep in sync.
html:
<div id="forward2014" style="display:inline-block">
javascript:
$('#forward2014').click(function(){
$("#2014").fadeOut(4000, function(){
// this starts when the fadeOut is finished
$("#2015").fadeIn(4000);
})
});
demo in this snippet
(click the >> as forward button)
$(document).ready(function(){
$("#2015").hide();
$('#forward2014').click(function(){
$("#2014").fadeOut(4000, function(){
// this starts when the fadeOut is finished
$("#2015").fadeIn(4000);
})
});
});
<div id="2014"style="display:inline-block">
2014
</div>
<div id="2015"style="display:inline-block">
2015
</div>
<div id="forward2014">
>>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Further remarks:
You may want to use jQuery's .on function for event listeners (reference). You can replace the onclick= and the .click by it. This should make your code easier to manage and more performant.
The ids in your html are supposed to contain at least a letter (source). Replace id="2014" by id="year-2014" or something like that.

i didn't got what you need exactly but to make to jquery actions going sequences you must call the second action with call back like this
$('#whatever').fadeOut('slow', function() {
$('#whatever').delay(4000).fadeIn('slow');
});
See This

onmouseover and onmouseout to resize images

I'm trying to mouse over a few images then the images will resize but somehow let's say I have three images. if my mouse is over the first image then all three will resize if I mouse over the third then second then first then it'll resize one by one instead of resizing all three at once. I just started javascript so don't know too much yet.
Is this how it works unless I know more advanced way of doing it?
Also I want to make it so when my mouse is out the images will go back to default but I'm not sure how I should do that....
This is what I have...
<script>
var div1Images=document.getElementById("div1").getElementsByTagName("img");
for(i=0;i<div1Images.length;i++)
{
div1Images[i].onmouseover=function()
{
this.style.width="100px";
}
}
</script>
<body>
<div id="div1">
<img src="cat.jpg" id="im1"/>
<img src="dog.jpg" id="im2"/>
<img src="fish.jpg" id="im3"/>
</div><!--close div1-->
</body>
Thanks in advance.

You can do this with CSS:
<img class="mypic" src="cat.jpg" id="im1"/>
.myPic:hover {
width:100px;
}