Использование javascript для поиска номера страницы текущей страницы просмотра в epub iboooks

Я создаю элемент div в стиле лайтбокса для epub ibooks. Я хочу, чтобы div отображался на текущей странице, просматриваемой в данный момент. Если изображение находится на второй странице электронной книги, я хочу, чтобы лайтбокс отображался на второй странице. У меня есть ширина и высота div, установленные для заполнения экрана.

document.getElementById("LightBoxDiv").style.width=window.innerWidth+"px";
document.getElementById("LightBoxDiv").style.height=window.innerHeight+"px";

Я могу вручную установить фиксированное верхнее значение div, если знаю, на каком номере страницы находится изображение. Мое устройство имеет высоту 460 пикселей в окне. Таким образом, для изображения на второй странице верх должен быть 460, что является началом 2-й страницы.

document.getElementById("LightBoxDiv").style.top="460px";

Однако, поскольку электронные книги являются динамичными в том смысле, что пользователь может изменить размер текста в большую или меньшую сторону, страница, на которую что-то может упасть, меняется. Мне нужен способ установить верхнюю часть динамически на основе текущей страницы. Если я знаю текущий номер просматриваемой страницы, я могу установить верхнюю часть div на

var lighboxHeight = (pagenumber-1)*window.innerHeight;

Я пытался использовать window.pageYOffset для вычисления текущей страницы, но это всегда дает значение 0, так как страница не прокручивается в электронной книге. К сожалению, я не могу найти документацию или какую-либо ссылку, описывающую, как использовать javascript для доступа к номерам страниц. Кто-нибудь знает, как получить доступ или найти текущий номер страницы в epub ibooks с помощью javascript?

Спасибо, -- Кристофер


javascript css epub page-numbering ibooks
person Christopher Gaston    schedule 17.07.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я считаю, что нашел решение. Этот вопрос/ответ очень помог.

//window height
var winHeight = window.innerHeight;
//top of object to be placed in the lightbox
//can be any object
var curOjbTop = document.getElementById(svgId).getBoundingClientRect().top;
//body y value
var bodyTop = document.body.getBoundingClientRect().top;
//amount the object is shifted vertically downward from the top of the body element
var offset = curObjTop - bodyTop;
//page number of the object 
//this is actually 1 less than the true page number
//it basically starts the page count at 0, but for actual page number add 1
var curPage = Math.floor(offset/winHeight);
//this sets the top edge of the lightbox at y=0 on the page the item is on
var lightboxTop = curPage*winHeight;
document.getElementById("LightBoxDiv").style.top=lightboxTop;

Мой лайтбокс div покрывает всю область просмотра, но если вы хотите, чтобы меньший элемент располагался по центру, вам нужно было бы добавить дополнительную половину высоты окна, а затем установить верхнее поле равным половине отрицательного значения высоты, которую вы хотели.

Например, если размер лайтбокса 200 x 200, то ваш лайтбокс будет var lightboxTop = (curpage*winHeight)+(winHeight*.5); var topMargin = "-100px";.

Возможно, его нужно немного подправить, но в целом он должен работать, чтобы определить номер страницы.

person Christopher Gaston    schedule 19.07.2014