jQuery: Stop browser scrolling on event update beyond the fold?
- by neezer
I have several links at the bottom of my page that update content at the top of my page (more than a viewport away). Here's the gist of what the update looks like:
$('#private-photo div').fadeOut(function() {
$(this).html('<%= escape_javascript(image_tag current_user.private_photo.image.url(:profile)) %>');
}).fadeIn();
Basically it's just fading out the old content and fading in the new content.
My problem is that when this happens, the browser window automatically scrolls up just far enough so that the bottom of the updated content (#private-photo div) appears at the top of the browser viewport.
I do not want this to happen. I want the content to be updated (still fading in and out), but without the browser viewport realigning its focus. I want to keep the animation because if the user has a big enough screen, or if they are using a link closer to the top of the page, I still want them to see the animation.
Any ideas about how to prevent the browser from scrolling as described? If not, any suggestions for workarounds?
FYI, I have this same problem in Safari 4, Chrome (for Mac), & Firefox 3.5.
EDIT:
Here's the link that calls the update action, which is itself inside a Colorbox:
$('a.edit-photo').colorbox({
title: function() { return 'Edit Photo in ' + $(this).attr('rel'); },
overlayClose: false,
onComplete: function() {
$('#edit-photo-modal').submit(function(e) {
$('#photo_submit').after('<span id="saving">Saving...</span>');
e.preventDefault();
$.post($(this).attr('action'), $(this).serialize(), function() {
$('#edit-photo-modal #saving').text('Saved!');
}, "script");
});
}
});
The lightbox opens, presents a form fetched through an AJAX request, then (on submit) triggers the update action mentioned above.
I had these links outside of the Colorbox in an earlier design revision, and they exhibited the same problem, so I've ruled out Colorbox itself as a cause.
If you need anymore info, let me know!
