javascript - Focus selection in layout -


here js fiddle using create expanding boxes products:

http://jsfiddle.net/wpneily/vsnag7ja/ using code:

var $container = $('#iso-container'),   $items = $('.item');  $container.isotope({ itemselector: '.item', masonry: {   columnwidth: 60 }, getsortdata : {   selected : function( $item ){     // sort selected first, original order     return ($item.hasclass('selected') ? -500 : 0 ) + $item.index();   } }, sortby : 'selected'  })  $items.click(function(){ console.log('ee') var $this = $(this); // don't proceed if selected var $previousselected = $('.selected'); if ( !$this.hasclass('selected') ) {   $this.addclass('selected'); }  $previousselected.removeclass('selected');  // update sortdata new items size $container   .isotope( 'updatesortdata', $this )   .isotope( 'updatesortdata', $previousselected )   .isotope();  });   $('.noclick').click(function(e){ console.log('dd') e.stoppropagation(); }); 

this works great except, if user scrolls down , picks 1 of boxes below current "open" selection, new selection open out of view above. in other words new selected product box in not in focus. want selected box not open scroll page top of container, in case, id="iso-container". can please help.

try adding following code @ end of $item.click handler:

 $('html,body').animate({scrolltop: $("#iso-container").offset().top}, 'slow'); 

updated fiddle


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -