Mootools page viewer

Introduction

Fx.Page is a mootools 1.2.3 extension. The page effect slides the content of divs left and/or right hiding one content and revealing the other.

The content can be placed in three div's (pages), of which the middle div is visible. You can slide all div's (pages) left and right. The div's are then rearranged, so the left or right becomes the middle one etc.

What you'll need

Preferable some html, css, javascript and mootools experience.

Code and Explanation

Class Fx.Page

The page effect slides the content of divs left and/or right hiding one and revealing the other. Inherits methods, properties, options and events from Fx.

Constructor

Syntax:

var myPageFx = new Fx.Page(element, [, options]);

Options:

Additional to the Fx options:

• className - (string, defaults to ) The class used by the three content divs.
• padding - (integer, defaults to 0) Creates a padding effect for the three content divs.

Examples:

Create a new instance with padding, classname and an effect duration of one second:

    var pageFx = new Fx.Page('displaytab',
    {
      'padding': 25,
      'duration': 1000,
      'className': 'displaytab2'
    });

pageLeft

Slide the pages to the left.

Syntax:

myPageFx.pageLeft();

pageRight

Slide the pages to the right.

Syntax:

myPageFx.pageRight();

setHtml

Set the html content of a page.

Syntax:

myPageFx.setHtml(html, position);

Arguments:

• html - (string) Parameter with HTML content.
• position - (string) Position of the page that gets the html content, 'left', 'center' or 'right'.

getHtml

Get the html content of a page.

Syntax:

myPageFx.getHtml(position);

Arguments:

• position - (string) Position of the page to read the html content from, 'left', 'center' or 'right'.

Fx.Page.js

/*global Fx Class Element $extend $ 
*/

"use strict";

Fx.Page = new Class({

  Extends: Fx,

  'options': 
  {
    'className': '',
    'padding': 0
  },

  initialize: function (element, options)
  {
    var i, l, slider, wrapper, width, height, colors, outer;
    
    this.parent(options);

    this.addEvent('complete', this.completed.bind(this));
    this.element = this.subject = document.id(element);
    this.offset = this.element.offsetWidth;
    this.margin = 'margin-left';
    width = this.offset - 2 * this.options.padding;
    
    this.element.setStyles(
    {
      'overflow': 'hidden'
    });
    

    height = this.element.offsetHeight - (2 * this.options.padding);
    
    this.slider = new Element('div', 
    {
      'id': 'fxpageslider',
      'styles':
      {
        'width': this.element.offsetWidth * 3,
        'height': this.element.offsetHeight
      }
    });
    
    for (i = 0; i < 3; i += 1)
    {
      outer = new Element('div',
      {
        'class': this.options.className,
        'styles':
        {
          'width': width,
          'height': height,
          'padding': this.options.padding,
          'float': 'left'
        }
        
      });
      outer.grab(new Element('div',
      {
        styles:
        {
          'overflow': 'hidden',
          'width': width,
          'height': height
        }
      }));
      this.slider.grab(outer);
    }     
    
    this.setHtml(this.element.get('html'), 'center');
    
    this.element.empty();
    this.element.grab(this.slider);
    this.center();
    
  },

  set: function (now)
  {
    this.slider.setStyle(this.margin, now);
    return this;
  },

  start: function (how)
  {
    var margin, fromto;
    
    if (!this.check(how)) 
    {
      return this;
    }
    margin = this.slider.getStyle(this.margin).toInt();
    switch (how)
    {
    case 'left': 
      fromto = [margin, margin - this.offset]; 
      break;
    case 'right': 
      fromto = [margin, margin + this.offset]; 
      break;
    }
    this.lastHow = how;
    return this.parent(fromto[0], fromto[1]);
  },

  pageLeft: function ()
  {
    return this.start('left');
  },

  pageRight: function ()
  {
    return this.start('right');
  },
  
  center: function ()
  {
    this.slider.setStyle(this.margin, -this.offset);
  },

  
  completed: function ()
  {
    if (this.lastHow === 'left')
    {
      this.slider.grab(this.slider.getFirst(), 'bottom');
      this.center();
    }
    else
    {
      this.slider.grab(this.slider.getLast(), 'top');
      this.center();
    }    
  },
  
  getElementleft: function ()
  {
    return this.slider.getFirst().getFirst();
  },
  getElementcenter: function ()
  {
    return this.slider.getFirst().getNext().getFirst();
  },
  getElementright: function ()
  {
    return this.slider.getLast().getFirst();
  },
  
  
  setHtml: function (html, position)
  {
    if (this.check()) 
    {
      this['getElement' + position]().set('html', html);
    }
  },
  
  getHtml: function (position)
  {
    return this['getElement' + position]().get('html');
  }
  
});

Todo

• Extend Element with get('page') and set('page').
• Extend Element with slide([options]).
• Enhance styling for the three inner divs.

• This page was last modified 12:38, 7 July 2009.