We Keep Coding

Using JQuery to delay loading of div, code not working in Chrome (window.onload)

I'm using the code below to delay the loading of a div until the entire web page is loaded. It works perfectly in Firefox and Safari (because they each have lines in the code to make sure it works specifically for each, I haven't tested IE yet), but not in Chrome (which should, I think, work with window.onload).
Could somebody please help me out with this?
<script type="text/javascript">
function insertFB(){
var html='<div class="fb-page" data-href="https://www.facebook.com/bobcaputolivingwell" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/bobcaputolivingwell">Bob Caputo Living Well</blockquote></div></div>';
$("#FB_PAGE").html(html);
}
if (document.addEventListener){
document.addEventListener("DOMContentLoaded", insertFB, false);
}
if (/WebKit/i.test(navigator.userAgent)){
var _timer = setinterval(function(){
if(/loaded|complete/.test(document.readyState)){
insertFB();
}
},10);
}
window.onload = insertFB();
</script>

Well, firstly I'll answer specifically your question:
It's not working in Google Chrome, because you're using setinterval, and Javascript is a case-sensitive language. The correct name of the method is setInterval.
Besides that, your code is full of errors, you check for a method inside document, and don't use else if to check the others, so you always check all, and probably call the method you want two or more times.
The other thing is that you're using setInterval but you're never clearing the interval, so that thing is gonna run every 10ms forever.
And finally, the last thing, you're calling the insertFB function when you're trying to attach it to the onload event. You shouldn't be using parenthesis for that.
Take a look at Can I use addEventListener? and at Can I use DOMContentLoaded?, and you'll see that it's supported by all major browsers, even some old ones, and you should only use another way, if you really need to support IE8 (nowadays it's unlikely).

Stop lag on calling scroll function with webkit filter javascript

I have this function being called everytime the page is scrolled by a user:
window.onscroll=function(){
document.getElementById("navBlurContent").style.top=-window.pageYOffset+125+"px";
}
However, this causes lots of lag to the browser. I have noticed some answers with jQuery that calls a delay to when the function is called. But, I want to use strictly javascript. I was wondering how this could this be done.
I have now realized that the majority of the lag is being caused by a -webkit-filter I have on the element. But I am not sure how to stop it.
Thanks

Try not to do a DOM select on every scroll.
Cache it:
var blur_content = document.getElementById("navBlurContent");
window.onscroll=function(){
blur_content.style.top=-window.pageYOffset+125+"px";
};

Loading indicator for HTML5 Audio tag / mediaelement.js

Is there a way for javascript/jQuery to know if the source file for an <audio> tag has been/is being loaded?
I am using mediaelement.js, however I'll accept an answer that works for just a regular <audio> tag. Currently I'm faking the loading indication:
$("#temp-loading").spin(minySpinner);
setTimeout(function() {
$('#temp-loading').spin(false);
}, 12000);
(spin() is a function from spin.js). Obviously the indicator is meaningless in this case, but people were getting confused when the page was loaded but the audio was taking about 15 seconds to start playing, so I had to implement this temporary solution. I'd like it to actually indicate if the file is still being loaded, though, so on slower connections the icon will remain until the file has actually started playing.
Also of note is that I have the element set to autoplay (it's okay, I promise!), so when the page is loaded it automatically starts "playing", even though no actual audio is happening yet. This makes it hard to use the play event to stop the spinner, since it just stops immediately. So I'll either have to stop the spinner when the audio actually starts, or not PLAY until the audio is actually ready to be played, if that makes sense.
I also noticed that while the audio file is loading, the time indicator says, "00:00". When it's loaded, it changes to "00:00:00". So it seems that the ability to do what I need is already built-in, I just need to know how to use it.
If it makes a difference, the file is a live stream (via Icecast). Thanks!

What about the canplay event?
EDIT
Since I got the points, I'd better paste brick's solution for posterity:
$("audio").mediaelementplayer({
audioWidth: 150,
features: ['playpause','current','volume'],
success: function(element) {
element.addEventListener('loadeddata', function(){
$("#temp-loading").spin(false);
}, false);
}
});

I've half-way solved it with the following:
$("#temp-loading").spin(minnerSpinner);
var audio = document.getElementsByTagName('audio')[0];
audio.addEventListener('loadeddata', function(){
$("#temp-loading").spin(false);
});
However this is not a cross-browser solution (works in Chrome and Safari, not Firefox).
edit I have it working with jQuery now, but still doesn't work for Firefox (which is using mediaelement's Flash fallback). At this point it's not an html5 question anymore, it's a mediaelement problem.
$('audio').bind('loadeddata', function(){
$("#temp-loading").spin(false);
});
edit 2 I ended up getting it work following Tetaxa's suggestion... not exactly what he/she suggested, but it gave me the idea to use the success callback:
$("audio").mediaelementplayer({
audioWidth: 150,
features: ['playpause','current','volume'],
success: function(element) {
element.addEventListener('loadeddata', function(){
$("#temp-loading").spin(false);
}, false);
}
});
Thanks!

Stop a Vimeo Video with Jquery

I need to stop a Vimeo video embedded with new oembed api (universal player) but when I try to add an event I get this error:
Uncaught TypeError: Object #<an HTMLIFrameElement> has no method 'addEvent'
But I don't why I get this error, I added jquery and the frogaloop api, also I added ids to the iframes, but it still doesn't work: :(
The full code is here:
http://tv.bisaccia.info

Eli, please edit your post. As Joe said, you are partially misinformed. While postMessage is needed for cross-domain communication, it is implemented through a DOM method added by a call to "Froogaloop.init();"
is_embed_iframe = _this.iframe_pattern.test(cur_frame.getAttribute('src'));
if (is_embed_iframe) {
cur_frame.api = _that.api;
cur_frame.get = _that.get;
cur_frame.addEvent = _that.addEvent;
}
Note: you will need to grab froogaloop.js (or the min variant) from the Vimeo site.
Be sure the iFrame "src" is set prior to calling init(), otherwise froogaloop will do nothing.

As per Mike's suggestion, invoking:
Froogaloop.init();
Does make the control API work. In my case:
<iframe id="player_1" src="http://player.vimeo.com/video/26859570?js_api=1&js_swf_id=player_1&title=0&byline=0&portrait=0" width="620" height="354" frameborder="0"></iframe>
<script>
$(document).ready(function() {
Froogaloop.init();
$("#player_1").moogaloop({
load: function(element) {
$("#segment1").click(function() { element.moogaloop('seekTo', "7"); });
}
});
});
</script>
Weird... Moogaloop's author demo page does work without the init() call. Anyway, worked for me.
Thanks for your time!

This is not the correct answer, but may work for your situation as it did for mine. I simply wanted to stop my Vimeo from playing when I closed its containing DOM element. I was collapsing its container and that hid it visually but the audio continued to play and use browser resources unnecessarily.
What I do now is simply store the iframe in a variable, remove it from the DOM, then replace it immediately. I have NOT tested across browsers, only the latest version of Chrome and Safari Mobile.
var container = $("#VimeoContainer");
var iframe = container.find("iframe");
iframe.remove();
container.append(iframe);
Again, Froogaloop is really the way to go, however I've had issues with it in the past so for this situation I was looking for something simple. Obviously you could do this without JQuery with the same results.

You can't.
There's no DOM addEvent method.
You don't have cross-domain access to Vimeo, so you are not permitted to have JavaScript interface with the iframe's document or abstract view.
If you wanted to interface with Vimeo via JavaScript, you would have to get them to implement a postMessage API that also accepts your domain.

Problem using onload javascript

I have used Javascript onlaod like this:
function check()
{
var pic = new Image();
pic.src= "images/first.jpg";
pic.onload = function()
{
alert("Uploaded");
}
}
This is html code where the function is called.
<input type="button" onclick="check()" value="Check" />
It works for both safari and firefox. But with IE, first time it works but when I click on check Button next time it does not work. It also works when cache is cleared.
Can anyone help me what problem might occur here.
Thanks in advance

This should not be a problem in IE8.
IE6 (not sure about 7) is notoriously eager to use cached files, and when taking from the cache the load is not correctly calculated (I recall there being an interesting bug report on this, look for it on MS's site).
It can be solved by adding a [useless] parameter that forces a reload of the cached file:
pic.src= "images/first.jpg?nocache="+Math.random()

perhaps the onload() is too early?
jquery uses a function
$(document).ready(function(){}
that is executed when the page has finished loading.
Perhaps you need some similar function.