I'm trying to load different content with JavaScript on a page, depending on its hash tag. However, it should also work in older browsers which do not support the popstate method.
The problem is, that when looking at window.location.hash after I click on a link (e.g. #newhashtag) on the current page (e.g. example.com/#currenthashtag), on document.ready it still shows me the old hash tag. Only after clicking on a second link, the previous hash tag from the first link shows up in window.location.hash.
So, what is the easiest way to handle different hash states of a website without using popstate?
Related
I have index page that contains items i want to keep on all the pages. And i have iframe in the middle of the index page, where all the content is shown.
<iframe id="midfr" src="news.html"></iframe>
When clicking on links, content goes to midfr, while website url is always like www.example.com/
Is there a way to have urls like www.example.com/iframe_url/ when going to specified page using iframes? I dont even have a clue on how to do that.
However ive seen some websites that have some constant divs, while main content blinks on visiting links. Although their source code didnt include any iframes..
No, because iframes don't provide any events to the DOM that you can use to change the URL.
Even if your write it as a method to capture and execute the event. You will still not get it. Because it is not allowed.
Iframe won't provide control over any event, untill the code to handle the event is already a part of it.
You can change the Website's URL using History PushState method. But only if you can have an event to do that. Since iframes don't provide you with an event you won't be able to change the URL.
Is there a trick (with an iframe maybe...) to add an history entry to the browser without changing the hash or any other parts of the URL, while being compatible with older browsers (not older than ie8 - without pushstate)?
I know it sounds weird but here is the logic behind this question:
I'm doing a single page application and I want to get rid of
modals as popups. I use the same techniques but instead of placing a div above the actual page, I would like to hide the entire page and show only the div representing the modal.
This works great, but now that the modal is taking the entire page, the user tends (and it is perfectly normal) to click on the back button to cancel the action and return to the previous page (which is hidden while the modal is displayed).
I know I could navigate to a different page (by changing the hash) but I don't want the URL to change since the destination is not a page on it's own but only a modal (it would not make sense to copy the URL of the modal and pass it to someone else or bookmarking the modal - as any normal modal inside a popup).
I would also need to be able to remove this entry in the cases where the user has completed the action (in the modal) or clicked on the cancel button.
I found an article that explains what could be a solution (with an iframe...): from the book Ajax Design Patterns
I will give it a try soon and get you posted on the result.
I want to change url when i open big image in pop up window on a current page with preview images. I don't want use window.location.hash feature because i want to manipulate with new url through PHP next and i found this complex to made it with hash. So, I found that I can use HTML5 feature to make this.
window.history.pushState(“object or string”, “Title”, “/new-url”);
My problem is: I want to remove this new-url from page when i close big image. How can i make this, without using
window.history.back();
?
Thanks.
Closing the image is not analogous to pressing the back button in the browser. It is analogous to following another link back to the original page. So there's no need to go back. Just pushState again, back to the original URL.
On the other hand, if the person does click the back button in their browser, you want that to bring them back to the original page too. So you need to listen for the popstate event, and, when it's fired, run a function which will remove the popup image:
window.addEventListener("popstate", function(e) {
hideimage();
}
Read more about the HTML5 history API.
I'm trying to make an page with tabbed content. I'm using foundation tabs (http://foundation.zurb.com/docs/tabs.php).
I made an link offside the <dl></dl> element, and it doesn't work if I use only <a href="#simple5">. I tried an javascript to reload the page <a href="#simple5" onClick="window.location.reload( true );">, but doesn't work either.
How can I proceed?
When you call JS on click, it is run before the default action. You reload a page without hashtag.
Try to add the ID with JS : <a href="#" onClick="window.location = '#simple5'; window.location.reload(true);">
You can also use et function and get the id dynamically.
Sorry for my bad english. ^-^
You don't have to manually perform location.reload. Navigating to a new hash will update the URL without reloading the page. If an element in your DOM has the ID simple5, the browser will scroll to that element.
You may also manually look at the hash change event (or repeatedly check the URL for a change, for browsers that doesn't support that event), and perform an action such as switching to a certain tab.
This is if you want your switching between tabs to be reflected in the browser history. If you don't wish to leave markers in browser history, you would instead want to intercept the link click, extract the href to use just as an indicator of which tab to show, perform the tab change, and prevent the browser from following the link (so that no actual hash change will occur)
I'm using jQuery's appendTo() method to append items to an unordered list. When the user clicks another link, and then presses the Back button, the appended items disappear. Is there a way to persist those changes using JavaScript?
When hitting BACK, some browsers cache te previous (originally loaded) page. If you can regenerate the page with a fresh reload you can use cache-control 'no-store, no-cache, must-revalidate' to force this on a BACK.
Chrome wants no-store, and IE wants must-revalidate. For other browsers (and w3c) no-cache is enough.
Once your user navigates away from your page, the DOM is discarded. When your user hits the back button, they get a fresh copy of the HTML from your server (or from their cache).
So, you have one of 2 options:
The correct way would be to save the DOM state in a cookie (or session), and then on page load check if that cookie is present, and if so, append that info.
Since you have not provided enough information, I'm not exactly sure what you're trying to accomplish. So, if a cookie is not good enough, you might have to attach a click event to the link, and instead of just sending them off to that link, you'll first store the DOM in a variable var theDOM = $('html').clone(true);, and then load in the HTML for that link with an AJAX request.
You'll also have to inform the browser that your history state has changed. That can be accomplished with HTML5's new History API. In older browsers you can do something similar via the hash part of the URL (although in older versions of IE even that won't work). Then, when the user clicks the back button, you'll reload that DOM from your variable...
Either way, this is WAY too complicated. You're probably looking at this the wrong way. What are you trying to accomplish?
If you dont have any problem to use iframe then you can use it to preserve the previous data. On iframe load event write a js code which will take the preserved data within it and append it to desired element. This way when you navigate to next page and press back button the iframe will load and then the load event handler will do its job,