Snap a div to the middle of a screen using scrollview

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 plu开发者_如何转开发gin methods... I am flexible to switch to another plugin too... anybody??

Thanks

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);

I am using this plugin and then binding the swiperight/left to the next/prev buttons.

https://github.com/Wilto/Dynamic-Carousel