Remember pac-man where you go off the side of the screen and appear on the opposite side? This represents a spherical map represented in 2D.
I'm trying to get the same behavior for a "flat" webpage, so when the user scrolls down, the entire webpage, text, images, etc, moves with the scroll. When it reaches the bottom of the webpage, the "top" of the webpage comes in to view from the bottom, like pac-man.
The same would happen side-to-side or left-to-right, except instead of using the mouse wheel, they would hold down the middle mouse button and move the mouse left and right to pan side-to-side.
How to get the hotkeys to work doesn't concern me, I'm just looking for the "spherical panning" behavior, based on user control of the mouse or keyboard, not a predefined animation or movie.
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).
I'm creating a mapping app that places a marker image on a canvas and scrolls to it. I'm using the browser's pinch zooming and scrolling to zoom in/out of the map. However, I've noticed that there's some bizarre behavior, and I'm wondering how to get around it.
This is a little tough to explain, but here we go.
Let's imagine that you're at the standard zoom level on a webpage (you can't zoom out any further). Let's imagine that the area your browser window is showing is the "invisible box". There's some stuff you can see, and some stuff that's out of view (that you need to scroll to get to). Once you pinch-zoom in, the browser still pretends that your viewport is still at 100% zoom (i.e. Your browser is essentially cropping into that invisible box, but the invisible box stays in the same place.) Any JS on the page sees the scroll position as the same, no matter where you pan around within the invisible box. However, once you scroll to the edge, you start to push the edges of the invisible box. If you use JS to set the scroll position (window.scrollTo(xPos, yPos)), it sets the position of the invisible box, but the portion of the invisible box you see is still relative. This means that if you set the scroll position to (0,0) and your cropped-in view is not at the precise top left of the invisible box, the portion you see will NOT be at (0,0).
The issue I'm having is that I need to move the zoomed-in view to a specific spot. Since setting the position of the invisible box isn't really working, is there a way to force the browser to get rid of the invisible box, pinch-zoom all the way out, or maybe detect where the zoomed-in portion is within the invisible box? I'm stumped.
I have a menu box that contains a few links to pages. I'd like it so that if the user "bumps" it with their cursor, the box reacts and jerks slightly (swings in direction mouse 'pushed' it) and then swings back and forth until it comes to a stop. The menu is in a div, and I need the contents to stay in their relative position to the menu (though rotating with it I guess).
How can I accomplish this using Javascript? Preferably not CSS.
How can I accomplish this using Javascript?
You need a function that listens for mouse movements and reports its position. It then compares the cursor position to the positional bounds of the menu. If its within your thresholds you would then reposition/rotate the menu relative to the cursor's approach vector.
How about using jQuery Bounce? There is a similar question here: JQuery UI bounce effect - bounce only once on entering div that might help.
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.
I'm building a joke microsite for a company. They want a feature where the mouse cursor will randomly change position when the user hovers over a certain image.
Is this possible in Javascript? How would I implement it?
Thanks!
You can't... but you can - in a way.
What you can do to mimic this behavior is that you can hide the actual cursor with css cursor: none and then create an image representing the cursor which would look the same and would be placed in position of the real cursor. Then whe user would move the mouse you'd have to update the position of the cursor image and apply your random position changes as you wish - though be aware that when user will scroll outside of the browser content window (on the controls or outside the browser) they will get their mouse cursor back to real position and your cursor will be stuck in its last position.
The only way you could pull this prank out. Good luck with it and hope they'll enjoy it ;)
PS.
inverting the mouse movement direction can be funny as well :>
You can't move the mouse cursor.
You can move the page or the image relative to the position of the cursor, which might make it look like the cursor moved when it didn't?
You can change your cursor with invisible custom icon, and then make a fake cursor and move it.