iOS orientation single and double page flipping

[ryHollingsworth]

Hey all,

I'm currently working on making my flipbook responsive and felt I'd share my progress with the community in case there's another person out there doing the same thing. (there's a few issue threads here on the subject, but no real code pertaining to it) I'm just starting this process and expect a lot of speed bumps along the way...

here's how i'm handling screen orientation detection:

window.onorientationchange = detectIOSOrientation;  

function checkOrientation (orientation){
        if ( orientation == 0 || orientation == 180)  {
        return("portrait");
    }
    else if ( orientation == 90  || orientation == -90) {
        return("landscape");
    }


}   

function detectIOSOrientation () {

     switch(checkOrientation(orientation)){
        case "portrait" : 
             $('.turn-book').turn('display', 'single').turn('size', 480, 1200);
             $(".importPage").show();
        break;

        case "landscape" : 
             $('.turn-book').turn('display', 'double').turn('size', 960, 600);
             $(".importPage").hide();
        break;


     }

 }

the .importPage class is my right hand page. it's a little redundant, but i haven't thought of a cleaner way of doing this yet. (my pages are dynamic) I hide/show this div class based on the orientation of the device...

which required a quick fix to the prev/next functions:

function goPrev() {

     switch(checkOrientation(orientation)){
        case "portrait" : 
             $('.turn-book').turn('previous').turn('previous');
        break;

        case "landscape" : 
            $('.turn-book').turn('previous');
        break;

     }

    event.preventDefault();

    return false;
}

function goNext() {

         switch(checkOrientation(orientation)){
        case "portrait" : 
             $('.turn-book').turn('next').turn('next');
        break;

        case "landscape" : 
            $('.turn-book').turn('next');
        break;
     }

    event.preventDefault();
    return false;
}

issues i'm currently facing:

1. need to check orientation on page load
2. swapping between orientations causes glitches in backgrounds of the book (when using css to generate a background as seen in the steve jobs example)
3. swapping between orientations will cause the flipbook to end up off screen and unreachable.

Any ways, I'm done for the day with this, but thought this might be a popular topic for others and felt I'd at least share what I got done today :)

If any one has any insight I'm 100% open to it, and I hope this may help others reach their goals for their flip books!

[blasten]

@ryHollingsworth Fantastic, Thanks! An upcoming version might include an option called responsive that will handle EVERYTHING.

[ryHollingsworth]

@blasten Awesome, yeah I saw your youTube video with a responsive effect on it.. looking good. I have to put my progress on hold for now, but hopefully i can get back in to it.. silly other projects :) keep up the good work and thanks for all you do!

[Cleanshooter]

The only way I made mine a little more responsive was calculating out the width... the problem with my implementation is that it reloads the page when the orientation changes... Which means you lose your page (and it's slow :( )

$(document).ready(function (){
        setFlipbookStage();
    });

    $(document).bind( 'orientationchange', function(e){
        window.open("index.html","_self");
    });

    function setFlipbookStage(){
        var imgHeight = 720;
        var imgWidth = 576;
        var scrWidth = $('#flipbook').width();
        $('.dynamic_image').css({
            'max-width' : (scrWidth / 2) , 'height' : 'auto'
        });
        var dynHeight = Math.round((( scrWidth / 2 ) * imgHeight ) / imgWidth);
        $("#flipbook").turn({
            gradients: false,
            width: scrWidth,
            height: dynHeight,
            autoCenter: true
        });
    }

Using version 3

I looked through some of the code for turn.js (most of which was way over my head) but I noticed that it has a resize function. Was mine not working or is that only for the "stage" and not the images.

[imsuchanoob]

I'm trying to use your example ryHollingsworth on the "magazine" sample.
It works fine for switching between single and double but it seems to carry the dimensions that are defined in the begining

flipbook.turn({

        display: 'double',

        // Magazine width

        width: 800,

        // Magazine height

        height: 500,

Am I supposed to delete this initial settings or what ?

My result is I keep getting an either stretch out single or really narrow double. Help !

[syNip]

No, the init settings give you the first div, that why you got a not good visibility.

Actually for the first chargement with my php code I init and that my trouble actually to know if my phone was on portrait and lanscape.

After that i give the init settings on PHP with a cookie to know the res width :

function Xhr_ResScreen(file){ if( window.XMLHttpRequest ){ xhr = new XMLHttpRequest(); if ( xhr.overrideMimeType ) xhr.overrideMimeType('text/html; charset=ISO-8859-1'); } else { if ( window.ActiveXObject ){ try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { window.alert("Votre navigateur ne prend pas en charge l'objet XMLHTTPRequest."); } } } }

if( (new RegExp("[?]", "gi")).test(file) ){
    xhr.open("GET", file + '&rand=' + Math.random(), true);
} else {
    xhr.open("GET", file + '?rand=' + Math.random(), true);
}

xhr.setRequestHeader("Content-type", "charset=ISO-8859-1");
xhr.send(null);

}

Xhr_ResScreen('resscreen.php?width='+window.innerWidth+'&height='+innerHeight);


and after i take it for hav the resolution of my device :

$cookietime = 3600;

$width = ( isset($_GET['width']) && is_numeric($_GET['width']) ) ? intval($_GET['width']) : '';
$height = ( isset($_GET['height']) && is_numeric($_GET['height']) ) ? intval($_GET['height']) : '';

if( !empty($width) && !empty($height) ){
$_COOKIE['res_width'] = $width;
$_COOKIE['res_height'] = $height;
setcookie("res_width", $_COOKIE['res_width'], time() + $cookietime, '/');
setcookie("res_height", $_COOKIE['res_height'], time() + $cookietime, '/');
}

and take it in a php Var for display :

$EcranWidth = $_COOKIE['res_width']; $EcranHeight = $_COOKIE['res_height'];

[ghost]

Hi, I am also trying to figure out how to make turn.js go from double to single page mode when in portrait on a phone or a tablet. I tried to implement @ryHollingsworth code, but it's not working for me. Perhaps I'm not inserting it into the right location?

Have anyone else figured out how to make ?