Why does my browser address bar not change on href. I have a link called "about" on my homepage. About opens in a div. When I click about it opens in the div but the url address bar remains same i.e "www.example.com/homepage" when I want it to change to "wwww.example.com/homepage/about". I have tried
windows.location.href="/about"
but it takes me to a new page rather than opening in the div. Is there a way of achieving what I am looking for — i.e. to change the address bar once the link open in the div.
You have to change your function to change the history state.
You can add something like this to change the address in the address bar:
history.pushState(null, null, '/about');
https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history for more info.
I dont think this is possible. The browser will always show the address of the page loaded, and that cannot be changed without loading a new page.
You could achieve something similar using hashes if it is really important. it should be possible to change the url using something like this:
window.location.hash="about";
That should change the browser URL to www.xxxx.com/homepage#about without reloading the page.
and then if the user copies the URL or bookmarks the page then they will load that URL, which in turn would allow your javascript to detect the hash and load the appropriate content in the div.
You may be looking for window.location.hash
REgards
Related
I am developing a website and having trouble figuring out what I can use to accomplish this requirement.
I need a website where links in the document load the contents of page that was clicked.
I am thinking about using angular.js but how might a user get back to the back by entering it into the url.
Example of what I am looking for:
You are on www.example.com
You click the link to www.example.com/profile/1234.
The page doesn't reload but loads the contents of the new page.
The static element at the bottom of the page doesn't change the the rest of the page does.
The url has also changed and you have the history of being at www.example.com
You can also load the exact same page by pasting the url www.example.com/profile/1234, it also has the same bar at the bottom.
You could also say I need something similar to youtubes website. You click a link and it loads only some of the page. But if you re-enter the url you get all of the page.
Thanks.
Ok, I do not have code for this so I would need assistance here. I have a page that has multiple tabs worth of information. If I proceed to an entirely new page (URL) and then hit back on the browser, is there a way to land back on the tab I left off of?
when you click on a tab you can append a url parameter e.g. ?tab=tab1. And when you load the page you can check you're url parameters and default to that tab if it is in the parameter.
Here's an example that's similar. When you click on the toolbar on the left on bootstrap's getting started page it appends that item to the url. so when i click on 'support' the url looks like http://getbootstrap.com/getting-started/#support and when you go to that url it automatically scrolls you to that section on the page.
I have an ajax based website. I am using wordpress "redirection" plugin, but instead of moving to the proper address, it only shows in the browser's address bar. When I select that and press enter or go - it is working.
Is there a way I can force the browser to select the address bar and press enter after clicking the link on my website?
Is it window.location.replace javascript method that I have to use? I don't really know how to use it as I am new to javascript, any help will be appreciated.
You can use
history.pushState(null, null, "Everything after / goes here");
this js command will add a history entry and change your URL.
If you are just trying to make the user's web browser go to a new page, then you just assign to window.location like this:
window.location = "http://www.google.com";
This will add a new history entry in the browser's back-button stack. If you want to replace the current item in the back-button stack with the new page and have the browser go to that new place, then you can do
window.location.replace("http://www.google.com");
Both options will change the currently displayed page (the main difference is in the back-button stack).
The history object allows one to change the display URL without changing the page (which sounds like what the code might be doing currently), but it sounds like that is not what you want so you should switch to one of the above two options.
I use fancybox to do a small project to clone pinterest.
When user click photo, the browser will popup the image box and the url will be changed.
If user close the popup, the popup will be closed and the url will be back(not change page).
I use these function(below) to achieve and it works fine. However, i face one problem now which is
when I click the photo, browser give me popup, then i refresh the page, the page will go that url, but now i click back button, the page doesn't go back(url is back, view doesn't back). Can anyone solve this problem?
function:
window.history.replaceState(); window.history.pushState(); $(window).bind('popstate');
Thank you, all.
What you are referring to is the hash url. Fancybox has hash settings on by default meaning when you click on a url the url gets appended with a hash(#) + phrase if you are using gallery option. To remove simply initiate the default settings for hash to false like so:
jQuery( document ).ready(function( $ ) {
$.fancybox.defaults.hash = false;
}
now you can go back and forward without Fancybox interfering with your browser's history
have you try :
window.history.back()
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.