We Keep Coding

How to properly implement loading bar for loading urls?

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.

Anchor back a page and open content

My question:
I’m trying to make a jump back to page with anchor work on items that are hidden on a page.
Currently a listing page shows 12 items and more are revealed when clicking button that renders additional rows.
So when a user clicks a business listing below the default 12 items and the user wants to go back, how do I make the page anchor down to the original listing outside of the 12 default items?
Video example:
https://youtu.be/a0IJkJYB4mM
http://newcastlenow-staging.businesscatalyst.com/discover/everything
How do I also automatically open the pagination once the back anchor is implemented?

To achieve that, you've got 2 possibilities.
1. The browser's History object's native back function
For this, you need to set up a button which, on click of course, invokes the following function:
window.history.back()
Doing so, the browser will go back 1 page, due to its history.
2. Custom Link
As a 2nd option, you would use a specific link, which would be defined on that button. This would be less dynamic but would lead to the same functionallity, compared to window.history.back().
A short example:
Link

is it possible to prevent oracle apex from submitting a page until a user clicks on a refresh button on that page?

I have just started working with Oracle APEX and would like users to be able to download reports from my application.The problem is I have a number of reports which have a large number of rows. Each time a user clicks on a page tab, the page is resubmitted and the query for the reports are executed again. This results in a lot of delay and is becoming frustrating for the users!
Is it possible to stop APEX from resubmitting the page until the user clicks a refresh button or is it possible to stop the query for reports from executing everytime the user clicks on a page tab?

To prevent submitting you can change the page template. Open page properties, in the section Shared Components find Templates. Near the word Page you will see a link to its template. Follow this link, then find a section Standard Tab Attributes. In the field Current Tab you will see something like this:
<li>#TAB_LABEL##TAB_INLINE_EDIT#</li>
Change this value to:
<li><a class="active">#TAB_LABEL#</a>#TAB_INLINE_EDIT#</li>
After that an active item in a menu will be displayed as a static text, not as a link.
All pages with this page template will have this behavior. If you don't need to change behavior of all pages: before changing template make copy of it, change the copy and choose the new template in a page properties.

Have you tried with the conditions?? I pretty new with Apex too, I had a similar problem, what I did was put conditions to the buttoms and regions.
After that I good a nice result. Hope it helps you.
Good luck

jQuery Mobile How to prevent a page from going to the default state when refresh?

I'm using jQuery Mobile (no php or xml or anything else) for a web application running on cherrypy and i would like to find out how can i keep the page as it has been set by user even after refreshing.
As an example of the page, see this fiddle: http://jsfiddle.net/xaKXM/5/
in this example, user may input certain text in Response number and description. When the user click submit,user will see #configtable div. if the page is refreshed, user will not go back to the initial page (#labels div' )but to remain in the#configtable` (the one that user can't input anything but can only click activate button")
May be there is a button that would clear all those states and the page will go back to default when refresh?
Is this possible to be done?

if you refresh the DOM using window.open('index.html'); this should clear everything in the page

how to navigate to previous page without refreshing it.in HTML

HI i have a ExtJS code on the front end. the drop downs on this page are loaded dynamically thru web-service call to 3rd party service. i have navigated from this page to the results page.
Now in results page i have a button which allows the user to go back to previous page. but all the data in the drop down should be retained.
i tried window.history.go(-1) and history.back()
Guys please help me.

If the navigation page is under different url than result page then it's not possible. You probably should save state of that menu for example in cookies, or in session on server so you could restore that state for each client. Also HTML5 client-side storage is an option.
Another possibility is to change the way result page loads, so you won't need reload page to go back (for example use AJAX).

I am using now extjs4 mvc design. We have a single html page, multiple views, a model and a controller.
On navigating to a new view, you need to hide the previous panels and when going back show the previous panel. This solved my problem of navigating and retaining view.
As above this is not suitable for mvc if you use it for multiple apps and older design where we use onReady().