Basically, I have a web page which is a div inside a div. Let's say that div 1 (the container) is 500px high. Div 2 is 100px high inside of that container. What I want to do is detect the user touching div 2 on the screen (this is a web page on a mobile phone) and as they drag up/down, the div moves with them. I've done some research and have seen this being done using matrix3d and transform y in CSS 3 (but I can't find a good explanation for someone with little experience with this sort of thing such as myself). I want it so that, let's say, the user drags the second div to the bottom and some of the content goes outside of the container div. I don't want it to scroll down, I do want it to disappear... BUT I want it to kind of 'bounce' back into view. So here's the breakdown.
user presses the screen
user drags div 2 which is inside of div 1. As they drag the div, it moves in the direction of their drag.
the user can drag the div right to the top/bottom. If they drag it outside of the container div, that's fine. The container div should not resize or become scrollable and part of div 2 should disappear from view.
when the user releases the drag, the div should bounce back into position. Let's say, if it is dragged too high up, it bounces back to position 100, 100. If it's dragged too far down then it bounces back to 100, 500 (I figure the bounce can be controlled by a CSS transition).
So, does anyone have an example that I can look at to see this in action or a tutorial that will help me understand how I can achieve this? I apologise for not providing any code as a basis to start from, but in truth, I don't really know where to start myself.
Any help is greatly appreciated.
The safari dev docs are your friend:
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
Checkout the the touch move section for moving a div, for your case you want to set conditionals for if the user goes outside the bounds of your outer div, and disable scrolling using overflow hidden.
Related
I wasn't able to find any events to hook into for this - I want to take control over the scroll distance when the user does things like moving the mouse wheel, clicking a scroll button (up or down), clicking the empty space of a scroll bar, etc.
For example, if I have a list of things, and each row is 16px tall, how would I be able to force it to scroll 16 pixels for single scroll events (i.e. mouse wheel up/down, or clicking the scroll button, if one exists)? And then, if scrolling by clicking the empty scroll bar, how can I ensure it scrolls by a fixed amount, so when it's done scrolling, it would be perfectly aligned? The best example I can give is how it behaves in Excel. Provided you have the scroll lines to be set to 1 line in settings, scrolling up or down will move one row at a time. Clicking the empty part of the scroll bar moves down exactly to the next not-fully-visible row.
My research, up until now, indicates I'll be using the .scroll() function (at least if I'm using jQuery), but I'm completely stumped at the plan of attack, even moreso because I'm unable to find any way to differentiate between a mouse wheel scroll, button scroll, or scrollbar jump (or whatever the terms would be).
Is there also a way to restrict this in CSS, avoiding any JavaScript at all?
To achieve this, you need to use scroll-snap-type, as stated by DM in the comments.
You'd set the parent div to have scroll-snap-type: y mandatory;, and it's immediate children elements would have scroll-snap-align: top (or bottom)! This should allow rows to be viewed perfectly, provided the containing element is an appropriate size (and assuming each child element is a known fixed size).
First i would describe what I'm trying to achieve:
Basically I have a simple scrollable div as a container. But once it is scrolled to the top, I want the entire div to be pan-able (eg. to swipe the container down) - when i attempt to swipe it down. But I want to retain the scrolling in the case that I swipe it upwards (scrolling downwards), it scrolls normally downwards. Check out Facebook's container element when it opens a container on their app.
I am currently using a simple div with panning from Hammer and a scrollable div, but i encounter a problem:
Once I allow the entire div to be pannable, I cannot scroll the div now.
Hence, I cannot detect whether a user is attempting to swipe down or up the div to pan and scroll the div respectively.
I am wondering what are some suggestions to approach this conflicting issue! Thank you!
I'm trying to make a simple Chrome Extension that allows you to loop a section of a YouTube video. I'm able to put the button, I have all the logic behind it finished, styling etc except one thing. The buttons on the YouTube videos control panel, "Play" button, etc, are aligned in the middle of the control panels horizontal axis. However, my button sits at the bottom of it.
And the only way I'm able to make it have the same alignment as the other buttons is to set it's bottom to 13px. Of course this is a static value and won't work on different screen resolutions and when the video goes fullscreen.
I just want to know a way to make it centered along the horizontal axis like the other buttons. Any help would be much appreciated. Thanks.
You can use percentages like bottom:5% instead of bottom:13px to position the bottom relatively to its parent container. The button will change it's distance from the bottom with resolution change but will keep the same ratio of 5% relative to it's container height the whole time.
i notice there's this functionality on 9gag.com. on the homepage, the 'Y u no signup' button is on the right. but as you scroll down, the button is hooked onto the header banner. how is this done?? this can be also seen on this very page whereby the yellow panel(similar Questions) on the right freeze when u scroll this page down. in facebook timeline, as you scroll down there will be a absolute div which appear on the top which contain options for timeline, now, status, photo, place and event.
r they using javascript or is this something new in html5??
when the user scrolls down the computer checks for the amount scrolled.Let's say you scroll down with 50 px .The computer checks if the scroll distance is equal or bigger than 50.
If so then it will display that new Y u no Signup?!
and then if the scroll distance is smaller than 50 the top button simply isn't displayed anymore.
No this is simple HTML, or rather CSS. Use position: fixed;. See - here. You can check my site too for example.
Here is a near duplicate question: How does economist.com implement their sticky header? jQuery?
The answer is that you use javascript to detect scrolling, and change the css of the div you want to move to position:fixed after a certain amount of scrolling.
Ok, so I've created a little plugin that takes a bunch of elements and creates a sort of never ending list. I'll try to explain...
I have a div, and it's got about 20 elements tags in it. When the user scrolls up, the top element moves out of view and is moved to the bottom of the list. And vice-versa so that when the user scrolls down, the bottom element is moved to the top of the list.
This is specifically for Mobile Safari (iPad, iPhone) web content
What I would like to do is implement inertia so the scrolling slows to a halt in response to how fast or slow the user is scrolling when their finger leaves the screen. Just like the inertia commonly found in the iPhone / iPad UI.
The problem is, every time an element moves to the top or the bottom of the list, the scollTop value for the parent div is adjusted to make it look like all the elements are staying in the same place. Which means the scrollTop value is never more than the top elements total height. So there's no value I can think of that I can keep on manipulating to give the illusion of inertia.
I'm stumped. Does anyone have any suggestions?
iScroll implements scrolling with inertia, but I'm not sure how it would react to you adding and removing elements mid-scroll. Might be worth looking into though.