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.
Related
I have a very rudimentary SPA built in vanilla JS. There are two buttons that the user can use to navigate between pages, for example:
buttonProfile.addEventListener("click", function () {
window.history.pushState({}, "", "profile/");
var updatePage = new Event("update-page");
dispatchEvent(updatePage);
});
Somewhere in the app, I have an event listener that listens to update-page to refresh the content that needs to be refreshed (without ever reloading the page) based on the current URL. Everything works fine.
However, I noted two odd behaviours:
If the user starts on Page A and then moves to Page B, the user will need to go back twice (button on the browser) in order to go back to Page A.
If the user goes back from Page B to Page A, once they are back to Page A the "forward" button on the browser will become greyed out.
EDIT
In case it helps, I noted I have the same issue when I use other people's SPAs that have a similar implementation. See this simple demo for example: DEMO | CODE
Steps to reproduce:
Click on About, then Contact, then again About, then again Contact.
Now, if you press Back once you'll go back to About. However, if you press it again you'll stay on About. You'll have to press it again to move to Contact and once you do, the Forward button will be disabled.
EDIT 2
I just realize that both my site and the site I posted above work fine when I run my browser in Incognito. There must be some other problem with my Chrome (though I have no idea what).
Okay, I found it. It was the Matter official Chrome extension. Not sure what exactly caused the issue though.
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?
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.
http://jqueryui.com/tabs/#manipulation the tabs manipulation does a click to add a tab. but i need a little tweak in there. after i click the add tab i.e., clicking add tab creates a tab2..but the screen doesn't takes the view to the second tab. It remains in the first tab but add the second tab(which is not active after click)
I need tab2 to be active after clicking the add button...this process continues for all the adding tabs.
I need a example or a way..coz it's a showstopper for my current project
There’s a link of the bottom of that page, “Want to learn more about the tabs widget? Check out the API documentation.”
And to get from there to http://api.jqueryui.com/tabs/#option-active should not be an impossible task for a developer, don’t you think …?
I am checking out this link : http://www.businessinsider.com/the-worlds-weirdest-etfs-that-you-can-trade-today-2011-10#market-vectors-gaming-etf-nyse-bjk-1
The page is a slideshow where the user can either press the Next/Previous button or use the right/left arrow keys to navigate through the slideshow. Everytime the user does a navigation, the ad unit on the right sidebar does a refresh. Any idea how this can be effected?
The advertisement is displayed in an iframe (so it is not a simple div, in which case you would have to reload content using Ajax).
In the event handler for the navigation buttons, you simply have to reload this iframe.
You can either do this by using location.reload():
document.getElementById('myiframe').reload(true);
/*"true" means the URL should not be reloaded from cache*/
or setting the src to its current value:
var myIframe=document.getElementById('myiframe');
myIframe.src=myIframe.src;