javascript - Multiple ajax requests, how keep user looking at same div when page is scrolling -
the page has 3 inputs , 3 content areas. if user enters value last input, 3 content areas updated , become bigger. 2 of them above last input, causing user watch content 'fly' past screen.
how keep user looking @ same input, , scroll gracefully last content area
fiddle here:
<div id="content1"> content 1 </div> <div id="content2"> content 2 </div> <a href="#" id="videos-link"> click here </a> <div id="content3"> content 3 </div> $(document).ready(function() { $('#videos-link').click(function(event) { event.preventdefault(); $('#content3').html('loading'); $.ajax({ url: '/echo/js/?js=hello%20world!', complete: function(response) { var height = (math.random() * 1000) + 300; $('#content1').height(height); } }); $.ajax({ url: '/echo/js/?js=hello%20world!', complete: function(response) { var height = (math.random() * 1000) + 300; $('#content2').delay(200).height(height); } }); $.ajax({ url: '/echo/js/?js=hello%20world!', complete: function(response) { var height = (math.random() * 1000) + 300; $('#content3').html('loading').delay(500).height(height).html('finished loading'); var offsettop = jquery("#content3").offset().top - 10; $('html,body').animate({ scrolltop: offsettop }, 1000); } }); }); });
in fiddle, user keep looking @ 'a' element, , scroll gracefully content3 div when ajax request complete.
when content1
, content2
expand pushed down looks scrolling scrolling down..
there no actual solution this, workaround can scroll 3rd <a>
element every time change height of divs before in dom.
step 1: store relative offset of <a>
tag
var relative_offset = $('#videos-link').offset().top - $(window).scrolltop();
you want value before ajax response best place define relative_offset
in begging of click event.
step 2: change scroll
for both 1st , 2nd ajax responses need change scrolltop of window
<a>
tag position - relative_offset
:
//... $('#content_x').height(height); // offset().op of <a> has changed $(window).scrolltop($('#videos-link').offset().top - relative_offset);
final code have not tested should this:
(i might have missed +
-
somewhere believe current approach of solving issue)
$('#videos-link').click(function(event) { event.preventdefault(); var relative_offset = $('#videos-link').offset().top - $(window).scrolltop(); $('#content3').html('loading'); $.ajax({ url: '/echo/js/?js=hello%20world!', complete: function(response) { var height = (math.random() * 1000) + 300; $('#content1').height(height); $(window).scrolltop($('#videos-link').offset().top - relative_offset); } }); $.ajax({ url: '/echo/js/?js=hello%20world!', complete: function(response) { var height = (math.random() * 1000) + 300; $('#content2').delay(200).height(height); $(window).delay(201).scrolltop($('#videos-link').offset().top - relative_offset); // set delay 201 sure runes after } }); $.ajax({ url: '/echo/js/?js=hello%20world!', complete: function(response) { var height = (math.random() * 1000) + 300; $('#content3').html('loading').delay(500).height(height).html('finished loading'); var offsettop = jquery("#content3").offset().top - 10; $('html,body').animate({ scrolltop: offsettop }, 1000); } }); });
related question: stop automatic scrolling on page content change
Comments
Post a Comment