I've got a site that allows you to search for images. I wrote a simple script for infinite scrolling, but had an issue with using the browser's back button. Basically, if you scrolled down a lot and infinite scrolling was loading new "pages" of images, then you clicked on one of the images, then hit back to go back to the search results, you'd be back at the 1st page of results. To get back to where you were, you'd have to scroll through all of those "pages" you've already scrolled through.
I attempted to solve this by updating the browser history when you click on an image. When you click on an image, it sets the history to search/page_num#image_id. That way when you hit back, it takes you right to the page you were on and should scroll to the image.
The URL gets properly set in browser history. And if I manually type in that URL, the browser loads the right page number and scrolls to the right image. But when I try to use it in a real life scenario (searching, scrolling, clicking an image, hitting back to get back to the results), the browser doesn't scroll to the image anchor.
Anyone know how I can fix this? Thanks!
Related
is there a way to fix scroll only for a specific page with Next.js?
The situation is as follows.
There are A page and B page in Next.js
Go from Page A to Page B using "Router.push"
Scroll on page A (assuming you scroll down to 5000 scroll.y)
Go to page B
press the browser's back button to return to page A from page B.
scroll is 0
What I want to do is to keep the initial scroll(5000) state at 6.(even if click return to back button)
I want to fix the scroll instead of recording the scroll position back (for example local storage)
please let me know if there is any good way.
Thanks for reading my question.
Question: With Javascript, can you tell the web browser to begin loading a page, but don't begin rendering it yet?
Issue: A client wants his web page to show listings like a book. When you click on the next button, he doesn't want the next page to immediately load. He wants the book to close (a closing animation) and then load the next page.
Current status: All links go to Javascript. I show the closing animation. Then, I replace the window location. The issue is that there is a clear wait for the next page to load. It would be nice if I could load the following page into cache while the closing animation runs. In other words, I want to make that three-second animation useful time by loading all the HTML, CSS, Javascript, and images for the following page and then all that happens when I set the new location is that it renders.
Possible solution: I have the main page that had two full-screen iframes in it. One iframe is the current page. The other is hidden and is used to load the next page. After the animation, I flip which iframs is visible and which isn't. This is good except that the back button doesn't work properly. If you click back, you go to wherever you were before you went to the website. You don't hide the current iframe and show the one you just hid. If you click back twice, flipping iframes doesn't work. I have to keep a log of your history. Further, I have to hack the back button, which I don't like. So, I'd like to use a built-in cache method if I can.
Possible solution: I have the main page that had two full-screen iframes in it. One iframe is the current page. The other is hidden and
is used to load the next page. After the animation, I flip which iframes is visible and which isn't.
Yes, this sounds like a good approach.
This is good except that the back button doesn't work properly. [...]
I have to hack the back button, which I don't like.
Single Page Applications (SPAs) can't use the back button as originally intended because the entire application exists within a single document.
Partly in response to this, we have
history.pushState()
which is a really good extension to the History API, enabling new "artificial" entries (describing new states) to be added to the browser's history, which, in turn, enables the back button to work exactly as the user might expect it to.
Further Reading:
http://html5doctor.com/history-api/
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
I have a situation where you scroll down a page to a certain button that clicked will lead to a new page (in the same window).
If inside the new page I implement another button that via JS returns to the starting page using history.back() it has the benefit that the user lands on the exact (scrolled down) point where he clicked the first button.
New situation:
I’d love to keep this benefit, but I can’t use history.back() instead I have to use the src of the original page. Doing so by f.e. using window.location.href = "my_starting_url"; it goes back to the original page but at the top of the page. Why? Is there a simple method to achieve the same behavior as history.back() i.e. reopening the page at the same (cached) point?
Did I explain myself sufficiently?
Thank you so much in advance!
The way I see it the best option would be the History API ( http://diveintohtml5.info/history.html ): This will allow you to fetch a new page and store the scroll position of the current one, once the user clicks on "back" you can load the previous page and set the scroll position exactly where it was.
A similar question has already been asked, but im not at all happy with the solutions, which just can't be the only ones in such a simple case.
So I've got a page with a javascript animation. There are 4 images which are anchors, which link to new pages, and once you click on them, they grow to full size and it looks like they transform to the background, because the image is the background of the next page.
So here's my problem: When i click a link everything goes well, the Image grows to screen size and then the anchor triggers with a delay and links to the new page. But then, once i click on the "Back" button in the browser on the new page, i come back to a page where the screen is filled with the Image i've clicked, and only refreshing gets you out of it.
Is there any way to like reload the page when you come back to it through the "back" button in the Browser?
did you try putting the code in jQuery $(..) all the code in side the paranthesis!
I decide to make my own "neverending" scroll page which suits exactly my needs rather than making comfortable with some extensive classes that could not have to work exactly the way I would like them to.
Now, when all works like a charm, last thing remains. Preserve the scroll position when the browser's back button is hit. Every time you get to the bottom of the page I change the hash # part of the url. When the back button is hit, it shows waiting icon and then loads dynamic content.
Firefox scroll after that exactly to place the page was scrolled (good).
Opera and Safari seem to load exactly the same state there were before, so dynamic content seems to be already prefetched and displayed (good).
But IE and Chrome want to scroll before dynamic content is load and they don't try again later. IE get stucked at the top of the page and Chrome somewhere in the middle (bottom of the page before dynamic content shows up).
Now, what could I do to solve this issue? I could in theory store the current scroll position to url hash when any click is detected. Then previous page is load and I could simply parse the hash and ScrollTop(). But for some reason, this
$(document).live("click", function() { window.alert("gotcha"); });
doesn't work for me anyway.
The document doesn't have anything to be clicked on. document.documentElement is the root <html> node, so attach events to that, or to the window if appropriate.