We Keep Coding

onmousewheel event not working in firefox

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.

Changing Display of Div not working correctly on iPad(8.0.1, Safari)

On a button click event in jQuery I have code that shows a div(and it's contents) which were previously set to 'display:none;". It works fine on all other browsers but not Safari on the iPad.
My code:
$(document).ready(function(){
<cfoutput>var cnt = #cnt#;</cfoutput>
$('##add_#dialog_label#_b').click(function() {
if (cnt < 10) {
cnt++
document.getElementById("#dialog_label#_dv_" + cnt).style.display = "";
}
});
});
I've also tried all the following 'show' functions:
$("###dialog_label#_dv_"+cnt).fadeIn();
$("###dialog_label#_dv_" + cnt).css('display','inline');
$("###dialog_label#_dv_" + cnt).show();
Everyone one of which work fine on all other browsers. Also the dozens of hash tags are Coldfusion evaluations. Another possibly important note is this is all taking place within a modal window.

Credit goes to #Wolff here:
document.getElementById("#dialog_label#_dv_" + cnt).style.display = "block";
This worked just fine on Safari. The apparent reasoning being that when I chose not to set display to any value (other than an empty string) it ignored the command. I don't understand whythe newest version of Safari on the newest version of iOS was refusing to do these things using jQuery, but I'm happy with this solution!
UPDATE: Still not working on the clients iPad. I'm at a loss.

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

IE 8, function failing to link to input button

I'm creating a button input on the fly with "document.createElement('input')". The button generates fine in all browsers, but the function does not fire in IE 8 (or IE 7) as it does in all other browsers. I tested the code of the function being called in IE 7 & 8 and it works. Does anyone know a way around this browser issue?
Thanks for your help.
<script type="text/javascript">
function killWindow(){
window.open('', '_self', '');
window.close();
}
document.observe("dom:loaded",function(){
var forceCloseButton = document.createElement("input");
forceCloseButton.setAttribute("id","forceClose");
forceCloseButton.setAttribute("type","image");
forceCloseButton.setAttribute("src","SurveyResource/Button-Close");
forceCloseButton.setAttribute("class","button");
forceCloseButton.setAttribute("onclick","killWindow()");
var a=$('datstat_bottomcenterbuttons');
a.appendChild(forceCloseButton);
})
</script>

You should never never set an event handler with setAttribute.
You need to use addEventListener/attachEvent or set onclick directly.
Also setting class is going to have issues, look at className.

Print section of page script works perfectly in IE but problems in Firefox

In my battles to find a solution to printing just one area of the page that works within WordPress, I came across an excellent little script that meets my needs perfectly.. but only in IE browser. For some reason Firefox doesn't want to play ball.
The script is:
function printURL(sHref) {
if(document.getElementById && document.all && sHref) {
if(!self.oPrintElm) {
var aHeads = document.getElementsByTagName('HEAD');
if(!aHeads || !aHeads.length)
return false;
if(!self.oPrintElm)
self.oPrintElm = document.createElement('LINK');
self.oPrintElm.rel = 'alternate';
self.oPrintElm.media = 'print';
aHeads[0].appendChild(self.oPrintElm);
}
self.oPrintElm.href = sHref;
self.focus();
self.print();
return true;
}
else
return false;
}
Called by:
<a onclick="printURL(this.href); return false;" href="http://printstuff.com" target="_blank">print</a>
This is working in IE, but not FF. I don't know much about JavaScript, so would appreciate if you could tell me if there's anything you see that's giving Firefox headaches.
By the way - I have to go a javascript route instead of using a print CSS file, as the area I want to print (a coupon) is set in a table which is obviously set in the WordPress theme's container and wrapper divs which makes it difficult to isolate it for printing.
I've also experimented with iframe printing, which I made some headway with, but IE gives me problems there (rolleyes). So this script above seems a good answer to me, except Firefox does nothing when I click 'print'. Thanks a lot.

document.all tests false in all browsers other than IE. So your code is very explicitly only running the self.print() line in IE only.