Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I had some time to mess around with this and I've found a solution that works (tested).</p> <p>SOME NOTES:</p> <ol> <li>the javascript encapsulated in $(document).ready(); is for dynamically creating a page if the user navigates to your index.html file with a hash mark already appended (i.e. index.html#some_hash_mark).</li> <li>The function, create_page(page_id) is for creating a page from a link (or programatically if you like).</li> <li>Note that the jquery core script and the jquery mobile css are loaded before the $(document).ready() statement but that the jquery mobile script is loaded after.</li> <li>See that the body tag has been given an id that is refrenced when appending pages to it.</li> </ol> <p><strong>Document Sample</strong></p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"/&gt; &lt;script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function() { //check if hash exists and that it is not for the home screen if (window.location.hash != '' &amp;&amp; window.location.hash != '#page_0') { //set whatever content you want to put into the new page var content_string = 'Some ' + window.location.hash + ' text...&lt;br&gt;&lt;br&gt;&lt;a href="#page_0"&gt;go to home screen&lt;/a&gt;'; //append the new page onto the end of the body $('#page_body').append('&lt;div data-role="page" id="' + window.location.hash.replace('#','') + '"&gt;&lt;div data-role="content"&gt;' + content_string + '&lt;/div&gt;&lt;/div&gt;'); //add a link on the home screen to navaigate to the new page (just so nav isn't broken if user goes from new page to home screen) $('#page_0 div[data-role="content"]').append('&lt;br&gt;&lt;br&gt;&lt;a href="#' + window.location.hash.replace('#','') + '"&gt;go to ' + window.location.hash.replace('#','') + ' page&lt;/a&gt;'); } }); function create_page(page_id) { //set whatever content you want to put into the new page var string = 'FOO BAR page...&lt;br&gt;&lt;br&gt;&lt;a href="#page_0"&gt;return to home screen&lt;/a&gt;'; //append the new page onto the end of the body $('#page_body').append('&lt;div data-role="page" id="' + page_id + '"&gt;&lt;div data-role="content"&gt;' + string + '&lt;/div&gt;&lt;/div&gt;'); //initialize the new page $.mobile.initializePage(); //navigate to the new page $.mobile.changePage("#" + page_id, "pop", false, true); //add a link on the home screen to navaigate to the new page (just so nav isn't broken if user goes from new page to home screen) $('#page_0 div[data-role="content"]').append('&lt;br&gt;&lt;br&gt;&lt;a href="#' + page_id + '"&gt;go to ' + page_id + ' page&lt;/a&gt;'); //refresh the home screen so new link is given proper css $('#page_0 div[data-role="content"]').page(); } &lt;/script&gt; &lt;title&gt;Fixed Headers Example&lt;/title&gt; &lt;script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body id="page_body"&gt; &lt;div data-role="page" id="page_0"&gt; &lt;div data-role="content"&gt;Some #page_0 text...&lt;br&gt;&lt;br&gt;&lt;a href="javascript: create_page('foo_bar_page');"&gt;create new page&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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