Avatar of Luey
Luey
Flag for United States of America asked on

Jquery page jump

Hello I have some jquery code that works but has a problem of jumping about 200 pixels up the page every time I run the function.  It is an image slide show that is setting all children in the div to display none. Then sets the first child to display block.  Each time next_image is clicked i am just hiding the current element and fading in the next element.  It all works except for the page jump. (not back to the top)  Any help would be appreciated.

$(window).load(function () {
   
   var count = $("#pro_images > img").length;
     if  (count > 1){
   $("#next_image").show();
	 }
	 
   $("#pro_images").children().css('display', 'none');
    $("#pro_images img:first-child").css('display', 'block');
	$("#pro_images img:first-child").addClass('first');
	$("#pro_images img:last-child").addClass('last');

    $("#prev_image").click(leftNextImage);
    $("#next_image").click(rightNextImage);
  
var currentElement = $("#pro_images img:first-child")
 
function rightNextImage() {
	
	$(currentElement).hide().next().fadeIn(600);
	currentElement = currentElement.next();
	$("#prev_image").show();
	
	if   (currentElement.hasClass("last")) {
		$("#next_image").hide();
         }
		  
}///end rightNextImage


function leftNextImage() {
	
	$(currentElement).hide().prev().fadeIn(600);
	currentElement = currentElement.prev(); 
	$("#next_image").show();
	
	if   (currentElement.hasClass("first")) {
		$("#prev_image").hide();
         }
} ///end leftNextImage
});

Open in new window

jQueryJavaScript

Avatar of undefined
Last Comment
Luey

8/22/2022 - Mon
Michel Plungjan

Impossible to see what causes this.- it is surely a CSS or image size issue and your code does not reveal what it could be.

Please post a URL or add your code to http://jsfiddle.net with relevant CSS and images - you can use http://lorempixel.com/ to generate image urls that match your own

Thanks
Luey

ASKER
Here is the link
example
ASKER CERTIFIED SOLUTION
Michel Plungjan

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Luey

ASKER
I understand now however that will introduce another problem for me.  The site is dynamic and I will never have control over the heights of the pictures.  I can get the heights of the pictures and set the div to the tallest one but I was trying to avoid that due to possible content below the pictures.  Do you have any suggestions.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Michel Plungjan

Set overflow:hidden on the div or load and measure the images and set the parent container to the tallest - or don't fade
Luey

ASKER
Thanks