[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 685
  • Last Modified:

Partial page refresh does not go to top of page Firefox, Safari, Chrome

I have a search results page with filters down the left.  With Firefox, Safari and Chrome the left hand side bullet filters will refresh on click the right hand col of page without getting the whole page again.  That works fine , but I would like the right column to restart at top - so number of results can be seen. At the moment if you are down at the lower right col and click a filter bullet the right hand side refreshes but does not go to top.

Appreciate your help.

Here is the page in question:

http://www.housecarers.com/test2/advanced-search-results-housesitters.cfm?co=Australia&HouseSitTerm=a&PetType=a,e,o

This is the part of the page that refreshes for firefox chrome safari. (BTW for IE9 the whole page refreshes due to history/ query string issues)

<div class="right-col">
                <div id="results_wrapper">
                              <div id="for_load">
0
Ian White
Asked:
Ian White
  • 16
  • 15
  • 2
1 Solution
 
jrm213jrm213Commented:
This should work for you. In the code that does the refresh have it scroll the window to the position you want.

http://flesler.blogspot.com/2007/10/jqueryscrollto.html
0
 
Michel PlungjanIT ExpertCommented:
You can do

document.getElementById("right-col").scrollIntoView();
0
 
Ian WhiteAuthor Commented:
Thanks for that.

As I am a bit of a java script novice. Where would I insert the code into jscript? The design company who gave me the code have abandoned me for corporate clients.

http://www.housecarers.com/test2/advanced-search-results-housesitters.cfm?co=Australia&HouseSitTerm=a&PetType=a,e,o

Click on filter in right column and left column needs to go to top.  For firefox, chrome and safari
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Michel PlungjanIT ExpertCommented:
I'd love to help you but I cannot find anything called filter on the page you gave me
0
 
jrm213jrm213Commented:
I think he means that the whole left side is a filter, when you click/unclick any of the checkboxes or other controls available he wants the screen to scroll so you can see the first result on the right side.

Currently when you check a filter that is far down on the page that you have to scroll to see it then when the filter is applied and the results change you can't see the #1, #2 result etc... the page stays scrolled to where you were to be able to see and check the filter.
0
 
Michel PlungjanIT ExpertCommented:
Thanks

So we will be looking at slipping this in, in the success bit of the update

$("html").scrollTop();

or

var pos = $('#results_wrapper').position();
$('#container').scrollTop(pos.top);

I will look later
0
 
Ian WhiteAuthor Commented:
Sorry I meant click on any of the filters/ bullets in the left column and the right column refreshes with chrome, safari , firefox

I just need to know how I put the suggested code into the page and how I invoke the scroll to top?

Do I just put it between <script>  </script>  ?

Thanks for your help
0
 
Michel PlungjanIT ExpertCommented:
No, we need to add it to the success part of the Ajax. I'll look in a few hours
0
 
Ian WhiteAuthor Commented:
Thanks - much appreciated.
0
 
Michel PlungjanIT ExpertCommented:
Try this

in script.js line 205 find

function makeQuery() {
queryPage = State.url;
/* Temporary Query Page for Demo - the following two lines need to be commented in live site */
/* queryPage = queryPage.replace('advanced', 'ajax/tmp-advanced'); */
/* queryPage = queryPage.replace('.cfm', '.php'); */
$('#results_wrapper').load(queryPage + ' #for_load');
}

can you try changing the last line from

$('#results_wrapper').load(queryPage + ' #for_load');

to

$('#results_wrapper').load(queryPage + ' #for_load').scrollTop();

OR

$('#results_wrapper').load(queryPage + ' #for_load',function() {$('#results_wrapper').scrollTop();});
0
 
Ian WhiteAuthor Commented:
Thanks I tried the 2nd one and got error:

TypeError: "#results_wrapper".load is not a function

I put the 1st one in and no errors. But the page still does not go to top .
I have this in now at

http://housecarers.com/test2/advanced-search-results-housesitters.cfm?co=United%20States&sta=2&PetType=a,b

If (using firefox, safari or chrome) you scroll down and click on a motivation key word bullet in left margin, the page refreshes but user stays at position so cant see results.

Appreciate you help
0
 
Michel PlungjanIT ExpertCommented:
That is close to impossible. I did not change the load, just tagged a handler on to the existing one...

I'll try myself in a few ours (6am here)
0
 
Ian WhiteAuthor Commented:
Ok thanks 3 pm here

What about your other suggestions?


document.getElementById("right-col").scrollIntoView();

or

$("html").scrollTop();

Where would I put those in the suggestions?
0
 
Michel PlungjanIT ExpertCommented:
I do not understand why


$('#results_wrapper').load(queryPage + ' #for_load',
  function() {
    $('#results_wrapper').scrollTop(); // or $("html").scrollTop();
   }
);

would result in the error you reported.

Any other console errors near that statement?

If that is the place the filter refreshes, then the .load worked before and should work after.

Can you add the code to a test page I can look at?
0
 
Ian WhiteAuthor Commented:
Hi I put the code up here with the JS change:
$('#results_wrapper').load(queryPage + ' #for_load',function() {$('#results_wrapper').scrollTop();});

http://housecarers.com/test3/advanced-search-results-housesitters.cfm?co=au&sta=2&PetType=d,g&keywords2=ba

This is the test3 environment - and I am not making changes there - so you can view it ok

Last time I saw a js error in firebug. Does not come up this time?
However browser still does not want to play ball. If you click a trigger down the page - right col does not go to top

Thanks for your help

Ian
0
 
Michel PlungjanIT ExpertCommented:
It's bedtime here sorry
0
 
Michel PlungjanIT ExpertCommented:
Please try


$('#results_wrapper').load(queryPage + ' #for_load',
  function() {
    $('html, body').scrollTop(0);
   }
);
0
 
Ian WhiteAuthor Commented:
Hi  Thanks, I tried that - version at

http://www.housecarers.com/test3/advanced-search-results-housesitters.cfm?co=au&PetType=a,b

However still right hand side does not go to top for firefox, safari, chrome
0
 
Michel PlungjanIT ExpertCommented:
Please try


$('#results_wrapper').load(queryPage + ' #for_load',
  function() {
    alert("trying to scroll");
    $('html, body').scrollTop(0);
   }
);

It should alert just after finishing loading
0
 
Ian WhiteAuthor Commented:
Hi

Thanks - Yes I put this in here:

http://www.housecarers.com/test3/advanced-search-results-housesitters.cfm?when=&dateformatin=mm-dd-yy&co=ca&sta=1

On initial load the alert comes up  and when clicking on filter it alerts after load then goes to top of page as required.

So what is the next step - to do this without the alert?

thanks for all your efforts - much apprciated
0
 
Michel PlungjanIT ExpertCommented:
Very strange you should get the trigger before full load.

This should work - it delays 200 ms before trying to scroll.

If it only works partially, try changing the 200 to 500


$('#results_wrapper').load(queryPage + ' #for_load',
  function() {
    setTimeout(function() { $('html, body').scrollTop(0);},200);
   }
);
0
 
Ian WhiteAuthor Commented:
Hi

Thanks, I put it in with both 200 and 500

http://www.housecarers.com/test3/advanced-search-results-housesitters.cfm?co=Australia&sta=NSW

But neither scroll
0
 
Michel PlungjanIT ExpertCommented:
That is too weird.
Try 1000 and show me the page
0
 
Ian WhiteAuthor Commented:
I tried 1000 already and have changed it

Again here is the page

http://www.housecarers.com/test3/advanced-search-results-housesitters.cfm?co=Australia&sta=NSW

If this does not work I downloaded the suggestion on

http://flesler.blogspot.com/2007/10/jqueryscrollto.html  and put it in my library
just not sure how to invoke it
0
 
Michel PlungjanIT ExpertCommented:
$.scrollTo(0);

instead of

function() {
    setTimeout(function() { $('html, body').scrollTop(0);},200);
 }

or try

function() {
  setTimeout(function() { $.scrollTo(0); },200);
 }
0
 
Ian WhiteAuthor Commented:
No joy

I tried that with 1000 too and put it up at
http://www.housecarers.com/test3/advanced-search-results-housesitters.cfm?co=us&sta=1&PetType=a&keywords=aa

I wonder if there is some other conflict in the jscript that is clobbering this?  I notice there is some debounce and throttle in there?

I changed this  (1000 to 100) - but did not make a difference

// Make Query
                  if ( History.enabled ) {
                    checklist.find('a').click( $.throttle( 100, pushHistory ) );
                  }
0
 
Michel PlungjanIT ExpertCommented:
Can you first add the scrollto library script just after the jquery script tag?

scrollTo is not found so that would for sure not work

Secondly if that does not work, then you might be right

Lastly, you really need to fix the aspect ratio of your pictures. They look really silly squashed like that. If you only specify width and put them in a fixed height div with overflow:hidden, then it will look better
0
 
Ian WhiteAuthor Commented:
Thanks I created a seperate problem for this squashed photos , if you could help. I will have another go at the scrolling - maybe not doable. I see another professional site doesnt scroll with partial page refresh and linkedin.com does a total page refresh.

The designers changed IE to do a total page refresh. So I can get the page in can you please tell me how to do total page refresh for chrome, safari, firefox .. and i can work on the annoying scrolling problem in the longer term.  I am not sure what the designers (who are too busy on big corporates to help the small guy) did - but IE just does total page refresh and of course no scrolling problem.
0
 
Michel PlungjanIT ExpertCommented:
I cannot see how they did it. Perhaps they serve another page to IE
0
 
Ian WhiteAuthor Commented:
Can you first add the scrollto library script just after the jquery script tag?
Please advise what you mean by this?
Thanks


This is in my page currently:
      <script src="js/libs/modernizr.js"></script>
      <script src="js/libs/jquery-1.7.1.min.js"></script>
      <script src="js/libs/jquery.hoverIntent.minified.js"></script>
      <script src="js/libs/jquery.cycle.all.min.js"></script>
      <script src="js/libs/jquery.selectBox.js"></script>
      <script src="js/libs/jquery-ui-1.8.18.custom.min.js"></script>
      <script src="js/libs/selectivizr-min.js"></script>
      <script src="js/libs/jquery.ezmark.min.js"></script>
      <script src="js/libs/si.files.min.js"></script>
      <script src="js/libs/jquery.validate.min.js"></script>
      <script src="js/libs/jquery.fancybox-1.3.4.pack.js"></script>
      <script src="js/libs/jquery-qshandler.min.js"></script>
      <script src="js/libs/jquery.ba-throttle-debounce.min.js"></script>
      <script src="js/libs/jquery.history.js"></script>
         <script src="js/libs/scrollTo-1.4.3.1-min.js"></script>
      <script src="js/scripts.js"></script>


Can you please clarify what you mean
0
 
Ian WhiteAuthor Commented:
This is a great mystery - started working with old code

$('#results_wrapper').load(queryPage + ' #for_load').scrollTop();

Sometimes works - sometimes does not. Not sure if it is a browser/ computer setting. The complex - world of the internet ?
0
 
Ian WhiteAuthor Commented:
Thanks for your persistance
0
 
Michel PlungjanIT ExpertCommented:
That is very strange. You said something about throttling. I have no experience with that

To answer a previous post: Your script tags seem correct, but the console complained about $.scrollTo()
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 16
  • 15
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now