I want to scroll to top if there is an error on postback of a button click. I am working on asp.net C#. I am using following method to scroll to top.
.cs code on page_load method
if (IsPostBack)
{
System.Web.UI.ScriptManager.RegisterStartupScript(Page, this.GetType(), "ScrollPageLogin", "ResetScrollPositionLogin();", true);
}
.ascx code for jquery call
function ResetScrollPositionLogin()
{
$('html, body').animate({ scrollTop: 0 }, 'fast');
}
When I use this code and click on login button then it scroll to the down first and then scroll to up. Please help me to resolve this.
Well, many browsers have smart surfing, which means they can remember things like page position and form input without being told to. This has been addressed by some at stack already
Another really hacky way of doing it is to set the body of your page to display:none and then use jquery show() or plain javascript to set the display to block after your content has loaded. Hides any jumping of page position but not ideal design to say the least.
Related
I have just discovered Barba.js and find it very useful. It provides smooth transitions between URLs of the same website.
I have put together a Plunker consisting of two pages (index.html and about.html) that are loaded smoothly, with the help of jQuery's fadeIn() and fadeOut() methods.
I would like the About us page to not only be faded in, but scrolled down some 250px too.
For this purpose, I have:
added a class to the html tag in the About Us page: <html class="about">
added this in the script.js:
$('html.about, html.about body').animate({
scrollTop: 300
},1000);
Evan though the page scrolls if no class name selector is mentioned in the script, the version above does not work. But I want only the "About Us" page to be animated.
What shall I change?
The "About Us" page and the index page are displayed on the same page, a new html document is not rendered for each page. The content of each page is simply written over the previous one, ie inside the .barba-wrapper div element. So scrolling the page of one is going to "scroll the other one" as they are on the same page.
The <html> element stays the same between page switches, it never gets a class about. This is why your selector doesn't work to scroll the page.
If you want the page to be back at the top when going back simply animate it back to the top on Barba changing it. You can do this by:
Adding an event listener for the linkClicked event
Checking which page was clicked
If not the about us page scroll the page to the top if needed
Barba.Dispatcher.on('linkClicked', function(link,event) {
if(!link.href.includes('about.html') {
$('html, html body').animate({
scrollTop: 0
},1000);
}
});
I use SYMFONY 3 and JQUERY 1.11.1 + JQUERY MOBILE 1.4.2
On a page I have a table, each row of the table can be extended (containing a form regarding the row), when I open a row the page is generated again thru SYMFONY controller.
At the bottom of my TWIG file, I add a tag with $(document).ready(...). I want to manipulate the SCROLL thru JQUERY (or JS) to reach the position of my opened row.
I've seen that it could be done that way:
$('body').animate({
scrollTop: $('#myRowId').offset().top + 'px'
}, "fast");
Or that way:
$(document).scrollTop($('#myRowId').offset().top));
It does work for a short time and then the SCROLL goes back automatically to the top (y-position:0) with not any explanation (that I am aware of).
I managed to go around by using the setTimeout like:
setTimeout(function({$(document).scrollTop($('#myRowId').offset().top);},5000);
But it is not really nice, i'd rather know which event is triggered by JQUERY or JQUERY MOBILE under the hood that sets the SCROLL back to the top.
Has anyone got any idea?
Here is the solution with the onload event:
$(window).load({'rowId':'#'+rowRootId+'_id'},function(event){
$('body').animate({scrollTop: $(event.data.rowId).offset().top + 'px'}, "normal");
})
I have a long page with lots of data tables of hidden content.
They are hidden as they are quite repetitive so not all users want to have to scroll past them all the time.
Frequently down the page there is the option to click to open up all of the hidden data tables.
The problem is, if you go half way down the page and click to open up the tables, all of the content being revealed above the current view causes the page to scroll down, meaning the user becomes disorientated as to where they are on the page.
I've mocked up the problem here. If you scroll down to one of the "show more" links nearer the bottom of the page you'll see what i mean.
http://jsfiddle.net/LnubwdzL/
I want the clicked link to remain static under the cursor so that the user knows where they are.
This kind of a solution:
$("a").on('click', function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 2000);
});
... from other questions on SO, doesn't seem to cut it. Even if it ends up in the right place the page still moves about a lot before coming to rest.
If I understand it correctly and as I mentioned in comments, I think you can set the same duration value to both your slideDown(); and your animate() functions, and have them both inside the same click handler.
Your code may then become:
$('a').on('click', function(e){
e.preventDefault();
if($('.hide').length>0){$('html, body').animate({scrollTop:$(this).offset().top},400);}
$('.hide').hide().removeClass('hide').slideDown(400);
});
Hope this helps.
Update #1: Added a check on top of animate() so it does not animate when there is no $('.hide') element present anymore.
Update #2:
Take a look at this resulting fiddle of another experiment. Let me know if this was what you were looking for.
The way this works is:
Upon click of an anchor, offset().top of clicked element is first
stored in a variable named prevOffset.
Current $(window).scrollTop() value is also stored in a variable named
scrollTop.
Then all the .hide elements are temporarily made visible via $('.hide').show();.
Another offset().top of the same clicked element is then stored in a variable named currOffset.
All the .hide elements are made invisible again via $('.hide').hide();.
scrollTop is then animated to a value calculated as: scrollTop+(currOffset-prevOffset).
All $('.hide') elements are animated via slideDown().
JavaScript:
var duration=400,hideElements=null,scrollTop=0,prevOffset=0,currOffset=0;
$('a').on('click',function(e){
e.preventDefault();
hideElements=$('.hide');
if(hideElements.length>0){
scrollTop=$(window).scrollTop();
prevOffset=$(this).offset().top;
hideElements.show();
currOffset=$(this).offset().top;
hideElements.hide();
$('html, body').animate({scrollTop:scrollTop+(currOffset-prevOffset)},duration);
hideElements.removeClass('hide').slideDown(duration);
}
});
Hope this is what you were looking for.
In JavaScript I am looking for a moment when user scrolls to some <div>. Then I want to stop user's inertial scrolling and scroll to some another object via script.
How can I stop the scrolling which has already started?
So I want something like this:
$('#selector').stopScrolling().scrollTo('#another_object');
I know that $('#selector').stop() stops animations, but it seems like it can't help me there
Instead of using .scrollTo(), use
// see http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12/
$('html,body').animate({ scrollTo: 0 }, 1000);
then you can stop the scrolling using
// see http://stackoverflow.com/a/2836104/145346
$('html,body').stop();
So i'm using pjax so when a user clicks a link instead of loading a new page it will drag the content in. The content has a navigation bar at the top with the content underneath. Upon click the navigation bar it hides and displays certain contents.. that is working fine.
My problem. When the content is dragged in, I want the page to scroll straight to the navigation bar instead of sticking at the top of the page and the user needs to scroll to it. I've used:
$(function() {
$('html, body').animate({
scrollTop: $('#in-page-nav').offset().top}, 1000);
});
To scroll to the div on the page load, and it works fine when I refresh the page. But doesn't work when pjax pulls the content into the page.
Any help i'd be really grateful, thank you!
You could do your animation in the pjax:success event. pjax:success is fired:
after replacing HTML content loaded from the server
Example
$(document).on('pjax:success', function() {
// Your scroll animation here.
})
See Pjax events for more details.
FIXED
Okay so I'm not sure if anyone has/had this problem but just for reference sake and if anyone comes across this problem heres what I did:
I looked at pjax documentation;
complete - When AJAX request has completed
success - When AJAX request has completed successfully
are two of the callbacks which can be used.
pjax.connect({
'success': function(e){
window.location.hash = $('#in-page-nav a').eq(0).attr('href');
// $(function() {
$('html, body').animate({
scrollTop: $('#in-page-nav').offset().top}, 1000);
},
});
So my previous code which animate scroll to a div on page load copied that and placed this within the pjax.connent and used the success callback. This works perfectly. I kept the code to animate on page load as well so if a user bookmarks the link or sends it and uses the link directly. Then the page will load the same.
Thanks for the quick responses!