2

I am using a page flipping plugin called "bookblock" (demo can be found here).

I have put images on each page, which I am adding dynamically. The problem is when I flip the page, the previous and next divs are suddenly squished together on each side of the book. The following screenshot is taken mid-animation of a page flip.

enter image description here

As you can see each page in the book is "item1", "item2", etc. All of the display properties are set to "none", but for some reason they can be seen.

A live version of this site can be found here. I have tried adding

$(".bb-item").hide();

Right before the animation sequence, which appears to begin on line 259 of js/jquery.bookblock.js, but no luck. How else could I go about debugging this problem?

UPDATE: I am very sorry, I should have mentioned that you can access the flipbook by clicking on the "expand" icon, in the bottom right of each div in the live version.

Warren Rumak
  • 3,824
  • 22
  • 30
Doug Molineux
  • 12,283
  • 25
  • 92
  • 144
  • 1
    That's interesting, I just switched to `Fullscreen Mode` (F11) and switched back, and things worked perfect.. – face Aug 19 '13 at 20:47
  • Strange, I am seeing the same behavior in Chrome. I wonder if it might be related to the height / size of the window? Maybe a "resize" triggers something? If I just resize the window, it appears the problem goes away. – Doug Molineux Aug 19 '13 at 20:50
  • Okay, i got it. See the problem is when you flip it while in full screen(F11) mode, things work perfectly and then you go and flip in normal mode still it works. But if you try to do it, in normal mode , during the first try itself, then the `squishing` does happen... I am doing a little R&D. Will notify you, if i get something... – The Dark Knight Aug 19 '13 at 20:52

1 Answers1

0

I am not sure why this works, but face's useful comment helped me find that resizing the window actually fixes the problem.

Right after I update the items inside the book, I trigger the resize method:

$(window).resize();

And it seems to get rid of the problem, thanks!

It appears the bookblock js file uses something called debouncedresize which seems to attach a listener to a window resize event. I suspect this might be related, but currently, I don't have a proper explanation of this behavior.

Doug Molineux
  • 12,283
  • 25
  • 92
  • 144
  • 1
    Yeah, even I was searching for the same.. Also, on a debouncedresize event, it executes the following code: `this.elWidth = this.$el.width();` In another section, they have said that this line is important for plugin to work, may be the instance of line in `_init` doesn't execute. – face Aug 19 '13 at 21:30
  • Thanks for your help sir, I spent a lot of time on this one. BTW, if you can find more info, and add your information to an answer, I will mark it as correct :) – Doug Molineux Aug 19 '13 at 21:57