diff --git a/index.html b/index.html index 13e07d7..9e395cd 100755 --- a/index.html +++ b/index.html @@ -762,7 +762,8 @@ $(document).ready(function(){

download magazine... - alternative layout + alternative layout (native scroll) + alternative layout (iscroll)

diff --git a/layout-iscroll.html b/layout-iscroll.html new file mode 100755 index 0000000..f5609ff --- /dev/null +++ b/layout-iscroll.html @@ -0,0 +1,588 @@ + + + + +PortableMag + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+
+ + + + + + PortableMag cover + + + + + + + Mag + Portable + + A suit for publishing portable periodic magazines on mobile platforms. + + + + + + +
+
+ + + +
+
+
+

The Basics...

+ +

Main features

+
    +
  • Magazines, Covers, Articles and Pages, fully navigable +
  • Three main views: Magazine (under development) Page and Ribbon +
  • Fully linkable structure +
  • Full intuitive Gesture, Mouse or Keyboard navigation +
  • Special #URLs enable full link-based navigation and control +
  • Bookmarks and bookmark navigation +
  • Intuitive navigator widget +
  • Portable to most mobile platforms including: Apple iOS, Android, Windows Phone 7/8, BlackBery, HP webOS and more. +
  • Standalone on main desktop operating systems, including Apple MacOS X and Microsoft Windows +
  • Based on popular, open and easy to learn and use standards (HTML5 layout, SVG vector graphics) + +
  • Usable from the web (support for engines other than WebKit not here yet) +
  • Integrated Editor (under development) +
  • Integrated publishing framework (under development) + +
+ + + +
[PAGE NUMBER]
+
+
+
+
+

PortableMag Navigation and Linking

+
+

Finger controls

+
    +
  • Single finger swipe left/right – prev/next page. +
  • Two finger swipe left/right – prev/next article. +
  • Single finger swipe up/down – toggle thumbnail view. +
  • Pinch in/out – go in/out of thumbnail view. +
+

Navigation via #URLs

+

The basics

+ Page #1
+ Named page
+

+ Anchor on page #3
+ currently navigation via existing anchors + will break the layout, so use the name attribute + on any other tags (see example). + +

+
+ +
+

Special anchors

+

These show up in the page URL

+ Magazine cover
+ Last page
+ Thumbnail view
+ Toggle a hidden layer
+ + Toggle bookmark
+ +

Relative special anchors

+

These will get replaced by corresponding page numbers in the URL

+ Next page
+ Previous page
+ Next article
+ Previous article
+

History support

+ NOTE: this is still a bit flaky...
+ Go back
+ Go forward
+
+ + + + + +
[PAGE NUMBER]
+
+
+ + + +
+
+ + + + + + + + + + + + PortableMag Anatomy + + Layer 1 + PortableMag Anatomy + + + + + + + Magazine cover + + Article Cover + + Page + + Page + + Next Article + Magazine + Article + + + + + + Page + + Page Content + (safe area) + + + + + + + + This area might get clipped + + + + + + + + + +
[PAGE NUMBER]
+
+
+
+
+

The Page content has a fixed size...

+ +
[PAGE NUMBER]
+
+
+
+
+ + +

Using the content block...

+

+ The content block can contain any HTML. +

+

+ The contents will allways fit the screen, the aspect ratio + of the content block is fixed regardless of the viewer. +

+

+ Contents will not get clipped as long as they are within the block. +

+

+ NOTE: by default the overflow is visible (see next page), so be carefull. +

+ +
[PAGE NUMBER]
+
+
+
+
+ +
+

You can still use the full page area...

+

+ Though anything outside the content block can and will get clipped, + depending on viewer aspect ratio... +

+

+ You can see this by resizing the page in browser or rotating the device. +

+
+ +
[PAGE NUMBER]
+
+
+
+
+
+
+

Page Templates

+ +

+ This page contains several examples of template fields, + the first one is the simplest, the magazine name + ([MAGAZINE NAME]), + then we'll have the index (see next) and in the bottom-right + corner is the page number... +

+ +
[ARTICLE INDEX]
+ +
[PAGE NUMBER]
+
+
+ +
+
+

Two column

+
+ Column 1 +
+
+ Column 2 +
+ +
[PAGE NUMBER]
+
+
+
+
+ Left-aligned page... + +
[PAGE NUMBER]
+
+
+
+
+ Center-aligned page... + +
[PAGE NUMBER]
+
+
+
+
+ Right-aligned page... + +
[PAGE NUMBER]
+
+
+
+
+ Right-aligned page... + +
[PAGE NUMBER]
+
+
+
+ +
+ +
+
+
+

Page Set Example

+ +
[PAGE NUMBER]
+
+
+
+
+ Page in set
+ +
[PAGE NUMBER]
+
+
+
+
+ Page in set
+ +
[PAGE NUMBER]
+
+
+
+
+
+ +
+ + + + diff --git a/layout.html b/layout.html index f5609ff..121f445 100755 --- a/layout.html +++ b/layout.html @@ -128,15 +128,17 @@ $(document).ready(function(){ }, function(k){console.log(k)})) + /* window.myScroll = new iScroll('viewer', { snap: true, momentum: false, hScrollbar: false, - /*onScrollEnd: function () { - document.querySelector('#indicator > li.active').className = ''; - document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active'; - }*/ + //onScrollEnd: function () { + // document.querySelector('#indicator > li.active').className = ''; + // document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active'; + //} }) + */