I am designing a code snippet which will allow the user to scroll the items inside a div. Its more of a spinning wheel / slot machine. I know an existing solution for iPhone / iPod, but I wanted to have a simple stripped down code.
I have not used any images, and I believe this would involve CSS3 animations.
So far here is my code in jsbin. I have tried binding the touchmove event using jquery, but the alert is not popping up?
My main aim is to enable the user to scroll / swipe Up & down the items inside the div, without making the page scroll up and down. Any suggestion / edits to the code are appreciated.
My intended use for this is for mobile devices (iPhone / Android)
Thanks in advance.
you've almost been on the right side:
http://cubiq.org/iscroll-4
try iScroll.
only limitation that i encountered during my test was that you have to wrap your code in a list (ul) - though that could have been my bad
I think what you are looking for can be achieved by simply using the deafult behavior on IOS Safari (iPhone/iPad)
Just give some fixed height to the container div with overflow
e.g.
<div id="container" style="height:400px;overflow:auto">
Your content
</div>
It would scroll using 2-fingers on versions prior to IOS5 and with a single-finger move for IOS5 and later..
Related
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
In the project I currently work on we experience very strange rendering issue. The worst thing is that this issue emerges completely spontaneously and after several days of testing we haven't managed to find the sequence of actions wich would reproduce this issue. Here is an explanation of how this bug look like. Here is a screenshot of how the page should look like:
But instead of this after some manipulations content block pops up so only the part of the content is visible and its look like:
The most strange thing is that such a position of the block is not based on values of CSS properties as shown by Web Inspector.
As you can see the CSS properties are ok, while the position of the block is not. This fact suggest me that it could be some rendering bug of the WebKit engine
The project is built using Ext JS 3.4 and it is a classical one-page web application. This issue was seen in the last versions of Chrome and Safari on Mac OS 10.7/10.8. Though due to the spontaneous nature of this issue it might be present in other browsers and platforms too.
Any piece of advice on how to debug such issues or how it could arise is welcome.
Please check if any of your code or Ext JS's code is using scrollIntoView method, we have seen similar issue when scrollIntoView is called on any element that does not have overflow set to auto and it is inside an clipped element that is probably placed relatively positioned.
It seems bug in webkit because it scrolls clipped element which is not happening in other browsers.
I also see two elements in same hierarchy which has overflow set to auto. And scrollIntoView is scrolling wrong element.
Chrome and safari on Mac are having problems with scrolling. If the element has been scrolled and the content changes, the scroll position is kept even if the content is not high enough to require a scrolling.
The work around we have found in our application is to resize the container (the one that has the scroll) so that it has the scrollbar (or else you cannot play with the scrolling properties) and then reset the scrolling, and the height.
$(container).css('height',1).scrollTop('1').css('height','');
Here is how we do it in jQuery. You will not even see a flickering :)
I am not sure if it is the problem, but this thing kept us on our feet for a while.
i went through the same problem while working with a sencha touch 2 app and because thats same as ExtJS i have a solution for you
this probably is a bug in the framework and this happens when the ExtJS renders the application before the browser populates mayb the correct window.innerWidth and window.innerHeight and thus the viewport cannot take the correct width and height. this also explains the randomness of the event. This becomes more prominent when used on mobiles probably because of the limited resources and slow response.
the solution that i took to handle this mayb isnt a good one but i couldnt find a better one considering is a glitch in the framework itself
i poll for the correct height and width of the browser for around a sec after every say 100ms for the correct height and width of the window and if i find that the height OR width of the viewport isnt same i re adjust it. because you are working with ExtJS and app would run on high powered systems(as compared to mobile phones) i would recommend a smaller interval and then to be safe a larger time period to which it polls.
heres the code that i use currently edit according to your needs
var aId = setInterval(function () {
if (Ext.Viewport.getWidth() !== window.innerWidth || Ext.Viewport.getHeight() !== window.innerHeight) {
Ext.Viewport.setSize(window.innerWidth, window.innerHeight);
clearInterval(aId);
}
num = num + 1;
if (num > 10) {
clearInterval(aId);
}
}, 100)
i currently use this code inside the launch function of the app. but you can also use this inside the show event of the viewport for which you should keep the interval time to minimum possible to avoid any lags.
with this if you think this app might be used on devices where the window height and width would be changed by the user (like that of mobile browser when the orientation changes or if you think user would change the height and width of the browser window). then just copy & paste the same code piece inside the viewports resize event so that it also polls and resizes viewport when the size of the viewport changes.
Did you try adding a clear:both; block after the toolbar div ?
<div style="clear:both;"></div>
#bjornd it's pretty hard to debug without any code :)
Is the toolbar positioned and has the content an ID that's called in the URL?
In other words: is there some link (e.g.) that triggers #content and has no preventDefault() etc? This would scroll the page probably.
I dunno, this was the first thing that came to mind.
It could also be the toolbar content that is (for some reason) no longer cleared or some change in the content's top position (relative to another changed/removed element?)
Try and create a stripped-down test-case that contains the simplest of code but still triggers the bug. If you post that (through e.g. a Fiddle etc) we can have a proper look.
It might be a css issue;
I've had a similar issue using equal height divs by setting a padding-bottom: 99999px; and margin-bottom: -99999px;. Which workes fine in all cases, except when you use hashtag anchors to jump to a div further on the page. Jump down.
In that case the top of the page clipped and started with the div I wanted to see.
Since you say the problem is pretty hard to track, this might be something to have a look at. The solution was to remove these 2 css lines and use another method of setting div heights.
Before you say this isn't possible, I know it is. Here's an example: http://victoriabeckham.landrover.com/INT
The main problem is that iOS freezes DOM manipulation on scroll, so you have to use some sort of technique to overcome the problem. The parallax plugin I was hoping to use is stellar.js, but the issue I am running into is that the "iOS demo" for that plugin isn't really usable on a desktop. I fiddled with it for 3 hours this morning, and couldn't get a setup that works correctly on both iOS and desktop.
I need some ideas, either a technique to configure stellar.js to work the same way on both (I'm not sure if that's possible), or another library that works on both, or maybe some insight on how I could program a workaround myself.
Any help is appreciated.
Step 1: Create and object like this
{
startFrameNumber: {
//first obj
id: idOfElement
duration: howeverManyFrames
startLeft: whatever
endLeft: whatever
startTop: stillWhatever
endTop: whateverAgain
},
nextStartFrameNumber: {
}
}
Step 2: Make the page unscrollable via CSS, ie 100% height and width with and overflow: hidden
Step 3: When the user scrolls (via custom scrollbar, keyboard action, or touch events) advance the animation x frames based on how far they scrolled or whatever. If your animation object you created has a key [frame] then add that to the queue of things that are visible and moving, and move all those things in the queue to their appropriate places and/or remove them from the queue of active objects
That's it. The function for moving things around should be pretty straight forward, except getting the animations smooth will take a little playing around with.
Simply scroll each layer of parallax effect manually and control them yourself without relying on browser's page scrolling.
I've successfully implemented cross device/browser parallax scrolling with the help of the Zynga Scroller js library.
It takes care of one of your main concerns which is the interoperability of click and touch events and scrolling on mobile webkit devices – this allows you to manipulate the DOM as you scroll.
Then, to create the parallax effect you have three options:
Simulating a real-world 3d parallax by using 3d transforms (with a parent/wrapper element that controls perspective and transform origin).
Using a 2d parallax library such as stellar.js or skrollr
Building your own parallax scrolling algorithm.
Here's a quick demo (using existing sample code) of option 1 showing how smooth parallax scrolling would work across desktop and mobile devices. Of course, you're limited to devices that have support for 3d transforms. Note that the Zynga Scroller works via click/touch and drag – it should probably not be used as a dekstop solution as the only thing that would be required is overflow: scroll in CSS.
Have a look at the jQuery-Plugin "Scroll Path" http://joelb.me/scrollpath and combine this with different layers and speeds. You will have recognized that the scrolling of the example page is not just a vertical parallax stage but also moves layers horizontally while you scroll up and down. This is possible with Scroll Path.
Try using http://cubiq.org/iscroll-4 and stellar.js together.
Do your parallax stuff for desktop normally and then add a 'touchmove' Event Listener to fire the scroll event:
document.body.addEventListener('touchmove', function(){$window.scroll()}, true);
Tested and working on iPad 2 with iOs 5.1.1
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.
I did a lot of research about this topic and didn't yet find a satisfying answer:
How can I make a scrollable list (iPhone SDK Dashboard List) inside some other html content? If I create a list inside a html body and I try to scroll the whole page is scrolled. I know there is this "double finger" scrolling, but that's not what i want.
Is there some way to prevent the whole iPhone Safari Webpage from scrolling and instead letting other lists inside scroll? Like redirecting java script events?
Background: the idea is to mimic a real native application behavior with tabs at the bottom and a selection list in the body.
Appreciate any hints!
Thanks,
Patrick
there is yet another possibility, with slightly nicer scrolling simulation:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5
Ok, after consulting some friends, I found the answer to this question:
http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
have fun.
http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5
this is a really great script!! It's smaller than the doctyper version and easier to work with since it doesn't have so many elements being repositioned. It also allows contained elements to be touched easier by the user. and even cooler, when you touch into a text field and the close the type panel the divs being positioned by this script snap right back into place (where as the doctyper version just has them floating out of place after the type screen retracts).
A very nice script.
A new scrolling library to keep an eye on: Scrollability.