Page rescrolling to top in some browsers when Javascript runs

Please refer to this test page:
http://www.berksfoods.com/retail-hot-dogs-test.htm

If you scroll down, there is a list of links to the left (Beef, Black Angus, etc.). If you click those, the color of the link changes and the content to the right changes. That is handled with this script:

$('#menu3 li').on('click', function(){
	var menu3click=$(this).index();
	$('#menu3 li').removeClass('onpage');
	$(this).addClass('onpage');
	if (!$('div#subcontent'+menu3click).is(':visible')){
		$('div.subcontent:visible').fadeOut(200, function(){
			$('div#subcontent'+menu3click).fadeIn(200);
		});
	}
});

Open in new window


They are not really links, though, the code looks like this:

<ul id="menu3">
	<li>HOT DOGS</li>
	<li>Beef</li>
	<li>Black Angus</li>
	<li>Original</li>
	<li>Grill</li>
	<li>Jumbo</li>
	<li>Cheese</li>
	<li>Fiesta</li>
	<li>Pretzel</li>
</ul>

Open in new window


On all of my browsers, this is working fine (Windows/Mac, IE, Firefox, Safari, Chrome). However, my client (who is running Safari on a MacBook Pro) claims that every time he clicks one of those "links", his browser rescrolls all the way to the top of the document, which is what we are trying to avoid with these animated content swaps. I have had him clear his cache, restart browser, etc., but still not working for him. He says, "the movement is abrupt, the page is not reloading", it just seems to bounce back up to the top of the document.

I don't see anything in my code that would cause this, as its all handled by Javascript. I would appreciate any advice as I don't know what to do, since I can't even duplicate the "problem".

Thank you!
Brad BansnerWeb DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
What's happening is that when you click the link and remove the content the page is shortened, the new content is added but the scroll position is being set at the no content position - which is somewhere in the middle of your hot dog
(If that makes sense)

I will have to think about a solution.
0
GaryCommented:
One possible solution is wrap all your subcontentn divs in one container, and add this container into your column resizing so it is always present on the page.
0
Brad BansnerWeb DeveloperAuthor Commented:
I don't really understand, since the menu on the left side is taller than the content area anyway (or at least around the same height). As I said, I can't even duplicate the behavior in any of my browsers. Can you?
0
Determine the Perfect Price for Your IT Services

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

GaryCommented:
In Safari scroll to the bottom and click the links.
Your links are not the same height, it is shorter than the content.
0
Brad BansnerWeb DeveloperAuthor Commented:
In my script that resizes the content areas (on page load), I added this:

$('#menu3').height(getmaxheight);

Open in new window


That might help with this? It will set the height of the left menu to the same as the maximum right-side content.

Not sure if this:

var getmaxheight=Math.max($('div.content3div').eq(0).height(),$('div.content3div').eq(1).height());

Open in new window


…only calculates the first instance of the content DIVs. I'm assuming it will ignore all the hidden ones that are setup for content swap when the menu is clicked.

I might need to re-run that calculation each time a menu item is clicked?
0
GaryCommented:
Yes - put the col resizer code in a function that you can call after you have faded in the content ($('div#subcontent'+menu3click).fadeIn(200))
And a call to the function to run at page load.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Brad BansnerWeb DeveloperAuthor Commented:
My client reports: "it doesn't jump as much". Maybe this is as good as it gets, it still need to resize if the secondary content is taller than the first, right?
0
GaryCommented:
Yes, its about the best you can get. Though it shouldn't be jumping at all if the content is the same or smaller.
0
Brad BansnerWeb DeveloperAuthor Commented:
Thanks for your help!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.