Bootstrap tabs - change tab when "back" button clicked - javascript

I'm implementing with bootstrap3 tabs that are similar to the google+ tabs:
https://plus.google.com/109537483127696013335
Similarly to google+, I also change the URL using history.pushState() every time the user click a new tab.
The problem:
Let's say you viewed these 3 tabs:
https://plus.google.com/109537483127696013335/posts
https://plus.google.com/109537483127696013335/about
https://plus.google.com/109537483127696013335/photos
you have 3 items in your browser's history, if you click the back button you'll go back to /about and then /posts but the content of the page will stay the same (/photos) instead of changing back to the correct tab.
This problem exists in google+, I want a better behaviour of the back button for a better UX, how can I fix it?

Related

trying to open the specific tab for a popup

I have a page link where i had to click and that passes the value of the link as:
link.html?action=paid#mypayments-3
and the link.html has tabs as: they are jquery UI tabs
Paid
Overpaid
Pending
its not going to that section, how can i force it to go to that tab, Am i missing anything

React Native: TabBarIOS, rerender tabs on click

In my app i have TabBarIOS with 3 different tabs. When you change something or for example scroll page in one tab, then you go to another tab and when you come back, the tab's content is not rerendering. it stays at same place (scrolled).
is there anyway to rerender tab's content (component) everytime you click on tabs?
I found the solution in this article :
http://richardkho.com/persisting-tabbars-in-react-native/
Whenever you click on a tab, it renders a navigationios.
So when user is clicking on each tab, i should check if the tab is already selected or not. if it's already the selected tab, i should do navigate.poptotop ( for the navigation ios that is being called ).
if not, i just call the navigation

Tabbed menu in CSS and Javascript - tab sets to active after refreshing page

I have tabbed menu written mainly in HTML and CSS. There are 5 tabs, the first one is set to active when we first load the page. I had to add little JS script, because that active tab wouldn't change its look to "not-active" when we clicked on another tab (so we had two tabs with "active" look). Everything works fine, but if we click on, let's say, 3rd tab and then refresh website, the first tab changes its look from "not-active" to "active", so there are two tabs with "active" look. Only the styling is wrong, content in the tabs views the right content... So if we click on another tab and refresh the page, we have two tabs with "active" look, but the website still views the content from the right tab. I don't want the first tab to set its look to "active" after refreshing page. I don't know JS and I don't know how to fix it.
Javascript:
jQuery(function($){
$(".tabmenu").children("div").click(function(){
$(".current").removeClass("current");
});
});
Here's the full code: http://jsfiddle.net/y5SzQ/1/
The simplest solution
$(".tabmenu").children("div").click(function () {
$(".current").removeClass("current");
})
.filter(location.hash).click();
(to test: change tab, right click Reload resule frame)
Demo: http://jsfiddle.net/y5SzQ/3/
What it does is just triggers click event similarly to what happens when user clicks with a mouse. If there is location.hash (say '#french-tab') and tab other then Polish has to be selected, then .filter(location.hash) will become for example .filter('#french-tab') and corresponding tab will be selected.

how to get the previous url when user click on back button in browser

I am using asp.net.
I have a main menu.
what I have done is,I have a main menu.
In the Home/About page,when user click on the menu I replacing the About page content by selected page content selected in the menu.
$("#content").html(iframeof selected menu url);
here,"content" is in About page .
My problem is when I click on browser back button,It is redirecting to the login page,not redirecting to the previous selected page.
how can I display the previous page when user click on the browser back button.
Browser only store your history, when it is full postback, means it should not be partially postback. In your case, when replacing your content, you are doing full postback or partial postback? To replace your content if you are using jquery, then it will not redirect to your previous state(page).

how to navigate to previously viewed page in jquerymobile

I have a jquerymobile template being implemented which will further be used for phonegap deployment for devices - iphone and android phones. I have 11 Div's with data-role as "page". Each Page header has a Back button which should actually go back to its parent screen. At this moment, I am doing it with an anchor
Back
So when I click on back in my above example, it takes me to Loginpage. But is there something else that can be tried instead of anchor tag, which is actually failing in the following scenario?
flow a. Screen 1 -> Screen 3
flow b. Screen 2 -> Screen 3
In flow "a" -> When I click "Back" in Screen 3 it should go back to Screen 1
In flow "b" -> When I click "Back" in Screen 3 it should go back to Screen 2
My flow fails here on Screen 3 using an anchor, because am not able to get the navigation back to which screen I actually navigated from.
Waiting for some help. :)
it is simple.
See jQuery mobile documentation here:
http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
"Back" button links section.
<a data-rel="back">Go Back</a>
Also, the button can be generated automatically in each page header by adding the following to the page div:
data-add-back-btn="true"
You can also make every page to show back button by default by adding the following to the code which is run after jQuery mobile is initialized:
$.mobile.page.prototype.options.addBackBtn = true;
This as well as a few more options, such as the default back button text can be found here:
http://jquerymobile.com/demos/1.2.1/docs/toolbars/docs-headers.html
Section Adding Back buttons
Try setting data-rel="back"
Refer the documentation
http://jquerymobile.com/demos/1.0a3/docs/pages/docs-pages.html
You can also try something like this:
$('.anchors_you_need_to_capture').click(function(e){
history.pushState(e.target.href);
}
It adds a the clicked page to the history so when you click back it will go to the last clicked linked.

Categories