I have a series of html pages that include a link to an informational page. In the menu for that page, I have a link back to the referring page that uses this code:
<a class="nav_link" onclick="location.href = document.referrer;" onmouseover="this.style.cursor='pointer'">Return to Text</a>
It works as expected on the first use, but if someone moves to another page and then clicks on the link to return back, it will sometimes take them to the old referring page. So, for example, if someone went to from page 1 to my referring page, returned via the link this anchor tag generates, and then went to page 3 and clicked on the link to the informational page, upon clicking on "Return to Text" for a second time they might go back to page 1 rather than page 3, as expected.
I'm assuming that the issue is that document.referrer is being stored in memory and is not being overwritten when the user clicked on the link to go to the informational page a second time. Why is this, and is there a way for me to either make sure the memory is always cleared when they click on the link to return or create a more robust version of the location.href = document.referrer; onclick?
If you want a "back link," you're better off with history.go(-1):
onclick="history.go(-1);"
That actually emulates the back button, rather than adding a new entry to the history with a repeat of the previous URL.
Related
There is a HTML page in my vue project
when I press "+" button,it will jump to this page
This page is for user to timing,and the last page is time list.
Now,I`m doing timing in TimingPage and press "保存"(save),it will going to TimeList page,and print time witch I have set.
and than,I press the "Native" back button(!!!this native button is not the back button in my page,it`s button in the browser or your smartphone!!!),it will going to Timing page instead of home page!
Just like when you click the back button while browsing, it will jump to the page you just visited instead of the previous page.
there is my code:
<van-nav-bar
:title="$t('socketPage.addTiming')"
:left-text="$t('socketPage.cancel')"
:right-text="$t('socketPage.save')"
#click-left="$router.push('/timeList')"
#click-right="saveTime();$router.push('/timeList')"
></van-nav-bar>
I used $router.push.() to jump.
excuse my poor english .
If I unnderstand you clearly, then the issue is with how you are routing. Using $router.push() will always add a route to the routing stack so going back will take you to the previous page on the stack.
To solve this, use the $router.replace() or $router.pop() method instead in the TimingPage
To further understand the difference, check this out.
HTH
My question:
I’m trying to make a jump back to page with anchor work on items that are hidden on a page.
Currently a listing page shows 12 items and more are revealed when clicking button that renders additional rows.
So when a user clicks a business listing below the default 12 items and the user wants to go back, how do I make the page anchor down to the original listing outside of the 12 default items?
Video example:
https://youtu.be/a0IJkJYB4mM
http://newcastlenow-staging.businesscatalyst.com/discover/everything
How do I also automatically open the pagination once the back anchor is implemented?
To achieve that, you've got 2 possibilities.
1. The browser's History object's native back function
For this, you need to set up a button which, on click of course, invokes the following function:
window.history.back()
Doing so, the browser will go back 1 page, due to its history.
2. Custom Link
As a 2nd option, you would use a specific link, which would be defined on that button. This would be less dynamic but would lead to the same functionallity, compared to window.history.back().
A short example:
Link
I have a question which I haven't been able to find the answer for. I hope you can help me.
I am about to build a simple website, containing text and hyperlinks. I want the site to have the same adress no matter which hyperlink is clicked. For example, if my website is www.website.com - when one clicks a hyperlink, the content of the whole page should change, but the adress should still be www.website.com, instead of www.website.com/hyperlink.html for example. In other words, I want to disable people to use the "back" button to return to an earlier page, and prevent them from navigating the page by writing in the adress bar. They should experience a single page, but still be able to navigate through a lot of changing content through links - which means that if they click the "back"-button, they will be navigated away from the website, and if they refresh the page, it will go back to 'index'. Can you point me in the right direction to which methods might be useful here? Earlier, I would have done it in Flash, and embedded the flash-construction into the website, but as far as I have heard, Flash is not the best solution anymore?
Thanks in advance.
First of all, that is not the best idea for SEO.
But that puts aside, you should use javascript to make AJAX call and alter the partial part of your page with the response.
So basically, what you will do is from your home page, capture all link clicked event, and process the request through an AJAX call, and display the result of that call on the same page.
That allow you to refresh a list of item, or a menu, or the entire page if you want.
Since it will be AJAX call, the user won't see any difference in the URL.
I have a page which FITS vertically into the windo. When user clicks on the link, I get another page via ajax and plug it into the required element.
Everything works, But when user clicks on another link, page jumps up and it is annoying me.
I have tried using
<a href="#" onClick="showRoom('five');return false;" class="highlight">
//and
<a href="javascript:void(0);" onClick="showRoom('five');return false;" class="highlight">
and it did not work in both IE and Firefox - it continues to jump.
Is there any good working trick that could help?
I THINK that it has to do something with the renew. When I click the link - first, the LOADING ICON is showing. Only then, when reports table is available, it loads into the instead of icon. Therefore browser adds vscrolling bars when information is shown, but goes away in between reports switches and being replaced by small LOADING icon.
I think that I need to capture the scrollbar location when I click on the update link, then, after ajax updates the page, I need to call in another function that would scroll back to previous scrollbar location
This is how I "fixed" the problem, until real solution is discovered:
document.getElementById(showCoursesArea).innerHTML= '<center><img src=\"images/working.gif\"><h1><br><h1><br><h1><br><h1><br><h1><br><h1><br></center>';
pretty much it kepps my page LONG; therefore ajax updates are fitting right in.
'#' will take the user back to the top of the page, so I usually go with void(0). or if as you are saying second option is also not working than remove href and try out
or just try out
Link Text
or
<a onclick="javascript:myJsFunc()">Link Text</a>
or
Link Text
as id "0" will never be present on a page so that nothing happen.
When you click on a link with href="#" it is actually linking to the top of the document. You can actually just remove the href attribute completely.
I am trying a new functionality for my web site. I want to do simple navigation by hiding/showing <div> elements.
For example, when a user clicks a "details" button on some product, I want to hide the main <div> and show the <div> containing the details for the product.
The problem is that to go back to the previous "page", I have to undo all the display/visibility style changes, which is ok if the user clicks the "close" button in the newly opened <div>. But most users will hit the BACK button.
Is there a way to make the BACK button go back to the previous "state" of the page i.e., undo the visibility/display changes?
Thanks.
Yes. What you're looking for is called AJAX browser history.
There are a few open implementations out there, like RSH as well as plugins/modules for frameworks like jQuery and YUI.
to answer the question of your title (that's what I was looking for)
Using the BACK button to revert to the previous state of the page
and from the link from #reach4thelasers's answer, you have to set up a timer and check again and again the current anchor:
//On load page, init the timer which check if the there are anchor changes each 300 ms
$().ready(function(){
setInterval("checkAnchor()", 300);
});
because there's no Javascript callback triggered when the BACK button is pressed and only the anchor is changed ...
--
by the way, the pattern you're talking about is now known as Single Page Interface !
You need to add an anchor to the URL whenever a change is made
www.site.com/page.html#anchor1
This will allow the browser to maintain the pages in its history. I implemented it in my current site after following this tutorial, which works great and gives you a good understanding of what you need to do:
http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/
Your example in the comments won't work, because it works like this:
Page Loaded
Page Changed, Add Anchor to URL (back button takes you back to back to 1)
Page Changed, Anchor Changed (back button button takes you back to 2)
Page Changed, Anchor Changed (back button button takes you back to 3)
.... and so on and so on..
If there is, it sounds like a pretty evil thing to do from a UX perspective. Why don't you design a "back" button into your application, and use design to make it obvious to the user that they should use your application's back button instead of the browser.
By "use design," I mean make your application look like a self-sufficient user interface inside of the browser, so the user's eye stays within your page, and not up on the browser chrome, when they are looking for controls to interact with your app.
You can do this with anchors, which is how it's done in a lot of flash applications, or other apps that don't go from page to page. Facebook uses this technique pretty liberally. Each time the user clicks on a link that should go in their history, change the anchor on the page.
So say my home page link is:
http://www.mysite.com/#homepage
For the link that works your javascript magic, do this:
My Other Page
This will send the user to http://www.mysite.com/#otherpage where clicking the back button will go back to http://www.mysite.com/#homepage. Then you just have to read the anchors with
window.location.hash
to figure out which page you're supposed to be on.
Take a look to this tutorial based on ItsNat a Java web framework focused on Single Page Interface web sites