View Full Version : Step Carousel Viewer v1.9 Page Jumping on click

07-05-2012, 06:05 PM
Hello all,

I'm using the Step Carousel Viewer v1.9 on my site over at Baseball Animals (http://www.baseballanimals.com) 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.

07-05-2012, 07:47 PM
Add the highlighted as shown:

<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']
var config = stepcarousel.animals;
function resume(){
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);

07-06-2012, 02:25 PM
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.

07-06-2012, 05:14 PM
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.