ArticlesLinksMake a PayPal Contribution to remove Script CopyWrite notices or for Non-Commercial use!
All scripts are licenced:
|
DescriptionAugust 11 2008 - Updated: Totally javascript Book Flip for page turn effects.Sound Manager is the only Flash component courtesy of Scott Schiller (schillmania.com). Ideal for Online story books as a teachers aid or just for fun. Now has the ability to utilize html within each page and still maintain proper layout. Place any html code within the books pages - div id="myBook". Each code block within the myBook div will be treated as a seperate page. Setting are adjustable in the script. Download Zip ExamplesMyer CatalogFun with Borders Gratitude Free LicenceThis Script is wholly developed and owned by CoastWorx.com. Copywrite: http://wwww.coastworx.com/ Licenced under Creative Commons - Non Commercial | Legal Code for Non Commercial use.
- You are free to use this script so long as all copywrite notice/s stays intact in its entirety.
Commercial Licence per Domain:A Commercial Licence has the same conditions as a non-commercial licence with these exceptions:
CommentsJim: Any idea of how to have the pages flip automatically? I would like to have a 5 second delay and then the page flips. Is this possible? Thanks in advance for any help. Brad: Anyway to have a slight curl at top end of the page ? Anonym: "Anyway to have a slight curl at top end of the page ?"
-
- By putting a curl yourself on the corners of your background graphics. Jazzer: I just downloaded this and congrats Will...nice work. No complaints here just wondering how I can pad the text on the pages so they don't run right to the edge or center. Say 10 pixels left and right on each page would work fine. Thanks.
- Jazzer Anonym: Jazzer, just use CSS formatting on the page divs or, if CSS ain't your style, add a table with cell padding inside each div. Pretty easy to Google it if'n you don't know how. The great thing about Will's script is you can do pretty much anything to the page divs that you can do with normal HTML or CSS. Jazzer: I'm fine with html and OK with css but after several hours of attempting to add some padding to each page and searching online for answers I came back here to ask. Anonym: Weird. So adding style="padding-left:10px; padding-right:10px" to the page divs (or a class defined as such) didn't work for you, and neither did adding a table where cellpadding="10"? Dunno what to tell you; works just fine for me, and Will hasn't been commenting here lately. Jazzer: Well then I guess you have nothing more to tell. I "understand how" to write the code but regardless of where it's applied I am not seeing the end result of padding. I am refraining from adding tables. I'll move along now. Will: Jazzer, adding padding to a div is the same as adding padding to any div eg.padding:10px; its up to you however to ensure you page contents stay within the confines of the page width & page height(pWidth, pHeight) settings. I'd recommend a child div and apply the padding to that: <div name="Home" style="background:#055123 url(spongebob300/page0.jpg);color:#ffffff;">
- <div style="padding:10px;" align=center>
- <h1>Are You Ready Kids?</h1>
- </div>
- </div> Michael: Awesome script Will I'm not so hot on the coding side but im trying to get into it. the problem im having is when i add new pages it wont allow me to turn the page when i click on it. i know this is a bsic question but can you help please. thanks Michael: And if it helps in the drop down menu i can see the page 10 but it only goes as far as page 9 and then stops and displays page 9 in the drop down menu :s Will: I can only guess, go back to the original script to eliminate all introduced errors and add you new pages one by one until the problem presents itself. Michael: Thanks im not sure why but i seem to have to add 2 pages as opposed to 1 to make it work. Although I think that make sense in my head all of a sudden. Thanks Josh: Hey, I've been working with this code for a week and i got a book with 35 pages. For some reason it won't display anything past 15 either in the drop box to select a specific page or when you hit next to go past page 15. Any clue why? Will: check your html code for each page for properly closed divs etc..., there is no limitation inbuilt, only browser limitation. Weidong Zhang: Will, you are definitely a genius. I spent days looking for a JS page flip plugin, and yours is definitely the best. I wonder if your lib can support one page one screen flipping effect, besides the default two page mode. Thanks for your time Will: I'm not exactly sure what i "one page one screen flipping effect" is? weidong zhang: Will, what I mean is the iPad iReader effect, which has one page taking up the screen center at one time. Hamdy: Thank you Will very much for your professional code.
- The thing that is missed and will make the script very good is to let the user selects if he wants to flip the book from left to right or from right to lift. Will: Thank you. This was raised previously and addressed. Anonym: Thanks for this great code, I'm not into programming and I wanted something without Flash. I found a way to make it autoflipping by adding "window.setInterval('gonext()',1000);" at the end of the ini, but I can't find how to stop the autoflipping while the mouse is over the book (and restart when it is out). I tried many things and I guess it's a simple javascript code... Anybody to help me ? Thanks! Pat: Will, what is the procedure to remove the shadow on the left side of the left page? Will: pageShadow=true; //true or false, display shadow along the length of inside right page Warren: Where can I locate the "book" graphics to use on my with with this awesome code? Mark: I am new to javascript... how can I change the pWidth so all of my images show up completely? (they are all cropped)
- Thanks! Warren: Does anyone know where to edit the X and Y coordinates to nudge the location of the pages? I am trying to match my pages up to the graphic behind them. Michael: Is there a way to make the individual pages display full on the html page so that I can individually edit them? I only see a narrow column with the tops of each page showing Will: The zip has been updated to include "read me" type help file. Michael: Thanks but for some reason, I'm still only seeing a small portion of the top of the page rather than the complete jpg. I went in and adjusted the code accordingly but it's still not letting me see the full image. Love the flip though! Michael: To continue my problem from above, I would like to see the full page so that I can add a external link when necessary but when I only see the top bit of my image, I can't see where to place text further down on the page. Will: Michael, please read the help file pertaining to displaying a page div as a stand-alone html file. Have you added the width and height dimensions to the div? Some basic html skill is required, but its not my purpose. Constantin: Great script! Thanks! LunaPro2333: Would I be able to charge someone if I used this script on a XHTML page I develop? Will: No you cannot "sell" the book flip. Charging someone to install it is a separate matter however. Constantin: Hi! I'm using the script only with images(51). Sometimes, when I'm on the first page and choose the last one from the select control, it stops 1-2 pages behind in Firexot and about 10 pages in Safari. This happens only when doIncrementalAutoFlip is set to true.
- Any ideas?
- Thanks! Constantin: Please ignore the previous comment. I didnt't see it was addressed before. pautrat: hi, it is possible to do an autoplay ? thanks thomas davis: how can i add thumbnails to this effect thomas davis: the javascript is cool now is there anyway that i can change the selection option to display little pictures of the page instead of the name or the page number.....in other words can i change the select tag to display thumbnails of the page.i really need help with this thomas davis: will pls i really need to add this Heiko Prein: Hello! I just found your exciting website with this version of bookflip.
- My customer would like to have his website - which is flash - also put into html! For smartphones and computers without using flash!
- So, I would like to use your scripts and work in html!
- Could You please check it and tell me what I would have to pay!
- Thank You!!!
- Kind regards,
- Heiko (Germany, Nuremberg) timmy: wonderful script dude you are of the chain but how do i replace the name of the page selector in the flipSelect to img..this way it would display images instead of the names. tony ayling: Hi Will - excellent - thanks.
- I have used the script on http://mydummysite.com.au/teeflip.html#q1?autoflip=8
- I have a small annoying problem htat i cant seem to fix - probably css - if you flip the book forwards all is fine but backwards - it stretches to the far left of the screen and not the page div or width. Would really appreciate any suggestions to fix.
- Thanks for the great work.
- Kind regards
- Tony Ayling Will: @tony ayling; http://validator.w3.org/
-
- Line 118, Column 6: end tag for element "div" which is not open JK: Hi Will, this is excellent! Is there anyway to make this work without having the inline JavaScript on the html page? So all JS in one external file? Thanks JK: ignore me ... figured out the external JS file needs to go at the bottom of the html page to work. Tony: thanks for the validator tip Will but I can see the problem - no extra tags. Tony: sorry - that is - I cant see the problem. Will: Well, something is not right in your implementation. Perhaps you should go back to the original scripts, I'll have a quick look in the meantime. Will: Replace your bookflip.js with original from the download. 50 of 169 comments (part 1) [ » ] [ * ]
|