I am trying to write an event handler that detects whether a video player I have is in fullscreen or 'regular' mode.
I have tried using
document.addEventListener("fullscreenchange", myfunc, false);
but this doesn't work in IE, I have implemnted the same thing for firefox and chrome using webkitfullscreenchange and mozfullscreenchange event. Is there any other event I can use in IE for this? Or another way of doing this?
Any help would be appreciated. Thanks!
You have jQuery, so use it:
var screen_change_events = "webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange";
$(document).on(screen_change_events, function () {
});
(addEventListener isn't supported in versions earlier than IE 9 anyways)
At the same time, it doesn't look like full screen is supported in any version of IE:
http://caniuse.com/fullscreen
MDN Reference:
https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode
Here's a possible hack around it:
onfullscreenchange DOM event
There is a jQuery plugin named jquery-fullscreen that will do exactly what you want. Until the Fullscreen-API standard has crystallized this is probably the best option.
You can also use the Modernizr fullscreen-api check and shim it if the browser doesn't support it by firing the event yourself (see this question for a detection method)
Related
I need help figuring out why Internet Explorer won't fire my 'paste' event.
I'm using IE 11. Here is my code:
$(document).on('paste', '.pasteTarget', handlePaste);
When trying this in IE, the function never gets called. It works in chrome.
Different browsers treat onpaste differently, or not at all. For IE 11, the latter seems to be the case.
From MDN:
Non-Standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Source
Edit: As pointed out in the comments, IE 11 does indeed support onpaste to some extent. However, as this is a non-standard feature, you should be careful about using it in production.
You could use beforepaste event instead and access clipboardData from window, not from the event.
But, indeed as pointed out already, Clipboard API doesn't seem to be supported in IE: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/clipboardapi/
I'm building an website, and I need to get mousewheel event. In order to do that I've tried following methods:
//For Chrome
window.addEventListener('mousewheel', func);
// For Firefox
window.addEventListener('DOMMouseScroll', func);
This one works only on chrome. ↑
mapDiv.onmousewheel = function(e){
func(e);
}
This one too isn't working on firefox.
I've also tried solution suggested on this webpage, but that also resulted in code only working on chrome.
So how to solve this issue, and also make solution compatible on as much as possible modern browsers?
If you read the documentation, you'll see mousewheel is non-standard and suggest to use wheelevent.
See here: https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel
That refers to https://developer.mozilla.org/en-US/docs/Web/Events/wheel
Sometimes, the documentation solve the problem automagically.
You should use like this:
// standard for all browsers
window.addEventListener('wheel', func);
And here you are an implementation example for compatibility with legacy and modern browsers:
https://developer.mozilla.org/en-US/docs/Web/Events/wheel#Listening_to_this_event_across_browser
I need to write a piece of code that will attach a listener to selected event, and that will work in any popular browser, in any version of it. After doing some searching I came out with following function:
function addListener(event, thefunction)
{
if(window.addEventListener)
{
//All browsers, except IE before version 9.
window.addEventListener(event, thefunction, false);
}
else if(window.attachEvent)
{
//IE before version 9.
window.attachEvent(event, thefunction);
}
}
Quite simple and seems to be self-explanatory.
There might be some problem with DOMContentLoaded event, as none version of IE (AFAIK) does recognizes it, and developers are obligated to use onreadystatechange instead. Solving this problem also seems to be fairly simple, until Internet Explorer 9. You had to write only an extra line in else if(window.attachEvent):
event = (event == 'DOMContentLoaded') ? 'onreadystatechange' : "on" + event;
This part was always fired in any version of Internet Explorer and this line provided a simple translation of event name, so a correct one was always used.
But what about Internet Explorer 9 (and above)? In which Microsoft decided that it will drop attachEvent in favor of addEventListener. But doesn't changed onreadystatechange into DOMContentLoaded.
I can't use above line in window.addEventListener part, because this will rewrite DOMContentLoaded into onreadystatechange event even for other browsers and fail there, as they use DOMContentLoaded.
So, does the only way to solve this problem, is to add browser detection (type and version) to window.addEventListener part and if it detects that script is dealing with IE 9 or above, it will rewrite event name from DOMContentLoaded to onreadystatechange (and supplement other events name with on, required for IE), and in case of other browsers, will leave event name not changed?
Or maybe I'm wrong, because as I just tested, neither DOMContentLoaded nor onreadystatechange is being fired in my IE 8 (first one fires correctly in Firefox / Chrome).
And what about jQuery's .on() function (or similar)? Does anyone knows, if it supports cross-browser attaching of DOMContentLoaded, so I can be sure that this specific kind of event will be catch by my script, no matter, in which browser or it's version I'm using?
IE9 supports DOMContentLoaded. See here.
With this in mind, you can pretty much* work on the assumption that, if addEventListener is supported, so is DOMContentLoaded.
(* unless someone lands on your page using Opera 8 or Safari 3.0, probably unlikely).
As for jQuery, it defers to DOMContentLoaded where this is supported but otherwise falls back to its historic means of detecting DOM-ready, which involves repeatedly checking the DOM tree to see if document.body exists yet. So you can just use its DOM-ready handler:
$(function() {
without having to use on().
More info on how jQuery does it in this answer.
DOMContentLoaded is natively supported in IE9 and above and can be attached through the W3C-standard addEventListener method which was also implemented in IE9:
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM ready');
}, false);
That will work in all modern browsers and IE from version 9 and up.
jQuery 1.x is compatible with IE6+ and any other update-to-date browser. jQuery can hook a DOM ready event cross-browser by shimming support for IE6-8 through the DOM ready handler:
$(function() {
//DOM has loaded, put your code here
});
.on() provides event delegation, but that's rather unrelated to the question.
I'm using this :
Event.observe('${action.extUnenrolledListId}List', 'DOMNodeRemoved', function(event) {
}
It works in Firefox, but in IE8 the DOMNodeRemoved event isn't recognized.
Any ideas about an alternative?
No. IE up to and including version 8 does not support any of the DOM mutation events. There's no equivalent.
UPDATE
From #4esn0k's comment, it seems that it is possible to simulate DOMNodeInserted in IE using behaviors (untested).
I am trying to trigger the onScroll event this way using prototype:
Event.observe(document, 'scroll', function(){
alert('boo');
});
It works perfectly on Firefox, but nothing happens on IE. Does anyone know why? and if there is another way to do so?
Thanks
Try attaching it to the window instead:
Event.observe(window, 'scroll', function() {
alert('boo');
});
Works for me on IE, FF. Honestly, I don't know why it would work attaching it to the document.
Don't know if anyone is still following this answer, but i thought i would put down some of the information i found. In general the scroll event is supported on "window" on the following browsers below...
IE 5,6,7,8 (don't know about 9)
FF all versions
Safari 3.0.. up
Chrome
Opera 9.0.. up
However, when it comes to the document, it is not supported on any of the IE versions. Now, the funny thing is the Iphone 3G browser is the reverse of IE. The scroll event only works on the document. For more info on this, check out http://www.quirksmode.org. This site has alot of good stuff on event handling. Hope this helps someone...