I have a bit of a head scratcher here. My project has a main page in which some transitions happen and some buttons appear. Clicking those buttons allow you to navigate the site. So far so good. On those lets say "secondary" pages I have a series of "back" buttons that take you back to the main page with the following link:
<p class="backContact">BACK</p>
Now, this is where it gets specific. When I return on to the main page, I want to return to the main page that's "cached" so basically the main page AFTER the said animations and buttons appear, not back to the page as if I just had come on the website for the first time. Same for when you hit the back arrow on the browser itself.
The code I just posted with the link was doing just that and it works fine in safari and firefox. BUT in chrome the behaviour is different and when the back button is clicked it goes back to the main page before all the animations happen which is really annoying as I just want them to play the first time round else they become tiresome.
Is there anyway to force chrome to come back to the "cached" previous page? Many thanks
Related
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
My website is built using angularjs. There are few functions needs to be performed in the front end. This does not make any problem in desktop. But in mobile the page response is slow, (i.e.) say when I click on the 'about us' page the device is waiting for the response but as a user I don't know what's going on. After say 3-5 seconds the page loads.
So I thought of using the nganimate during the page enter and leave. Still only when the page changes the animation works. Is there a way to fade out the page as soon as the user click a link and then fade in the new page? Like is there a way to animate from the '$routeChangeSuccess' for page leaving and enter or any other better way??
I use the calendar on ajaxavailabilitycalendar.com. There is a demo on their site: http://www.ajaxavailabilitycalendar.com/demo
But there's an issue with the back button of the browser and the script / page which i'm explaining via that demo:
The calendar has 3 'rooms': country cottage, town flat and cave. So you see the availability of every room. But when i click on the back button of the browser (after selecting a few rooms), the same page is reloaded with the wrong availability compared with the room in the dropdown. It happens in Firefox, IE. Not in Chrome because that browser goes the 'real' previous page.
Any advice to fix this ? Thanks
I tried tens of scripts but came up with a solution to put the dropdown on display-none and make 3 seperate pages linking to the right room.
i wrote a pebble.js app, basically it shows a splash screen and a menu showing bus stops. when the user press select button on a menu item a "card" is showed with the arrival info.
however, sometimes menu items are not showed correctly (some menu items disappearing) and when i press back in the menu screen instead of closing the app a blank "page" is showed.
i dont know what i'm doing wrong. i was thinking of memory leaks but honestly i dont know...
heres the source in case someone kind wants to help me : http://pastebin.com/92xbVs2F
This is now fixed in Pebble.js. Your app is magically fixed as well since it was pushed to CloudPebble.
If you'd like to know the technical details, it's because Menu Layer in the C API is normally not allowed to override the back button. As a work around, Pebble.js is currently using a blank window to catch the back button, but this hack only works if the menu is not the root window of your application. The fixed version no longer uses a blank window to catch the back button and overrides the back button in an obtuse way.
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!