Link to home
Start Free TrialLog in
Avatar of Luey
LueyFlag 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

Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

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
Avatar of Luey

ASKER

Here is the link
example
ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of 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.
Set overflow:hidden on the div or load and measure the images and set the parent container to the tallest - or don't fade
Avatar of Luey

ASKER

Thanks