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!
Related
I want to open a page studio-x.net.au then after waiting for 5 seconds js setTimeout opens about section of page incorrectly as https://www.studio-x.net.au/#about and in wrong position.
I have tried:
setTimeout("window.location.href=\"#about\";", 5000);
and this
setTimeout(function(){
window.top.location.href="/#about"
} , 5000);
and currently Eric's suggestion
setTimeout(function () {
window.location.replace('#about');}, 5000);
all seem to work to open but does not display as desired.
Are my navigation links the problem? ie. href="#about"
The behavior that I have issue with is when js triggers page opens on https://www.studio-x.net.au/#about in incorrect position.
When you use click on mouse or click on nav, about page opens as intended on the about page and shows only https://www.studio-x.net.au in url,
likewise on other sections such as portfolio, pricing, contact sections showing only https://www.studio-x.net.au in url.
Once triggered the https://www.studio-x.net.au/#about in incorrect position continues possibly cached.
setTimeout(function () {
window.location.replace('#about');
}, 5000);
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);
}
});
The overall goal of this task is to animate scroll the user to a certain div lower down on the page, depending on whatever #hashName is appended to url.
The html I am working with does not have the correct div id added, so I am adding that via javascript on document ready. Once the div id is added, then I have script that determines the hash passed in, then pass the user to the hash. This following code works:
jQuery(document).ready(function($){
//append new div id to current FAQ class
document.querySelector('.press-24_tab').id = 'faq';
//now that we have correct div id, animate user to this div
var target = window.location.hash;
$('html, body').animate({scrollTop: $(window.location.hash).offset().top}, 'slow', function() {
//in animate callback, attempt to keep user focused here
$('#faq').focus();
});
});
I am calling jQuery etc in the code so I can use this in WordPress.
This code works fine. My problem is, this script fires while the page is loading. And the page keeps loading. And as a result, the page focus goes back to the top of the page!
I was thinking of wrapping the animate to hash code inside $(window).on('load', function(){}); but this does not seem to work. Note my existing animate callback trying to keep user focused - but this is not sticking. Page still loads. Page takes a loooooooong time to load, so I am fighting against this.
So at this point I have hit a brick wall. I am reaching out to those smarter than me in javascript and jQuery to see what I have to do here. Any help would be greatly appreciated.
jquery(document).ready() will fire as soon as the DOM is ready so this is actually working as expected by the looks of things as the DOM isn't the same thing as the document itself.
If you need to wait for external content like web-fonts, images, videos etc you should use the window.load() event
jquery(window).load(function() {
//append new div id to current FAQ class
document.querySelector('.press-24_tab').id = 'faq';
//now that we have correct div id, animate user to this div
var target = window.location.hash;
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top
}, 'slow', function() {
//in animate callback, attempt to keep user focused here
$('#faq').focus();
});
});
Have a look through the documentation for DOM here.
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.
I'm using a jQuery's animate method to create a smooth scrolling effect to make a navigation bar's links scroll to particular spots on the homepage. ...in case there's confusion on what I'm talking about, here's a better description.
Here's the little bit of javascript I'm using to accomplish this effect:
$(document).ready(function(){
$('a[href^="/#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top-$('.navbar').height()
}, 1000, 'swing', function () {
window.location.hash = target-$('.navbar').height();
});
});
});
Our home button is:
<a class="navbar-brand" href="/#home_top"></a>
And our about us link is:
About
Anyway, when I just type in the url and navigate directly to domain.com the scrolling function works great. I can scroll down to the "About Us" section (or any other) and click our home button to go back to the top of the page.
The problem comes when I use the home button to navigate to the homepage from one of the other pages on the site. Say, for example, I'm at domain.com/another_page and I click on the home button to get back to the homepage at domain.com. The homepage loads but the javascript for the scrolling doesn't work. Only once I refresh does it work again; then everything's fine.
Anyway, sorry if the question's a bit convoluted. Any help on the matter would be appreciated.