jQuery firing only on page refresh

Question

Working on a slider for a site. Using the Flexslider provided by woo themes. I'm having trouble getting the slider to load and work properly. As of right now on initial page load the images in the slider are displayed in li order. I have to refresh the page for the slides to hide and the slider to work.

My current script:

placed in the body just above the slider –

$(window).load(function() {
              $('.flexslider').flexslider({
                animation: "slide"
              });
            });

and placed in my footer at bottom of page –

$(function(){
  SyntaxHighlighter.all();
});
$(window).load(function(){
  $('.flexslider').flexslider({
    animation: "slide",
    start: function(slider){
      $('body').removeClass('loading');
    }
  });
});

I've done quite a bit of searching for a solution to this across similar topics here on the site and can't seem to get a solution that solves my issue. I've replaced my $(window).load(function() { with $(document).ready() but still had no luck.

Any help on this would be appreciated.

Answer 1

In your init.js is loading page content and updating the url to look like it's a new page. When the content of a new page is inserted I don't find anywhere that the slide code is re-attached/re-started. So try to add this part in your code (init.js). It worked for me testing on your site with console.

Find this code/function and add as suggested.

$(document).on("ajaxComplete", function(w, v, u) {
    mypath = u.url;
    mypath = mypath.replace("http://www.palomaspices.com/", "");
    mypath = mypath.replace("http://palomaspices.com/", "");
    mypath = mypath.replace("http://palomaspices.com/", "palomaspices.com");

//Start of new code
    $('.flexslider').flexslider({
        animation: "fade",
        start: function(slider) {
            $('body').removeClass('loading');
        }
    });
/end of new code

    _gaq.push(["_trackPageview", mypath])
});