flynx/PortableMag
1
0
Fork 0
mirror of https://github.com/flynx/PortableMag.git synced 2026-01-07 11:11:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

added more docs and minor tweeks...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-01-23 17:59:53 +04:00
parent feee2c7454
commit 3bfc10993c
2 changed files with 41 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
index.html
View File

@ -128,37 +128,49 @@ $(document).ready(function(){
<div class="cover page current"> <div class="cover page current">
<div class="content"> <div class="content">
<h1>Magazine Cover</h1> <h1>Magazine Cover</h1>
<h2>Navigation via #URLs</h2> <div style="float:left; width: 40%; height: 100%; margin: 10px;">
<h3>The basics</h3> <h2>Finger controls</h2>
<a href="#1">Page #1</a><br> <ul>
<a href="#ArticleAnchorExample">Named page</a><br> <li> Single finger swipe left/right &ndash; prev/next page.
<p> <li> Two finger swipe left/right &ndash; prev/next article.
<a href="#page-3-anchor">Anchor on page #3</a><br> <li> Single finger swipe up/down &ndash; toggle thumbnail view.
<i>BUG: currently navigation via existing anchors <li> Pinch in/out &ndash; go in/out of thumbnail view.
will break the layout, so use the name attribute </ul>
on any other tags (see example). <h2>Navigation via #URLs</h2>
</i> <h3>The basics</h3>
</p> <a href="#1">Page #1</a><br>
<a href="#ArticleAnchorExample">Named page</a><br>
<p>
<a href="#page-3-anchor">Anchor on page #3</a><br>
<i>BUG: currently navigation via existing anchors
will break the layout, so use the name attribute
on any other tags (see example).
</i>
</p>
</div>
<h3>Special anchors</h3> <div style="float:left; width: 40%; height: 100%; padding: 10px;">
<p>These show up in the page URL</p> <h3>Special anchors</h3>
<a href="#home">Magazine cover</a><br> <p>These show up in the page URL</p>
<a href="#end">Last page</a><br> <a href="#home">Magazine cover</a><br>
<a href="#thumbnails">Thumbnail view</a><br> <a href="#end">Last page</a><br>
<a href="#example-layer">Toggle a hidden layer</a><br> <a href="#thumbnails">Thumbnail view</a><br>
<span name="example-layer" class="hidden"> <a href="#example-layer">Toggle a hidden layer</a><br>
<a href="#hideLayers">Hide all layers</a><br> <span name="example-layer" class="hidden">
</span> <a href="#hideLayers">Hide all layers</a><br>
</span>
<h3>Relative special anchors</h3> <h3>Relative special anchors</h3>
<p>These will get replaced by corresponding page numbers in the URL</p> <p>These will get replaced by corresponding page numbers in the URL</p>
<a href="#next">Next page</a><br> <a href="#next">Next page</a><br>
<a href="#prev">Previous page</a><br> <a href="#prev">Previous page</a><br>
<a href="#nextArticle">Next article</a><br> <a href="#nextArticle">Next article</a><br>
<a href="#prevArticle">Previous article</a><br> <a href="#prevArticle">Previous article</a><br>
</div>
<div name="example-layer" class="hidden" onclick="window.location.hash='example-layer'" style="position:absolute; left:400px; top:250px; width: 250px; height:50px; text-align: center; padding: 15px; border: solid gray 5px; background: silver; color: white">
This is an example layer<br><br> <div name="example-layer" class="hidden" onclick="window.location.hash='example-layer'" style="position:absolute; left:100px; top:400px; width: 300px; height:50px; text-align: center; padding: 15px; border: solid gray 5px; background: silver; color: white">
<h3>This is an example layer</h3>
<i>click or tap to hide</i> <i>click or tap to hide</i>
</div> </div>
</div> </div>

1
magazine.css
View File

@ -43,6 +43,7 @@ body {
text-align: left; text-align: left;
position: relative; position: relative;
overflow: visible; overflow: visible;
white-space: normal;
/* these set the "safe" marks for page content */ /* these set the "safe" marks for page content */
width: 800px; width: 800px;