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


probably nobody there on friday of long weekend answer this...

working jquery mobile beta , jquery mobile scrollview plugin. there 5 divs renedred scrtollview plugin , drawn in carousel manner 5 divs side side...

           <div class="scrollme" data-scroll="x">               <div class="inddiv"> 1                 </div>               <div  class="inddiv"> 2                 </div>               <div class="inddiv"> 3                 </div>               <div class="inddiv"> 4                 </div>               <div class="inddiv"> 5                 </div>                                           </div>   $('div.inddiv').bind('tap', function(e){   var clickeddiv = $(this);   // snap clickeddiv middle of page }); 

i have requirement when tap on div inside carousel, want move corousel programattically tapped div snaped middle of screen. not see way scrollview plugin methods... flexible switch plugin too... anybody??

thanks

mostly, involves appending end of document body due position:relative/absolute issues.

i've written simple plugin allows centering , shading... might not production quality, i've been happy 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 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); 

Comments

Popular posts from this blog

c# - SharpSVN - How to get the previous revision? -

c++ - Is it possible to compile a VST on linux? -

url - Querystring manipulation of email Address in PHP -