codrops / bookblock Goto Github PK
View Code? Open in Web Editor NEWA jQuery plugin that will create a booklet-like component that let's you navigate through its items by flipping the pages.
A jQuery plugin that will create a booklet-like component that let's you navigate through its items by flipping the pages.
Hey Folks. I really love what you have done with Bookblock. I am using it to develop some research notebooks of my own. I was wondering however, if it is possible to insert navigation hyperlinks in the bookblock. So on the first page, I would like to have a menu to indicate "Introduction", "Methods", "Results", etc., just like a table of contents. I would like the user to be able to click on the table of contents and the hyperlink would take the user to the appropriate page. Is there any way to do this in bookblock now?
I built a BookBlock based on Demo4. I successfully added the dots nav from demo5, but the current dot is not changing when the prev/next buttons are clicked. Any tips on getting the two nav elements to work together?
On the latest version of Chrome (I have version 33.0.1750.117) this has stopped working correctly. When doing the page flip effect, the page flashes, showing both sides of the page alternating quickly and completely ruining the effect. I have seen this both on PC and Mac. In other browsers and older versions of chrome continues to run perfectly
If there is an input on a page, and the user changes its value, the input maintains its initial value during the animation.
i need to know which page the user is going to flip to so i can load the content before the page flip.
I am trying to define bookblocks using percentage values (100%/100vh) and in horizontal orientation this ends up with a split line running across the top during transition, which is very obvious when trying to 'flip' full-screen images. The top half appears to shift a pixel or two, and my best attempt at a css fix resulted only in moving the split line to the middle instead of the top. This problem does not occur in vertical orientation.
I am also interested in doing nothing when trying to flip prev/next at self.end, but defining rotateX as 0°/180° breaks bookblocks altogether (ceases flip anywhere). Interestingly, at this point the page is frozen with the split line.
I would additionally be very grateful if mouse scroll control could be implemented similar to Scrollify, although I am trying to figure this out myself. That being said, the above two issues are top priority. Many thanks!
Hi!
In my project I'm using BookBlock for some divs with scroll inside.
However, any time I turn a page it scrolls the div to the top, making the effect a bit ugly.
Am I missing something?
Thanks,
Luis
Only first page flips and after that it doesn't work . Could any help?
I try to use slides.js to add feature of mutiple-image gallary in bookblock pages,but when I turn the page,the right part of the page which contains a slides will flicker,and the left part of the page would not.
Then I try another slides plugin responsiveslides.js,the problem is still there,I guess maybe that's the bug of bookblock.
Behaves OK: in firefox,
Flicker : in chrome , safari of iPad
The page jumps about when turning.....
I have made a test to check if BookBlock could be used in an epub online reader.
I create a new index4e.htm file at (https://github.com/lpccoder/BookBlock/blob/master/index4e.html) after forking you project. Also modified the demo4.css file to demo4e.css to avoid centering the text (https://github.com/lpccoder/BookBlock/blob/master/css/demo4e.css)
As you can see in the code I'm trying to control pagination using the jquery scrollTop function. It's a beta (good pagination requires more coding) but the problem I'm facing is that when I push the next page button all the divs resets their scrollTop to zero.
I also take a look at the http://tympanus.net/codrops/2012/12/11/fullscreen-pageflip-layout/ code but I can't see where in the code the scrolltop reseting is avoided.
Any suggestions?
Is it possible to add new pages on the fly?
I want to load a specific page, but then when clicking the next/prev buttons I want to load another page and show that flipping animation.
this is a great jquery plugin to make html ebook, but the problem comes when the book has so many pages and readers have to go through a lot of flips to get to the last reading position. I have tried with some jquery maintaining last scroll position but no luck, can anyone help to solve this issue?
Hi, developer.
I found a very strange issue, sometimes it's working fine, and sometimes, when I click the arrow to flipover the page, but it doesn't work any more, no js error alerted.
So, when I checked the HTML in chrome developer tool, I found the following HTML generated (It's not a part of my template), what am I doing wrong?
This script is amazing! Really simple and well done!
I have a little enhancement to ask, maybe an idea for future releases:
Dividing the screen in two vertical pages, in small screens makes the two pages too thin and unreadable. For so small screens should be better to have only one page filling the whole screen.
Is it possible somehow to make this? Could it be a future enhancement?
Thanks for the great job you've done so far!
I am having trouble with the flip when using an background image across both pages - can you suggest how to ensure that the background image 'folds' correctly?
Currently it shifts the background image to the right when the right page is turned - the left page turn works great though. See attached image for how the right side shows the left side when turning.
All help is greatly appreciated.
I'm trying to use this library but without using jQuery, i've noticed that there is a bookblock.js https://github.com/codrops/BookBlock/blob/master/js/bookblock.js that doesn't seems to use it but i can't get it working. Can anyone provide a simple example showing how to initialize the page?
Any reactJS port would be awesome!
Hey folks. So I am not sure if this is an issue or if it was intended by design. But I figured I would mention it. I was using the code from demo4 (full page book) as a template. However I noticed that whenever I add a new paragraph
to aI did not notice this issue in looking at the blog post on the fullpage template, which is a different demo. http://tympanus.net/codrops/2012/12/11/fullscreen-pageflip-layout/ . So it look like there is a difference in the CSS between the two templates. It is a subtle thing, but I figured I would mention it. If you like I can mention it on the comments of the blog post as well. Do you guys know what the difference is in the CSS between these two templates?
IE 10 does the flipping wrong.
When set to autoplay is there a way to have different slide speeds for every other slide. Or overwrite the default speed for a particular slide? Thanks.
hi @botelho how i do to create the BookBlock start with Cover.
so when BookBlock starting, the book is close, just show 50% from the container and the cover for the book.
can you help about that?
I'd like to remove items after initialization.
Is there a way to do it?
Whend adding content dynamically(not as last element) and then calling update function, causes logicall error. In IE11 everything works as expected but in FF and CH occurs mistake.
@botelho can you please help check, i try to using and the demo in firefox Mac, its doesnt working.
If I append a new bb-item to my picture list, how do I update BookBlock? The same question applies if I empty all bb-items and add a new list.
Thanking you in advance.
P.S. I can see a public update function, but I don't know how to use it (I'm a grandfather who hasn't kept up with programming options)
P.S. Link to example also works for me. Thank you.
Hi
this tutorial is very nice , but it's not working in IE10 and 11 . can you give any solution to these problem
Chrome Version 39.0.2171.71 (64-bit)
Mac OS X 10.10.1
I'm trying to use BookBlock with hammer.js to use swipeleft and swiperight to control the page flipping. It works fine, but it could be much better if the pages could follow the swipe movement and start moving as soon as i start moving my finger (following it). Any ideas about how to combine both libraries to get this effect??
Many thanks in advance,
How to add auto-play button in prev-next buttons.
I tried to change "speed" parameter in "$.BookBlock.defaults", but its not working as expected?
When i give 100, same effect as default value 1000.
I've been trying to configure this plugin to animate in the oposite direction and with a horizontal orientation. The orientation works but the direction doesn't seem to have an effect as the default rtf seems to still be in effect. I've also noticed that shadows also don't seem to be working with this configuration:
$( '.bb-bookblock' ).bookblock({
orientation : 'horizontal',
direction : 'ltr',
autoplay : true,
interval : 3000,
circular : true,
shadows : true,
shadowSides : 0.2,
shadowFlip : 0.1
});
<div class="bb-bookblock">
<div class="bb-item"><img src="image.png"></div>
<div class="bb-item"><img src="image.png"></div>
<div class="bb-item"><img src="image.png"></div>
</div>
Hello,
And thanks for the great plugin. I was wondering if its possible to jump to a certain page, aka if url is something like below. In this case the to a second page of Book. So if the user writes down url like below, the Book would open to this page.
Hi there,
Is there a way to include HTML instead of images in the BookBlock?
Regards
Franz
I really want to only have a bottom displaying for the first "slide". How do I "hide" or "remove" the top half of the first page? I want it to appear like you are looking at the Calendar cover before you start flipping through the book. Any help is appreciated.
Thanks in advance.
Have this problem with jquery.bookblock.min.js.
Anybody has a clue?
I'm using bookblock plugin to show content on a site.My page-flip transitions are not smooth initially,meaning half the content of the flipping part hides while transition. However when I resize the page even by a small amount, the transition becomes perfect, any help?
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library codrops/BookBlock
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "codrops/BookBlock",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
Is it possible to create a submenu for each of the main menu items using bookblock.js? I tried one by editing the HTML to include submenu
Do I need to edit bookblock.js to incorporate submenus? Is this even possible? Some guidance would be appreciated.
When I put an iframe inside the code the content of it instantly dissapears when going to the next page, also, if there is an iframe on the next page it will be rendered only when the flipping animation is finished.
The expected outcome is of course, that the iframes are visible also when the animation is running.
Any solution to this? Many thanks!
Hello!
If dynamically update content, page animation breaks. What I can do with this? Try to call 'update' after data change - have no positive results.
Thanks advice!
For whatever reason, this slider doesn't work very well on this device. I don't have one in hand for testing, but multiple sources have confirmed. Any idea?
When flipping pages on Android tablets the page flickers constantly during the animation. I've only noticed this on Android. No other browsers or devices.
in bookblock.js there is public method "update" that dynamically adds new elements
I am trying to call this method after inserting new "bb-item" elements inside the BookBlock using a separate ajax call. I am following the example in index4.html.
I cannot figure out how to call this update method.
Please help.
I was playing around with this plugin and noticed following issue. Lets say i use images which have different size from .bb-bookblock container. During flip they become unscaled and then when thrasition is over they get back in its scaled state. Is it possible to fix this?
In the Demo5, not support PNG images with transparent?
Suppose I need a feature.
I would like to contribute to this project adding it, but I see there are already 3 pull requests that are not merged for a long time.
Also, the license is not friendly open-source. 😭
If this is not maintained anymore, can I smoothly fork this project and maintain my own fork? 💭
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.