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()
Related
I have a menu (sidebar) for small screens devices, when user open the menu, it run:
window.history.pushState(null, null, "#menu");
Once I want that it closes when user click in back button (android devices)
which is possible with the code bellow:
$(window).on("popstate", closeMenu)
So if user click in back button, it back to previous state (remove #menu from url and run the function closeMenu).
everything works as expected, but if user navigate through pages by menu's links as the example bellow:
user is in home;
go to page x;
go to page y,
and back to page x.
now is needed to press back button twice to go home
It is happening because window.history.pushState is adding a new history to browser. The menu is opened when user click in any link, so the current url when request is: mysite.com/anyPage#menu;
The browser navigates from mysite.com/anyPage#menu to mysite.com/anotherPage.
every time the user back to page X, and go to another, then back to X again, it add to the history one more (#).
I was able to reduce the amount of # in history by:
//(instead the first code)
if (!(window.location.toString().indexOf("#") > 0)) {
window.history.pushState(null, null, "#menu");
}
So the max unwanted page in history now is 1 (what makes user click twice in button);
What is the best way to fix it? I think if run window.history.back() before load next page may works, but I had no success to do it.
I thought about use window.onbeforeunload, then in my function:
window.history.back()
but it stop the navigation to next link and makes the browser back one page instead follow the link
I also thought about replaceState:
let uri = window.location.toString();
if(uri.indexOf("#")>0){
uri = uri.substring(0,
uri.indexOf("#"));
}
history.replaceState(null, '', uri);
I can see in URL browser removing the #menu from URL but I think at this point browser already requested the link page from the source url containing #. Or am I wrong?
Once I was not able to get the element which makes browser to load like:
//onbeforeunload:
e.target.activeElement
document.activeElement
I thought also instead use onbeforeunload, handle click event in all links in menu, so I could to run window.history.back() before request the new page and programmatically open the link, but I don't know if its the best approach
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.
Is it possible to implement this behavior:
I have a HTML link on one page, and after a user clicks on it, it goes to another page which has several tabs on it. Upon clicking on one of those tabs, it triggers an AJAX post call which populates and displays content for that tab.
I would like that when a user clicks a link on the previous page, it takes him to another page and automatically clicks a specific tab so it triggers an ajax call which displays the content for that tab.
This site is a Wordpress site, if that information helps at all.
On the 'from' page you can have links such as
Click Me
You can set an onpage load function to load and use a trigger like this
if(window.location.hash === "#customHash"){
//my custom tab loader
}
You can use jQuery Cookie plugin to achieve this. http://plugins.jquery.com/cookie/
You just set the cookie on the first page, when the user clicks on the link
$.cookie('the_cookie', 'the_value');
And on the next page use the jQuery on load function to check for the cookie.
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
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.