1

Turn.js's autoCenter property changes the margin-left of the #flipbook, in order to keep the images inside the flipbook virtually centered. However, I want the flipbook centered within my browser, but autoCenter affects putting margin: 0 auto; on the #flipbook.

Is there any way I can make both the flipbook centered in the browser window, and have the autoCenter property turned on so that I don't have to write the double-page view autoCenter'ing functionality myself with JavaScript?

Charles
  • 50,943
  • 13
  • 104
  • 142
rkulla
  • 2,494
  • 1
  • 18
  • 16

1 Answers1

3

The flipbook is working on the #flipbook element , which I suppose it's a 'div' element, right ?

So the script should center only the objects inside the div... Now, try entering this 'div' into an other one like:

//HTML..
<div id="container" style="position:absolute;width: 50%;
    margin: 0px auto;">

       <div id="flipbook" style="position:relative">
       //Script works here
       </div>
</div>
//HTML..

Sorry if this didn't help you..

Try providing some code to help me solving your problem..

Fredrik Sundmyhr
  • 801
  • 6
  • 16
Alberto
  • 4,212
  • 5
  • 22
  • 36
  • Correct, but the problem is that if you use turn.js's autoCenter property, it changes the margin-left of the flipbook to -200px and throws the whole flipbook off center, relative to the #container div. I can get it to center the flipbook fine within the container fine when I don't use the autoCenter property, but then I don't get the automatic in-book centering that autoCenter gives you: it's supposed to center the cover page of a book, then when you turn the page to a 2 page spread it adjusts the margin-left to show 2 images side by side yet still cenetered. It might be a bug with Turn.js. – rkulla Jul 30 '12 at 00:08
  • Ok it is just a css issue, the scripts works fine.. Can you provide me some code ? I just need the container with the flipbook div inside and the part of the script where the margin is set..I will analyze it in the next few hours now i have to go.. – Alberto Jul 30 '12 at 01:40
  • Yeah, the trick was to put a special flipbook parent container and have that be what's centered. I had a different parent container that was specifically for browser resizing - so the trick was to have both outer containers: one for browser resizing and one for centering. Thanks. – rkulla Jul 30 '12 at 22:00