Jquery page jump

Luey
Luey used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Michel PlungjanIT Expert
Top Expert 2009

Commented:
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

Author

Commented:
Here is the link
example
IT Expert
Top Expert 2009
Commented:
Error

Timestamp: 22/05/2012 18:34:02
Error: $("#profile_email").validate is not a function
Source File: /javascript/webcahoot_javascript.js
Line: 90

But your problem is that the height of the page changes when you fadeout and then when the image fades in, the page is placed higher.

Change

<div id="pro_images" class="margin_top_30 margin_bottom_20 border_1_dk_grey  margin_bottom_10;">


to

<div id="pro_images" style="margin_top_30 margin_bottom_20 border_1_dk_grey  margin_bottom_10; height:375px;">

I also suggest you do

$(currentElement).fadeOut(function() {$(this).next().fadeIn(600)});

instead of your current code
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
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.
Michel PlungjanIT Expert
Top Expert 2009

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

Author

Commented:
Thanks

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial