touchstart event for turn pages

Question

Level 1

0 points

touchstart event for turn pages

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

Posted on May 3, 2013 12:57 AM

Reply

Answer 1

May 27, 2013 12:55 AM in response to vadim_k

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);

Reply

Answer 2

vadim_k Author

Level 1

0 points

May 27, 2013 12:06 PM in response to Touch Hean

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

but this dont resolve my problem completely.

Thanks for answer, best regards

Reply

Answer 3

May 27, 2013 7:38 PM in response to vadim_k

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.

Reply

Answer 4

vadim_k Author

Level 1

0 points

Jun 4, 2013 5:19 AM in response to Touch Hean

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

Reply