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.
Related
Actually I am making a web page using HTML,CSS and Javascript in which there is only one html page with functions like when a person clicks on a particular button, that the current div will not be displayed but the another div will be displayed. At last there will be a home div which will act like the home page of the website.
I want to make that home page to be displayed once a person fills all the credentials and always only the home page should be displayed even after reloading that web page or reopening the web page.
I have researched everywhere but couldn't find the exact solution of the code.
Thanks
Try with LocalStorege, hold information, and check if the condition is true, if it is just immediately execute the logic.
This should solve the problem for you.
Take a look at https://stackblitz.com/edit/web-platform-uawtkc
Tried to simulate the problem and solve it
I have a single pager website where each of the buttons takes you to a separate section following an animation. I've set up an example here: https://dev.dport.me.
Currently when you navigate to a page, the URL stays the same. For example, navigating to the About section does not append #about to the URL. I would like the site to work more like a normal site in respect to navigation.
What is the best way to go about making it such that:
Navigating to a "page" changes the URL. Following the example, either to #about, or even better, /about.
Navigating directly to a subpage works. Meaning that if I navigate to https://dev.dport.me/about, it takes me straight to the subpage.
The back button works. Currently if you navigate into a subpage, you must use the back button on the page. The browser's back button just leaves the whole site.
Is there some pre-existing javascript library that does what I'm looking for? Or am I going to have to gun it alone, perhaps with something like this.
I am trying out popstate and pushState and I am wondering how to handle off page navigation.
Lets say I have an index page which generates a 'new page' when clicking something and it's loaded in with ajax. With popstate I change the url. In the page loaded are links that go outside of the current 'index' page. When somebody presses back they get a dumped state object.
How to prevent it so it actually loads the url that was given during the pushState?
Thanks in advance.
It seems you're doing something that causes the browser to replace its cached version of your index page with something else. Make sure your server sets the
Vary: Accept
header when returning the index page and later requests. See this Chromium issue for more information.
Have the link also use an anchor so the browser has a reference to fall back on.
Throw one of these at the beginning of each of the pages with a unique name attribute.
So your links would be:
Load the first page
and the page HTML would have this at the top somewhere:
<a name="first"></a>
Funny you made this post cuz I've got the exact same problem right now with this site I just started making yesterday: http://asims.fleeceitout.com - had to put arrows everywhere to keep people from gettin lost haha. I'll end up taking my own advice here but I'm too lazy for now. Plus I'm trying to see how much of the site I can make without a single <a></a> used.
I have a page where navigation is handled by hiding and showing preloaded divs when users click on links. But, the users think they've actually changed pages, so they click on their browser's "back" button trying to go back to the div that was previously hidden. But of course, they go back to the page from which they came.
What's the best way to handle this? 90% of the traffic is from a login page. Should I just sandwich a redirect page in between the two? How is this done? Can I just change the browser's back button behavior?
If you are already using jQuery, why not simply add a history manager like jq-bbq or the hashchange or history manager? (Or, if you want to really go all out, switch to a MVC JavaScript framework like Sammy.) That way, the back button will work as the user expects, rather than hacking around their expectations by blocking the back button or throwing in redirects. (Unless you have a good reason to, of course :-) )
If you use a browser history plugin like the jQuery UI one you end up changing the history so that the back button doesn't actually unload the page.
http://yoursite.com
-> User clicks something
-> new address bar reads http://yoursite.com/#/something
because of the hash mark when user goes back it goes back to http://yoursite.com which should inturn fire your show previous div function
read more about the available history manager plugins available for jQuery. There are quite a few. Most if not all provide available callback functions that you can specify.
On change of the state of your page, write a unique set of parameters to the hash of your URL. You can change this via JS without causing the page to reload.
Set a timer on the page that checks the current location hash repeatedly, and if it changes (i.e. the user presses the Back button) then update the state of your page to match the URL.
I have this scheme working to great effect in a local application.
The jQuery Address library is another great alternative.
http://www.asual.com/jquery/address/
You can set the URL for different application states, and get the URL 'parameters' when the page reloads.
Two ideas:
1) onbeforeunload. Ask the user if they want to really go back.
2) Sandwidch a redirect page. Login -> redirect -> your page. A single back click would take the user to your redirect page.
The second is kind of a pain in the neck for people who know what they're doing though. I think the Back button (and all standard navigational elements) should be messed with as little as possible.
I would go with onbeforeunload:
function sure()
{
event.returnValue = "sure?";
}
...
<BODY onbeforeunload="sure()">
I'm using an iframe to display content that has links. When the user clicks around in the iFrame and hits "back," it goes back in the iFrame. This behavior is OK. However, once they're back to the first page of the iFrame and they hit "back" again, the entire window is taken back to the previous page. This is unwanted.
To prevent this behavior, I've put a fake "back" button within the iFrame. (In most cases this is bad UI, in this case, it works well). I'd like this fake back button to only go back if the previous page is the iFrame's page -- not the entire page. When they hit the fake back button in the iFrame, it should only move that iFrame back, nothing else. Is there a way to do this? Does an iFrame get its own history object?
Something that might be of benefit: the domain of the iFrame and the main window can be assumed to be distinct. So, if it's possible to read the "global" history object, I can check to see if the previous page was mine by checking to see if the domain is mine. If the domain is not mine, the fake back button will be hidden or not do anything.
Help greatly appreciated, and happy holidays!
document.location.href = document.referrer;
You should be able to use the javascript history object to push the user back; but you won't be able to stop it when the iframe-clicking runs out and the main page wants to go back. And you can't stop it because that's intentionally locked down pretty well in most browsers to prevent people from messing around with it maliciously.
You could write your own history tracking code and have the back button pop items off that stack, stopping when the stack is empty...
If you're using some complicated nesting of links - perhaps some javascript-based tree menu? That way the iframe never has a page refresh?
Without having an example, I have to say your design seems like poor UI... when I hit back, I don't want the navigation to change; I want to go back to whatever page I was just on.