I notice the problem mostly with Firefox 3.6.6 on OS 10.5.8, and it happens occasionally with Safari (get your surprised face ready - IE actually works fine everytime - what?!).
My url is here:
http://culturewithinaculture.org/introduction.php
NOTE: It's password protected for now, as we haven't officially launched the site.
User: cwac
pass: cwac2112
Problem: If you visit the link above it should load fine the first time. Everything seems fine with the JS and CSS files. HOWEVER, when you hit refresh it breaks. Sometimes it takes 1 refresh, other times it takes 2 or 3. The other odd thing is that if you wait 30 seconds or so and hit refresh it will be fine again. Seems fairly random. When I say it 'breaks' I mean it fails to apply the jScrollPane function to the DIV tags I have for the English and Japanese copy.
So I've tried loading the required JS files at different times with no luck yet. For example tried loading the mousewheel.js file before and after the jScrollPane.js file. I'm also using a link to the Google hosted version of Jquery, thinking that it could be requesting too much from our MediaTemple hosted account...perhaps a caching issue etc. Here is the code I'm using to load all the necessary functions for the page (mainly using jScrollPane, and prettyPhoto for the video links):
$(document).ready(function(){
// scrollpane code
$('.scroll-pane').jScrollPane();
//Rollovers for navigation buttons
$(".navBtn").hover(
function(){
this.src = this.src.replace("_org","_over");
},
function(){
this.src = this.src.replace("_over","_org");
});
//PrettyPhoto Function
$(function()
{
$("a[rel^='prettyPhoto']").prettyPhoto();
});
});
If you guys have any suggestions, I'd greatly appreciate it. I am definitely a newbie with jQuery, and this is my first site using only jQuery. Anyone had this error with jScrollPane before? Is there something funky about my CSS that is breaking this?