Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I don't know about backbone.js<sup>1</sup>, but I have helped develop a mobile application which had to implement exactly this behavior in html5, so I should be able go give some good advice:</p> <p>First of all it's good to know that the <code>history.pushState</code> function exists. The big problem with it though is that <a href="http://code.google.com/p/android/issues/detail?id=23979" rel="noreferrer">it is supported up to android 2.3, but not on android 3 till android 4.0.3</a>. As kiranvj points out correctly this can be solved by using the popular <a href="https://github.com/balupton/history.js" rel="noreferrer">history.js</a> library which provides a polyfill solution for the lack of the history functionality. </p> <p>Now, getting to your actual problem, the way I implemented the history direction animations was by adding data to the <code>pushState</code> function ( <code>history.pushState(data,title,url)</code> ) with which I identified the logical position of the page. In my application I wasn't only limited to a horizontal bar, but in your case you would keep track of position where any new loaded page get's a position which is one higher then your current page. E.g.</p> <pre><code>History.pushState({position:History.getState().data.position+1},"Your title","Your URL"); </code></pre> <p>Next, when the <code>window.onstatechange</code> or <code>window.onanchorchange</code> event triggers you observe whether the position is higher or lower than your current page (e.g. by using the <a href="https://github.com/balupton/history.js" rel="noreferrer">history.js</a> <code>History.getState()</code> function which I used above) and depending on this you decide in which direction to move (lower is to the left, and higher is to the right), as is illustrated by the image below:</p> <p><img src="https://i.stack.imgur.com/Cwcwk.png" alt="Illustration of history events"></p> <p>You will also note that I already assumed on the first page that you have <code>{position:1}</code>, whereas normally the first page will have no state information. The way this can be achieved is by using <code>history.replaceState</code> which replaces the current empty state with a more informative state. Alternatively you can also check for an empty state on any of the previously mentioned events and if it's empty you assume it to be the left most one (<code>{position:1}</code>).</p> <p>Hope this helps and if you have any additional questions feel free to ask.</p> <p>Please note that this answer assumes you are using <a href="https://github.com/balupton/history.js" rel="noreferrer">history.js</a> and you would need to listen to slightly different events (such as <code>onpopstate</code>) and use slightly different structures (<code>history</code> rather than <code>History</code>) if you would want to build your own solution.</p> <p>It is also useful to note that it is possible to build this with your own queue array which gives you a lot more control, but will not work in combination with the browser's back button. This is a big issue with browser sites, however is far easier in case you are building a <a href="http://incubator.apache.org/cordova/" rel="noreferrer">cordova</a> (a.k.a. <a href="http://phonegap.com/" rel="noreferrer">phonegap</a>) web application.</p> <hr> <p><sup>1 Just read about it and it appears to do some history handling <a href="http://documentcloud.github.com/backbone/#History" rel="noreferrer">of its own</a>, which <em>might</em> make it more complex to integrate the technique described above.</sup></p>
    singulars
    1. This table or related slice is empty.
    1. POHow to implement my own history stack in a single page mobile web application?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USDavid Mulder
    1. USDavid Mulder
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow to implement my own history stack in a single page mobile web application?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThis sounds like a good solution. Also, +1 for history.js, even though some of its functionality available within backbone.js; I've heard that backbone's history has some bugs in Safari.
      singulars
      1. PO
      1. USmeetamit
    2. COBased on the comment with the bounty "The question is widely applicable to a large audience. A detailed canonical answer is required to address all the concerns." I decided to give a universal answer detailing a technique that can be used in any situation, although I did mention in the footnote as well that backbone's own implementation might cause trouble.
      singulars
      1. PO
      1. USDavid Mulder
    3. CO@DavidMulder: +1 based on the assumption that history persists on a page refresh and/or navigating to an external url and back. Correct me if I'm wrong, but wouldn't it be a giant privacy loophole? i.e. any page that has access to history would be able to track the user's previous sites visited within the session.
      singulars
      1. PO
      1. USo.v.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload