flynx/PortableMag
1
0
Fork 0
mirror of https://github.com/flynx/PortableMag.git synced 2025-11-04 05:50:19 +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

16
index.html
View File

@ -128,6 +128,14 @@ $(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>
<div style="float:left; width: 40%; height: 100%; margin: 10px;">
<h2>Finger controls</h2>
<ul>
<li> Single finger swipe left/right &ndash; prev/next page.
<li> Two finger swipe left/right &ndash; prev/next article.
<li> Single finger swipe up/down &ndash; toggle thumbnail view.
<li> Pinch in/out &ndash; go in/out of thumbnail view.
</ul>
<h2>Navigation via #URLs</h2> <h2>Navigation via #URLs</h2>
<h3>The basics</h3> <h3>The basics</h3>
<a href="#1">Page #1</a><br> <a href="#1">Page #1</a><br>
@ -139,7 +147,9 @@ $(document).ready(function(){
on any other tags (see example). on any other tags (see example).
</i> </i>
</p> </p>
</div>
<div style="float:left; width: 40%; height: 100%; padding: 10px;">
<h3>Special anchors</h3> <h3>Special anchors</h3>
<p>These show up in the page URL</p> <p>These show up in the page URL</p>
<a href="#home">Magazine cover</a><br> <a href="#home">Magazine cover</a><br>
@ -156,9 +166,11 @@ $(document).ready(function(){
<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;