CSS загружаемых страниц изменяется при загрузке страниц Infinite Scroll в - PullRequest
Новая
       46

CSS загружаемых страниц изменяется при загрузке страниц Infinite Scroll в

0 голосов
/ 17 января 2012

У меня на сайте, который я строю, есть Бесконечный свиток, Изотоп и аудиоплеер по имени .mb_miniplayer_play.Проблема, с которой я сталкиваюсь, заключается в том, что при загрузке новой страницы css на ранее загруженных страницах изменяется.Допустим, страница 2 загружена, CSS страницы 1 изменяется.но это только из одного элемента.

Я пробовал разные вещи, но, кажется, ничто не заставляет все страницы выглядеть и работать должным образом.

Код выглядит следующим образом: 

  **//Audio jquery**

  $(function AudioEvents(){

    $(".audio").mb_miniPlayer({
    width:210,
    height:34,
    inLine:false,
    onEnd:playNext
    });

    var $audios = $('.audio');

    function playNext(idx) {
    var actualPlayer=$audios.eq(idx),
    $filteredAtoms = $container.data('isotope').$filteredAtoms,
    isotopeItemParent = actualPlayer.parents('.isotope-item'),
    isoIndex = $filteredAtoms.index( isotopeItemParent[0] ),
    nextIndex = ( isoIndex + 1 ) % $filteredAtoms.length;

    $filteredAtoms.eq( nextIndex ).find('.audio').mb_miniPlayer_play();
    }



  **//Inifinite Scroll**

  var $container = $('#container');

  $container.isotope({
    itemSelector : '.square'
  });

  $container.infinitescroll({
    navSelector  : '#page_nav',    // selector for the paged navigation 
    nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)
    itemSelector : '.square',     // selector for all items you'll retrieve
    loading: {
        finishedMsg: 'No more pages to load.',
        img: 'http://i.imgur.com/qkKy8.gif'
      }
    },

    // call Isotope as a callback
      function( newElements ) {
      var $newElements = $(newElements);

      AudioEvents( $newElements );

      // add hover events for new items
      bindSquareEvents( $newElements );

      setTimeout(function() {
      $container.isotope('insert', $newElements );
      }, 1000);
      });
  });

Кто-нибудь сталкивался с этим.Я предполагаю, что мой код jquery неверен или что-то отсутствует, но я не знаю, что.

Вот разметка HTML ... Изменяемый div - это .download.Настройки css для 'Top' на загруженных страницах должны сделать так, чтобы он выглядел правильно: top: -114, в то время как только что загруженным страницам нужно только top: -24, чтобы выглядеть правильно. 

<div class="square techno">

<!-- DJ Picture -->
<img src="Pictures/dirtyharris.jpg" class="img1" />
        <div class="boxtop">
        <span class="genre">Techno</span>
        </div>

        <div class="box">
        <a class="close" href="#close">&times;</a>
        <!-- DJ Name -->
        <h1> ThreeSixty & Dirty Harris</h1>

        <!-- Song Title -->
        <h2>Louka (Funkagenda Re-Edit)</h2>

         <!--Song Description(179 characters with spaces)-->
        <h4>I had to include this one since it literally took over control of me while driving the other morning. I was bouncing around in my seat like a little kid who desparately needs to use the bathroom. </h4> 

            <div class="buttons">
            <!--Song file info-->
            <div class="player">
            <a id="m85" class="audio {skin:'#010101',showVolumeLevel:false,showTime:false,showRew:false,ogg:'MP3/Adrian Lux feat. The Good Natured - Alive (Extended Mix).ogg'}" href="MP3/Adrian Lux feat. The Good Natured - Alive (Extended Mix).mp3"></a></div>


                <!--Download Link-->
                <div class="download">
                <a href="MP3/ThreeSixty, Funkagenda - Loudka (Funkagenda Re-Edit).mp3" title='Right Click and Save Link As'>
                <img src="img/dlicon.png"/></a>

                </div>
            </div>
        </div>

</div>

1 Ответ

0 голосов
/ 17 января 2012

Я не вижу изменений в CSS в вашем jquery.CSS не является динамическим для изменения стиля самостоятельно на основе страниц.Конечно, им можно манипулировать с помощью Jquery или php, но опять же я этого не вижу.

...