Changing tabs and landing back on the same tab? - javascript

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.

Related

how do I change the url of my site before unload?

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.

Opening a new tab, but should function as a back button with saved search

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

JScroll: Change nextHref after ajax changed tab and URI

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.

Dynamic Website - load almost all of the page with out reload and change the url

I am developing a website and having trouble figuring out what I can use to accomplish this requirement.
I need a website where links in the document load the contents of page that was clicked.
I am thinking about using angular.js but how might a user get back to the back by entering it into the url.
Example of what I am looking for:
You are on www.example.com
You click the link to www.example.com/profile/1234.
The page doesn't reload but loads the contents of the new page.
The static element at the bottom of the page doesn't change the the rest of the page does.
The url has also changed and you have the history of being at www.example.com
You can also load the exact same page by pasting the url www.example.com/profile/1234, it also has the same bar at the bottom.
You could also say I need something similar to youtubes website. You click a link and it loads only some of the page. But if you re-enter the url you get all of the page.
Thanks.

fancybox url rewrite & back button

I use fancybox to do a small project to clone pinterest.
When user click photo, the browser will popup the image box and the url will be changed.
If user close the popup, the popup will be closed and the url will be back(not change page).
I use these function(below) to achieve and it works fine. However, i face one problem now which is
when I click the photo, browser give me popup, then i refresh the page, the page will go that url, but now i click back button, the page doesn't go back(url is back, view doesn't back). Can anyone solve this problem?
function:
window.history.replaceState(); window.history.pushState(); $(window).bind('popstate');
Thank you, all.
What you are referring to is the hash url. Fancybox has hash settings on by default meaning when you click on a url the url gets appended with a hash(#) + phrase if you are using gallery option. To remove simply initiate the default settings for hash to false like so:
jQuery( document ).ready(function( $ ) {
$.fancybox.defaults.hash = false;
}
now you can go back and forward without Fancybox interfering with your browser's history
have you try :
window.history.back()

Categories