onmousewheel event not working in firefox - javascript

Styling/Headers Lists Blockquotes Code HTML advanced help ยป
<script>
function event_branding() {
document.getElementById("branding_fade").style.bottom = "0%";
document.getElementById("branding_fade").style.opacity = "1";
document.getElementById("branding_fade").style.transition = "all 2s";
setTimeout(function () { $(".event_branding").css("visibility", "visible")},100);
}
</script>

Try this
<div class="col-xs-7" style="padding-right:3px;">
<img id="train_1_img" class="imageshow_temp" src="http://dummyimage.com/600x400/000/fff"/>
</div>
use this script
var image = document.getElementById("train_1_img");
if (image.addEventListener) {
// IE9, Chrome, Safari, Opera
image.addEventListener("mousewheel", MouseWheelEvent);
// Firefox
image.addEventListener("DOMMouseScroll", MouseWheelEvent);
}
function MouseWheelEvent(e) {
console.log('event', e)
// your statement here...
}
https://jsfiddle.net/fahadsaeed/f8ky3xkq/

Your code is not very clear. Anyways I will put my example here hope it helps
document.getElementById("myDIV").addEventListener("wheel", foo);
function foo() {
console.log("Wheel scrolled")
}
Try it out in JS FIDDLE
I tested and it works in Firefox and Chrome as well
A more detailed work on browser compatibility is explained HERE

This will work.
window.addEventListener('DOMMouseScroll', mouseWheelEvent);
Here is a Jquery example.
http://codepen.io/damianocel/pen/vLerPM
Now, why this is not working for everyone or all browsers is because this is not a standard feature.
Also, MDN says:
On Gecko 17 (Firefox 17) or later, you need to call preventDefault() of wheel events which must be fired for every native event.
On Gecko 16 or earlier, you need to call preventDefault() of MozMousePixelScroll event which must be fired for every native event.
To summarize, browser support is very bad, do not use this for production sites.

Related

How to block back button feature in IE 5?

I'm working on a legacy project where in one page there is some JS code written which forcibly changes the compatibility mode to IE 5 for that page even if I run this in IE 11.
I have written the following code which works for all browser except IE 5.
//Mouse Special back buttons trap code start
function PreventBrowserBack(){
window.location.hash="1";
window.location.hash="2";
}
PreventBrowserBack();
$(window).on('hashchange', function() {
window.location.hash="1";
});
function ApproveBrowserBack(){
window.location.hash="1";
window.location.hash="2";
}
//Mouse Special back buttons trap code End
document.onmousedown = function disableclick(event){
if(event.button==2)
{
alert("Right Click is not allowed");
return false;
}
};
Since when we go to this page the compatibility mode is forcibly set to IE 5 by some JS code this code fails to work.
Please help me out here.
Thanks in advance.
Use navigator.userAgent to get the browser version and for example if(navigator.userAgent== ...
document.getElementById("browserVer").innerHTML = navigator.userAgent;
<p id="browserVer"> </p>

iOS Safari not triggering 'rotate' event

I've been trying various method to trigger an event when I rotate the device. It works on all browsers Android. It works on all browsers on iOS, except for Safari. I have tried 1 iPhone and 2 iPads, all on iOS7, and just can't get this event to fire.
I have tried:
jquery:
$( window ).resize(function() {
$(window).bind("resize", function(){
js:
document.addEventListener("orientationchange", updateOrientation);
window.onresize = function(event) {
No luck, no luck whatsoever. They all work in all browsers, but fail in iOS Safari. What's weirdest, is that sometimes it will fire maybe once or twice, in 20 rotations. Other times, no event at all. What is going on? Anyone have any experience with this? Am I doing something wrong, or is it a weird bug?
Boy, orientChange type support is super dodgy across mobile browsers it seems. So, to avoid worrying about it, I just followed this simple guaranteed approach that doesn't rely on that event at all:
function findOrientation()
{
if(window.innerHeight > window.innerWidth){
return 'portrait';
} else {
return 'landscape';
}
}
function checkOrientation() { //to be run every X seconds by setInterval below
var currentPortraitOrLandscape = findOrientation();
if(currentLandscapeOrPortrait != window.landscapeOrPortrait) {
doMyOrientationChangeCode();
}
}
window.portraitOrLandscape = findOrientation();
setInterval(checkOrientation, 800); //check around once a second if they have reoriented

onbeforeunload issue with Chrome and Firefox

In last days I noticed that the confirmation alert that I supposed to see before leaving my website page is no more shown on Chrome and Firefox, but it's displayed on IE.
If I debug with Google Chrome Dev Tools, I can see that function confirm is executed, enters the if statement, but no alert box is displayed. I tried to restart Google Chrome and look for an option to reset alert messages, but I didn't find nothing.
Any ideas?
The code is this:
if (window.addEventListener) {
window.addEventListener('beforeunload', confirm, false);
}
else window.attachEvent("onbeforeunload", confirm);
...
function confirm(e) {
if (changed== true) {
return "You haven't saved your changes!";
}
}
I've found a working solution, but actually I don't understand why the attachEvent isn't working anymore. Anyway, this is the working solution, tested on IE, Chrome and Firefox:
I removed the addEventListener and attachEvent lines:
/* if (window.addEventListener) {
window.addEventListener('beforeunload', confirm, false);
}
else window.attachEvent("onbeforeunload", confirm); */
In the HTML, I add the attribute onbeforeunload to the body tag:
<body onbeforeunload="return confirmEvent()">
I also renamed the onbeforeunload function to avoid confusion with the confirm built-in javascript function:
function confirmEvent(e) {
if (changed== true) {
return "You haven't saved your changes!";
}
}
See https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "\o/";
e.returnValue = confirmationMessage; // Gecko and Trident
return confirmationMessage; // Gecko and WebKit
});
Worked in every Browser i tested ;)
PS: I know its a little bit late

pagehide and pageshow events don't work as expected on ios chrome

Apple documentation lists down the available iOS browser events here:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
The 'pagehide' and 'pageshow' events seem to work fine on safari, but on chrome it only works on page load and unload. It doesn't work on:
Pressing the home button, i.e. sending Chrome to background
Switching tabs
Below is a small Javascript snippet that you can use to verify it:
<script type="text/javascript">
window.addEventListener("pageshow", function(evt){
alert('show');
}, false);
window.addEventListener("pagehide", function(evt){
alert('hide');
}, false);
</script>
What can I do to detect whether chrome was sent to background or not. I need to clear a setTimeout timer as soon as chrome is brought back to foreground. Any workarounds?
Below is the working code:
<script type="text/javascript">
var heartbeat;
var lastInterval;
function clearTimers() {
clearTimeout(heartbeat);
}
function getTime() {
return (new Date()).getTime();
}
function intervalHeartbeat() {
var now = getTime();
var diff = now - lastInterval - 200;
lastInterval = now;
if(diff > 1000) { // don't trigger on small stutters less than 1000ms
clearTimers();
}
}
lastInterval = getTime();
heartbeat = setInterval(intervalHeartbeat, 200);
You can find more details here: http://aawaara.com/post/74543339755/smallest-piece-of-code-thats-going-to-change-the-world
Pagehide and pageshow aren't the events you need for what you're trying to accomplish.
Instead, use the visibilitychange event in combination with document.hidden or document.visibilitystate, which should do exactly what you want.
This'll only work on supported browsers - which to date includes Chrome, but not Safari (yet). So to be safe, I'd call clearTimers() on visibilitychange, and fall back to calling it on pagehide only if document.visibilitystate is not defined.
See:
MDN: visibilitychange event
MDN: Using the Page Visibility API
Page Visibility - W3C recommendation, October 2013

dynamically change onload for an iframe

I have a page containing a couple of <iframe> tags. I want to change their onload actions dynamically. I have the following code that works fine in FF, Safari, Chrome, Opera, but IE (8) refuses to comply.
document.getElementById('myiframe').onload = function() {
return function() { file_onLoad(data); }
}();
I've been using something similar for setting the onchange of an <input> element and this works well in all the browsers I've tested, including IE.
document.getElementById('myinput').onchange = function() {
return function() { file_onChange(data); }
}();
So I guess it has something to do with the way I'm getting the frame element / object.
I've also tried frames['myiframe'] but with no success.
Thanks for your help!
It works fine on mine...
I tried:
function whatever(){
document.getElementById('myiframe').src="http://www.google.com/"
document.getElementById('myiframe').onload = function() {
return function() { alert("Done."); }
}();
}
and it works. (I tried on IE9 with IE8 mode turned on)
If it does not work for you, try this:
document.getElementById('myiframe').addEventListener('load', file_onLoad, false);

Categories