4 Replies Latest reply: Jun 4, 2013 5:19 AM by vadim_k
vadim_k Level 1 (0 points)

Hi all.

I working with epub fixed layout format e-book.

In my projects I using many HTML pages with any animations. On some reasons I want to prevent ibooks touchstart event for area, placed near the left and right bounds of my e-book. Usually its possible by using code like this:


     document.getElementById('area_out').addEventListener('touchstart', function(event) {event.preventDefault()}, false);

     document.getElementById('area_in').addEventListener('touchstart', function(event) {event.preventDefault()}, false);


But in this case turning e-book pages still possible by taping on the image, which demonstrated е-book thickness and displayed by ibooks.



Is this possible to prevent this effect also?

Thanks for answer.

With best regards, Vadim

iPad, iOS 5.1.1
  • Touch Hean Level 1 (0 points)

    Why u don't try add an event "touchstart" to the image which cause the page turn?


    document.getElementById('theImageID').addEventListener('touchstart', function(event) {event.preventDefault()}, false);

  • vadim_k Level 1 (0 points)

    Hi, Touch Hean.


    How can I get theImageID for image, which generated by iBooks (red zone = book binding in my example)? I tried to remove this image by using code 

    <meta property="ibooks:binding">false</meta> (see  Jean-Michel Dentand answer in post Re: iBooks new <meta property="rendition:spread">none</meta>)

    but this dont resolve my problem completely.


    Thanks for answer, best regards

  • Touch Hean Level 1 (0 points)

    In document ready callback, you can try to get all the images by using js method getElementsByTagName("img").

    The auto generated images should have something special that you can identity.

  • vadim_k Level 1 (0 points)

    Hi, Touch Hean.

    I tried to get all images id by using this code:


    var all_images = document.getElementsByTagName("img");

    for(var j=0; j<all_images.length; j++){alert(images[j].id)}


    As I suspected, I can see only the images id, that have been used directly in the my own html document.

    If I change my code like this: var all_images = window.getElementsByTagName("img"); I dont see anything.


    Thank you for your attention to my problem