-2
我在我正在構建的這個站點上有.mb_miniplayer_play的名稱的Infinite Scroll,Isotope和一個音頻播放器。我遇到的問題是,當一個新的頁面加載時,以前加載的頁面上的CSS改變。比方說,第2頁被加載,第1頁的CSS變化。但它只是一個元素。加載無限滾動頁面時加載頁面的CSS會發生變化
我已經嘗試了各種各樣的東西,但似乎沒有使所有的頁面看起來和正常工作。
的代碼如下:
**//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。加載頁面上的'Top'的css設置需要使其看起來正確:頂部:-114,而新加載的頁面只需要頂部:-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">×</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>
我發現我使用回調的方式存在問題。 css並沒有改變,它實際上是將另一個玩家放在現有玩家的頂部,結果將div降低到視線之外。研究爲什麼回調不能正常工作。 – user1063192 2012-01-19 03:45:16