Snap a div to the middle of a screen using scrollview - jquery-mobile

Question

probably nobody is there on a friday of a long weekend to answer this...
Working with jquery mobile beta and jquery mobile Scrollview
plugin.
There are 5 divs which are renedred by the scrtollview plugin and they are successfully drawn in a carousel manner with 5 divs side by side...
<div class="scrollme" data-scroll="x">
<div class="indDiv"> one
</div>
<div class="indDiv"> two
</div>
<div class="indDiv"> three
</div>
<div class="indDiv"> four
</div>
<div class="indDiv"> five
</div>
</div>
$('div.indDiv').bind('tap', function(e){
var clickedDiv = $(this);
// snap clickedDiv to the middle of the page
});
I have this requirement that when I tap on a div inside this carousel, i would want to move the corousel programattically so that the tapped div is snaped to the middle of the screen. I do not see a way to do with the scrollview plugin methods... I am flexible to switch to another plugin too...
anybody??
Thanks

Answer 1

Mostly, this involves appending something to the end of the document body due to position:relative/absolute issues.
I've written a simple plugin that allows centering and shading... It might not be production quality, but I've been happy with it for a while.
(function($) {
$.fn.center = function() {
this.css("position", "absolute");
this.css("top", (($(window).height() * .4) - this.height()) / 2
+ $(window).scrollTop() + "px");
this.css("left", ($(window).width() - this.width()) / 2
+ $(window).scrollLeft() + "px");
return this;
}
var shade = 0;
$.fn.unshade = function() {
$('.shade:last').remove();
var $children = $('.shade-front:last').children();
$children.each(function(k, v) {
if ($.data(v, 'shade-replace-previous').size() != 0) {
$.data(v, 'shade-replace-previous').append(v);
} else {
$.data(v, 'shade-replace-parent').prepend(v);
}
});
$('.shade-front:last').remove();
return $children;
}
$.fn.shade = function(css) {
var $shade = $('<div class="shade"/>');
$shade.css( {
position : "absolute",
width : '100%',
height : '100%',
top : 0,
left : 0,
background : "#000",
opacity : .7
})
$shade.click(function() {
$(this).unshade();
})
$('body').append($shade);
// Record our element's last position
this.each(function(k, v) {
var $this = $(v);
var prev = $this.prev();
var par = $this.parent();
$.data(v, 'shade-replace-previous', prev);
$.data(v, 'shade-replace-parent', par);
});
// Add them to the shadefront
var $shade_front = $('<div class="shade-front"/>');
$shade_front.css("background", "#FFF");
$shade_front.css("margin", "auto");
$shade_front.css("text-align", "center");
if (css) {
$shade_front.css(css);
}
$shade_front.append(this);
$shade_front.center();
$('body').append($shade_front);
return $shade_front;
}
})(jQuery);

Answer 2

I am using this plugin and then binding the swiperight/left to the next/prev buttons.
https://github.com/Wilto/Dynamic-Carousel