Results 1 to 4 of 4

Thread: Step Carousel Viewer v1.9 Page Jumping on click

  1. #1
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Step Carousel Viewer v1.9 Page Jumping on click

    Hello all,

    I'm using the Step Carousel Viewer v1.9 on my site over at Baseball Animals for the "Choose Your Teams Blog" underneath the featured slider on the homepage.

    The issue I'm having with this script you have graciously provided is that when ever the page is scrolled lightly down and the advancement buttons are clicked, the screen jumps to the top of the page. I'd appreciate any help in resolving this issue.

    Also, is there an easy way to get the carousel to automate on it's own once the buttons have been used to advance the images?

    Thanks in advance for any help anyone can provide me.
    Last edited by Coldmoonrising; 07-05-2012 at 06:07 PM. Reason: Forgot to add extra problem

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Add the highlighted as shown:

    Code:
    <script type="text/javascript">
    
    stepcarousel.setup(stepcarousel.animals = {
    	galleryid: 'mygallery', //id of carousel DIV
    	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
    	panelclass: 'panel', //class of panel DIVs each holding content
    	autostep: {enable:true, moveby:2, pause:2000},
    	panelbehavior: {speed:500, wraparound:true, wrapbehavior:'slide', persist:true},
    	defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -35, 40], rightnav: ['http://i38.tinypic.com/33o7di8.gif', 0, 40]},
    	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
    	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
    })
    jQuery(function($){
    	var config = stepcarousel.animals;
    	function resume(){
    		clearTimeout(config.buttonstimer);
    		config.buttonstimer = setTimeout(function(){
    			config.autostep.status = '';
    			$('#' + config.galleryid).trigger('mouseleave');
    		}, config.autostep.pause);
    	}
    	$('#prev_2, #next_2').click(function(e){e.preventDefault(); resume();}).mouseleave(resume);
    });
    </script>
    <!-- END STEP CAROUSEL -->
    Last edited by jscheuer1; 07-05-2012 at 08:45 PM. Reason: code improvement
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the reply, it was actually much more simpler then I had expected. When I looked at my site this morning I noticed in the address bar that it was adding the /# at the end. I took this as an anchor adding it from the href="#" I am custom to using when I don't want a link going anywhere.

    I searched through my .js file that I altered and located the issue. It was the <a href="#" ... > that was causing the jump. I removed the # and thankfully my site no longer jumps to the top of the page... now to set this thread as resloved, lol.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I thought you might have edited the script. But what you've done now doesn't take care of your other request - the resuming of the auto scroll after navigating with the arrows.

    My above solution took care of both problems.

    Now that you've edited the script yet again, it may no longer do either. But it's still worth a try. It should still do the auto scroll resume, as long as you haven't changed the id attributes of the buttons. Since the page no longer jumps, that part shouldn't hurt anything - may even help some browsers. Unless you tested your solution in all browsers, it might not work in each and every one.

    Did you just remove the #, or did you remove the href="#"? Unless it was the latter, there could still be problems in some browsers.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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