Focus selection in layout

Vote count:

0

Here is my JS fiddle that I am using to create expanding boxes for products:

http://ift.tt/1A1NEHR using this code:

var $container = $('#iso-container'),
  $items = $('.item');

$container.isotope({
itemSelector: '.item',
masonry: {
  columnWidth: 60
},
getSortData : {
  selected : function( $item ){
    // sort by selected first, then by 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 already selected
var $previousSelected = $('.selected');
if ( !$this.hasClass('selected') ) {
  $this.addClass('selected');
}

$previousSelected.removeClass('selected');

// update sortData for 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 a user scrolls down and picks one of the boxes below the current "open" selection, the new selection open out of view up above. In other words the new selected product box in not in focus. I want a selected box to not only open but also scroll the page to the top of the container, in this case, id="iso-container". Can anyone please help.

asked 1 min ago

Warren Neily

6

Focus selection in layout