Добавлен DIV, отображающийся только при изменении размера

Question

Для моего сайта портфолио Я вызываю объект json, разбираю его и динамически создавая div. Все работают нормально, но мой добавленный div не появляется. Он пуст. Если я попытаюсь изменить размер моего окна, содержимое волшебным образом появится.

Сайт http://imajination.in

Js есть -> корне-> JS -> Main.js (строка 65)

$.getJSON('./clients.txt',function(data){ 
    for(var i in data) { 
      var generated = ' 
      <div id="siteRoll"> 
       <div class="thumb"><img src="clients/'+data[i].thumb+'"></div> 
       <div class="info"> 
        <span class="title">'+data[i].name+'</span> 
        <span class="desc">CLIENT : '+data[i].client+'</span> 
        <span class="desc">TYPE : '+data[i].type+'</span> 
        <span class="desc2">'+data[i].desc1+'</span> 
        <span class="desc2">'+data[i].desc2+'</span> 
        <span class="visit"><a href="'+data[i].url+'" target="_blank">Visit site</a></span> 
       </div><!-- info --> 
      </div><!-- siteRoll -->'; 

      $('article#portfolio #sliderPort .swipe-wrap').append(generated); 
    } 
}); 

Любая идея?

Answer 1

Смотрите, если это помогает:

$.getJSON('./clients.txt',function(data) { 
var htm = null; 
for(var i in data) { 
     htm += ' 
     <div id="siteRoll"> 
      <div class="thumb"><img src="clients/'+data[i].thumb+'"></div> 
      <div class="info"> 
       <span class="title">'+data[i].name+'</span> 
       <span class="desc">CLIENT : '+data[i].client+'</span> 
       <span class="desc">TYPE : '+data[i].type+'</span> 
       <span class="desc2">'+data[i].desc1+'</span> 
       <span class="desc2">'+data[i].desc2+'</span> 
       <span class="visit"><a href="'+data[i].url+'" target="_blank">Visit site</a></span> 
      </div><!-- info --> 
     </div><!-- siteRoll -->'; 
    } 

    $('article#portfolio #sliderPort .swipe-wrap').html(htm); 
}); 

Answer 2

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

Эта особая карусель, похоже, реагирует и на window.resize, поэтому именно поэтому вы получаете содержимое только после изменения размера окна, а карусель освежает.

Я бы посмотрел метод refresh(), если плагин поддерживает его и вызывает его после добавления динамических данных при загрузке страницы.