PDA

View Full Version : Having A Small Problem With Conflicting JQuery - Any Help Is Greatly Appreciated



WesNileMusic
04-16-2011, 06:38 PM
My issue is very similar to this thread: http://www.dynamicdrive.com/forums/showthread.php?t=53521

The site in question is wesnilemusic.com (http://www.wesnilemusic.com) & the issue is only on the index page.

Both the image slider & the mp3 player work in firefox, but in chrome the slider doesn't work (it just shows the loading graphic).

The problem is that the image slider is conflicting with my jplayer. I have narrowed it down to "playeraa.js" (which is the playlist) being the problem. I am at such a beginner level with JQuery & js in general & any help would be greatly appreciated.

I have tried changing "$(document).ready(function(){" to "jQuery(function($)" with no success.


Edit: I am 100% positive that the conflict is with the playeraa.js (or possible the jplayer) because the website is built from a template & all I did was add the jplayer & playlist.


Player AA code

$(document).ready(function(){

var playItem = 0;

var myPlayList = [
{name:"Wes Nile - California Lifestyle (Featuring Dirty Harry & Will Witt)",mp3:"http://www.wesnilemusic.com/CaliforniaLifestyle.mp3"},

{name:"Wes Nile - G.P.S.",mp3:"http://www.wesnilemusic.com/GPS.mp3"},
{name:"Wes Nile - Must Be In the Blood (Featuring Seany Cash)",mp3:"http://www.wesnilemusic.com/MustBeIntheBlood.mp3"},

{name:"Wes Nile - Yung-N-Reckless",mp3:"http://www.wesnilemusic.com/Yung-N-Reckless.mp3"},
{name:"Wes Nile - God Forgive Me",mp3:"http://www.wesnilemusic.com/GodForgiveMe.mp3"},

{name:"Wes Nile - Frankenstein (AllArounda Productions)",mp3:"http://www.wesnilemusic.com/Frankenstein.mp3"},
{name:"Wes Nile - Edgar Allan Potthead",mp3:"http://www.wesnilemusic.com/EdgarAllanPotthead.mp3"},
{name:"Wes Nile - Mona Lisa",mp3:"http://www.wesnilemusic.com/MonaLisa.mp3"},




{name:"Wes Nile - Blue Diamonds",mp3:"http://www.wesnilemusic.com/BlueDiamonds.mp3"}
];

// Local copy of jQuery selectors, for performance.
var jpPlayTime = $("#jplayer_play_time");
var jpTotalTime = $("#jplayer_total_time");

$("#jquery_jplayer").jPlayer({
ready: function() {
displayPlayList();
playListInit(false); // Parameter is a boolean for autoplay.
},
oggSupport: false
})
.jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
jpPlayTime.text($.jPlayer.convertTime(playedTime));
jpTotalTime.text($.jPlayer.convertTime(totalTime));

})
.jPlayer("onSoundComplete", function() {
playListNext();
});

$("#jplayer_previous").click( function() {
playListPrev();
return false;
});

$("#jplayer_next").click( function() {
playListNext();
return false;
});

$("#jplayer_play").click( pausePlayer2 );
$("#jplayer_load_bar").click( pausePlayer2 );
$("#jplayer_play_bar").click( pausePlayer2 );

function pausePlayer2(e) {
$("#jquery_jplayer2").jPlayer("pause"); // Pause the other player
$("#jquery_jplayer3").jPlayer("pause"); // Pause the other player
}

function displayPlayList() {
for (i=0; i < myPlayList.length; i++) {
$("#jplayer_playlist ul").append("<li id='jplayer_playlist_item_"+i+"'>"+ myPlayList[i].name +"</li>");
$("#jplayer_playlist_item_"+i).data( "index", i ).click( function() {
var index = $(this).data("index");
if (playItem != index) {
playListChange( index );
} else {
$("#jquery_jplayer").jPlayer("play");
}
});
}
}

function playListInit(autoplay) {
if(autoplay) {
playListChange( playItem );
} else {
playListConfig( playItem );
}
}

function playListConfig( index ) {
$("#jplayer_playlist_item_"+playItem).removeClass("jplayer_playlist_current");
$("#jplayer_playlist_item_"+index).addClass("jplayer_playlist_current");
playItem = index;
$("#jquery_jplayer").jPlayer("setFile", myPlayList[playItem].mp3);
}

function playListChange( index ) {
playListConfig( index );
$("#jquery_jplayer").jPlayer("play");
$("#jquery_jplayer2").jPlayer("pause"); // Pause the other player
$("#jquery_jplayer3").jPlayer("pause"); // Pause the other player

}

function playListNext() {
var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;
playListChange( index );
}

function playListPrev() {
var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1;
playListChange( index );
}
});

WesNileMusic
04-17-2011, 03:00 PM
I was messing around all night trying to find a fix with no success.. I think my knowledge level of JS is too low to implement my own fix.

jscheuer1 your pro experience is requested (& appreciated)


Edit: I have 100% narrowed it down to the playeraa.js being the problem because when I delete the contents of the playlist file there is no conflict. The problem seems to be with the
$(document).ready(function(){

Is there some sort of variation that I can use which will prevent (or bypass) the conflict?

WesNileMusic
04-19-2011, 05:39 AM
The problem is actually with either the jplayer (most likely) or the playlist (unlikely)

I was researching today & am a bit closer, but still no cigar.

WesNileMusic
04-23-2011, 05:29 PM
Bump... I'm still here