Member Sign In
Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.


It's fast and free.

Sign in with OpenID
Sign In
Webmonkey is a property of Wired Digital.
processing...
Join Webmonkey
Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.
Yes No
Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.
Yes No
I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.
Webmonkey is a property of Wired Digital.
processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

or
Webmonkey is a property of Wired Digital.
processing...

Welcome to Webmonkey

A private profile page has been created for you.
As a member of Webmonkey, you can now:
  • edit articles
  • add to the code library
  • design and write a tutorial
  • comment on any Webmonkey article
Close
Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.
If you cannot find it in your in-box, please check your bulk or junk folders.
Sign In
Webmonkey is a property of Wired Digital.

Mootools page viewer

This is an example with a html page with two divs with dummy content. When slide left or right, the hidden div is filled with new dummy content before the slide.

To use this to display pages of a document the reader views, fill the left and right content with Ajax while the current page is readed. Then when the user slides left or right, the content is presented immediately and the loading of the next/prev page is done while reading.

The example below is just to show you how to setup and use the component.


fxpage.html

Here is a sample html page. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
    <meta name="author" content="Wim Bekker">
    <script type="text/javascript" src="Interfaces/assets/mootools.js"></script>
    <script type="text/javascript" src="Interfaces/assets/mootools-more.js"></script>
    <script type="text/javascript" src="Interfaces/assets/Fx.Page.js"></script>
    <script type="text/javascript" src="fxpage.js"></script>
    <style type="text/css">
    p
    {
      margin-top:0;
    }

    #tabs
    {
      height: 300px;      
    }
    #tabrounded2
    {
      float:left;
      left:100px;
      position: relative;
      width:400px;
      -moz-border-radius: 25px;
      -webkit-border-radius: 25px;
      height:300px;
      background-color: #FFCCCC;
    }
    #displaytab
    {
      float:left;
      position: relative;
      left:50px;
      width:400px;
      overflow:hidden;
      background-color: #CCCCFF;
      height: 300px;
    }
    #displaytab2
    {
      height:300px;
      width:400px;
    }
    .tab
    {
      width: 400px;
      height: 100%;
      float: left;
    }
    </style>
   
    <title></title>
  </head>
  <body>
    <div id="menu"></div>
    <br />
    
    <div id="tabs">
      <div id="displaytab">
          <p>Lorem ipsum dolor sit amet consectetuer sollicitudin Aenean eros Lorem leo. Volutpat nibh quis nibh hendrerit facilisis tortor adipiscing Morbi amet.</p>
          <p>Ut vel Curabitur orci eleifend Suspendisse non eu commodo pede eu. Id urna Sed urna turpis massa nisl nunc dis laoreet Vestibulum. Et justo elit ultrices Lorem elit et porta Cum semper non. Lacus urna enim amet Curabitur Nam.</p>
          <p>Donec pretium pretium In faucibus vel eget ut habitasse semper amet. Facilisi platea ac enim condimentum semper sit at Ut Suspendisse pretium. Neque dapibus.</p>
          <p>Nec id felis consectetuer molestie leo tellus Proin adipiscing convallis leo. Ante et semper urna accumsan nec ut Vestibulum leo eget semper. Nibh Morbi ut pellentesque semper Quisque eros Nunc malesuada condimentum augue. Fames.</p>
      </div>
    
      <div id="tabrounded2">
        <div id="displaytab2">
          <p>Lorem ipsum dolor sit amet consectetuer sollicitudin Aenean eros Lorem leo. Volutpat nibh quis nibh hendrerit facilisis tortor adipiscing Morbi amet.</p>
          <p>Ut vel Curabitur orci eleifend Suspendisse non eu commodo pede eu. Id urna Sed urna turpis massa nisl nunc dis laoreet Vestibulum. Et justo elit ultrices Lorem elit et porta Cum semper non. Lacus urna enim amet Curabitur Nam.</p>
          <p>Donec pretium pretium In faucibus vel eget ut habitasse semper amet. Facilisi platea ac enim condimentum semper sit at Ut Suspendisse pretium. Neque dapibus.</p>
          <p>Nec id felis consectetuer molestie leo tellus Proin adipiscing convallis leo. Ante et semper urna accumsan nec ut Vestibulum leo eget semper. Nibh Morbi ut pellentesque semper Quisque eros Nunc malesuada condimentum augue. Fames.</p>
        </div>
      </div>
    </div>
    
    <div id="debug">
    </div>
    
  </body>
</html>


fxpage.js

Here is the sample javascript: 

/*global window $ $$ GMap2 $random GLatLng Element URI OverText Fx Log
*/

"use strict";



var li =
[
  '<p>Lorem ipsum dolor sit amet consectetuer lacinia dui tellus laoreet lacus. Quis pretium In lorem Curabitur justo tellus auctor porttitor pretium ac. Elit turpis justo id hendrerit tristique quis mollis justo eget lacinia. Suspendisse.</p><p>Elit mi ut sed ultrices tincidunt orci interdum semper eleifend adipiscing. Vel vel augue ut pretium porttitor est Donec eu interdum nascetur. Ac.</p><p>Augue mauris et quam tortor lacus mauris laoreet eget ipsum ac. Nibh eleifend felis velit Phasellus Ut tristique purus ante felis auctor. Hac Cum magna quis Nam malesuada ullamcorper cursus interdum lacus morbi. </p><p>Tortor vel sed Aenean convallis ac Curabitur wisi lacinia eget Curabitur. Tincidunt condimentum lacus ut et feugiat vitae eget Morbi interdum id. Turpis Curabitur interdum vel Aliquam hendrerit sed elit Suspendisse In.</p>',
  '<p>Lorem ipsum dolor sit amet consectetuer habitasse enim Morbi cursus vel. Vel at malesuada semper laoreet magnis malesuada Nam neque turpis nulla. Magna congue elit orci Vivamus lorem pretium.</p><p>Congue urna arcu ipsum dapibus eget id Sed mauris justo nulla. Mauris congue nec volutpat sit Integer auctor quis consequat sapien libero. Facilisi ac pulvinar Lorem lacus suscipit volutpat Nulla Phasellus interdum.</p><p>Et pretium dui odio tortor vestibulum faucibus Phasellus augue Sed lacus. Nunc Aenean sed nibh interdum Nulla nibh enim orci quis gravida. Elit iaculis libero quis Aenean consequat lobortis quis orci tempus dapibus. </p><p>Justo adipiscing orci auctor purus ut nulla vitae sem Maecenas mauris. Ac id ligula congue Aenean Mauris ipsum quis et semper fermentum. Curabitur Morbi pellentesque purus vitae lacinia.</p>',
  '<p>Lorem ipsum dolor sit amet consectetuer Curabitur vitae quam adipiscing porttitor. Ante Nam Phasellus Nam magna ipsum odio felis Curabitur sit ut. Justo pretium eros enim vitae Aenean leo nibh pretium eget sollicitudin. Sed mauris non Nam.</p><p>Euismod Vestibulum ante Phasellus in tortor enim magna sagittis Aenean at. Congue mollis condimentum eu mauris id aliquam Cras Aenean dui adipiscing. Ullamcorper semper pellentesque amet turpis feugiat eget Nulla at diam neque. Lacinia ac condimentum euismod risus In.</p><p>Auctor Duis ipsum pretium eleifend sed pellentesque ac eget Praesent Nam. Consequat turpis consequat Vestibulum facilisis In justo Aenean montes malesuada elit. Tellus at pretium.</p><p>Et Vivamus facilisi et ipsum ante elit nonummy lorem ultrices ullamcorper. Nam amet magna convallis consectetuer purus consequat tempus Aliquam ligula hendrerit. Nibh vel urna condimentum Cras accumsan semper et Proin Vestibulum fringilla. Suspendisse ullamcorper pulvinar.</p>',
  '<p>Lorem ipsum dolor sit amet consectetuer sapien nonummy pharetra tempus tellus. Id Curabitur laoreet at dui condimentum Pellentesque id justo suscipit Nam. Vitae Phasellus adipiscing Curabitur.</p><p>Lacus congue Curabitur Vivamus ac vitae quis Praesent et turpis nibh. Justo et suscipit Sed ut consectetuer cursus augue lobortis convallis eros. Ac consequat adipiscing Pellentesque enim.</p><p>Convallis Nam Vestibulum Donec feugiat elit libero dapibus consequat eget dictumst. Elit est Nunc elit Curabitur nec dictum malesuada sem turpis ut. Augue enim nec magna justo lacinia Vestibulum ligula elit.</p><p>Consequat ut Curabitur euismod orci ante in et elit magnis felis. Urna rhoncus Quisque condimentum laoreet libero congue a non vel malesuada. Ante pretium id elit Suspendisse lacus elit tristique nulla.</p>'
];


function left()
{
  var l;
  
  l = li[$random(0, 3)];
  $('displaytab').retrieve('pageFx').setHtml(l, 'right');
  $('displaytab2').retrieve('pageFx').setHtml(l, 'right');

  $('displaytab').retrieve('pageFx').pageLeft();
  $('displaytab2').retrieve('pageFx').pageLeft();
}  

function right()
{
  var l;
  
  l = li[$random(0, 3)];
  $('displaytab').retrieve('pageFx').setHtml(l, 'left');
  $('displaytab2').retrieve('pageFx').setHtml(l, 'left');

  $('displaytab').retrieve('pageFx').pageRight();
  $('displaytab2').retrieve('pageFx').pageRight();
}






function make(title, method)
{
  $('menu').grab(new Element('button', 
  {
    'text': title,
    'id': title,
    'value': title,
    'events':
    {
      'click': method
    }
  }));
}


(function ()
{
  window.addEvent('domready', function ()
  {
    var pageFx;
    
    pageFx = new Fx.Page('displaytab',
    {
      'duration': 1000
    });
    $('displaytab').store('pageFx', pageFx);
    
    pageFx = new Fx.Page('displaytab2',
    {
      'padding': 25,
      'duration': 1000,
      'mode': 'horizontal',
      'className': 'displaytab2'
    });
    $('displaytab2').store('pageFx', pageFx);
    
    make('<<<', left);
    make('>>>', right);
    
    document.addEvent('keydown', function (event)
    {
      if (event.control)
      {
        if (event.key === 'left')
        {
          left();
        }
        else if (event.key === 'right')
        {
          right();
        }
      }
    });
    
  });
  
}());
Retrieved from "http://www.webmonkey.com/codelibrary/Mootools_page_viewer/examples"
  • This page was last modified 12:35, 7 July 2009.
 

/related_articles/

See more related articles

Subscribe now

Special Offer For Webmonkey Users

WIRED magazine:
The first word on how technology is changing our world.

Subscribe for just $10 a year