I am facing some bugs when i use scrollIntoView library in my code for an iPad. It is working on other devices like android but not on iPad. Eventually, if i remove that line of code, it doesn't through any errors. I need the scrollIntoView in for the following functionality-
I have a list of attributes(lets say list of accounts), when i click on any account that specific account should move to the top of the list( should not replace the position id's. Just scroll the view to the top with selected account in first). How can i achieve this with out using scrollIntoView?
I researched a bit on this but couldnt get a solution. I tried smoothscroll with polyfill but couldnt get it work. Any suggestions out there?
I followed the below post but of no luck :
Mobile Safari, scrollIntoView doesn't work
Related
Anyone use the FinestWebView API and set url to a page implementing the fullpage.js api? When testing the screen does one of these:
flickers
whitebox blocks most of screen
first slide is not visible unless you scroll down several times
At first I thought it might be an issue with my implementation of fullpage.js, but it doesn't even work if I set the url to fullpage.js demo page.
There are several ui manipulations in the FinestWebView API, which I suspect may be the culprit. I'm curious if anyone has encountered this, and if so, how to fix?
I have used the One Page Scroll Plugin on my website.Below is the plugin page
https://github.com/peachananr/onepage-scroll
The scroll works fine on desktops, but I am facing a problem on the ipad.
The swipe scroll on the ipad is scrolling 4 pages down when I scroll once on my website.
Please how do I fix this problem.
Well you have javascript DOM event object like :
ontouchcancel, ontouchend, ontouchmove and ontouchstart
which can make scroll effect.
Have in mind that jquery and etc are built on top of the javascript so the basically use similar functions.
Without the code or working platform provided by you... i can't really tell you anything but redirect you to w3schools.
w3schools javascript DOM Event Object
We are developing an app using Phonegap/Javascript.
Scrolling used to work fine, until we tried the new Android 5.
The page does not scroll down, unless you swipe many times. Then it is stuck in the other position..
Can't find anyone with this problem!
We are using just simple divs with content that is taller than the screen. Works fine on Android <5 or iOS.
Any ideas?
This is what finally solved the problem, along with simplifying properties, etc.:
Hammer.defaults.stop_browser_behavior.touchAction = 'pan-y';
It was an issue with the hammer.js plugin with touchAction property.
This affects some browsers - and apparently also Android 5 (but doesn't affect Android 4.* when using PhoneGap).
Not as simple as it seems, more details here:
https://github.com/hammerjs/hammer.js/wiki/How-to-fix-Chrome-35--and-IE10--scrolling-(touch-action)
I have a div, so that when I click, it will toggle to expand, or retract. It works pretty well on all browsers, though there is a thing that intrigues me. On Google Chrome when it retracts it leaves small lines from the movement.
www.rezoluz.com/login.php - The page
To see it, open that page with Google Chrome. And click on the register button twice, on the second time it will leave lines, normally, but not on other browsers. I'm using a standard .animate, with jquery. All help is greatly appreciated.
SCREENSHOT:
Also, here is a jsfiddle showing the result : http://jsfiddle.net/rwQPu/2/ . Error in Chrome 21.0.1180.81 beta-m Win7.
It's a bug of chrome. See a previously asked question here :
Odd “shaking” effect when animating width with jQuery (only in Chrome!)
This is not a coding problem but actually a bug in certain versions of Google Chrome, as unlikely that may sound.
There is no fix as far a I know, we just need to wait for Google to resolve their problem, knowing Google that will be done from the moment they find out about it.
On iOS safari, one-finger panning doesn’t generate any events until the user stops panning. An onscroll event is only generated when the page stops moving and redrawn.
I need a way to detect real time scrolling. Specifically, I want to make a sticky menu that will also work on iOS safari. On non-mobile browsers, sticky menu can be done by switching between "position relative" to "position fixed" on the element while listening to the onscroll events. This method won't work on mobile browser because onscroll events are not continuously fired. What can I do?
Answering my own question. iOS7 now support position:sticky
Demo: http://html5-demos.appspot.com/static/css/sticky.html
I've recently spent many hours trying to come up with a practical solution for the same problem. There's no right way to do this, although there are a few decent hacks (most of them mentioned already). The problem is that JavaScript is paused while the user is scrolling. It makes sense when you consider the implications, but it makes it damn hard to implement fixed positioned element.
The best thing that I've been able to find is this wonderful post by the folks at Google. You can check out http://gmail.com in mobile safari to see it in action.
https://developers.google.com/mobile/articles/webapp_fixed_ui
Hope this helps.
I had a similar issue and bound handlers to touchstart/touchmove/touchend using jquery to detect the single finger scrolling and it worked perfectly. In my case I needed to move another element the same amount as the attempted move of another element and it updated nicely as the scroll was attempted so it ought to be suitable for your requirement.
If all you want is a sticky menu, you can save yourself some headaches by using an existing library. I've had success with iScroll:
http://cubiq.org/iscroll
At the very least, you can take a look at how this works and base your solution around that.
Happy hacking!
Old topic for sure, but I can see alot of visits here. If all you want, is a sticky menu, you can use fixed positioning. No need for iScroll there.