How can develop a single page web app with seamless page load, an example is
http://www.producthunt.com/posts/devicons
from this example use can see the second pages loads to the right and source code and the browser url of the second page changes, however by clicking to the left, the user is back at the first page and the source code and browser url changes.
So basically product hunt uses react router from what I can see from their source code in debugger. That takes care of pretty much everything.
Related
I have implemented stimulus js in rails hotwire. For other features, the browser back button is working fine, unfortunately, for the product detail page, whenever I use the browser back button, it stays on one page. After trying 2/3 times, it shows the URL of the previous page. But it does not take me to the previous page until I reload.
I have already shared a short video and code on GitHub as a stimulus.js issue. Url is added below:
No custom routing has been used at the frontend level.
Turbo has been used on the page.
https://github.com/hotwired/stimulus/issues/589
I have a list of urls I need to show on a screen for a presentation. After the page have loaded, I want to scroll to the end of the page, and when it's reached load the next one.
The problem is, most of those pages have 'X-Frame-Options' to 'sameorigin', so I can't use iframes. What other options do I have ?
I thought about, maybe, a chrome extension will complete rights over navigation that would handle the whole process...
Thanks ahead.
So, the solution was indeed to build a Chrome extension. Only the software containing the page gives you that much control over it when you don't have access to its code - namely, the browser.
I built a very simple extension using chrome.tabs in the background to open a new tab or update it, injecting a script in the page whenever it's loaded, and using messaging to inform the background when scrolling is finished and it's time to load a new page in the list.
I think this question was asked in a similar form before but I didn't get a clear understanding how to implement it properly.
I have a site, which has different pages on their own urls, like '/contact', '/about', '/products'.
What's the technique to put a top bar on the top like this one http://nanobar.jacoborus.codes/?
Here is what I need:
User clicks a link on the page.
JavaScript handles the click, shows the progress bar, starts growing it then passes the event to browser.
Browser starts loading the page. At this moment, page clears and becomes white and blank.
As the progress bar was in some position that is not zero, say, 63%, and now there is no information on the new page about where it was.
So, I can technically run some function on every page, like showGrowingProgressBar(value), but since I don't know where it left, I cannot put it in the same progress state as where it left.
How do I make it look natural, like the user didn't leave the page, but more like an SPA experience?
I guess you want to build an one page web application where things load in the same page without refreshing.
You can use AJAX to do this. you can populate a particular div with the new html without refreshing.
It can be handled more easily using Angular JS. You can define routes for every page and can also have templates for different page, and can load that template when user clicks on the link. It will just replace the container div with new html codes and you can also handle the urls easily.
Turbolinks seems to be what you are looking for. It dynamically loads your pages and shows a loading indicator.
Turbolinks makes navigating your web application faster. Get the performance benefits of a single-page application without the added complexity of a client-side JavaScript framework. Use HTML to render your views on the server side and link to pages as usual. When you follow a link, Turbolinks automatically fetches the page, swaps in its , and merges its , all without incurring the cost of a full page load.
Your approach is:
User clicks a link on the page.
JavaScript handles the click, shows the progress bar, starts growing it then passes the event to browser.
Browser starts loading the page. At this moment, page clears and becomes white and blank.
As the progress bar was in some position that is not zero, say, 63%, and now there is no information on the new page about where it was
Your approach should be:
User clicks a link on the page.
JavaScript handles the click, browser starts loading the page. At this moment, page clears and becomes white and blank.
New page shows the progress bar, starts growing it then passes the event to browser. The growth can be picturized by the no. of API call completed divided by total no. of api calls, required for that page.
I'm bulding my first WebApp. I've got a small navigation bar in the head where a back button should be placed. The Pages of the app are all placed in one document so the div's are set to
<div id="page_1" class="page" style="display:none">
and will be shown by clicking on a link
onclick="show('Page_dash');
Now i want to have a back button which goes back to the last shown page. I've tried this
onclick="history.go(-1);
but it's not working because there is only one page which contains all pages so the history.go(-1) goes to the last visited homepage. So i'm looking for a good, fast and simple solution!
thanks
In order to create an effective single page application (SPA), you will need to implement a method to track history that appears traditional to your end users. There are a few different techniques for this, but as a developer of enterprise-level single page applications, I highly recommend using the url hash method.
This technique allows your end users to bookmark specific "pages" in your single page app, along with using their browser's back button to return to the previous page. End users can become extremely frustrated with a single page app if they try to return to the previous page using their browser's back button, and find that they are returned to Google, or whatever site they visited before yours.
Here is some additional reading on the subject: URL Hash Techniques
What would be the best approcah to have a div containg a flash player, that does not refresh when you mavigate to another page on the same site. This would mean the player would not stop. I have 2 examples:
The first is http://www.djtunes.com/ unfortunately this adds a # to the url and all navigation after invoking the player is appended to the the site url with the # in between.
The second example is http://hypem.com/ this constructs the url in a more friendly fashion. I have noticed that clicking the refresh button reloads the entire page but this is to be expected. Any assistance with this problem would be appreciated.
I believe you'll require ajax to load the rest of the pages, with the flash player running. To get the URLs like hypem.com, you can try manipulating the browser history. Read up on this article