Hi All.
I have a draggable related question. What I am trying to do is to have
a horizontal band of images in a page (spans the entire doc width).
This band is supposed to be draggable since I have way more images
than can be drawn in the window.
However I would like to restrict the drag so that of the first image
is visible I want to disallow dragging right and if the last image is
visible I want to disallow dragging left. I know what the stop
conditions are given a ui object, basically is ui.position.left>0 stop
and similarly if ui.position.left + width of band < window_width -
scrollbar stop (a bit naive but will work for now). However I seem to
be unable to cancel the drag.
I have tried messing with the layout and containment option for
draggable to no avail. I have included a test page that demonstrates
what I have right now.
Any help would be greatly appreciated.
Thanks.
AM
<html>
<head>
<script type="text/javascript" src="scripts/jquery-latest.js"></
script>
<script type="text/javascript" src="scripts/jquery.ui.core.draggable.
1.6rc1.js"></script>
<style type="text/css">
.fixed-container { clear: both; margin: 1em; overflow: hidden; }
.images { white-space: nowrap; }
</style>
<script type="text/javascript">
jQuery( function($) { $("#images").draggable({"axis": "x"}); });
</script>
</head>
<body>
<div class="fixed-container" id="fixed_container">
<div class="images" id="images">
<img
src="http://imgs.xkcd.com/comics/turing_test.png";></img>
<img
src="http://imgs.xkcd.com/comics/turing_test.png";></img>
<img
src="http://imgs.xkcd.com/comics/turing_test.png";></img>
<img
src="http://imgs.xkcd.com/comics/turing_test.png";></img>
<img
src="http://imgs.xkcd.com/comics/turing_test.png";></img>
<img
src="http://imgs.xkcd.com/comics/turing_test.png";></img>
<img
src="http://imgs.xkcd.com/comics/turing_test.png";></img>
<img
src="http://imgs.xkcd.com/comics/turing_test.png";></img>
</div>
</div>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
![http://imgs.xkcd.com/comics/turing_test.png"](http://imgs.xkcd.com/comics/turing_test.png"){kind=link}