View Single Post
Old 05-14-2014, 01:51 PM   #2
odedta
Addict
odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.
 
Posts: 398
Karma: 96448
Join Date: Dec 2013
Device: iPad
I didn't really understand the first part of what you're trying to do but regarding this part:
Quote:
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
Quote:
<div class="test">
2. Add paragraphs to that div:
Quote:
<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):
Quote:
.test
{
height:300px;
width:300px;
overflow-y:auto;
overflow-x:hidden;
}
You can even style the scrollbar if you like using CSS, e.g.
Quote:
::-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
Attached Files
File Type: epub test.epub (999.1 KB, 342 views)

Last edited by odedta; 05-14-2014 at 01:53 PM.
odedta is offline   Reply With Quote