I am utilizing jQuery's draggable functionality. The viewport div is the entire window size. There is a draggable container div within the viewport which is much larger than the viewport itself giving the feel of looking through a window to see small portions of the container. The container holds object divs which are also draggable.
Currently, I have the container div dragging properly and I have the object divs dragging around the viewport div properly as well. The issue I am having is I want to "push" the viewport around if an object div comes within a particular pixel range of the edge of the viewport div.
JQuery's draggable function has a drag event which I have been trying to utilize on the objects. I can get the viewport to scroll but, it requires the mouse keep the object moving at all times to keep the scroll going. I am looking to have the object get within the pixel range and be able to not move the mouse but, still scroll. I am at a loss at the moment as I cannot seem to find any solution that really fits my requirements. Any help would be greatly appreciated and rewarded with my gratitude.
To see an example of what I am doing, please visit http://jsfiddle.net/trVZA/10/. When the red box is dragged, the black object will drag around. I have commented out my code on the drag event for the object as it will completely freeze the browser but, it is there for you to see my mistake. When the object gets close to a wall I want the background water image to scroll around.
Related
im a designer trying to prototype a unique scroll behavior. Please bear with me.
Here's a GIF animation
Context:
Basically, i want a div to change height (up or down to an arbitrary
height) based on its position in a parent.
Specifically, a div should decrease in height, down to 0, as it
leaves the parent's view and increase, from 0, otherwise.
When you combine this with rounded corners, it gives a unique effect.
I have mostly been experimenting with getBoundingClientRect in the context of a parent div, and using different math to change the style/height of the div.
So far, the effect doesn't work so smoothly.
Here's a working demo (the pink rectangle is the one that should change, i have not figured out how to apply the effect to all of them, but that's a seperate q :)
I'm creating a plugin that saves user mouse movements. I would like to create a kind of heatmap where the mouse goes. I don't know how to paint the coordinates in a responsive way. The elements are moving depending on device's width.
I thought that maybe I could create a function in JS that gets the userwidth, Xcoordenate, and Ycoordenate and returns the coordinates depending on the current screen. But, I would need to get (by javascript) which elements changes position from user width to current width. Is it possible? Any advice?
I would think that this is extremely difficult to do correctly.
You could try to store the mouse coordinates relative to the current element the mouse is moving over, but even that has its limits: When the page width changes the width and height, and even the content, of an element could change.
I think it would be better to only register over which element the mouse cursor is. Then it doesn't matter what shape an element has, or where it is.
See: Determine which element the mouse pointer is on top of in JavaScript
I have a lot of DIVs inside a single DIV that I'm dragging around which also moves all the other DIVs. All positions are absolute.
My problem is that after I drag around and then try to get coordinates of the inside DIV with this code: prviLeftNotranji = $("#"+"s"+xLow+"i"+yLow).position().left; the inside div position is not updated like the DIV I dragged around is.
It's like the nested DIVs position's are not being updated in the DOM tree. Any idea why that is?
This is a very general question within some very complex code so hopefuly you might better understand the question if I show you what I'm trying to achieve: http://asgarnian.com/dev/draggable.html
That thing is already finished and working but because moving all the DIVs around (setting coordinates for each of them every mouse move) is very laggy in Firefox. I decided to put all the DIVs inside a single DIV and then only move that one DIV. I have a limited amount of the inside DIVs that have to be shifted around when they hit edge of the screen to create a feeling of infinite amount of DIVs you can drag around infinitely. So because the DOM positions of one of the nested DIV doesn't update correctly my shifting code doesn't work anymore and as you can see here: http://asgarnian.com/dev/draggable3.html
If you drag right it will be shifting blocks correctly untill you release the mouse and try dragging again(since at start the position is still correct but after dragging it's not anymore.)
I don't expect anyone to understand the messy complex code I have in those two websites that's why I'm asking this like a very general question...
I'm trying to build an interactive map and I'm looking for information on how to have a click and drag in one window, affect an image in its parent window.
As this is hard to explain if you visit http://liamg.co.uk/map/map.html you will see a small window/map in the top left, Id like to be able to drag a small window around the map and have that move the larger/zoomed in image, does this make sense?
Any information/help is greatly appreciated!
jquery supports drag n drop elements, see here: http://jqueryui.com/demos/draggable/
you have to set the right boundaries, and then add an event that performs on drop in which you will read the position of the dropped element and can then apply it to the map however you want to.
The right example you want is this: http://jqueryui.com/demos/draggable/constrain-movement.html
The first one in the box has the boundaries of the box.
And here you see how to react on the drop: http://jqueryui.com/demos/draggable/events.html
I think what you need is not exactly a drag event, you want a element moving only inside the little map, yeah?
Let me explain:
1- Add a listener to mouse down, up and move to that little map;
2- When flag mousedown is true, mousemove works changing a position of a square div around the little map (showing what portion of image the user is seeing). Use pageX and Y (coordinates);
3- Make the math by size of the portion div and size of the big overflowed with the full map to show the exactly zoomed portion of the map.
I belive drag is really implemented when your move a think around all the document, or using the drop event. But it's what I think.
I my working on the site that will have image gallery. Designer idea was to make buttons that switch photos be above the photos a bit.
Like this
Example http://img57.imageshack.us/img57/1253/showq.png
Currently I've made a javascript solution to this - it gets position of photo and applies absolute positioning to the button divs. There are some drawbacks - it works unstable in Opera and IE. Also I had to make some dirty haxx to make it stay in position after zooming. I wonder if there is a better way to do this, preferably without javascript.
you mean like here ? (dutch website, see photo browser in the center column at the top)
browser zooming works fine in browsers like firefox and safari because they zoom all the content and recorrect pixel-values. To make zooming work in ie(6) you'd need to style all in em's. But browser zooming is crappy for pixel data anyways…
Absolute positioning of the buttons (left 0 and right 0) is not a problem as long as the container element is positioned relative.
If I understand you correctly, you're trying to center those arrow buttons vertically in relation to the image. This is pretty easily accomplished with just CSS (no javascript required). Here's an example.
The basic idea is that you're using a couple of divs plus some absolute/relative positioning. There's an outer div that drops the top of the whole thing to the center of the parent element and then an inner div that pulls up your content so that the content is centered and not the top of the element.
A popular technique is to split the whole image into two huge (mostly transparent) links. The left half of the photo would take you to the previous image, the right to the next.
Of course you position you images of buttons appropriately and they would move around but I assume the problem you're finding is you have to keep moving your mouse to go through lots of images as the buttons move.... Well with this idea, you only need keep your mouse near the middle, and it should remain over the photo (and therefore a direction).
Example: http://gizmodo.com/photogallery/dreamhomespshop/1008251500
Mouse-over the image and you'll see it's active the complete way across. Not quite the same as your implementation, I'm sure, but the concept applies.