I am facing an issue with my site that has Infinite Scroll, Isotope, and .mb_miniplayer_play audio player. Whenever a new page is loaded in, the CSS on previously loaded pages changes for one element only. Despite trying different solutions, I can't seem to get all the pages to display and function correctly.
Below is the code snippet:
**//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);
});
});
Has anyone encountered this issue? It seems like there might be a mistake or something missing in my jQuery code, but I'm not sure what it is.
Here is the HTML markup... The problematic div is .download. The CSS settings for 'Top' on the loaded pages need top:-114 for proper appearance, while newly loaded pages only require top:-24 for correct display.
<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>