Annoying jquery slider problem - images dont load or spill out of container

bamme

Senior Member
Hi all,
Please see the following page: http://bit.ly/ZoQf0v
It uses a jquery accordion slider. The screenshot at: http://junkclub.com/files/sliderproblem/Screenshot%201a.png shows how the page SHOULD appear, and http://junkclub.com/files/sliderproblem/Screenshot%201b.png shows how it SHOULD look when a slider is hovered over.
Sometimes it looks fine. However other times, the images fail to all appear, and then when you hover over, they DO appear but span out of the container and/or not all of them load.
If you refresh the page a few times you'll see this happening yourself.
Please see http://junkclub.com/files/sliderproblem/Screenshot%202.png and http://junkclub.com/files/sliderproblem/Screenshot%203.png for this:

I was thinking perhaps this is an issue with images loading but I'd like to ask the advice of those who are more knowledgeable with javascript than I am about what you think the problem is and how it can be resolved?
Some help would be really appreciated here!
Thanks very much :)
 
which broswer are you getting issues in because I just refreshed (cleared cache) it 10 times without the issue popping up on latest firefox
 
I see this in Chrome, latest build OSX

I think it's due to that some JavaScript working out the relative widths and doing the slider placement. What makes me think that its the following.
On a hard page the JavaScript is waiting to do the relative placement whilst the images download into the browser and it then does the relevant positioning of the images. On the soft refresh the images are cached and JavaScript think's the page is actually loaded when it's not and therefore doesn't do the actual image placement.
 
OK Tested it across opera, Safari, IE, FF and Chrome and get the same upon refresh. 100% not browser problem but something in the JS.
Check back in 5...
 
I find this odd, look at the image dimensions is passing out on refresh :/
junkimages.png
 
Also...

Line 147 in view-source:http://www.junkclub.com/index.php?page=storysofar
Could be thatyour not passing in a node in the $() - normally should be $(document)
$().ready(function() {

$('#accordion-slider').kwicks({

max : 750,

spacing : 2

});

});
 
Thanks so much for your help Glen. I've added:

$(document).ready(function() {
$('#accordion-slider').kwicks({
max : 750,
spacing : 2
});
});
when i first load the page, after clearing the cache, it works fine, but then when i refresh, the problem is still there.
i think i understand what you've explained.. is there anyway to stop the images caching at all? or do you think i should try a totally diff jquery slider plugin?
"Theresa" here on this page has posted the same damn problem but then hasn't posted an answer... ;/ http://www.aoclarkejr.com/tutorial-jquery-accordion-slider.html
 
I've since tried to stop images caching by using:

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

It hasn't worked HOWEVER i think if i can make images not cache, this will fix it - i have tried visiting the page, then emptying the cache, then hitting 'refresh' and the problem does not happen if the cache has been cleared.

does anyone know a way to stop the images caching?? i have found something in PHP but the problem is the CMS this site uses stops me using any php at all, it just strips it out, so i think i will need to use jquery which im not sure how to do
 
Have you tried
<?phpheader("Expires: Tue, 01 Jan 2000 00:00:00 GMT");header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");header("Cache-Control: post-check=0, pre-check=0", false);header("Pragma: no-cache");?>
right after HTML ?
 
I'd like to try that however i can't use PHP in this CMS :( (" this site uses stops me using any php at all, it just strips it out, so i think i will need to use jquery which im not sure how to do")
 
Back
Top