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!');
};
Related
I've been making some basic mobile navigation and am using a click event to show/hide the menu.
A reduced code sample:
jQuery('.menu-button').click(function(){
jQuery('.header-nav').toggle();
console.log('clicked');
});
I've been remotely debugging on mobile and the console.log always works, but the .header-nav toggle() seems to randomly not trigger - I can't spot a pattern to it, but it always remains in the DOM (which it should), so it being somehow removed is not the reason why it is not firing.
Any ideas?
Thanks to Kevin B's comment it seems that the click event is firing multiple times. To fix this, the following was used:
$(element).off().on('click', function() {
// function body
});
Reference: jQuery click events firing multiple times
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 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.
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