I have a site running some javascript. In IE8 only, the $(document).scroll is not firing when you scroll with or without the mousewheel.
Code snippet below:
$(document).scroll(function () {
//do something on scroll
});
Is there a specific reason this function won't fire in IE8? I have searched online with no success.
Thanks for all advice and tips in advance!!!!!
Try using window:
$(window).scroll(function () {
//do something on scroll
});
For a lot of areas, IE ties the event to window rather than document as other browsers will. $(window).scroll(function(e) {}); is what you're after here. Should generally also work in most other browsers too, but if not, use a check on the navigator to find IE and use window or document based on that Boolean.
Related
I used to have this code in my JavaScript file, and it used to work...
jQuery(document).ready(function ($) {
"use strict";
$(window).load(function (event) {
LoadPage();
});
after updating jQuery to version 3.3.1, I had to replace $(window).load with $(window).on('load') as it is deprecated. So this is the new code:
jQuery(document).ready(function ($) {
"use strict";
$(window).on('load', function (event) {
LoadPage();
});
Problem is this new code, does not behave as expected all the time... in Chrome LoadPage() method is called as expected. If I used MS Edge, it does not hit LoadPage() method at all. If I use Chrome incognito mode, it sometimes hit the method and sometimes doesn't... any idea why this is happening?
OK, I found the answer here: jQuery 3 - Github Issues
This is explanation, by Timmy Willison from jQuery Core Team:
To be clear, we understand what's causing this. We recently made ready
handlers fire asynchronously. This has advantages that are hard to
give up. The disadvantage is that the ready handler can sometimes fire
after the load event if the load event fires quickly enough. The side
effect you're seeing in this issue is that you're binding a load event
handler after the load event has already fired.
The fix is to bind the load outside of ready:
This is how the functions should be called:
$(function() {
// Things that need to happen when the document is ready
});
$(window).on("load", function() {
// Things that need to happen after full load
});
You cannot expect that jQuery cross-browser implementation will work perfectly. There is no perfect software.
First, I suggest to use the plain
window.onload = function() {
// Your code here
};
and try if it works on your target browsers.
Second, You need to make effort to research and implement workarounds. If that works, post it here to help others.
I had to ditch jQuery for both, separate them, and use plain old JavaScript. This behaves uniformly across IE 11, Edge, Chrome, and Firefox.
document.addEventListener('DOMContentLoaded',function () {'do stuff'}
window.onload = function () {'then do this stuff'}
I know there are some similar question concerning this problem, however I none of the solutions could help me.
I am using AngularJS and want to detect the scroll event. I tried plenty of versions on how to get the event, however at most it fires when first loaded then never again.
My last code I tried was the following:
$($window).on('scroll', alert('scrolled'));
But I also tried this:
Jquery .on('scroll') not firing the event while scrolling
or just the simple JQuery .scroll() event
window.onscroll = function(ev) ...
and many more, but nothing works.
Can anyone tell my what I am doing wrong?
Update: I tried the directive stuff, this works perfectly fine with safari BUT however not with chrome. Whats going on?
Update2: It works with the chrome mobile view when using the shift key. Are there any restrictions on chrome to apple trackpad? WTF?
I would just use
$(window).scroll(function () { alert('scrolled') })
OR you could use
angular.element($window).bind("scroll", function(e) {
alert('scrolled')
})
there is no need for angular.element()
inject $window to your controller,
use the window.onscroll event
$window.onscroll = function (){
console.log('window was scrolled!');
};
I'm using jQuery 1.7.1
My keyup handler works fine, even though the setup is a little complicated. This is happening in an iframe overlay. The main page does
our.Catalog.makeViewer = function(id) {
var iframe = document.createElement('iframe');
iframe.setAttribute()... // src, id, name, etc. Exact same host and method
document.body.appendChild(iframe);
iframe.contentWindow.focus();
$('html, body').css('overflow', 'hidden');
}
our.Catalog.makeViewer('foo') // actually bound to a click hander
In the iframe <head> we have something like
our.Viewer = function(){
$(document).keyup(function(e){ doSomething() })
// and lots more, of course
}
$(function() {
new our.Viewer();
});
The browser displays the URL of the iframe. I get all the real keyups for the whole browser window which is fine, but for testing I want to be able to simulate keyups from JavaScript. However, whatever I try doesn't work. I've tried
$('body').trigger($.Event('keyup', {keycode: 40}))
$(document).trigger($.Event('keyup', {keycode: 40}))
$(document).keyup()
and none of them triggered my handler. Then I thought maybe the problem was that I'm using iframes, so I tried
$('#frameId').contents().find('body').trigger($.Event('keyup', {keycode: 40}))
Nope, that doesn't work either. I don't think it's any kind of permissions/security issue because $('#frameId').contents().find('body').addClass('test') works fine.
I hope I'm doing something stupid someone can easily correct. How can I simulate keyups from my JavaScript driver?
OK, the code recommended by the jQuery docs works from Selenium. Or at least the one-liner version:
$('body').trigger($.Event('keyup', {keycode: 40, which: 40}))
In my particular case I wasn't seeing it from Selenium because our handler checks e.which not e.keycode and e.which remained undefined until we set it explicitly. Maybe a bug in jQuery 1.7.1? Maybe due to an interaction between jQuery and Selenium? Anyway, setting e.which got the test passing.
On the other hand, getting stuff to work from a browser console was more challenging. From Firebug on Firefox I had to cd(frames[2]) to set the context to the iframe in question. No other way of accessing the iframe from another frame would let me trigger events, probably due to some kind of sandboxing. (I can access the iframe's DOM but not the iframe's jQuery.) In Chrome I have to select the iframe from the popup menu at the bottom of the console. In Safari I have to use
window.frames[2].$('body').trigger($.Event('keyup', {keycode: 40, which: 40}))
So as I expected, something relatively stupid, not setting the iframe context in the console and actually failing the test in Selenium for other reasons.
Thank you #Ian for trying.
try tihis
$(document).on("keyUp",function(){
//your logic
});
.trigger() only works with events binded with .on().
Try binding with:
$(document).on('keyup', function (e) {
doSomething(e.keyCode);
});
And testing with:
$(document).trigger($.Event("keyup", { keyCode: 40 }));
I have a jQuery code which works perfect on desktop browsers;
$("span#checkbox_err").mouseout(function () {
$("span#checkbox_err").fadeOut("slow");
});
But the same does not trigger on the iPad (as a result the checkbox_err is displayed on screen, but never hides)
How do I trigger the mouseout event on the iPad ?
Also I'll want to avoid using any additional library just to fix this small issue..
I HAVE A FOLLOW UP QUESTION
I am testing a page on iPad and am facing some issues implementing an equivalent of mouseout behavior..
So the issue is very simple to understand; 1. On my page, there is a checkbox on click (or rather touch), I want to show an errorMsg 2. On click/touch on anything other than the errorMsg, I want to hide the errorMsg
Below is the code I have written;
$(document).bind("touchstart",function(e){
if(e.target.id != "checkbox_err")
$("span#checkbox_err").fadeOut("slow");
});
}
$("input:checkbox").bind("touchstart",function(){
$("span#checkbox_err").fadeIn("fast");
});
Now the issue is when I click/touch on the checkbox, the errorMsg shows for a while and then it also hides it immediately (since target is not the errorMsg)
How do I fix this issue?
You could try .blur() instead of .mouseout()
Maybe because of bubbling?
It makes sense to me, the event will reach the underlying layer which is not the target.
So you have to stop eventPropagation:
$("input:checkbox").bind("touchstart",function(){
$("span#checkbox_err").fadeIn("fast");
event.stopPropagation.
});
Hope it helps ya.
Did you happen to find an alternative for mouseout? - which brought me here.
this example will surely help you ! http://jsfiddle.net/PzTcS/12/, It works well on iPad.
You could try with GestureEnd() event in ipad
I have a jQuery code which works perfect on desktop browsers;
$("span#checkbox_err").mouseout(function () {
$("span#checkbox_err").fadeOut("slow");
});
But the same does not trigger on the iPad (as a result the checkbox_err is displayed on screen, but never hides)
How do I trigger the mouseout event on the iPad ?
Also I'll want to avoid using any additional library just to fix this small issue..
I HAVE A FOLLOW UP QUESTION
I am testing a page on iPad and am facing some issues implementing an equivalent of mouseout behavior..
So the issue is very simple to understand; 1. On my page, there is a checkbox on click (or rather touch), I want to show an errorMsg 2. On click/touch on anything other than the errorMsg, I want to hide the errorMsg
Below is the code I have written;
$(document).bind("touchstart",function(e){
if(e.target.id != "checkbox_err")
$("span#checkbox_err").fadeOut("slow");
});
}
$("input:checkbox").bind("touchstart",function(){
$("span#checkbox_err").fadeIn("fast");
});
Now the issue is when I click/touch on the checkbox, the errorMsg shows for a while and then it also hides it immediately (since target is not the errorMsg)
How do I fix this issue?
You could try .blur() instead of .mouseout()
Maybe because of bubbling?
It makes sense to me, the event will reach the underlying layer which is not the target.
So you have to stop eventPropagation:
$("input:checkbox").bind("touchstart",function(){
$("span#checkbox_err").fadeIn("fast");
event.stopPropagation.
});
Hope it helps ya.
Did you happen to find an alternative for mouseout? - which brought me here.
this example will surely help you ! http://jsfiddle.net/PzTcS/12/, It works well on iPad.
You could try with GestureEnd() event in ipad