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
Post a Comment