Script not running in Firefox, but ran in Chrome - javascript

I made a script to register the thumb scroll wheel event (MX Master 2S if you're wondering). However, this script ran perfectly fine in Chrome, but not in Firefox (Quantum). Why is that so?
var expression = /[-a-zA-Z0-9#:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9#:%_\+.~#?&//=]*)?/gi;
var regex = new RegExp(expression);
var elements = document.getElementsByClassName('pagination'); // get the elements
var search = (elements[0].innerHTML.match(regex));
//alert(search);
if(document.addEventListener){
document.addEventListener("mousewheel", MouseWheelHandler, false);
document.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else {
document.attachEvent("onmousewheel", MouseWheelHandler);
}
function MouseWheelHandler(e) {
var e = window.event || e;
var ret = true;
if (e.wheelDelta) {
// Tilt to the left
if (e.wheelDeltaX < 0) {
str = window.location.toString();
strsplit = str.split('/');
preloc=Number(strsplit[4])+1;
if (preloc > 0) {
window.location.replace("https://somepage.com/page/"+preloc);}
prelocstr=preloc.toString();
if (prelocstr == "NaN") {
window.location.replace(search[0]); }
ret = false;
}
// Tilt to the right
if (e.wheelDeltaX > 0) {
str = window.location.toString();
strsplit = str.split('/');
preloc=Number(strsplit[4])-1;
if (preloc > 0) {
window.location.replace("https://somepage.com/page/"+preloc);}
ret = false;
}
}
event.returnValue = ret;
}
This script is made within Tampermonkey. Could anyone point me the mistake? Thanks in advance!

There's a newer standard for handling mouse wheel event that's standard across browsers:
https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent
https://developer.mozilla.org/en-US/docs/Web/Events/wheel
To use this event, do:
document.addEventListener("wheel", MouseWheelHandler);
And there's no need for:
e = window.event || e
The event will be there.

Only DOMMouseScroll works with Firefox, but it uses a different API. So, you have to write a separate handler for Firefox, instead of using the MouseWheelHandler, or adjust the MouseWheelHandler to support both.
As kshetline pointed out, there is now a new standard, which works with all modern browsers: https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent.
The other two options don't work in Firefox, as stated here:
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: https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel

Related

How to display a popup without redirecting to the login page when the Back button is pressed in the browser? [duplicate]

I have seen the same function is multiple sites including SO. I am also trying to achieve this.
Here is the code so far.
<script>
var myEvent = window.attachEvent || window.addEventListener;
var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload';
myEvent(chkevent, function(e) { // For >=IE7, Chrome, Firefox
var confirmationMessage = ' ';
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
});
</script>
The problem is above code is working fine in chrome and IE but when I tried to test in on Firefox it is not working. I checked firebug but there is no error.
I updated the firefox and version are 47.0.1.
But issue not fixed.
Any advice would be helpful.
Guys if you have code better than this then it would be also helpful.
Use below code, I tested it in firefox and is working fine :
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "\o/";
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Webkit, Safari, Chrome
});
Well I tested this code and it is working on firefox and chrome even with firebug console closed :
<script>
window.onbeforeunload = function (e) {
var message = "Are you sure ?";
var firefox = /Firefox[\/\s](\d+)/.test(navigator.userAgent);
if (firefox) {
//Add custom dialog
//Firefox does not accept window.showModalDialog(), window.alert(), window.confirm(), and window.prompt() furthermore
var dialog = document.createElement("div");
document.body.appendChild(dialog);
dialog.id = "dialog";
dialog.style.visibility = "hidden";
dialog.innerHTML = message;
var left = document.body.clientWidth / 2 - dialog.clientWidth / 2;
dialog.style.left = left + "px";
dialog.style.visibility = "visible";
var shadow = document.createElement("div");
document.body.appendChild(shadow);
shadow.id = "shadow";
//tip with setTimeout
setTimeout(function () {
document.body.removeChild(document.getElementById("dialog"));
document.body.removeChild(document.getElementById("shadow"));
}, 0);
}
return message;
};
</script>
I found this script crossbrowser-onbeforeunload.js. It is cross-browser compatible.
window.onbeforeunload is a good way to go. But it seems to be working in Firefox only if user has interaction with the website (click or scroll). Otherwise function doesn't trigger. Chrome, on the other hand works great.
Note: To combat unwanted pop-ups, some browsers don't display prompts
created in beforeunload event handlers unless the page has been
interacted with; some don't display them at all
Documentation
It's work for me by this code.
window.onbeforeunload = function () {
return 'Are you sure? Your work will be lost. ';
};

Using mouse wheel to scroll in Sencha Touch application on desktop

While looking for how to enable scrolling with the mouse wheel in Sencha Touch, I came across this answer. However, I am relatively new to Sencha Touch and the codebase I was given to maintain that uses it.
The answer says to put it in the initialization block of my application: as far as I can tell, that would be my app.js file that is generated by Sencha Cmd (which has a launch function). However, I'm lost after this. Would I add the first part of the above answer in the launch block? Outside of it? How would I make sure that it is automatically called on every page?
Edit: Here is my app.js file, in case it helps.
Ext.application({
name: 'App',
requires: [
'Ext.MessageBox',
'Ext.direct.*'
],
models:[
"..."
],
controllers: [
'...',
'...',
'...'
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
profiles: ['Tablet', 'Phone'],
launch: function() {
...
}
....
});
Edit 2: I am using Sencha Touch 2.3.
The provided code in the other answer is pure Javascript and not ExtJs code, it runs in a global scope so you can add this above Ext.application (outside of ExtJs code, so make it your first bit of JS code that gets run). You could even wrap it inside an Ext.onReady call to make sure ExtJs is also fully loaded before you add it, if needed.
This should work, it might be worth looking over the Sencha forums or even on here for a more elegant and updated solution though.
The OP's answer above works, however it throws errors if trying to scroll over elements that do not have indexOf on their className (like SVG elements). Here is the updated code that first checks for the existence of indexOf.
I've also extended this method to support horizontal mouse scrolling if the browser supports wheelDeltaX and wheelDeltaY. Otherwise it defaults to using the more widely available wheelDelta and only scrolls in the Y direction.
Note that you can embed this code in a function and simply call it during the launch of your app. No need to put it at the top of the app.js file.
var mouseWheelHandler = function (e) {
var e = window.event || e,
el = e.target,
cmp,
offset,
scroller,
deltaY,
deltaX,
_results = [];
e.preventDefault(); // prevent scrolling when in iframe
while (el !== document.body) {
if (el && el.className && el.className.indexOf && el.className.indexOf('x-container') >= 0) {
cmp = Ext.getCmp(el.id);
if (cmp && typeof cmp.getScrollable == 'function' && cmp.getScrollable()) {
scroller = cmp.getScrollable().getScroller();
if (scroller) {
deltaY = e.detail ? e.detail * (-120) : e.hasOwnProperty('wheelDeltaY') ? e.wheelDeltaY : e.wheelDelta;
deltaX = e.detail ? e.detail * (-120) : e.hasOwnProperty('wheelDeltaX') ? e.wheelDeltaX : 0;
offset = {x: -deltaX * 0.5, y: -deltaY * 0.5};
scroller.fireEvent('scrollstart', scroller, scroller.position.x, scroller.position.y, e);
scroller.scrollBy(offset.x, offset.y);
scroller.snapToBoundary();
scroller.fireEvent('scrollend', scroller, scroller.position.x + offset.x, scroller.position.y - offset.y);
break;
}
}
}
_results.push(el = el.parentNode);
}
return _results;
};
if (document.addEventListener) {
// IE9, Chrome, Safari, Opera
document.addEventListener('mousewheel', mouseWheelHandler, false);
// Firefox
document.addEventListener('DOMMouseScroll', mouseWheelHandler, false);
}
else {
// IE 6/7/8
document.attachEvent('onmousewheel', mouseWheelHandler);
}
}
Thanks user991710 and Scriptable for your answer. In my case i added the entire code within the Ext.onReady event because it didn't work in the app.js.
Below is how i have incorporated the code in the Ext.onReady in the default.js
onReady: function() {
if (this.getAutoRender()) {
this.render();
}
if (Ext.browser.name == 'ChromeiOS') {
this.setHeight('-webkit-calc(100% - ' + ((window.outerHeight - window.innerHeight) / 2) + 'px)');
}
/* code ten behoeve van mousescroll in Chrome situatie */
var mouseWheelHandler = function (e) {
var e = window.event || e,
el = e.target,
cmp,
offset,
scroller,
delta,
_results = [];
e.preventDefault(); // prevent scrolling when in iframe
while (el !== document.body) {
if (el && el.className && el.className.indexOf('x-container') >= 0) {
cmp = Ext.getCmp(el.id);
if (cmp && typeof cmp.getScrollable == 'function' && cmp.getScrollable()) {
scroller = cmp.getScrollable().getScroller();
if (scroller) {
delta = e.detail ? e.detail * (-120) : e.wheelDelta;
offset = { x: 0, y: -delta * 0.5 };
scroller.fireEvent('scrollstart', scroller, scroller.position.x, scroller.position.y, e);
scroller.scrollBy(offset.x, offset.y);
scroller.snapToBoundary();
scroller.fireEvent('scrollend', scroller, scroller.position.x, scroller.position.y - offset.y);
break;
}
}
}
_results.push(el = el.parentNode);
}
return _results;
};
if (document.addEventListener) {
// IE9, Chrome, Safari, Opera
document.addEventListener('mousewheel', mouseWheelHandler, false);
// Firefox
document.addEventListener('DOMMouseScroll', mouseWheelHandler, false);
}
else {
// IE 6/7/8
document.attachEvent('onmousewheel', mouseWheelHandler);
}
/*einde code ten behoeve van muisscroll in Chrome modus */
},
Solution by OP.
In my app.js file (the one generated by Sencha Cmd), I added the following code at the very top of the file, before my Ext.application definition:
var mouseWheelHandler = function (e) {
var e = window.event || e,
el = e.target,
cmp,
offset,
scroller,
delta,
_results = [];
e.preventDefault(); // prevent scrolling when in iframe
while (el !== document.body) {
if (el && el.className && el.className.indexOf('x-container') >= 0) {
cmp = Ext.getCmp(el.id);
if (cmp && typeof cmp.getScrollable == 'function' && cmp.getScrollable()) {
scroller = cmp.getScrollable().getScroller();
if (scroller) {
delta = e.detail ? e.detail*(-120) : e.wheelDelta;
offset = { x:0, y: -delta*0.5 };
scroller.fireEvent('scrollstart', scroller, scroller.position.x, scroller.position.y, e);
scroller.scrollBy(offset.x, offset.y);
scroller.snapToBoundary();
scroller.fireEvent('scrollend', scroller, scroller.position.x, scroller.position.y-offset.y);
break;
}
}
}
_results.push(el = el.parentNode);
}
return _results;
};
if (document.addEventListener) {
// IE9, Chrome, Safari, Opera
document.addEventListener('mousewheel', mouseWheelHandler, false);
// Firefox
document.addEventListener('DOMMouseScroll', mouseWheelHandler, false);
}
Credit to the above code goes to user m.dostal on the Sencha Touch forums. If you happen across this solution, please upvote user Scriptable below as he helped me find the correct solution.

AspxClientTreeList ContextMenu "e.htmlEvent.y" different value with different Internet Explorer?

I used AspxTreeList control of DevExpress.
In the client side, I used ContextMenu Event.
I retrieve e.htmlEvent.y value for right click.
The problem is that in IE8, the value is different than IE11. Why?
Is there a solution?
Use the client-side ASPxClientUtils.GetEventX / ASPxClientUtils.GetEventY methods to retrieve the correct values:
var x = ASPxClientUtils.GetEventX(e.htmlEvent);
var y = ASPxClientUtils.GetEventY(e.htmlEvent);
I found a solution to my problem.
I check the version of IE.
function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}
if (isIE () == 8) {
// IE8 code
} else {
// Other versions IE or not IE
}

can not disable Ctrl+O by JavaScript in IE 11

I'm trying to disable Ctrl+o key combination in IE, the following code works fine in all IE versions except IE 11 unless I do an alert as you see in code below:
document.onkeydown = function(event) {
var x = event.keyCode;
console.log(event.keyCode);
console.log(event.ctrlKey);
if ((x == 79) && (event.ctrlKey)) {
if(navigator.userAgent.match(/rv:11.0/i)){
alert('Disabled');
}
event.cancelBubble = true;
event.returnValue = false;
event.keyCode = 0;
event.stopPropagation();
event.preventDefault();
return false;
}
};
I was wondering if anyone else is experiencing the same issue and they have solved it. :-)
Thanks.
Alex
I have no good solution unfortunately, but have created a case with Microsoft, and made a jfiddle that demonstrates the issue.
The only way we have found around this is the use of the:
<meta http-equiv="X-UA-Compatible" content="IE=7">
header, but there's no telling when support for that will go away - not to mention the obvious side-effects of running in IE7 mode.
Some additional notes:
Although the interception works natively on IE8 and IE9, only the IE=7 UA mode works
A page reload is required for the header to take effect, whether it is in the page or returned in the server response i.e. you cannot selectively jump in an out of IE7 mode in a single page app
Here is a link to the standards that IE11 was built against: http://www.w3.org/TR/DOM-Level-3-Events/#KeyboardEvent-supplemental-interface
Fiddle:
http://jsfiddle.net/bw5sLd15/1/
// The kitchen sink
function killKey( event ) {
event.cancelBubble = true;
event.bubbles = false;
event.returnValue = false;
event.stopPropagation();
event.stopImmediatePropagation();
event.preventDefault();
return false;
}
I came to the same conclusion as Alex & Max. In my specific use case, forcing compatibility mode would break other features.
I believe that in most cases a confirm dialog is the best workaround, as it still feels somewhat natural to the user - save for the extra step involved.
http://jsfiddle.net/dperish/sp72c0wt/3/
HTML:
<h1>Demonstration of IE11 event bubbling issue</h1>
<label>Enable Workaround<input type="checkbox" id="enableWorkaround"></label>
<p>Pressing CTRL-P or CTRL-O should NOT show the default open/print dialogs. The only workaround seems to be to interrupt the main thread either with alert(), confirm(), or by hitting a breakpoint in a debugger. </p>
<p>Unfortunately, a synchronous/blocking XHR call was not useful for this purpose. Nor was using the browser-specific showModalDialog.</p>
<div id="output"></div>
Javascript:
function onKeyDown(e) {
e = e || window.event;
if ((e.keyCode === 79 || e.keyCode === 80) && e.ctrlKey) {
e.preventDefault();
e.stopPropagation();
e.returnValue = false;
if ($("#enableWorkaround").is(":checked")) {
if (confirm("Run some custom method?")) {
customMethod(e.keyCode);
}
}
else {
customMethod(e.keyCode);
}
return false;
}
}
function customMethod(x) {
$("#output").append("<p>CustomMethod Says: KeyCode = " + x + "</p>");
return false;
}
$(document).ready(function() {
$(document).on("keydown", function (e) {
onKeyDown(e);
});
});

event.wheelDelta returns undefined

So I'm trying to disable scrolling on my page when my lightbox opens, and I found this really usefull script that does exactly that. (http://jsfiddle.net/mrtsherman/eXQf3/3/), unfortunately, when I use it on my own page, it disabled scrolling in my lightbox as well. I started to debug the code with alerts only to find out that event.wheelDelta returns "undefined" on my page, while in the JSFiddle, it returns -120.
The event object in a jQuery event handler does not reflect the real event. wheelDelta is a non-standard event propertyIE and Opera, available through the originalEvent property of the jQuery event.
In jQuery 1.7+, the detail property is not available at the jQuery Event object. So, you should also use event.originalEvent.detail to for this property at the DOMMouseScroll event. This method is backwards-compatible with older jQuery versions.
event.originalEvent.wheelDelta
Demo: http://jsfiddle.net/eXQf3/22/
See also: http://api.jquery.com/category/events/event-object/
$.fn.wheel = function (callback) {
return this.each(function () {
$(this).on('mousewheel DOMMouseScroll', function (e) {
e.delta = null;
if (e.originalEvent) {
if (e.originalEvent.wheelDelta) e.delta = e.originalEvent.wheelDelta / -40;
if (e.originalEvent.deltaY) e.delta = e.originalEvent.deltaY;
if (e.originalEvent.detail) e.delta = e.originalEvent.detail;
}
if (typeof callback == 'function') {
callback.call(this, e);
}
});
});
};
and use like this:
$('body').wheel(function (e) {
e.preventDefault();
$('#myDiv').append($('<div>').text(e.delta));
});
big thx to #Mark for jquery-fying the function (:
$(this).on('mousewheel DOMMouseScroll', function(e){
var dat = $(e.delegateTarget).data(); //in case you have set some, read it here.
var datx = dat.x || 0; // just to show how to get specific out of jq-data object
var eo = e.originalEvent;
var xy = eo.wheelDelta || -eo.detail; //shortest possible code
var x = eo.wheelDeltaX || (eo.axis==1?xy:0);
var y = eo.wheelDeltaY || (eo.axis==2?xy:0); // () necessary!
console.log(x,y);
});
works in Webkit and FF, can not proof IE here :(
When I need WheelDelta, I pass the event along to this little gem...
function getWheelDelta(event) {
return event.wheelDelta || -event.detail || event.originalEvent.wheelDelta || -event.originalEvent.detail || -(event.originalEvent.deltaY * 25) || null;
}
Example jQuery where I used it to obtain the delta for scrolling elements with the overflow:hidden CSS rule...
$('#parent-id').on('wheel mousewheel DOMMouseScroll', function(event) {
var node = $('#child-id');
node.prop('scrollTop', parseFloat(node.prop('scrollTop')) - (getWheelDelta(event) / 2));
return false;
});
Note: Reverse scroll direction by adding delta instead of subtracting like example above.
I have tried your solution, psycho brm, and I have changed the function extractDelta(e) to make it works in Firefox. Instead of e.detail I have used e.originalEvent.detail because Firefox returned an undefined delta. I have uploaded the solution and my test code to this post. I hope it helps.
function extractDelta(e) {
if (e.wheelDelta) {
return e.wheelDelta;
}
if (e.originalEvent.detail) {
return e.originalEvent.detail * -40;
}
if (e.originalEvent && e.originalEvent.wheelDelta) {
return e.originalEvent.wheelDelta;
}
}

Categories

Resources