I have an instant chat program I've created with HTML5/CSS, Asynch. Javascript and PHP. I have an interval that is constantly checking the user's chat box div is scrolled to the bottom for user convenience. This became a problem when a user wished to scroll up to view previous messages so I tried the onscroll event to stop the interval. I couldn't get this to work and so have gone the longer way around by using the onmouseover and onmouseout events to start and stop the interval.
This works perfectly fine for desktop computers as they have a visible mouse. For mobile devices however, such as my Windows phone - which the program is primarily designed for, there is an issue as you first have to tap the message box (presumably to first move the invisible mobile mouse over the chat box) and then scroll with the finger movement to scroll unaffected.
This isn't a major problem as I could inform mobile users to first tap then scroll, but I feel that successfully using the onscroll event would match the usability with desktop users.
Are there known issues with the onscroll event? I dare say I'm familiar with JS events and can use them appropriately, but this is the only event I haven't managed to get to work, in FF or IE.
Any thoughts or help would be appreciated,
Lee.
Here are the current events that manage the scrollcheck on/off, where ScrollCheck() is the function that checks the scroll position and moves it if not at the bottom and scrollInterval is the global var that holds the id of the interval.
document.getElementById('messages').onmouseover = function()
{
clearInterval(scrollInterval);
}
document.getElementById('messages').onmouseout = function()
{
scrollInterval = setInterval(ScrollCheck, 300);
}
I simply replaced the onmouseover event to onscroll without any luck.
When I make a chat page, I only check the scroll when new messages are added:
var currentScroll = elem.scrollTop, oldmaxScroll = elem.scrollHeight-elem.clientHeight;
// add new message(s) here
var newmaxScroll = elem.scrollHeight-elem.clientHeight;
if( currentScroll == oldmaxScroll) elem.scrollTop = newmaxScroll;
Related
I make web-apps that often resize themselves according to the window via (lately) CSS transforms.
For desktop PCs, it's not a big deal.. I just run my resize test code every 50ms, checking the window.innerWidth and window.innerHeight. (I don't use the 'resize' event here because when a user resizes the window, the event is run potentially too quickly/too many times..)
On phones, I use both a "resize" and "orientationchange" event. Resize events are sometimes need because of various Android (Chrome/webview)/iOS bugs. Works well.
The problem: as we all know, currently there is no way to explicitly detect a few different phone-only events, like the virtual keyboard popping in and out. Thus, when a keyboard pops up, this triggers the resize event, which triggers my resize routine and causes the app window to get really really small.
"Thus, when a keyboard pops up, this triggers the resize event, which triggers my resize routine and causes the app window to get really really small."
One way to fix this is to detect for blur and focus on text/password inputs.
Sub-problem: we also need to guard against the possibility that the user will re-orient their device while the keyboard is visible -- thus sending incorrect data to the resize routine. This can be handled by blurring the input when an orientationchange event occurs.
Example code:
if (gs.is_phone_or_tablet) {
window.keyboard_is_visible = false
$(document.body).on('focus', 'input[type="text"], input[type="password"]', function () {window.keyboard_is_visible = true})
$(document.body).on('blur' , 'input[type="text"], input[type="password"]', function () {window.keyboard_is_visible = false})
var hide_keyboard = function () {
if (document.activeElement == document.body) return
document.activeElement.blur ()
window.keyboard_is_visible = false
}
//window.addEventListener('resize' , hide_keyboard) // <-- for Webview <= 4.3 only..
window.addEventListener('orientationchange', hide_keyboard)
}
I'm trying to figure how to trigger an jquery animation when the user scrolls to the middle of the page. Is there a way to set a listener to see if the person scrolls halfway down the page it activates the jquery code?
Using jQuery, you can attach an event handler to the scroll event, which will let you listen to whenever the window is scrolled and determine whether the user has scrolled the appropriate amount.
$(window).scroll(function () {
if (($(window).scrollTop()) > ($(document).height() / 2)) {
// Run animation here
}
});
http://jsfiddle.net/ult_combo/XdqPJ/1/
Think so.. you can look at checking parts of the page using;
setInterval(name_Of_Function,1000);
runs every second, then run a check on there is;
window.pageYOffset // Gives you current horizontal window scroll position for the page.
Firebug is helpful to get more information on these functions. Remember to check in all major browsers as the implementation or values returned may be slightly different between different browsers.
Good reference page I found;
http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html
Is there a way to set a listener to see if the person scrolls halfway
down the page it activates the jquery code?
You can get the amount that the user has scrolled with the following:
$("html,body").scrollTop();
so, to trigger an event halfway down the page:
if (($("html,body").scrollTop()) > ($("html,body").height() / 2))
{
// Code that will be triggered
}
You would need a timer to constantly be checking this. You can use setInterval() in Javascript to repeatedly execute a function to check this.
http://api.jquery.com/scrollTop/
Is there a js method to detect when a vertical flick on a long iOS safari page has stopped moving, such as an equivalent to the pseudo:
window.element.momentumScroll == false
This is to detect if the decelerating content is still moving or the scroll event has finished.
Any and all clues gratefully received.
ADDENDUM I have not implemented any external libraries in my code (no jQuery etc) and need to find a native js listener/method to tell me when the flick scroll has ended.
doc.addeventlistener("scroll", function(e){setvariable to 1}, false)
doc.addeventlistener("noscroll", function(e){setvariable to 0}, false)
Method:
startTop = window.pageYOffset on touchStart
currTop = window.pageYOffset on touchEnd
deltaTop = startTop - currTop
deltaTop == 0 means no momentum scrolling occurred during another event.
I'm not sure if I understood the question correctly. I believe u are trying to achieve something like loading new content when the page reaches its bottom? (forgive me for assuming)
I think you are looking for some javascript gesture library, if your event is based on touches.
There are Mootools library on this
Powertools: http://cpojer.net/PowerTools/#!
Drag.Flick: http://mootools.net/forge/p/drag_flick
There should be equal implementation in other framework as well. (jQuery: http://jgestures.codeplex.com/)
Possible solution is to look for an event that can return the current position of touches that exceeds document.body.clientHeight (read: not cross platform) .
Hope I manage to point to the right way.
just do a setTimeout in the touchend event. The timeout will fire once the touchend has stopped working. Timers get paused during touch event. On ios set timeout will fire once the page has stopped scrolling and there is no longer momentum.
body.addeventlistener("ontouchend", function(e){
setTimeout(function(){
alert("done moving")
},0);
}, false);
or
$('body').on('touchend.scroll', function () {
setTimeout(function(){
alert("done moving")
},0);
});
Note that Android will fire the event as soon as you let your finger go. Timers dont seem to be paused.
Within my Firefox extension I'm trying to keep track when the window is actually the active window. For this, I add the following two listener to the window:
window.addEventListener("deactivate", function(event) { alert("deactivate"); }, false);
window.addEventListener("activate", function(event) { alert("activate"); }, false);
Basically everything works fine. When I toggle between different windows, or minimize/maximize Firefox, the events fire quite as I would expect it. However, both events also fired when I move the window even if it is already active. When I start moving the window, the "deactivate" event is fired; when I stop moving and release the mouse button, the "activate" event is fired. I have no idea how can I detect and ignore this behavior. Intuitively, the window is all the time active.
I tried to check before I handle the "deactivate" event if the mouse button is pressed. However, adding a "click" event listener to the window seem not to include the window's title bar. Anyone any idea how I can distinguish beween "really" de-/activating the window and moving the window? Thanks a lot in advance!
You can use this answer to detect the browser position on the screen. If you do this at the start you can compare if they are changing.
Something like when the page loads:
var x,
y,
win = window;
if(win.screenTop !== undefined) {
x = win.screenleft;
y = win.screenTop;
} else {
x = win.screenX;
y = win.screenY
}
and compare those values to the current values when your events triggers.
(Note that this only works when the position of the window changes)
I am scrolling an overflowing DIV's content by changing the scrollLeft property in Javascript:
setInterval(function(){
$('#scrollbox').scrollLeft($('#scrollbox').scrollLeft()+1);
}, 50);
However, I want to stop this as soon as the user scrolls the content themselves, using the mouse. I tried to detect this using the scroll event
$('#scrollbox').scroll(function(){...});
however, my automatic scrolling above also triggers that event. How can I distinguish this and only react to user-initiated scrolling? (or: how can I stop the above code from firing a scroll event? That would also do the trick)
You could use the .hover(): function to stop the scrolling when the mouse is over the scrollbox element:
http://jsfiddle.net/bGHAH/1/
setInterval(function(){
if(!mouseover)
{
$('#scrollbox').scrollLeft($('#scrollbox').scrollLeft()+1);
}
}, 50);
var mouseover = false;
$('#scrollbox').hover(function(){
mouseover = true;
},function(){
mouseover = false;
});
Edit
Based on your comments I managed to find a jquery plugin from the following site: special scroll events for jquery.
This plugin contains an event which attempts to determine whether scrolling has stopped based on the period of time that has elapsed between the last scroll step and the time the check was made.
To get this to work I needed to slow your interval to just over the latency used by the plugin which worked out to be 310 milliseconds. Doing this meant I had to increase the scroll step to keep it visibly moving.
Here is the link:
http://jsfiddle.net/EWACn/1/
and here is the code:
var stopAutoScroll = false;
$(document).ready(function(){
setInterval(function(){
if(!stopAutoScroll)
{
$('#status').html('scrolling');
$('#scrollbox').scrollLeft($('#scrollbox').scrollLeft()+10);
}else{
$('#status').html('not scrolling');
}
}, 310);
$('#scrollbox').bind('scrollstart', function(e){
stopAutoScroll = true;
});
$('#scrollbox').bind('scrollstop', function(e){
stopAutoScroll = false;
});
});
Hope this helps.
For FF (Mozilla):
document.addEventListener('DOMMouseScroll', handler, false);
For IE, Opera and Chrome:
document.onmousewheel = handler;
Another option is to have an external flag that you can set prior to the programmatic scrolling, and then reset afterwords. If the scroll event is fired and this flag isn't set you know that the user is responsible and can act accordingly.
Unfortunately while this is browser independent and easy to read it could lead you to believe that some user scrolls are programmatic ones. However I would think the occurrences of this is small and may be worth it depending on the app you are writing.
Try wheel event, for most modern browsers
The wheel event is fired when a wheel button of a pointing device (usually a mouse) is rotated.