pageSwitcher

README

Getting Started

Preparation

This widget requires the enable of JavaScript

To use this widget in your project, using following folders/files:

[images]    *.jpg | *.png | *.gif... 
[script]    mainpage[.min].js | required
[style]     reset[.min].css | required or defined yourself
            mainpage[.min].css | required

<link href="style/reset[.min].css" rel="stylesheet">
<link href="style/mainpage[.min].css" rel="stylesheet">
<script src="script/mainpage[.min].js"></script>

Usage

mainpage.html is a demo web page

1. Create a container with page list(data-page-index and data-page-type attributes required)

<!-- Page Switcher S -->
<div class="main-container">
    <!-- Loading page(optional) -->
    <div class="page-loading">
      <div class="loading-img"></div>
    </div>
    <!-- Page container -->
    <div class="page-container" data-page-type="0" data-page-id="0">
        <!-- Arrow next -->
        <span><img src="images/next.png" alt="next" width="20" height="20"></span>
        <!-- PageA type = 0 -->
        <div class="page page-a" data-page-type="0" data-page-id="0">
            <!-- Page background container -->
            <div class="page-bg"></div>
            <div class="page-welcome">
                <img src="images/welcome.png" alt="欢迎进入">
            </div>
            <div class="page-button buttonA">
                <a href="#"><img src="images/start.png" alt="开始参观"></a>
            </div>
        </div>
        <!-- PageB type = 1 -->
        <div class="page page-b" data-page-type="1" data-page-id="1">
            <div class="page-bg page-bg-b"></div>
            <div class="page-text page-text-b">
                <span>
                    RyougiChan<br>
                    RyougiChan<br>
                    RyougiChan<br>
                    RyougiChan
                </span>
            </div>
        </div>
    </div>
</div>
<!-- Page Switcher E -->

2. Create a Page Switcher

var pages = document.querySelectorAll('.page');
// Create page switcher
Campus.widget.pageSwitcher(pages);
// Create response boxes
Campus.widget.responseBoxAuto({
    width: 750,
    height: 1334
}, [
    '.page-welcome', '.buttonA', '.buttonB', '.buttonC', '.buttonD', '.buttonE', '.page-logo', '.page-qrcode', '.qrcode'
]);

FAQ

Q: Those parameters' meaning in Campus.widget.responseBoxAuto function?

Eeee... Read the Docs guide in mainpage.js.

Q: How does this demo perform on mobile devices' browser?

In my test result, my demo performed well on chrome, firefox, safari, IE11.

Q: Develop experience

At the very start, my demo performed well with chrome and firefox. The JavaScript run in its way well. But where run it in IOS environment, all cracked! There are serveral bugs and its solution:
- window.getComputedStyle(element[, pseudoElt]) function.
As description in the MDN docs, this method should have been preform well with Chrome, Edge, Firefox(Gecko)[Mobile], IE9+, WP7 Mango, Opera[Mobile], Safari[Mobile]. However, it isn't go with its right way in safari! According to WebKit Bugzilla, this is a bug with safari - getComputedStyle returns percentage values for left / right / top / bottom. To solve this bug, using this instead.

ele.offsetLeft / window.offsetWidth - ele.offsetLeft - ele.offsetWidth / ele.offsetTop / window.offsetHeight - ele.offsetTop - ele.offsetHeight 

• setTimeOut(callback,duration) function.
  setTimeOut function execute in asynchronous way. thus, the code may not run with the needed order.
• About images preload. I used following code at the first. But the callback run before the last image loaded.

    function preload(images, callback) {
        for (var i = 0; i < images.length; i++) {
            srcs[i] = new Image();
            srcs[i].src = images[i];
            srcs[images.length - 1].onload = function () {
                callback();
            }
        }
    } 

Instead, this work.

    function preload(images, callback) {
        var imgCount = 0;
        for (var i = 0; i < images.length; i++) {
            srcs[i] = new Image();
            srcs[i].src = images[i];
            srcs[i].onload = function () {
                if (++imgCount == images.length) {
                    callback();
                }
            }
        }
    }

• ele.style.top, ele.style.left, ele.style.right, ele.style.bottom do not work.

  1. Checking out whether the position: absolute is correctly set or ont.
  2. If position: absolute is correctly set, make sure that it's set before CSS top, left, right, bottom properties in .css file and JavaScript.(In Chrome, the order is not needed, but in safari, the order should be correct.)

• CSS3 transition property.

  1. Always add prefix (-webkit-, -moz-, -ms-, -o-) version to polyfill defferent browser.
  2. If there exists a touchmove event and a series of animation, remove CSS3 transition or set it null at touchstart to make animation smoother.
• event.stopPropagation() If there are several event, use this to prevent multiple trigger.
• event.preventDefault() Using this to prevent default browser event.