DOM change event for Opera - javascript

So far I found how to do it in Chrome, the DOMSubtreeModified event:
Is there a JavaScript/jQuery DOM change listener?
Apparently it works in Firefox and IE 9 too.
Do you know solutions for detecting DOM changes in other browsers such as Opera? And maybe older versions if IE, because I'm sure the event above doesn't work in IE 6-7-8...
Or do you know other events I could use?
I'm basically looking for a way to detect if certain elements have been inserted in the document trough ajax requests...

Opera supports the DOMNodeInserted and DOMNodeRemoved mutation events. I tested and they worked on Firefox and G. Chrome too.
$(document).bind("DOMNodeInserted, DOMNodeRemoved", function() {
alert("DOM changed");
});
If you're targeting multiple browsers, maybe you could check if Mordenizr has any detection for DOM mutation events support, it could help you a lot to simplify these decisions.

onreadystatechange will work in IE8 and below. A DHTML behavior must be attached to the element via htc, but the htc file does not have to exist:
if (!!document.addEventListener)
{
$(document.documentElement).get(0).addEventListener("DOMNodeInserted", bar, false);
}
else
{
$(document.documentElement).get(0).addBehavior("foo.htc");
$(document.documentElement).get(0).attachEvent("onreadystatechange", bar);
}

Related

how to detect browser print (ctrl+p) using jquery

I have a button on my page called "Print". clicking on which will trigger a jQuery function.
I need to call the same jQuery function when user hits Alt+f+p or ctrl+p
How do I do that?
I tried to do that with matchMedia but no luck
if (window.matchMedia('print').matches) {
alert("print using browser");
}
There is not a standard way to do that as far as I know.
IE and FF offer own function calls,
In IE there are the nonstandard window.onBeforePrint() and window.onAfterPrint() event listeners. There isn't a non-IE way to do it that I know of, however.
Firefox 6 now supports beforeprint and afterprint
https://developer.mozilla.org/en/Printing#Detecting_print_requests
A universally working solution might be to just listen for CMD+P.

onselectionchange Javascript event in webview

In my Android app I'm attaching a handler for the Javascript onselectionchange like this:
$(document).on('selectionchange',function(ev){
alert('Text has been selected');
});
This is supposed to be fired when the user selects something (like text) or the selection changes, however it is fired on tap. Does anyone know the reason of this behavior? (Something like this is working in iOS)
"onselectionchange" event is not a cross-browser feature.
AFAIK, it's only Trident (iexplore) and recent versions of webkit (and hence webview) that support text selection events.
That being said, could it be that the version of webkit present on the iOS you tested is more recent than your Android's version?
Also consider that though they both render with webkit, they use totally different javascript engines, hence potentially different behaviour.

Jquery - Firefox having slow .live() hover speeds, Chrome & IE are fast

OK, so I am working on a new website. Its a social networking type website and it has a lot of jquery interactivity.
Problem comes in when I try using the JQuery.live() for mouseover effects. It runs Very fast in Chrome & Safari, Pretty fast in IE, and slow in Firefox. Very strange as almost always FF is way faster than IE(8/9).
Page in question:
http://www.modelfy.com/user/22/info
If you hover over the 'latest pictures' in chrome and then in Firefox you will notice a huge difference in speed.
$('.hoverme').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
$(this).addClass('hoverclass');
} else {
$(this).removeClass('hoverclass');
}
});
Any help would be hugely appreciated. Also, is .live the best option for optimization?
Thanks!
i'm not totally sure why firefox is slower but you can try to add a context element. Instead of binding all events to the root element you can do something like this:
$('div.clickme', $('#recent_photos')[0]).live('mouseover mouseout', function() {
...
});
Doing this minimizes the amount of traversal and the amount of events bound to the same node.
To figure out which function call is slow you can profile your code with firebug. To get useful results you have to use the uncompressed version of jQuery.

When should I observe Javascript events on window vs. document vs. document.body?

I'm using prototype.js for my web app, and I have everything running on Chrome, Safari, and Firefox. I am now working on IE8 compatibility.
As I've been debugging in IE, I've noticed that there are Javascript events for which I have previously set an observer on the window, e.g.
Event.observe(window, eventType, function () {...});
(where eventType might be "dom:loaded", "keypress", etc.) and it works just fine in Chrome/Safari/Firefox. However, in IE the observer never fires.
In at least some cases I could get this to work on IE by instead placing the observer on something other than window, e.g. document (in the case of "dom:loaded") or document.body (in the case of "keypress"). However, this is all trial-and-error.
Is there some more systematic way to determine where to place these observers such that the results will be cross-browser compatible?
(This is not a super-comprehensive answer, but it seems to work out empirically -- so hopefully these rules of thumb will be helpful to others.)
In general, register events on document, not window. Webkit and mozilla browsers seem to be happy with either, but IE doesn't respond to most events registered on the window, so you need to use document to work with IE
Exception: resize, and events related to loading, unloading, and opening/closing should all be set on the window.
Exception to the first exception: dom:loaded must be set on document in IE.
Another exception: When detecting keystrokes under Mozilla with find-as-you-type enabled, set your key event observers on the window, not the document. If you do the latter, the find-as-you-type seems to block the event.
The various browsers' object documentation (e.g. window on MSDN, document on MDC) define which events are supported on the object. You could start there.

Javascript focused control

Is there any way I can determine the currently focused control on a web page? I wish to save the focused control before my ajax callback and restore it afterwards.
Can this be easily determined?
Thanks,
AJ
Use:
document.activeElement
This has not been officially standardized yet (it will be in HTML5), but most, if not all, modern browsers support it. It started in Internet Explorer so all versions of IE will support it. Firefox has supported it since FF3. Chrome also supports it and I assume Safari does as well.
If you are using jQuery you can solve this with the http://plugins.jquery.com/project/focused plugin
// elm is the DOM Element owning the focus or null if no
// DOM Element has the focus
var elm = jQuery.focused();
Try using document.activeElement.
Many browsers now support document.activeElement.
Works in:
Firefox
IE 6,7,8
Chrome
Safari
Opera

Categories