In a phonegap app that is almost finished, I dynamically insert elements into the dom while scrolling. For this I use the 'touchmove' and 'scroll' callbacks. The problem I'm currently facing, is that the dom only updates after the scrolling has finished. After doing some research, I now think the cause is that phonegap doesn't update the dom after scrolling has finished.
Has any of you faced this problem themselves, and found a solution for it?
Update
The result of my tests was that javascript is not updated at all while scrolling. I would like to know why this is, and what a good way would be to execute javascript and update the dom while scrolling. If you can think of another way to update elements when the viewport is near them, that would also be fine. At the moment everything updates when the user stops scrolling, but if the user doesn't, he meets 'empty' page space.
Request for scroll detection code
This is what I currently use to detect scrolling.
document.addEventListener("touchmove", callback, false); // This works on android, but on iOS the callback is called when scrolling stops. Usually multiple times, because they stack while scrolling and not being executed. I see the event being executed during touchmove, but when the viewport begins moving, the callbacks pause until after the scrolling ends.
document.addEventListener("scroll", callback, false); // This is only executed once, and only when scrolling has fully stopped; the viewport is not moving anymore. On android this is executed all the time during scrolling, which is good.
The combination of updating only during touchmove, and another time when scrolling has stopped would be sufficient. The chance that the user scrolls so fast(after the touchmove) that he meets empty space is very small. The problem is the touchmove event callback is not executed during scrolling.
I would recommend taking a look at iScroll, which can give you a lot of control over user scrolling.
It can register when a user has scrolled to a certain point and then you can execute a function to load more DOM elements, then instantly refresh the scroll to continue the user experience with the updated elements.
Related
I have implemented a Scroll box that dynamically adds TCharts dependent on the number of channels available on an input device. The charts repaint on a loop to show the value of the voltage through the channel, so that the display outputs effectively a "real-time" view of the voltages being applied to each channel.
Currently I have an Application.ProcessMessages function to prevent the application becoming unresponsive during a run, but I would like to be able to scroll through the box whilst the channels are being displayed, without disturbing the display, which currently pauses whilst the scroll bar is clicked.
Is this possible?
Yes, this is possible.
The charts repaint on a loop ...
Repaints driven by an own loop indeed ensures respiratory distres on the system, which exactly is the reason for the need of Application.ProcessMessages. Try not to use it. Instead, you should just ask the charts to repaint themselves with Invalidate when new data comes in, and let the system decide when it is convenient to do so.
I'm facing an issue with IOS and ionic, if anyone can help with any information about this issue, feel free to share, please.
obs: i'm not using ion-content or any other ionic directive.
THE BUG: i have a form with a lot of inputs.
when the keyboard is open and i click in an input that is not in the middle of the view and is not focused, this input is scrolled to the middle of the view, but then this same input loses the focus and the view is scrolled to the next input that doesn't have focus.
I have tried this workarounds below but no success:
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true); // <- this code is disabling all the app scroll
$ionicConfigProvider.scrolling.jsScrolling(true);
Another observation: I put an event listener in all the scroll events in the body, html and window, but this scroll event that happened when input get focus doesn't fire the listener.
I finally find some solution. the mobile devices wait 300ms after the touchend event to then fire the click event, the ionic has an implementation to fix this 300ms delay, and it is made by firing the click event in the touchend event without wait the 300ms and preventing the device to fire the click event after the 300ms. and i think ionic failed to prevent the device to fire the click, causing a ghost click.
the way i solved this: add data-tap-disabled="true" in the elements you don't want to use this 'delay fix' by ionic and the element will respect the normal way to do this, waiting the 300ms then firing the click.
I've noticed that when I have long list elements in JQuery Mobile and I try to scroll them, I accidentally select an element. Overall the act of scrolling tends to get confused with tapping.
I did some comparison to a native iOS list and here is the difference:
In JQueryMobile, as long as you do a MouseDown and MouseUp on an element, it is considered a click. It doesn't matter if you've scrolled inbetween the events.
In iOS, if you do a MouseDown on an element and then scroll at all, the MouseDown is effectively canceled. This allows you to tap on something, scroll the page up and release without it being considered a click.
Has anyone noticed this and/or developed a patch for it? If not, any suggestions on a fix?
So my problem is that I have a TJvDocServerForm with an image inside, now all functionality works when its pinned, however when its unpinned and I try to use the mousewheel to zoom, the form hides straight after the zoom operation.
The zoom works through a scrollboxmousewheel event that triggers a
timer.
The timer then redraws the larger/smaller image through my own
image class when movement on the mousewheel has stopped.
Through break points it appears the draw is causing the form to
hide.
I believe this has got something to do with the focus being lost, however resetting the focus back to he form directly after the draw does not stop the hide as it has already been told to hide.
Is there a way to somehow lock the form from hiding until after the image has been redrawn?
This functionality (the unpinning thing) is rarely used. This code is extremely complex, and changing it is not recommended unless you like causing regressions. How common is the combination of mouse wheel + unpinning? So rare, I'd let it go, if I were you. If you can live without the unpin feature at all, just change dock styles. Personally I hate the unpinned state and I use a dock style that doesn't even support it. The unpinned "zoom away" animation may be directly linked to the focus-loss. You could store that state, wait until the next time through the message loop and then trigger the animation, if you wanted to, but even I, who have done lots of work in JvDocking source code, would be hesitant to try it.
I am developing a Phonegap app for the major os platforms and am currently testing it on an iPad with iOS 5. Im using jquery mobile. So for large screens i've used the splitview jquery mobile plugin. http://asyraf9.github.com/jquery-mobile/
I've put a
$scrollArea.css('overflow-y','auto');
$scrollArea.css('-webkit-overflow-scrolling','touch');
to make the page scroll instead of using iscroll like the plugin was using. Now whats happening, is that the page isn't loading/repainting as the user scrolls. I have a list of 100 items and i scroll through them. The scrolling itself isn't slow, but it takes almost a full second for the new list view rows to pop into view after it has been scrolled. Before that it's a blank area.
On observing, i can see that the the list items don't pop into view until the scrolling has come to a halt. (momentum scroll)
A similar issue is here http://forum.jquery.com/topic/help-with-slow-list-view-scrolling-on-ipad-when-scrolling-in-an-overflow-auto-div
What can i do to make this work normally?? The same thing works fine on android tabs. pls help.
EDIT: If i use only
$scrollArea.css('overflow-y','auto');
then i dont face this issue of momentary blank areas after scrolling, but then the scrolling is painfully slow.
Please don't suggest using iScroll. Already tried that. its much much slower that what i get with -webkit-overflow-scrolling, and i cant use it.
My Approach
So, I tried a lot and I read even more about this problem. I ended up with a solution which is "OK" to me (because it works), but which is definitely not near to "perfect".
When using this CSS:
.container {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
you run into a lot of problems when having a complex design (in my case a fullscreen background image), and it gets even worse, when using absolute positioned elements and iframes. (Which is - of course - both the case I needed).
So, what did the trick? Basicly this CSS:
.container > * {
-webkit-transform: translate3d(0,0,0);
}
With this rule the content was almost all the time rendered right away without getting those blank areas. Only when scrolling down the first time very fast it's a little flickering.
But be careful with the rule -webkit-transform: translate3d(0,0,0);. Using this rule heavily on many child elements forced Safari to: sometimes slow down but almost all the time to crash. The best thing is to wrap all content elements into a single div, works fine.
Done? Not really. There is still the iframe-issue: ("argh")
iframe
When the iframe is not fully in the visible part of the container at the start it gets cropped or is not even displayed at all. This could sometimes also occur when scrolling around. So, I tried to force Safari to re-render this part anytime scrolling is completed and came up with this:
//using jQuery
var container = $('#container');
var iframe = $('#iframe');
container.scroll( function (event) {
iframe.css( 'marginLeft', 1 );
setTimeout( function() {
iframe.css ( 'marginLeft', 0 );
}, 1 );
});
The thing with the scroll event on a touch device is, that it's only triggered when the scrolling has come to an end, so this function is not fired at anytime but when the momentum has come to an end. The short movement is actually not visible.
So, maybe this is helpful for somebody.
Further information
Here a few more links on this issue:
On how the scroll event is fired in iOS:
javascript scroll event for iPhone/iPad?
Bug report of this problem to Apple:
https://stackoverflow.com/a/7893031/1456376
iframe example with the same problem:
https://stackoverflow.com/a/8275972/1456376
We have used the plugin below in our project, did you try this one out?
https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview
On iOS it uses hardware acceleration to render the scrolling. It is rather easy to use, all you have to do is to assign an additional class to your div.
We did have some issues on Android 2 with this plugin, to overcome those issues we changed the scrollMethod property in jquery.mobile.scrollview.js.
I hope it helps you solve your scrolling problem