Why is 'position fixed' “killing” my links in iBooks?

Question

Level 1

0 points

Why is 'position fixed' “killing” my links in iBooks?

I am doing some tests using the CSS property 'position:fixed' in iBooks. The idea is to have a clickable DIV that remains in place (fixed down the left hand side) as you turn from page to page. When you click the DIV you get another pop up DIV. (Just a standard hide/show thing...)

The positioning side of things is working correctly. And on page 1 the hide/show is working correctly.

However, once you flip to a second page this problem occurs: the clicking no longer works for some reason. I have tried both JavaScript events as well as just a regular HTML anchor, and I get the same result, so this does not appear to be a JavaScript issue. Something seems to happen once you've flipped to another page. The clickaibility of elements (that are position:fixed) is lost.

Can anyone shed any light please? I'd love to get this working...

Posted on Sep 13, 2012 12:30 AM

Reply

Answer 1

JudithT

Level 1

10 points

Nov 21, 2012 12:15 PM in response to SwissTony76

Does your clickable Div have a specific ID? If so, then you might try having div id="page1" and the next page div id="page2" - might mean more work in your CSS but this should fix your problem.

Reply

Answer 2

Mrnt

Level 1

0 points

Dec 12, 2012 8:55 AM in response to SwissTony76

You have probably figured this out, but in case someone else is having the same problem:

I seem to recall seeing somewhere in the ePub specs that "position:fixed;" is unsupported.

If each page is a separate xhtml file then going between pages in the book is like loading different pages in a browser. If you want an element to show up on each page then you will need to have a div (or similar) for it in each xhtml file and give them the same class and then add some css for that class in your style sheet.

.lefttab {

position: absolute;

left: 0;

top: 40px;

etc...

}

Reply