Ibooks, Epub3 and fixed layout overflow?

[fdeandao]

I want to create a epub and display in Ibooks, this epub have a fixed layout but is dynamically generated, the result may have varying dimensions, but in ibooks needs a viewport with static width and height, for example:

<meta content="width=768, height=576" name="viewport"/>

Ibooks only show the content shown in the viewport

Also, some page have dynamic content and this can grow the size

i tried device-height or 100% and didn't work

Right now i put all content of the page in a DIV with this style:

body > nav > ol {
          width: 90%;
          margin-left: 2%;
          margin-right: 2%;
}
 
 
.epub_content, body > nav {
          width: 740px;
          max-width: 740px;
          min-width: 740px;
          height: 536px;
          max-height: 536px;
          -webkit-overflow-scrolling: touch;
          overflow-x: hidden;
          overflow-y: auto;
          padding: 8px 0px;
}
 
 
.exp_resource {
          max-width: 740px;
          overflow: hidden;
}
 
 
.window_container {
          width: 770px;
          max-width: 770px;
          min-width: 770px;
          height: 545px;
          max-height: 545px;
          -webkit-overflow-scrolling: touch;
          overflow-x: hidden;
          overflow-y: auto;
}

This work fine and i can see all content but anchors didnt works

Anyone know how to make scrollable page in epub with fixed layout?

Regards

[odedta]

I didn't really understand the first part of what you're trying to do but regarding this part:

Anyone know how to make scrollable page in epub with fixed layout?

That's pretty simple, all you have to do is this:

1. Add a div with class "test" to your html page

<div class="test">

2. Add paragraphs to that div:

<p>Lorem ipsum dolor sit amet, vero utamur intellegat vel an, movet habemus ut quo. Corpora accusamus pro an, cu inani dicant dolorum cum. Mei eu vitae vocibus facilis. Nam affert evertitur vituperatoribus te. Eum laboramus concludaturque id. In per facilis fastidii philosophia, solet imperdiet dissentiunt ne his.
</p>
<p>
Quot contentiones ex eam. Sed at augue noster assueverit, te mea omnium alienum commune, usu ipsum voluptaria mnesarchum te. Vix ad novum deserunt philosophia, aliquando persecuti adolescens vix ea, nam te putent constituto. Aliquam contentiones sed at. Ut dolorum delicata eum. Justo idque te his, ei mel malis delenit definitiones, perpetua intellegam ei vix.
</p>

3. Add style for "test" class in your stylesheet (style.css):

.test
{
height:300px;
width:300px;
overflow-y:auto;
overflow-x:hidden;
}

You can even style the scrollbar if you like using CSS, e.g.

::-webkit-scrollbar {
width: 12px;
}

::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

However, bare in mind that this probably only works for the iPad :P

I attached a file with this working, disregard the rest, I just took some fixed layout ePub I had and added your part.
What you need is located in p01.xhtml and style.css

[fdeandao]

i did something similar but links from navigation doesn't works in page with scrollbar, i attach and example

[odedta]

Well, I took this as a challenge and for the past 2 hours or so I tried every possible javascript event I could find to get it to scroll after the page turned.

I have no idea why it's not working, I have a hunch it's not possible in ePub.

I have basically created a button with onlick event to fire this:

window.location = "p02.xhtml#test";

This works perfect in Calibre by the way, for some reason when you view the ePub in iBooks in fixed layout mode this only seems to redirect you to the page in question but not take you to the id.

There might be some iBooks or ePub quirk to get this right, hopefully someone will post it here. :/

This feels a lot like the iPad1 (iBooks 5.1.1) problem with links, it goes to the page but does not focus you on the anchor.

[odedta]

Oh, just incase you're looking for the full code I attached the file I was testing on.

You should use Calibre's Check Book function, there are a lot of errors in the file you uploaded.

[fdeandao]

Sorry for my english

Thanks, you've helped me a lot, let me check the epub

I will research more about this problem

I'll post if I find something

Regards