EzDevInfo.com

how to change animation speed in turn.js?

I have a project which is e-catalog. I have used turn.js library for it. It was a great library and i would like to change something like the animation speed when turning into pages. But there is no option, properties or method built in turn.js to modify it. anyone can help? or at least tell what part of the code it is located to change the speed? Thanks.

Adding pages dynamically using Turn.js

I have about 100 pages, each with an image or a video. While constructing the book I'm calling addPage on all of the 100 pages in a 'for' loop. Since Turn.js keeps only 6 pages in DOM, I assumed it was okay to load it this way. However I've seen examples of loading a few pages in range in an event handler such as when turning. What is the right approach?

Page Flip effect in pure Javascript

For an ebook-reader webapp, im trying to make a fancy book-like viewer for the ebooks, like iBooks for iPad and iPhone.

I found that excellent jQuery Plugin which is exactly what im trying to reach. The only problem is, its a jQuery Plugin, so i cant use that. How could something like that'be done in pure Javascript?

Link to the jQuery page flip plugin: Turn JS jQuery Plugin

Support for turn.js in older browsers

I'm using turn.js for a page-flip effect, and it doesn't seem to work very well on IE7/IE8 (load up the website in IE7 mode and you can see for yourself).

What's the best way to support old browsers, while keeping the cool page-flip on modern browsers? (Note: I don't need the hot corners at all on IE, as I also have dedicated arrow links which flip the page via Javascript, similar to the turn.js demo.)

TurnJS ZoomIn and ZoomOut

I am in a search of help. I am using TurnJS API and looking for ZoomIn and ZoomOut functionality using the buttons instead of click/tap on the flipbook. The Zoom-in and Zoom-out need to be factor based for e.g 20%. Each time I click ZoomIn, it should Zoom 20% upto 100 and Zoomout viceversa.

I tried to edit the zoom.js but was unsuccessful. Hope anybody can get back to me on this.

turnjs steve jobs example - how to load first 4 pages

I am new to turn.js and I am trying to modify the steve jobs book that comes with it.

The first 3 pages of the book are images and set in css like so

.sj-book .p1,
.sj-book .p2,
.sj-book .p3, 
.sj-book .p111, 
.sj-book .p112{
    background-color:white;
    background-image:url(../pics/book-covers.jpg) !important;
}

However I would like to load the first 4 pages as normal html pages like the other pages (e.g. page1.html). However the code only seems to start loading pages at page 5. If i add an alert to the missing function which loads the pages dynamically, the first page loaded is page 5

missing: function (e, pages) {

for (var i = 0; i < pages.length; i++) {
alert(pages[i]);
addPage(pages[i], $(this));}

}

When the books loads for the first time, this alert appears twice - for pages 5 and 6 -which sort of makes sense as the book only keeps 6 pages in memory - but why isn't the book loading pages 1 to 4? I have created the necessary html files for pages 1-4 in the pages directory but they are not loadded.

Thanks a lot

Placing Large HTML content dynamically on TurnJs Flipbook

I am not sure if this is something that has already been discussed, I tried searching on the list of issues but could not find anything related to it.

I have a large HTML content that I need to bind using turn.js. The problem I have is that, with turn js, I will have to split the HTML into seperate div tags as pages. Is there a way in turn.js to bind the content on a div and it takes care of automatically wrapping to different pages based on the content that is being bound?

Or is there a way to know how much data needs to be bound to each page to get this scenario working

add pages dynamically to turnjs book

I need to build a book dynamically. I'm using turnjs. see this fiddle : JSFIDDLE LINK

here's the function for adding the page:

function addContent() {
     var element = '<p>SomeContent</p><a rel='nofollow' href="#">Go To Page 1</a>';
    var pageCount = $('#flipbook').turn('pages') * 1;
    $('#flipbook').turn('addPage', element, pageCount+1)
    .turn('pages', $('#flipbook').turn('pages'));
}

the first problem is that the page is added at the end, first of all I need to control this for adding the page every where I want.

the second problem is that the added page doesn't get the book effects! like it's not the book's page. how can I fix this?

any help would be appreciated.

Turn.js - Object [object Object] has no method 'turn'

I've been stuck in the code for quite some time now and decided to try and get some help. The code will generate a book by using the Turn.js plugin. This plugin worked with no problems until I got the error Object [object Object] has no method 'turn' one time. Then started to test it more and seen this error pop-up more and more after a page refresh/visit. It's something that occurs once in a while when loading the page (lets say you open the page 50 times 1-5% of the time it generates the error). The error start on the 3th line of the following code:

if (flipbook != "none") // Create book
{
    flipbook.turn({.....}); //error here
}

I've checked the flipbook if the content in it is any different with or without the error, which seems not to be the case. It contains all the pages (HTML page content) it needs to create the book using Turn.js. Hope it's enough information to help me out.

Remember to refresh a few times since the error does not occur all the time.

Edit:

It does show on multiple systems not only mine. It feels as if turn.js loads around the same time and once in w while its to slow to catch up give error and then show flipbook with turn but says its not there.

Edit2:

Found an easy way to generate the error. First open the link and then open the console, then minimize the browser or select a different tab and then refresh the page in console you opened before (just regular f5 in console). In 2 or 3 times you'll see the error. This made me think about the error and made me question the viewport sizing I use to make it responsive(yes its responsive but no not in the page you currently see it. This will be used in the future website and embedded share code with iframe). But after setting it to a hardcode sizing it still pops-up.

Turn.js library and load function for each page

I'm using the TurnJS library to make a flip book and I also using a tooltip library.

The book and the tooltips work for few pages but sometimes it not works. It seems that the tooltip function cannot be loaded. I don't know why. Do I have to use a specific event to solve this problem ? Here is my tooltip function :

   $(document).ready(function($) {
    $('.source').each(function() {
        var selector = '#' + $(this).data('source-id');
        Tipped.create(this, $(selector)[0], {
            skin: 'white',
            hook: 'topleft',
            hideOn: 'click',
            showOn: 'click',
            maxWidth: 250,
            closeButton: true

        });
    });
});

I load my flipbook like that:

  function loadApp() {    
     // Create the flipbook
      $('.flipbook').turn({
          // Width
          width: 900,
          // Height
          height: 620,
          // Elevation
          elevation: 50,
          // Enable gradients
          gradients: true,
          duration: 1000,
          pages: 16,
          // Auto center this flipbook
          autoCenter: true,   
      });  
  }   
   // Load the HTML4 version if there's not CSS transform

  yepnope({
      test: Modernizr.csstransforms,
      yep: ['lib/turn.js'],
      nope: ['lib/turn.html4.min.js'],
      both: ['css/basic.css'],
      complete: loadApp
  });

thanks for your help

Issue in turn.js page box-shadow and left-margin alignment

I am facing problem in page flip turn.js

• I set the box-shadow for both odd and even page, but odd pages box shadow is display at first execution. At the time of second time page flip box shadow is not visible. For even page not visible at any time.
• I have set the left-margin of the page but pages is not shifting any more.

#flipbook{ width:400px; height:300px; margin-left:100px; }

#flipbook .odd{
background:-webkit-gradient(linear, right top, left top, color-stop(0.95, #FFF), color-stop(1, #DADADA));
background-image:-webkit-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
background-image:-moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
background-image:-ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
background-image:-o-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
background-image:linear-gradient(right, #FFF 95%, #C4C4C4 100%);
-webkit-box-shadow:inset 0 0 5px #666;
-moz-box-shadow:inset 0 0 5px #666;
-o-box-shadow:inset 0 0 5px #666;
-ms-box-shadow:inset 0 0 5px #666;
box-shadow:inset 0 0 5px red;
}

Where I am doing wrong? JSFiddle

Any way to find double current pages in turn.js?

My requirement is to display the current double pages in following format:-

• 2-3
• 4-5

and I only done with displaying singe page at a time however there is a double page view. like

• 2 at 2-3
• 4 at 4-5

Any idea how do I fetch these current double pages in expected format? I know I can do it by using adding logic, but would be better if I do it with internal logic of turnjs. because It can be happen only single page comes sometimes like cover page or last page. I am sure there must be a way to find by turnjs only. Any help will be appreciated... Thanks in Advance.

Adding double pages to a turnjs "book"

I have a created a website where visitors can skim through a book using turnjs. I have the pages as jpgs of double pages and I want them to be loaded dynamically.

Here's the code:

var flipbook = $('.flipbook');  
flipbook.turn({
    elevation: 50,
    gradients: true,
    autoCenter: true,
    pages: 118,
    when: {
      missing: function (e, pages) {
        for (var i = 0; i < pages.length; i++) {
          var n = pages[i];
          if(!$(this).turn('hasPage',pages[i])) {
            var pagenum = Math.floor(pages[i] / 2) + 1,
                src="url(/pages/page_" + pagenum + ".jpg)",
                element = $('<div />',{'class': 'double', css:{backgroundImage:src}});
            flipbook.turn('addPage',element,n);
          }
        }
      }
    }
});

<div class="flipbook">
<!-- Insert content dynamically -->
</div>

Unfortunately this doesn't work like I want it to, here's what's happening:

The code as I posted it above inserts the pages, but every double page is just scaled to 50% of its width an put on one page. for example, on page 4 I have what should be page 4 & 5 and on the left page I have the same as on its right neighbor.

I changed the last line to flipbook.turn('addPage',element); hoping that it would automatically add two pages, but then the first page inserted is .p113 and not .p1

I also changed my code to

if(0 == n%2 && !$(this).turn('hasPage',pages[i])) {
  var pagenum = Math.floor(pages[i] / 2) + 1,
      src="url(/fileadmin/kollektion/2015/pages/page_" + pagenum + ".jpg)",
      element = $('<div />',{'class': 'double', css:{backgroundImage:src}});
      element.scissor();
      flipbook.turn('addPage',element,n);
  }
}

But that resulted in only getting the left pages inserted.

So, what's the best way to dynamically add double pages using addPage? I couldn't find anything about that in the documentation or the examples.

Periodic refresh of a book's dynamic pages using turn.js

I have created an example of dynamically generated content to be viewed using turn.js using the sample provided here.

This is the part of the code that I have so far:

<body>
   <div id="paper">
   </div>
</body>

<script type="text/javascript">
    $(window).ready(function() {
        $('#paper').turn({pages: 12});
    });

    $('#paper').bind('turning', function(e, page) {
          var range = $(this).turn('range', page);
          for (page = range[0]; page<=range[1]; page++)
            addPage(page, $(this));
        });

    function addPage(page, book) {
           // Check if the page is not in the book
          if (!book.turn('hasPage', page)) {
            // Create an element for this page
            var element = $('<div />').html('Loading…');
            // Add the page
            book.turn('addPage', element, page);
            // Get the data for this page   
           $.ajax({url: "getPage?filename=abcd&page="+page})
             .done(function(data) {
               element.html(data);
             });
           }
        }
</script>

getPage is a jsp that returns <div class="page"><img src="docs/local/abcd_1.png" alt="" /></div> or any other page number as per the ajax request.

The problem I have is that the png's requested may or may not be available on the web server at the time of the request. They will become available a few (or sometimes many) seconds later. So I would like to be able to display some default "Loading..." type content if a png is not available and refresh periodically (i.e. every x seconds) until the actual png becomes available. I don't have a problem changing the output of getPage if required.

Turn.js messing with the image quality on my Canvas

I'm currently loading a PDF File through PDF.JS and turning the generated canvas into a Turn.js flipbooks

my pages are generated like this.

    pdf.getPage(1).then(function(page) {
        var scale = 1;
        var viewport = page.getViewport(scale);

        // Prepare canvas using PDF page dimensions
        var pag1 = document.getElementById('pag1');
        var context1 = pag1.getContext('2d');
        pag1.height = viewport.height;
        pag1.width = viewport.width;
        var renderContext = {
            canvasContext: context1,
            viewport: viewport
        };
        page.render(renderContext);
    });

and the turn is being applied like this

$(window).ready(function() {
    $('#magazine').turn({
        display: 'single',
        acceleration: true,
        gradients: !$.isTouch,
        elevation:50,
        when: {
            turned: function(e, page) {
                /*console.log('Current view: ', $(this).turn('view'));*/
            }
        }
    });
});

very basic stuff, but i don't understand why this happens:

I tryed changing the scale, applying imageSmoothingEnabled : false, and changing image-rendering to pixelated to no avail... what am I missing?