Is it possible to track what script or what line of code, that ex. set a width on an element?
//KennethBL
On IE you can use the onpropertychanged event to fire an event when the width element is fired.
On IE 9, Chrome and FF you can use the DOMAttrModified:
var elm = document.getElementById ("targetElemntId");
if (elm.addEventListener) { // all browsers except IE before version 9
elm.addEventListener ('DOMAttrModified', checkProperty, false); //FF, Opera, IE
}
if (elm.attachEvent) { // IE & Opera
elm.attachEvent ('onpropertychange', checkProperty); // IE
}
function checkProperty(event) {
var name = event.attrName ? event.attrName : event.propertyName;
if(name == "width") {
alert("width changed");
}
}
Don't know how you would achieve this on chrome though.
Related
I`m working with fullscreen api.
I`ve added this polyfill:
let doc = document as any;
if (!doc.requestFullscreen) {
document.body.requestFullscreen = doc.body.mozRequestFullScreen ||
doc.body.webkitRequestFullscreen || doc.body.msRequestFullscreen;
document.exitFullscreen = doc.mozCancelFullScreen || doc.webkitExitFullscreen ||
doc.msExitFullscreen;
}
I have UI button for enabling fullscreen mode and all works fine (chrome IE 11, edge, opera, firefox)
Also I have keydown handler:
if (args.keyCode === 70) {
args.preventDefault();
if (!this.isInFullScreen) {
document.body.requestFullscreen();
}
else {
document.exitFullscreen();
}
this.InFullScreen = !this.isInFullScreen;
}
But enabling/disabling fullcreen mode by pressing F doesn`t work in IE 11.
msRequestFullscreen function simply do nothing.
There are no console errors or smth.
In other browsers works fine.
How can I solve this issue?
I can reproduce the issue. msRequestFullscreen works in IE 11 but it just doesn't work in keyCode event.
As a workaround, I suggest that you can use ActiveXObject to SendKeys F11. It can make it full screen in IE 11. You can add the following code:
if ("ActiveXObject" in window) {
var wscript = new ActiveXObject("Wscript.shell");
wscript.SendKeys("{F11}");
}
I've been using the following javascript code that blocks Normal users (not professionals of course) from using print screen & Ctrl+A & Ctrl+C on the browser.
it does work as expected on Firefox & Chrome but it sometimes works on IE and some other times it fails. Please review the code if you can a little help of maybe what's going wrong on IE. and why it fails?
function disableselect(e) {
return false;
}
function reEnable() {
return true;
}
document.onselectstart = new Function("return false");
if (window.sidebar) {
document.onmousedown = disableselect;
document.onclick = reEnable;
}
function copyToClipboard() {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", "You can no longer give print-screen. This is part of the new system security measure");
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
alert("You can no longer give print-screen. This is part of the new system security measure.");
}
$(window).keyup(function(e){
if(e.keyCode == 44){
copyToClipboard();
}
});
$(window).focus(function() {
$("body").show();
}).blur(function() {
$("body").hide();
});
I have tested it and it works for me using Chrome, Firefox, IE11.
But, if someone use Inspect Element to disable CSS restriction, then he will disable it :)
I want to detect if my browser window has a focus on it (is selected). I use the following code to do so:
$(window).focus(function() {
window.focusFlag = true;
}).blur(function() {
window.focusFlag = false;
});
Source:
Using JQuery to bind "focus" and "blur" functions for "window", doesn't work in IE
It works on mozilla firefox 43.0.4, but it doesn't work on IE 11.
I also tried focus/blur method which does not involve JQuery.
function onBlur() {
document.body.className = 'blurred';
};
function onFocus(){
document.body.className = 'focused';
};
if (/*#cc_on!#*/false) { // check for Internet Explorer
document.onfocusin = onFocus;
document.onfocusout = onBlur;
} else {
window.onfocus = onFocus;
window.onblur = onBlur;
}
It also works on mozilla firefox 43.0.4, but it doesn't work on IE 11.
Srource:
http://www.thefutureoftheweb.com/blog/detect-browser-window-focus
What can I do about IE 11?
The standard defines for focus:
This event type is similar to focusin, but is dispatched after focus is shifted, and does not bubble.
https://www.w3.org/TR/uievents/#events-focusevent
Therefore, focusin will work for parents in jQuery.
<input type="text" />
$(window).focusin(function() {
alert("Focussed");
}).focusout(function() {
alert("Blur");
});
Try in JSFiddle
I am working on an application and I need to track the mouse wheel movement but my functions are not working as I expect in Internet Explorer. It works in all other browsers but not IE, any ideas on what I am doing wrong?
JS...
var request = true;
var onMouseWheelSpin = function(event) {
if(request === true){
request = false;
var nDelta = 0;
if (!event) { event = window.event; }
// cross-bowser handling of eventdata to boil-down delta (+1 or -1)
if ( event.wheelDelta ) { // IE and Opera
nDelta= event.wheelDelta;
if ( window.opera ) { // Opera has the values reversed
nDelta= -nDelta;
}
}
else if (event.detail) { // Mozilla FireFox
nDelta= -event.detail;
}
if (nDelta > 0) {
zoomFun( 1, event );
}
if (nDelta < 0) {
zoomFun( -1, event );
}
if ( event.preventDefault ) { // Mozilla FireFox
event.preventDefault();
}
event.returnValue = false; // cancel default action
}
}
var zoomFun = function(delta,e) {
if(delta > 0){ // zoom in
alert("In");
}else{ // zoom out
alert("Out");
}
request = true;
}
var setupMouseWheel = function(){
// for mouse scrolling in Firefox
var elem = document.getElementById("zoom");
if (elem.addEventListener) { // all browsers except IE before version 9
// Internet Explorer, Opera, Google Chrome and Safari
elem.addEventListener ("mousewheel", onMouseWheelSpin, false);
// Firefox
elem.addEventListener ("DOMMouseScroll", onMouseWheelSpin, false);
}else{
if (elem.attachEvent) { // IE before version 9
elem.attachEvent ("onmousewheel", onMouseWheelSpin);
}
}
}
I am calling the setupMouseWheel function onload in the body aka
<body onload="setupMouseWheel();">
Thanks for the help!
To listen to the mouse wheel, it's best to listen to DOMMouseScroll, mousewheel and wheel. The last one is IE, and is the only one you're not listening for.
I'll also point out that jQuery has a shortcut for binding multiple events:
$(elem).on("DOMMouseScroll mousewheel wheel", onMouseWheelSpin);
update: noticed that though you tagged this as jQuery, you're not actually using it. To do this without jQuery, just carry on as you are but add a wheel event listener like the others.
I finally found a great cross browser approach here for anyone who has a similar issue
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel
I want to test if IE is version 7 or 8 and if it is prevent a specific piece of code running?
I've tried the following code but this doesnt seem to work:
if($.browser.msie && parseInt($.browser.version, 10) <= 8) {
$(document).on('mouseenter', '.thumb', function () {
$(this).find('.bgg').stop().animate({ opacity : 1 });
});
$(document).on('mouseleave', '.thumb', function () {
$(this).find('.bg').stop().animate({ opacity : .5 });
});
}
Ideally I really dont want to use this kind of detection but in this case it has to be used.
Foolproof method:
<!--[if lte IE 8]><script type="text/javascript">
// specific code for IE8 and below goes here.
</script><![endif]-->
I've had to UA sniff for IE in my projects due to the requirement of having only one script file. We don't want the extra http request that #Kolink's method requires, nor do we want to split functionality. For that I would simply use:
var ltie9 = $.browser.msie && parseInt($.browser.version, 10) < 9;
and then do whatever you want by using:
if (ltie9) { ... }
I've got a jsFiddle that shows several different IE detections up to IE10 just to demonstrate.
Use object detection. IE7 doesn't provide a querySelector method, so for example replace
if ($.browser.msie && parseInt($.browser.version, 10) <= 8)
with
if (document.all && !document.querySelector)
Here are some more ideas
IE8 can be used as and act like IE7-
to distinguish, you can test document.documentMode
adding a property to the navigator object saves having to test again
//(Run= {};
if(window.addEventListener){
Run.handler= function(who, typ, fun){
if(who && who.addEventListener) who.addEventListener(typ, fun, false);
}// all browsers except IE8 and below
}
else if(window.attachEvent){
/*#cc_on
#if(#_jscript_version>5.5){
navigator.IEmod= document.documentMode?
document.documentMode:window.XMLHttpRequest? 7:6;
}
#end
#*/
Run.handler= function(who, typ, fun){
if(who && who.attachEvent){
who.detachEvent('on'+typ, fun);
who.attachEvent('on'+typ, fun);
}
}
}