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
    Regular Coder
    Join Date
    Aug 2010
    Posts
    408
    Thanks
    17
    Thanked 2 Times in 2 Posts

    page load kills carousels

    I have a page with content that ls loaded by jquery, depending on which navigation item is clicked. Everything works fine.

    I have several responsive carousels that I've downloaded. They work fine.

    When I combine the two, by loading in the carousel page when a user clicks the appropriate navigation link, the carousel doesn't work. Blank carousel. I'm stumped. I thought I could circumvent it by trying a different carousel. But same issue every time.


    Here's the basic page:

    Code:
    
    <!DOCTYPE html>
    <html>
    <head>
    
    
    	<link rel="stylesheet" href="css/styles_default.css" type="text/css" media="screen"/>
    
    	<script type="text/javascript" language="javascript" src="js/jquery-2.0.0.js"></script>
    	
    </head>
    
    <body>
    
     	<!-- the beginning background, logo and "menu" link: this disappears to reveal full site //////////////////////////////////////// -->
     	
    	 <div id="full-size-background">
    	 	<div id="starting_point">
    	 		<img id="start_logo" src="images/logo.png">
    	 		<a href="#" id="starting_point_link">MENU</a>
    	 		
    	 	</div>
    	 </div>
    
    	 <!-- MAIN SITE content below //////////////////////////////////////////////////////////////////////////////////////////////////// -->
    	 
    	 <?php include 'inc/header.php'; ?>
    	 
    	 
    	
    
    	 <div id="main_center_box" class="">
    		<?php include 'inc/mazenga.php'; ?>
    		
    		
    		<?php include 'inc/footer.php'; ?>
    	</div>
    	
    	<a id="walsh_link" href="http://www.thewalshgroup.ca/" target="_blank">POWERED BY THE WALSH GROUP </a>
    		
    		
    		<script type="text/javascript" language="javascript" src="js/functions.js"></script>
    		
    here's the script for the navigation:
    
    <script>
    $(document).ready(function() {
    $("#top_nav li a, #footer_info").on("click", function(e){
    	
    				// prevent the a href from doing what it naturally does.
    				e.preventDefault();
    
    				// highlight active nav link & turn off others				
    				$('.current').attr('class','link1');
    				$(this).attr('class','current');
    				
    				// set the hashtag in url
    				window.location.hash = $(this).attr('name');
    				
    				// which page chosen?
    				var loadpage = 'inc/'+$(this).attr('name')+'.php';
    				var footer = 'inc/footer.php';
    				
    				// fade out the main box			
    				$('#main_center_box').stop().animate({ opacity: 0, zIndex:0 }, 700, function() { 
    					$('#main_center_box2').css({opacity:1}).stop().animate({ opacity: 0 }, 700, function() { /* animation complete */ });
    					// now load the page that matches navigation selected
    					$('#main_center_box').css({zIndex:1 }).load(loadpage).stop().animate({ opacity: 1}, 700, function() { /* animation complete */ });
    					
    				});
    	
    	});
    });	
    </script>	
    		
    </body>
    </html>
    and here's a sample carousel that won't work, when loaded.


    Code:
    <!DOCTYPE HTML>
    
    <link href="css/flexisel_style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.flexisel.js"></script>
    
    
    
    <ul id="flexiselDemo1">	
    	<li><img src="images/logo-nyt.png" /></li>
    	<li><img src="images/logo-microsoft.png" /></li> 	
    	<li><img src="images/logo-ebay.png" /></li> 	
    	<li><img src="images/logo-hp.png" /></li> 
    	<li><img src="images/logo-youtube.png" /></li> 							    	  	       	   	    	
    </ul>
     
    <div class="clearout"></div> 
    
    
        
     <script type="text/javascript">
    
    $(window).load(function() {
    	$("#flexiselDemo1").flexisel();
    	$("#flexiselDemo2").flexisel({
    		enableResponsiveBreakpoints: true,
        	responsiveBreakpoints: { 
        		portrait: { 
        			changePoint:480,
        			visibleItems: 1
        		}, 
        		landscape: { 
        			changePoint:640,
        			visibleItems: 2
        		},
        		tablet: { 
        			changePoint:768,
        			visibleItems: 3
        		}
        	}
        });
    
    	$("#flexiselDemo3").flexisel({
    		visibleItems: 5,
    		animationSpeed: 1000,
    		autoPlay: true,
    		autoPlaySpeed: 3000,    		
    		pauseOnHover: true,
    		enableResponsiveBreakpoints: true,
        	responsiveBreakpoints: { 
        		portrait: { 
        			changePoint:480,
        			visibleItems: 1
        		}, 
        		landscape: { 
        			changePoint:640,
        			visibleItems: 2
        		},
        		tablet: { 
        			changePoint:768,
        			visibleItems: 3
        		}
        	}
        });
        
    });
    </script>

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    408
    Thanks
    17
    Thanked 2 Times in 2 Posts
    every time I think I can't figure it out, and post here...

    I figure it out.

    I got things working with this:

    $(document).ready(function() {

    instead of

    $(window).load(function() {

    sometimes it's the simple things.


  •  

    Posting Permissions

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