How to restrict ui.draggable.js to the current image height.
Hey there,
im currently working on a little project where i use the
ui.draggable.js functions.
i have an image that is getting always resized to fullscreen. most of
the images that will be included will be in portrait style so i came
up with the idea of including a drag function, so the user can drag
the image to the top to see the rest of it.
i built it up with the ui.draggable.js and it works fine. but now i
want to restrict the movement. i tried to use the command
"containment" but this doesn't get me the results i need.
for better understanding i have made some example files the image is
taken from flickr(http://www.flickr.com/photos/kate_ferris/
3174128917/):
http://warnsinnig.de/trashbin/dragable_t...index.html
without containment
http://warnsinnig.de/trashbin/dragable_t...wport.html
containment: ':in-viewport'
based on http://www.appelsiini.net/projects/viewport - i thought this
might work but the result is the same like the value "document":
http://warnsinnig.de/trashbin/dragable_t...ument.html
containment: 'document'
So.
What i want to achieve is the possibility to currently drag the image
to the top, out of the viewport until it reaches the bottom of the
image.
But when i want to drag the image (which is on position 0:0) to the
bottom, it should not work. as u can see in the first example file,
when you drag it down, you can see the background behind the image and
thats nasty.
the same goes for the bottom. i dont want that the user can drag it so
far to the top that the bottom will be visible.
i hope you understand what i am talking about.
is it possible?
thanks so far!
marc