JScroll can't see when the javascript changed window history with pushState.
I added JScroll for posts on index page. The default URL is localhost for example. And when there is no path after, the default posts will be loaded and jscroll will work as it should have.
But I have tabs on index page (new, top, hot), which change order of posts. So when I click on a tab, it dynamically changes URL with window.history.pushState, and sends request with new filter for showing posts.
But in JScroll, it still leaves old href and loads old data. For example - I am scrolling on localhost/new, and when I change tab to localhost/top in JScroll nextHref is "http://localhost:8000/new?page=3 div.infinite-scroll" instead of "http://localhost:8000/top?page=1 div.infinite-scroll".
How can I change it so it is synced with tabs?
I found a solution.
After each change of tab I added
$('.infinite-scroll').removeData('jscroll').jscroll.destroy();
and called JScroll initializer again.
Related
So I have a page that is navagated through by clicking on tabs that change what is displayed in the body of the website, and when you go to a new tab (in the site) it changes the url. e.g I'm in the home tab, and the url is changed to https://a.website.com/home, then i go to the changelog tab, and the url is changed to https://a.website.com/changelog. niiether of these urls actually exist, so how would I make it so when the user reloads they are directed to https://a.website.com, not to a page not found error page?
possibly using window.onbeforeunload?
Mark the tab that is being used as a parameter of the page:
https://a.website.com?tab=home
https://a.website.com?tab=changelog
Then, on your page you can decide which tab to show.
I have a page where you can search rates using location and dates. Once you get to the confirmation page I have a link to go back and select a different rate. By using history.go(-2) I can go back to the rates page fine. But I were to right click open or wheel click, it just goes to the home page, because the search criteria is not saved.
How do I go about fixing this?
<u>select a different rate</u>
Thanks guys. I ended up using href=document.referrer. That seems to be doing the trick!
Browser history cannot be inherited by a new tab, as far as I know.
You can, however, pass the previous page URL to the new page as a URL parameter, for example:
domain.com/newPage?oldPage=http%3A%2F%2Foldpage.com
You can then modify the browser history when the new page loads, adding the previous page. See Manipulating the browser history
Ok, I do not have code for this so I would need assistance here. I have a page that has multiple tabs worth of information. If I proceed to an entirely new page (URL) and then hit back on the browser, is there a way to land back on the tab I left off of?
when you click on a tab you can append a url parameter e.g. ?tab=tab1. And when you load the page you can check you're url parameters and default to that tab if it is in the parameter.
Here's an example that's similar. When you click on the toolbar on the left on bootstrap's getting started page it appends that item to the url. so when i click on 'support' the url looks like http://getbootstrap.com/getting-started/#support and when you go to that url it automatically scrolls you to that section on the page.
HI i m creating a site i have face two problum
my site is rohitazad.com
is how to remove #tag in my site
if i click to profile link in my menu item top bar than my url is http://rohitazad.com/#/profile but mya be this possible i remove my # and my url http://rohitazad.com/profile is this.
if i scoll my site example i reach the profile section than my navigation is active and may be possible my url is change dynamic http://rohitazad.com/profile
As like this
In the Manipulating the browser history article is a section called Adding and modifying history entries - read about this.
Especially useful is pushState() method that change window url and title without page reload.
Be careful, you can only add sth to history, edit current or read it, but never delete.
Referring to the example:
history.replaceState(null, "example title", "foo_bar.html");
How can a page be reloaded with a new URL and the corresponding contents smoothly, so that the header does not flicker? For instance if on Twitter I click the menu items Home, Connect, Discover, the header stays displayed, no flicker. The only way I know this can be done is using Javascript, but Javascript cannot change URLs. What is the magic behind Twitter's website?
They are simply using ajax.
The header does not flicker because it does not change. The ajax call ask for data, and when it gets it, it inserts it into the body.
For the body,
You could use an effects function to fade in the new content if you do not want an abrupt change when it is ajaxed in.
If you want to load your static data in one upload, you can then flip through static content using the CSS display property.
You can see that the browser is not loading a new url because there is no indicator.
Also, you can see the ajax indicator for twitter is running.
To keep a history of your ajax calls use info. from this post:
For ajax - Hashes vs HTML 5 History API?
For Twitter:
They are using CSS to flip through the page as the ajax indicator and the load indicator do not light up after the initial ajax call.
You can verify that they are using history by doing window.history.back() in the console.
To change the URL dynamically see:
Change the URL in the browser without loading the new page using JavaScript
You could use history.pushState to manipulate the currient url. And reload the page with ajax functions.