content swap and flexslider

[dpiearcy]

Ok.  This might get a bit lengthy but hopefully I can describe what's going on.  

 

Basically, for my nav I'm swapping content with Javascript.  Here is that tid bit:

jQuery.noConflict()(function($){
   var hash = window.location.hash.substr(1);
   var href = $('#nav li a').each(function(){
	var href = $(this).attr('href');
	if(hash==href.substr(0,href.length-5)){
	   var toLoad = hash+'.html #xhg';
	   $('#xhg').load(toLoad)
	}											
   });

$('#nav li a').click(function(){
							  
   var toLoad = $(this).attr('href')+' #xhg';
   $('#xhg').fadeOut('slow',loadContent);
   $('#load').remove();
   $('#wrapper').append('<span id="load">LOADING...</span>');
   $('#load').fadeIn('slow');
   window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
		
   function loadContent() {
	$('#xhg').load(toLoad,'',showNewContent())
   }
   function showNewContent() {
	$('#xhg').fadeIn('slow',hideLoader());
   }
   function hideLoader() {
	$('#load').fadeOut('slow');
   }
	return false;
	
   });

});

Works great.  Get a nice fade transition I was looking for. 

 

My problem lies in the div #home has the first thing flexslider by mootools.  Have also tried camera and they both do the same thing.  

 

I want this responsive so the height of the div is not set.  (tried 100% and no effect).

 

When you navigate BACK to #home after visiting another page, the slider doesn't detect the image size so is only 5px high.  If you hit refresh it will load correctly.

 

Here is the code for the slider :

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

As you can see I'm using the (window).load for my function so the images should already be loaded before the function takes place.  

 

These are both in a linked file I named custom.js in the head of the document.  Have also tried pulling it out and putting it last but that had no effect. 

 

Anyone see what I got going on here?  I'd give you a link but it's all still local.  

[dpiearcy]

Hmmm... upon further inspection... (I put a min-height on the container and the images) I see the container when I come back at the height it's supposed to be.  No image.  So this is telling me those images are not being loaded before the slide script fires.  Try a .load on that script.  See if that works.