2015-01-31 2 views
0

У меня есть эта веб-страница, где, когда вы нажимаете изотопный блок, она заполняет страницу, а затем отфильтровывает все остальные блоки. Когда я снова нажимаю блок, он должен вернуться в исходное местоположение. Моя текущая проблема заключается в том, что страница не перемещается с блоком (вам придется прокручивать все сообщения снова)JQuery выполняется в порядке в Safari - Isotope

Я решил, что после того, как я переделаю изотопные блоки в сетке, я расскажу, на какой странице соответствующий id (не нравится это, хотя из-за того, что мне нужно назначать идентификатор для каждого блока)

В настоящий момент код работает в Chrome, но не работает в сафари. Я думаю, что происходит, что связь происходит перед ретрансляцией и, таким образом, остается в верхней части страницы.

Вот мой JQuery:

$(document).ready(function(){ 
    var $container = $('.news').isotope({ 
     itemSelector: '.news-block', 
     layoutMode: 'masonry', 
     getSortData: { 
      type: '[data-type]', // value of attribute 
      time:'[content]' 
     }/* 
      sortBy:'type', 
      sortAscending: true*/ 
    }); 
    $container.on('click', '.news-block', function() { 
     $(this).toggleClass('expand'); 
     if ($(this).hasClass('expand')) { 
      $container.isotope({ filter: '.expand' }); 
      $container.isotope('layout'); 
     } else { 
      $container.isotope({ filter: '*' }); 
      $container.isotope('layout'); 
      window.location.href = '#'+$(this).attr("id"); 

     } 
    }); 
}); 

Css для блоков (показывает расширение в ширину):

.news-block { 
    width:30.6666666666%; 
    margin:1%; 
    padding:2%; 
    float:left; 
    box-sizing: border-box; 
    word-wrap: break-word; 
    background-color: white; 
    color:#888; 
} 
.news-block.expand { 
    width:96%; 
} 

Я надеюсь, что есть простое решение. Пытался использовать ожидание, пока макет завершится изотопом, но не сработает. Также попытался задержка, и это тоже не сработало. Какие-либо предложения. (Я новичок в JQuery, HTML и CSS)

+0

может быть, вы могли бы использовать 'scrollTo()' вместо изменения хэш. – Barmar

+0

Как мне это сделать? Новое для jquery/javascript просто опубликуйте в разделе ответа, если у вас есть идея – Jetstream5500

+0

Nvm Я решил проблему. Могу ли я опубликовать ответ на свой вопрос? – Jetstream5500

ответ

0
  1. Создать значение прокрутки
  2. значение Set Scroll, прежде чем блоки будут удалены и щелкнул блок выбран
  3. После нажатия кнопки снова вернуться в панель настройки прокрутки к значению прокрутки

ответ: scrollTop()

$(document).ready(function(){ 
       var $container = $('.news').isotope({ 
        itemSelector: '.news-block', 
        layoutMode: 'masonry', 
        getSortData: { 
         type: '[data-type]', // value of attribute 
         time:'[content]' 
        }/* 
        sortBy:'type', 
        sortAscending: true*/ 
       }); 
       var scroll = 0; 
       $container.on('click', '.news-block', function() { 
        $(this).toggleClass('expand'); 
        if ($(this).hasClass('expand')) { 
         $container.isotope({ filter: '.expand' }); 
         $container.isotope('layout'); 
         scroll=$('body').scrollTop(); 
         console.log(scroll); 
        } else { 
         $container.isotope({ filter: '*' }); 
         $container.isotope('layout'); 
         $('body').scrollTop(scroll); 
         //scrollTop: $('#'+$(this).attr("id")).offset().top 
         //$('body').scrollTo('#'+$(this).attr("id")); 
        } 
       }); 
      });