logo

$10
Slider "jumps" on page load

I have a featured content slider (neumananderson.com), when the page loads it shows multiple slides at once for a split second. I'm using a theme called Bloing, but the author hasn't been much help in trying to solve this problem..

Chris H | 03/30/10 at 3:22pm | Edit

slider

(3) Possible Answers Submitted...

  • avatar
    Last edited:
    03/31/10
    8:45am
    Buzu B says:

    I just see a very very fast jump. I guess that is what you are talking about. It appears to be the javascript what is causing the problem. Let me check out under the hood and see how it is working and how we can solve it.

    • 03/30/10 3:43pm

      Buzu B says:

      Ok. try moving this part of the code


      
<script type="text/javascript">
      
	    $(document).ready(function() { 
      
	    	$('#header-slider-inner').cycle({ 
      
	    	    fx:      'scrollUp', 
      
	    	    speed:    500, 
      
	    	    timeout:  5000,
      
	    	    next:     '.slider-next',
      
	    	    cleartypeNoBg: true,
      
	    	    pause:    1,
      
	    	    delay:  -2000
      
	    	}); 
      
	    	$('#slider-side').cycle({ 
      
	    	    fx:      'scrollDown', 
      
	    	    speed:    500, 
      
	    	    timeout:  4000,
      
	    	    random:  1
      
	    	}); 
      
	    	$('#top').click( function() {
      
	    		$.scrollTo(0, 500);
      
	    	});
      
        }); 
      
	</script>


      Up to the head section... That should do it. If it doesn't, let me know.

    • 03/30/10 3:55pm

      Chris H says:

      Moving that to the head actually breaks the slider. Rather than just showing multiple slides for a split second, it just stays that way and doesn't slide at all.

      Attached Image

    • 03/30/10 4:10pm

      Buzu B says:

      Oh yeah, sorry...you have to also move your links to the jquery library and the other js files.

      This whole thing:

      <script type="text/javascript" src="http://www.neumananderson.com/wp-content/themes/bloing/scripts/jquery-1.2.6.min.js"></script>
      <script type="text/javascript" src="http://www.neumananderson.com/wp-content/themes/bloing/scripts/jquery.cycle.all.min.js"></script>

      <script type="text/javascript" src="http://www.neumananderson.com/wp-content/themes/bloing/scripts/jquery.scrollTo-min.js"></script>

      <!--[if IE 6]>
      <script type="text/javascript" src="http://www.neumananderson.com/wp-content/themes/bloing/scripts/DD_belatedPNG_0.0.8a-min.js"></script>
      <script type="text/javascript">
      DD_belatedPNG.fix('h2#about, h2#services, h2#recent-posts, h2#search, h1.blog-post, h1.portfolio-post, h2#contact, h1.blog, h1.portfolio, h2#portfolio, h2.list-portfolio, h3#comments, h3#respond, a.slider-read-more, a.slider-next');
      </script>
      <![endif]-->

      <script type="text/javascript">
      $(document).ready(function() {
      $('#header-slider-inner').cycle({
      fx: 'scrollUp',
      speed: 500,
      timeout: 5000,
      next: '.slider-next',
      cleartypeNoBg: true,
      pause: 1,
      delay: -2000
      });
      $('#slider-side').cycle({
      fx: 'scrollDown',
      speed: 500,
      timeout: 4000,
      random: 1
      });
      $('#top').click( function() {
      $.scrollTo(0, 500);
      });
      });
      </script>

    • 03/30/10 4:15pm

      Chris H says:

      Almost. There is no more jump, but not next doesn't work any more.

    • 03/30/10 4:25pm

      Buzu B says:

      you have a syntax error.

      where it should be

      fx: 'scrollUp',

      you have

      fx: '',

      so the script doesn't know what to do.

    • 03/30/10 4:34pm

      Buzu B says:

      Make sure your code looks like this:

       <script type="text/javascript">
      
	    $(document).ready(function() { 
      
	    	$('#header-slider-inner').cycle({ 
      
	    	    fx: 'scrollUp',  
      
	    	    speed:    500, 
      
	    	    timeout:  5000,
      
	    	    next:     '.slider-next',
      
	    	    cleartypeNoBg: true,
      
	    	    pause:    1,
      
	    	    delay:  -2000
      
	    	}); 
      
	    	$('#slider-side').cycle({ 
      
	    	    fx:      'scrollDown', 
      
	    	    speed:    500, 
      
	    	    timeout:  4000,
      
	    	    random:  1
      
	    	}); 
      
	    	$('#top').click( function() {
      
	    		$.scrollTo(0, 500);
      
	    	});
      
        }); 
      
	</script>


      Just copy & paste.

    • 03/30/10 4:36pm

      Chris H says:

      My code looks like this


      
 <script type="text/javascript">
      
	    $(document).ready(function() { 
      
	    	$('#header-slider-inner').cycle({ 
      
	    	    fx:      '<?php echo $theme_options['slider_effect']; ?>', 
      
	    	    speed:    500, 
      
	    	    timeout:  5000,
      
	    	    next:     '.slider-next',
      
	    	    cleartypeNoBg: true,
      
	    	    pause:    1,
      
	    	    delay:  -2000
      
	    	}); 
      
	    	$('#slider-side').cycle({ 
      
	    	    fx:      'scrollDown', 
      
	    	    speed:    500, 
      
	    	    timeout:  4000,
      
	    	    random:  1
      
	    	}); 
      
	    	$('#top').click( function() {
      
	    		$.scrollTo(0, 500);
      
	    	});
      
        }); 
      
	</script>


      By using fx: '<?php echo $theme_options['slider_effect']; ?>',

      rather than

      fx: 'scrollUp',

      I can from within the theme options to choose from several options as to how the slider to move.

      And, changing <?php echo $theme_options['slider_effect']; ?> to fx: 'scrollUp', breaks the slider again.

    • 03/30/10 4:46pm

      Buzu B says:

      The problem is you php is not echoing anything. If I edit the page using firebug and add the srcrollUp it works fine. The problem is the in the echoing. or maybe you don't have the option $theme_options['slider_effect'] saved or set.

    • 03/30/10 5:00pm

      Buzu B says:

      Can you grant me access to the files so I can solve the problem for you? I know where the problem might be, but cannot solve it from outside... Or tell me how it is you are saving the theme options, are you using a plugin? the problems is a mix between javascript and php. Javascript the way you had it at the beginning is causing the jump, but moving it to the top is causing php to fail to print the option. So you have to move some php also... At least, if for any reason you can't/don't want to grant me access can you post the entire code for the whole page?

    • 03/30/10 6:02pm

      Buzu B says:

      let me know if you send the files pls....

    • 03/30/10 6:03pm

      Buzu B says:

      never mind... They were on my spam folder...

    • 03/30/10 6:17pm

      Buzu B says:

      Ok, so you have to put this on the header 


      <?php $theme_options = get_option('bloing'); ?>
      
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery-1.2.6.min.js"></script>
      
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.cycle.all.min.js"></script>
      
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.scrollTo-min.js"></script>
      
	
      
	    <!--[if IE 6]>
      
	    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/DD_belatedPNG_0.0.8a-min.js"></script>
      
	    <script type="text/javascript">
      
	    	DD_belatedPNG.fix('h2#about, h2#services, h2#recent-posts, h2#search, h1.blog-post, h1.portfolio-post, h2#contact, h1.blog, h1.portfolio, h2#portfolio, h2.list-portfolio, h3#comments, h3#respond, a.slider-read-more, a.slider-next');
      
	    </script>
      
	    <![endif]-->
      
    
      
    <script type="text/javascript">
      
	    $(document).ready(function() { 
      
	    	$('#header-slider-inner').cycle({ 
      
	    	    fx:      '<?php echo $theme_options['slider_effect']; ?>', 
      
	    	    speed:    500, 
      
	    	    timeout:  5000,
      
	    	    next:     '.slider-next',
      
	    	    cleartypeNoBg: true,
      
	    	    pause:    1,
      
	    	    delay:  -2000
      
	    	}); 
      
	    	$('#slider-side').cycle({ 
      
	    	    fx:      'scrollDown', 
      
	    	    speed:    500, 
      
	    	    timeout:  4000,
      
	    	    random:  1
      
	    	}); 
      
	    	$('#top').click( function() {
      
	    		$.scrollTo(0, 500);
      
	    	});
      
        }); 
      
	</script>


      That should solve the problem.

      Remember to erase the code form footer.php

      this code:
      <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery-1.2.6.min.js"></script>
      <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.cycle.all.min.js"></script>
      <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.scrollTo-min.js"></script>

      <!--[if IE 6]>
      <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/DD_belatedPNG_0.0.8a-min.js"></script>
      <script type="text/javascript">
      DD_belatedPNG.fix('h2#about, h2#services, h2#recent-posts, h2#search, h1.blog-post, h1.portfolio-post, h2#contact, h1.blog, h1.portfolio, h2#portfolio, h2.list-portfolio, h3#comments, h3#respond, a.slider-read-more, a.slider-next');
      </script>
      <![endif]-->

      <script type="text/javascript">
      $(document).ready(function() {
      $('#header-slider-inner').cycle({
      fx: '<?php echo $theme_options['slider_effect']; ?>',
      speed: 500,
      timeout: 5000,
      next: '.slider-next',
      cleartypeNoBg: true,
      pause: 1,
      delay: -2000
      });
      $('#slider-side').cycle({
      fx: 'scrollDown',
      speed: 500,
      timeout: 4000,
      random: 1
      });
      $('#top').click( function() {
      $.scrollTo(0, 500);
      });
      });
      </script>
      is what you will erase from footer.php

  • avatar
    Last edited:
    03/30/10
    4:41pm
    Pradipta Sinha says:

    ok, just replace the code



    <script type="text/javascript">
    $(document).ready(function() {
    $('#header-slider-inner').cycle({
    fx: 'scrollUp',
    speed: 500,
    timeout: 5000,
    next: '.slider-next',
    cleartypeNoBg: true,
    pause: 1,
    delay: -2000
    });
    $('#slider-side').cycle({
    fx: 'scrollDown',
    speed: 500,
    timeout: 4000,
    random: 1
    });
    $('#top').click( function() {
    $.scrollTo(0, 500);
    });
    });
    </script>




    with


    

    
     <script type="text/javascript">
    
	    	$('#header-slider-inner').cycle({ 
    
				fx:      'scrollUp',
    
				next:   '.slider-next',
    
				timeout:  4000,
    
				pause:  1
    
	    	}); 
    
	    	$('#slider-side').cycle({ 
    
	    	    fx:      'scrollDown', 
    
	    	    speed:    500, 
    
	    	    timeout:  4000,
    
	    	    random:  1
    
	    	}); 
    
	    	$('#top').click( function() {
    
	    		$.scrollTo(0, 500);
    
	    	});
    
	</script>


    let me know I think should fix :)

    Previous versions of this answer: 03/30/10 at 4:38pm | 03/30/10 at 4:41pm

    • 03/30/10 4:42pm

      Chris H says:

      Breaks the slider

    • 03/30/10 4:50pm

      Pradipta Sinha says:

      Just leave the page as it was first the just repalce the <script> ...Code ... </script> SEction with

      <script type="text/javascript">

      $('#header-slider-inner').cycle({

      fx: 'scrollUp',

      next: '.slider-next',

      timeout: 4000,

      pause: 1

      });

      $('#slider-side').cycle({

      fx: 'scrollDown',

      speed: 500,

      timeout: 4000,

      random: 1

      });

      $('#top').click( function() {

      $.scrollTo(0, 500);

      });

      </script>

      Thanks let me know.

    • 03/30/10 4:54pm

      Chris H says:

      Nope. The slider works, but still has the "jump/multiple slides" issue.

  • avatar
    Last edited:
    03/30/10
    6:55pm
    Mathieu Hallé says:

    hi,

    your problem is because all slides are show at load and the script waits for the DOM to be ready before it properly placing/hiding them.

    to solve this, in your css, put the containers (.slider-item) display:none.

    then just before you call your script to cycle, add $('.slider-item:first').css('display', 'block');

    if i take the original code you posted it should look like that 


    

    

    
<script type="text/javascript">
    

    
	    $(document).ready(function() { 
    
                
    
                $('.slider-item:first').css('display', 'block');
    
    
    
	    	$('#header-slider-inner').cycle({ 
    

    
	    	    fx:      'scrollUp', 
    

    
	    	    speed:    500, 
    

    
	    	    timeout:  5000,
    

    
	    	    next:     '.slider-next',
    

    
	    	    cleartypeNoBg: true,
    

    
	    	    pause:    1,
    

    
	    	    delay:  -2000
    

    
	    	}); 
    

    
	    	$('#slider-side').cycle({ 
    

    
	    	    fx:      'scrollDown', 
    

    
	    	    speed:    500, 
    

    
	    	    timeout:  4000,
    

    
	    	    random:  1
    

    
	    	}); 
    

    
	    	$('#top').click( function() {
    

    
	    		$.scrollTo(0, 500);
    

    
	    	});
    

    
        }); 
    

    
	</script>


    hope this solves your probleme.

This question has expired.





Current status of this question: Completed