The following issue is driving me nuts. I've tried all kinds of ways of solving it but I get nothing.
The code is as follows
var item = [];
function runCSStweaks() {
var m=0;
$('.jp-playlist li').each(function() {
m++;
var min1 = -1;
var max1 = 1;
var random1 = Math.floor(Math.random() * (max1 - min1 + 1)) + min1;
item[m] = random1;
$(this).css('-webkit-transform','rotate('+random1+'deg)')
});
};
function actOnSongChange() {
var m=0;
$('.jp-playlist li').each(function() {
m++;
$(this).css('-webkit-transform','rotate('+item[m]+'deg)')
.css('-webkit-transform','scale(1)')
});
var min3 = -1;
var max3 = 1;
var random3 = Math.floor(Math.random() * (max3 - min3 + 1)) + min3;
$('.jp-playlist .jp-playlist-current').css('-webkit-transform','rotate('+random3+'deg)')
.css('-webkit-transform','scale(1.05)')
});
I'll walk you guys through it. Basically, I'm building a playlist using jPlayer. I've set it up so that, when jPlayer finished building the list, the runCSStweaks() code will be called in order to apply some small random CSS rotation to each item. (This was an earlier problem I had; could not get these CSS tweaks to be applied once the list was all done; so I had to solve it by placing the call to this variable at the end of the jPlayer list-building process.) Up to here, it works perfectly. All the items are randomly rotated as expected.
Then, the idea is that, as each song finishes playing and goes on to the next, the second script, actOnSongChange(), is to be called. This script basically should apply another random rotation and a CSS scale to the current item playing, while returning all previously played items to their original scale.
It seemed as if it would be pretty straightforward but I encountered the issue that I couldn't just set the CSS scale back to 1 without this resetting the original CSS rotation. I guess this is because they both work through CSS transform. So the only solution that comes to mind is to "save" all original rotations in order to call them back as well when the scale is brought back to 1.
In order to do this, I'm creating an array of each random rotation amount when the first script is run and calling each individual array entry back inside the second script.
Here is were I've hit a wall. I've tried everything and have come to the conclusion that the first script does not build the array at all. If I place a console.log() in the second script and call for item to have it dump the array's contents I get an empty array. If I try to place a console.log() within the first script to see what is going on it doesn't even print out. For this same reason, I was forced to place the var item = [] line outside of the runCSStweaks() (otherwise, I got this error through console.log(item): "Uncaught ReferenceError: item is not defined ").
So, what is apparently obvious, this first function, runCSStweaks(), does the CSS tweaks alright, but that's about it. Anything else I place inside is not run and I don't know why.
Am I perhaps missing something? Is there an error in my coding somewhere? Or does it have to do with the order in which jQuery calls and executes things?
I'll continue trying to get through this code in the morning. But for now, my brain is about to build itself a bonfire.
Ok, so the basic issue here was why the first function, runCSStweaks(), wasn't creating the array if it was executing the CSS tweaks just fine?
And the answer, much to my embarrassment, and oh don't I feel the grand fool right now, is very simple:
I wasn't ever calling function runCSStweaks()!
Initially, I had placed a call to the runCSStweaks() right where the jPlayer JS finishes building the playlist and deploys it. As I said in my question's description above, I had been working on this very late at night and, for some strange, mysterious reason, at some point my failing brain had decided to insert the function itself into the jPlayer JS, rather than just calling it from there. (I can only guess the original call wasn't going as planned.)
So, having never erased the original runCSStweaks() function, no doubt because I thought I might have to return to calling it in order to keep the original JS tidy, I eventually forgot that I had placed the entire function in there. So, to sum up, the runCSStweaks() function wasn't being called, the function that tweaked the CSS was hidden in the original JS, and I was foolishly adding the array builder and etc. in the runCSStweaks() and asking myself Why, oh why, is this not working?!
So, sorry for that. But thank you guys very much for your help! I think we might have been trying to find the problem here forever but to no avail, as there was no problem; at least not with the function but with my clumsiness. I must say, though, that in your answers and comments I have at least learned two or three very important pieces of info that will prevent me from making other mistakes in the future and posting them here! So thanks again!