Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    LABjs, Flexslider and Google Maps Issues

    Hi all,

    I'm tearing my hair out trying to get LABjs, Flexslider and Google Maps to play nicely!

    Basically, when I refresh the page everything works as it should, but if I click off the page then using the menu, click back onto the page (i.e. not refreshing) then Flexslider and Google maps stop working.

    Here is my code:

    Code:
    <script>
       $LAB
       .script("js/jquery-1.10.2.min.js")
       .script("js/bootstrap.min.js")
       .script("js/jquery.flexslider.min.js")
       .script("js/jquery.backstretch.min.js")
       .script("js/main.js")
       .script("js/googlemaps.apiv3.js")
       .script("js/inlinejs.js") 
     </script>
    Where Google Maps JS contains the inline code usually left in the HTML file:

    Code:
    function initialize() {
     		 var mapOptions = {
       		 zoom: 18,
       		 center: new google.maps.LatLng(45.4083833, 6.5579333),
    		 mapTypeId: google.maps.MapTypeId.SATELLITE
     		 };
    		 
     		 var map = new google.maps.Map(document.getElementById('map-canvas'),
         		 mapOptions);
    			 
    }
    	
    			 
    		
    function loadScript() {
     		 var script = document.createElement('script');
     		 script.type = 'text/javascript';
     		 script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
         		 'callback=initialize';
     		 document.body.appendChild(script);
    		}
    
    		window.onload = loadScript;
    and inlinejs contains:

    Code:
    $(document).ready(function() {
    	$.backstretch([
    	      "img/header1.jpg",
    		  "img/header2.jpg",
    		  "img/header3.jpg",
    		  "img/header4.jpg"
    	      ]);
    	});
    	
    //Flexslider JS
    
    	$(window).load(function(){
    	$('.flexslider').flexslider({
    	    animation: "fade",
    	    directionNav: false,
    	    start: function(slider){
    	      $('body').removeClass('loading');
    	    }
    	  });
    	});
    It must be something to do with the inline JS but I cannot figure it out!

    Anybody offer any suggestions!?

    Cheers, Paul.

  • #2
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok so I managed to fix Flexslider by adding document ready instead of window load:

    Code:
    $(document).ready(function(){
    	$('.flexslider').flexslider({
    	    animation: "fade",
    	    directionNav: false,
    	    start: function(slider){
    	      $('body').removeClass('loading');
    	    }
    	  });
    	});
    But I still can't figure out google maps...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •