Solved

Page rescrolling to top in some browsers when Javascript runs

Posted on 2014-02-27
9
513 Views
Last Modified: 2014-02-27
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!
0
Comment
Question by:bbdesign
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39892740
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
 
LVL 58

Expert Comment

by:Gary
ID: 39892795
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
 

Author Comment

by:bbdesign
ID: 39892871
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
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

 
LVL 58

Expert Comment

by:Gary
ID: 39892878
In Safari scroll to the bottom and click the links.
Your links are not the same height, it is shorter than the content.
0
 

Author Comment

by:bbdesign
ID: 39892966
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39892992
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
 

Author Comment

by:bbdesign
ID: 39893302
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
 
LVL 58

Expert Comment

by:Gary
ID: 39893313
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
 

Author Comment

by:bbdesign
ID: 39893594
Thanks for your help!
0

Featured Post

Enroll in June's Course of the Month

June’s Course of the Month is now available! Experts Exchange’s Premium Members, Team Accounts, and Qualified Experts have access to a complimentary course each month as part of their membership—an extra way to sharpen your skills and increase training.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question