1

I am building a lightbox style div element for an ibooks epub. I want the div to be displayed on the current page being viewed at the time. If the image is on page two of the ebook, I want the lightbox to showup on page two. I have the div width and height set to fill the screen.

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

I can manualy set a fixed top value of the div if I know which page number an image is on. My device has a 460px height on the window. So for an image on page two, the top should then be 460 which is the beginning of the 2nd page.

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

However, as ebooks are dynamic in that the user can change the size of the text larger or smaller, the page upon which something might fall changes. I need a way to set the top dynamically based upon the current page. If I know the current page number being viewed, I can set the div top to

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

I tried using the window.pageYOffset to calculate the current page, but this always gives a 0 value as the page does not scroll in an ebook. Unfortunately, I can find no documentation or any reference describing how to use javascript to access the page numbers. Does anyone have any idea how to access or find the current page number in an ibooks epub using javascript?

Thanks,--christopher

Christopher Gaston
  • 491
  • 2
  • 6
  • 18

1 Answers1

0

I believe I found the solution. This question/answer helped a lot. 

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

My lightbox div covers the entire viewing area, but if you wanted a smaller one that was centered, you would need to add an additional half of the window height and then set the top margin to be half the negative amount of the height you wanted.

For example if the light box was 200 x 200, then your lightboxtop would be var lightboxTop = (curpage*winHeight)+(winHeight*.5); var topMargin = "-100px";

It may need to be tweeked some, but overall it should work to determine a page number.

Community
  • 1
  • 1
Christopher Gaston
  • 491
  • 2
  • 6
  • 18