Develop Reference

How to listen to a load event of an object with a SVG image?

I want to manipulate a SVG image after it's loaded with snap.svg. Unfortunately the callback of the load event is never called. How can I register a load event to the svg object?
I have created this minimal example of my problem.
HTML:
<object data="http://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" type="image/svg+xml" id="animation" />
Javascript:
alert('loading');
$('#animation').on('load', function() {
alert('loaded');
});

From this post jQuery SVG-object tag load event
It seems like jQuery simply prevents to bind a "load" event to a
non-image-or-document element, so I just use the "official"
addEventListener() function...
Also unsure if that's still the case but your issue was mostly that in jsfiddle you were executing the code on document "loaded" instead of document "ready". Document loaded means all the resources are loaded prior executing the code so the svg image would already be loaded.
Works fine with this updated jsfiddle http://jsfiddle.net/47jSh/2/
alert('loading');
$('#animation')[0].addEventListener('load', function() {
alert("loaded");
}, true);

How to detect mobileinit and custom events through Javascripts AddEventListener?

I have an overrides.js script, which sets defaults in my application like so:
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
$.mobile.pushStateEnabled = false;
$.mobile.defaultPageTransition = "fade";
$('html').addClass('viewGrid');
console.log("mobileinit detected in overrides");
$(window).trigger('jqm-ready');
});
The overrides.js is pulled in via requireJS after Jquery has loaded and before Jquery Mobile loads. On my page I have this snippet in the footer:
console.log("page done loading");
window.addEventListener('jqm-ready', function(){
console.log("detected jqm-ready")
// run some code
});
document.addEventListener('mobilelinit', function(){
console.log("mobilelinit detected from page");
// run some code
});
My console displays the following:
page done loading
mobileinit detected in overrides
So, I'm not able to detect mobileinit or my custom jqm-ready event through my eventListener added on the page.
As I'm using requireJS I cannot use Jquery to detect mobileinit/jqm-ready, because the page is parsed before Jquery has loaded. I hoped to be able to detect either event, but no luck so far. I need to detect them because the code I need to run needs to bind to Jquery Mobile events.
Question:
Is there something wrong in my snippet or why can't I bind to either mobileinit or jqm-ready like this?

You have a typo in the event name, see:
document.addEventListener('mobilelinit', function(){
^----- TYPO HERE (should be mobileinit)
That is probably why you were not seeing the event.

Ok. I got it... I think I can't use Jquery's trigger for events that I added listeners to using addEventListener. But maybe not. Anyway this works:
var trigAnalytics = function( trigger ){
console.log("triggered by "+trigger);
};
document.addEventListener("jqm_ready",function(){console.log("jqm_ready"); trigAnalytics("jqm_ready");},false);
And in overrides.js
console.log("Hello now");
var evt = document.createEvent("Event");
evt.initEvent("jqm_ready",true,true);
document.dispatchEvent(evt);
Works.

Using .live() for iFrame.load() event?

I know an iFrame is added to my page via javascript somewhere in my page, I want to be notified when it is loaded, but this doesn't work:
$("iframe").live("load",
function () {
alert(this.name + ": Im loaded!");
});
No alert is shown
Any idea why? any idea how can we achieve this?

I think you can do a callback after adding the iframe to your page.
As mentioned here, it's not possible to bind live() to iframe load().
Note: The .live() and .delegate() methods cannot be used to detect the
load event of an iframe. The load event does not correctly bubble up
the parent document and the event.target isn't set by Firefox, IE9 or
Chrome, which is required to do event delegation.
So in your callback, you have to call this, maybe set a timeout to make sure it fires after the iframe has been loaded.
$("iframe").load(function () {
alert(this.name + ": Im loaded!");
});

It won't work, for load event only works on Window object.
If you wish to be noticed when page inside the iframe is loaded, then you should write code on the inside page, which calls window.parent to notify its parent page.

How to attach events on window.opener

I have a window that is opened by
var myWindow = window.open(
'popupManager.htm',
'myWindow',
'status=0,toolbar=0,width=500,height=100');
and it will act as a debug window.
inside I want to hook up to windows events on the window.opener and I'm not getting this to work. Both URL's are in the same domain/same website.
I can hook up to DOM elements fine using, for example
$("input[soid=DlgButtonBar_cancelButton]", window.opener.document).bind("click", function() {
alert('Cancel button was pressed!');
window.close();
});
but I want to hook up to the move event (window.onMove) and close event.
tried
window.opener.addEventListener('move', function() { console.log('moving...'); });
with no luck.
what is the trick? using jQuery or simple javascript...

Listening on window events doesn't seem to work. I use this trick to listen to window events (unload in my case):
Create a document element (e.g. span) on the parent document (e.g. the one you want to get events from) :
var $unloader = $('<span style="display:none;" id="unloader"></span>');
$('body').prepend($unloader');
$(window).unload(function(){$('#unloader').click();});
In the opened document (e.g. popout), you can listen to the unload event now masked as a click event:
$("#unloader",window.opener.document).click(unloadEventHandler);
If you need to detect if the unload is a close or a navigation event, you can check the closed property for the parent after a delay:
window.setTimeout(function(){
if(window.opener.closed == true) {
// Close event
} else {
// Navigation event
// window.opener.location to get new location
}
},500);
The risk is in the delay, the closed property is changed after the unload methods and event hooks are executed so if the delay is too short you might get the flag before it is changed and if it's too long, you get unnecessary delays.
I think the move event can be handled similarly, hope this helps. Let me know if there are any possible improvements to this method. Thanks and good luck.

jQuery bind("load")

var imgLoader = $("<img />");
$(imgLoader).attr("src", "http://localhost/malevil/Content/Images/img_adrenalin.jpg");
$(imgLoader).unbind('load');
$(imgLoader).bind('load', function () {
alert("event fired");
});
But this work only in chrome, where is the problem ?
In IE, Firefox and Opera load event never fired.

You need to bind the load event before you set the src property.
As a side note, there are known issues with the load event on images that you need to be aware of:
javascript, image onload() doesnt fire in webkit if loading same image
And, quoting from the jQuery manual on load():
It doesn't work consistently nor
reliably cross-browser
It doesn't
fire correctly in WebKit if the image
src is set to the same src as before
It doesn't correctly bubble up the
DOM tree
Can cease to fire for images
that already live in the browser's
cache

I would set the handler before you set the src attribute --as it might be that the image loads before your event handler gets set.