Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'Website Coding & Programming Forum:' started by bamme, Feb 19, 2013.

  1. bamme

    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 :)
     
  2. Levi

    Levi Moderator Staff Member

    which broswer are you getting issues in because I just refreshed (cleared cache) it 10 times without the issue popping up on latest firefox
     
  3. glenwheeler

    glenwheeler Senior Member

    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.
     
  4. glenwheeler

    glenwheeler Senior Member

    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...
     
  5. glenwheeler

    glenwheeler Senior Member

    I find this odd, look at the image dimensions is passing out on refresh :/
    [​IMG]
     
  6. glenwheeler

    glenwheeler Senior Member

    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

    });

    });
     
  7. bamme

    bamme Senior Member

    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
     
  8. bamme

    bamme Senior Member

    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
     
  9. bamme

    bamme Senior Member

    or i found this plugin called lite Accordion - i notice there are settings for image dimensions which means, i suppose, the javascript does not get image dimensions from the actual images.. http://nicolahibbert.com/demo/liteAccordion/ will this work, do you think?
     
  10. glenwheeler

    glenwheeler Senior Member

    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 ?
     
    bamme likes this.
  11. bamme

    bamme Senior Member

    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")
     

Share This Page