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

Question

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

0

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

Сайт http://imajination.in

Js → root-> 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);
     }
});

Есть идеи?

Jagadeesh J 24 сен. 2013, в 15:56

Источник

Теги:

jquery

html

json

2 ответа

0

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

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

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

Zathrus Writer 24 сен. 2013, в 11:05

Ещё вопросы

Gurminder Singh · Accepted Answer · 2013-09-24T11-18-00.000Z

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

$.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);
});

Спасибо за предложение, к сожалению, оно не работает :(